<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-teal.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"><style>
.w3-sidenav a {padding:16px;font-weight:bold}
</style>
<body>
<nav class="w3-sidenav w3-collapse w3-white w3-animate-left w3-card-2" style="z-index:3;width:250px;" id="mySidenav">
<a href="#" class="w3-border-bottom w3-large"><img src="http://www.w3schools.com/images/w3schools.png" style="width:80%;"></a>
<a href="javascript:void(0)" onclick="w3_close()"
class="w3-text-teal w3-hide-large w3-closenav w3-large">Close <i class="fa fa-remove"></i></a>
<a href="#" class="w3-light-grey w3-medium">Home</a>
<a href="#">Typography</a>
<a href="#">Colors</a>
<a href="#">Utilities</a>
<a href="#">Containers</a>
<a href="#">Buttons</a>
<a href="#">Cards</a>
<a href="#">Alerts</a>
<div class="w3-accordion">
<a onclick="myAccordion('demo')" href="javascript:void(0)">Accordions <i class="fa fa-caret-down"></i></a>
<div id="demo" class="w3-accordion-content w3-animate-left w3-padding">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<a href="#">Tables</a>
</nav>
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>
<div class="w3-main" style="margin-left:250px;">
<div id="myTop" class="w3-top w3-container w3-padding-16 w3-theme w3-large">
<i class="fa fa-bars w3-opennav w3-hide-large w3-xlarge w3-margin-left w3-margin-right" onclick="w3_open()"></i>
<span id="myIntro" class="w3-hide">W3.CSS: Introduction</span>
</div>
<header class="w3-container w3-theme w3-padding-64" style="padding-left:32px">
<h1 class="w3-xxxlarge w3-padding-16">W3.CSS</h1>
</header>
<div class="w3-container w3-padding-32" style="padding-left:32px">
<h2>What is W3.CSS?</h2>
<p>W3.CSS is a modern CSS framework with built-in responsiveness:</p>
<ul class="w3-leftbar w3-theme-border" style="list-style:none">
<li>Smaller and faster than other CSS frameworks.</li>
<li>Easier to learn, and easier to use than other CSS frameworks.</li>
<li>Uses standard CSS only (No jQuery or JavaScript library).</li>
<li>Speeds up mobile HTML apps.</li>
<li>Provides CSS equality for all devices. PC, laptop, tablet, and mobile:</li>
</ul>
<br>
<img src="img_responsive.png" style="width:100%;margin:20px 0" alt="Responsive">
<hr>
<h2>W3.CSS is Free</h2>
<p>W3.CSS is free to use. No license is necessary.</p>
<hr>
<h2>Easy to Use</h2>
<div class="w3-container w3-sand w3-leftbar">
<p><i>Make it as simple as possible, but not simpler.</i><br>
Albert Einstein</p>
</div>
<h2>W3.CSS Web Site Templates</h2>
<p>We have created some responsive W3CSS templates for you to use.</p>
<p>You are free to modify, save, share, use or do whatever you want with them:</p>
<div class="w3-container w3-padding-16 w3-card-2" style="background-color:#eee">
<h3 class="w3-center">Blog Template</h3>
<div class="w3-content" style="max-width:800px">
<img src="img_temp_blog.jpg" style="width:98%;margin:20px 0" alt="Blog Template"><br>
<div class="w3-row">
<div class="w3-col m6">
<a href="tryw3css_templates_blog.htm" target="_blank" class="w3-btn w3-padding-12 w3-dark-grey" style="width:98.5%">Demo</a>
</div>
<div class="w3-col m6">
<a href="w3css_templates.asp" class="w3-btn w3-padding-12 w3-dark-grey" style="width:98.5%">More Templates »</a>
</div>
</div>
</div>
</div>
<br>
<h2 class="w3-section w3-text-teal">Colors</h2>
<p>W3.CSS uses color classes.</p>
<p>The color classes are inspired by colors used in marketing, road signs, and sticky notes.</p>
<div class="w3-container w3-red"><p>w3-red</p></div><br>
<div class="w3-container w3-pink"><p>w3-pink</p></div><br>
<div class="w3-container w3-purple"><p>w3-purple</p></div><br>
<div class="w3-container w3-deep-purple"><p>w3-deep-purple</p></div><br>
<div class="w3-container w3-indigo"><p>w3-indigo</p></div><br>
<div class="w3-container w3-blue"><p>w3-blue</p></div><br>
<div class="w3-container w3-light-blue"><p>w3-light-blue</p></div><br>
<div class="w3-container w3-cyan"><p>w3-cyan</p></div><br>
<div class="w3-container w3-aqua"><p>w3-aqua</p></div><br>
<div class="w3-container w3-teal"><p>w3-teal</p></div><br>
<div class="w3-container w3-green"><p>w3-green</p></div><br>
<div class="w3-container w3-light-green"><p>w3-light-green</p></div><br>
<div class="w3-container w3-lime"><p>w3-lime</p></div><br>
<div class="w3-container w3-sand"><p>w3-sand</p></div><br>
<div class="w3-container w3-khaki"><p>w3-khaki</p></div><br>
<div class="w3-container w3-yellow"><p>w3-yellow</p></div><br>
<div class="w3-container w3-amber"><p>w3-amber</p></div><br>
<div class="w3-container w3-orange"><p>w3-orange</p></div><br>
<div class="w3-container w3-deep-orange"><p>w3-deep-orange</p></div><br>
<div class="w3-container w3-blue-grey"><p>w3-blue-grey</p></div><br>
<div class="w3-container w3-brown"><p>w3-brown</p></div><br>
<div class="w3-container w3-light-grey"><p>w3-light-grey</p></div><br>
<div class="w3-container w3-grey"><p>w3-grey</p></div><br>
<div class="w3-container w3-dark-grey"><p>w3-dark-grey</p></div><br>
<div class="w3-container w3-black"><p>w3-black</p></div><br>
<div class="w3-container w3-pale-red"><p>w3-pale-red</p></div><br>
<div class="w3-container w3-pale-yellow"><p>w3-pale-yellow</p></div><br>
<div class="w3-container w3-pale-green"><p>w3-pale-green</p></div><br>
<div class="w3-container w3-pale-blue"><p>w3-pale-blue</p></div>
</div>
<footer class="w3-container w3-theme w3-padding-32" style="padding-left:32px">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
</div>
<script>
// Open and close the sidenav on medium and small screens
function w3_open() {
document.getElementById("mySidenav").style.display = "block";
document.getElementById("myOverlay").style.display = "block";
}
function w3_close() {
document.getElementById("mySidenav").style.display = "none";
document.getElementById("myOverlay").style.display = "none";
}
// Change style of top container on scroll
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("myTop").classList.add("w3-card-4");
document.getElementById("myIntro").classList.add("w3-show-inline-block");
} else {
document.getElementById("myIntro").classList.remove("w3-show-inline-block");
document.getElementById("myTop").classList.remove("w3-card-4");
}
}
// Accordions
function myAccordion(id) {
var x = document.getElementById(id);
if (x.className.indexOf("w3-show") == -1) {
x.className += " w3-show";
x.previousElementSibling.className += " w3-theme";
} else {
x.className = x.className.replace("w3-show", "");
x.previousElementSibling.className =
x.previousElementSibling.className.replace(" w3-theme", "");
}
}
</script>
</body>
</html>