Tryit Editor v2.7

Edit This Code:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../lib/w3.css">
<link rel="stylesheet" href="../lib/w3-theme-teal.css">
<link href="https://fonts.googleapis.com/css?family=RobotoDraft" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"><style>
html,body,h1,h2,h3,h4,h5 {font-family: "RobotoDraft","Roboto",sans-serif;}
.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;">
  <a href="#" class="w3-border-bottom w3-large"><img src="../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"></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 w3-padding-jumbo">
  <h1 class="w3-xxxlarge w3-padding-16">W3.CSS</h1>
</header>

<div class="w3-container w3-padding-jumbo">
  <h1 class="w3-text-teal">What is W3.CSS?</h1>
  <h5>W3.CSS is a small, fast, and modern CSS framework with built-in responsiveness.</h5>
  <ul class="w3-leftbar w3-theme-border" style="list-style-type:none">
   <li>Designed to be smaller and faster than other CSS frameworks.</li>
   <li>Designed to be easier to learn, and easier to use than other CSS frameworks.</li>
   <li>Designed to provide CSS equality for all devices: PC, laptop, tablet, and mobile.</li>
   <li>Designed to use standard CSS only (No need for jQuery or JavaScript).</li>
   <li>Designed to speed up mobile HTML apps.</li>
   <li>W3.CSS is free to use. No license is necessary.</li>
  </ul>
  <br>
  
  <h2 class="w3-section w3-text-teal">Demo</h2>
  <div class="w3-example w3-section">
<h3>Example</h3>
<div class="w3-code notranslate htmlHigh">
 <div class="w3-container w3-teal"><br>  <h1>My Header</h1><br>
 </div><br><br><img 
 src="img_car.png" alt="Car" style="width:100%"><br><br><div class="w3-container"><br>
  
 <p>A car is a wheeled, self-powered motor vehicle used for transportation.</p><br></div><br><br>
<div class="w3-container w3-teal"><br>  <p>My Footer</p><br>
 </div></div>
<a class="w3-btn w3-large w3-theme w3-margin-bottom" href="tryw3css_intro.html?filename=tryw3css_intro" target="_blank">Try It Yourself »</a>
</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-jumbo">
  <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.getElementsByClassName("w3-sidenav")[0].style.display = "block";
    document.getElementsByClassName("w3-overlay")[0].style.display = "block";
}
function w3_close() {
    document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
    document.getElementsByClassName("w3-overlay")[0].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>