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">
<style>
.w3-theme {color:#fff !important;background-color:#4CAF50 !important}
.w3-btn {background-color:#4CAF50;margin-bottom:4px}
.w3-code{border-left:4px solid #4CAF50}
.myMenu {margin-bottom:150px}
</style>
<body>

<!-- Top -->
<div class="w3-top">
  <div class="w3-row w3-white w3-padding">
    <div class="w3-half" style="margin:4px 0 6px 0"><a href="../default.html"><img src="../images/w3schools.png" alt="W3Schools.com"></a></div>
    <div class="w3-half w3-margin-top w3-wide w3-hide-medium w3-hide-small"><div class="w3-right">THE WORLD'S LARGEST WEB DEVELOPER SITE</div></div>
  </div>

  <ul class="w3-navbar w3-theme w3-large" style="z-index:4;">
    <li class="w3-opennav w3-left w3-hide-large">
      <a class="w3-hover-white w3-large w3-theme w3-padding-16" href="javascript:void(0)" onclick="w3_open()">☰</a>
    </li>
    <li class="w3-hide-medium w3-hide-small"><a class="w3-hover-white w3-padding-16" href="javascript:void(0)" onclick="w3_show_nav('menuTut')">TUTORIALS</a></li>
    <li class="w3-hide-medium w3-hide-small"><a class="w3-hover-white w3-padding-16" href="javascript:void(0)" onclick="w3_show_nav('menuRef')">EXAMPLES</a></li>
  </ul>
</div>

<!-- Sidenav -->
<nav class="w3-sidenav w3-collapse w3-white w3-animate-left" style="z-index:3;width:270px">
  <div class="w3-hide-large">
    <a href="javascript:void(0)" onclick="w3_show_nav('menuTut')" class="w3-left w3-theme w3-hover-white w3-padding-16 w3-large" style="width:50%">Tutorials</a>
    <a href="javascript:void(0)" onclick="w3_show_nav('menuRef')" class="w3-left w3-theme w3-hover-white w3-padding-16 w3-large" style="width:50%">Examples</a>
  </div>
  <div class="w3-clear"></div>
    <a href="javascript:void(0)" onclick="w3_close()" class="w3-right w3-xlarge w3-padding-large w3-hide-large" title="close menu">×</a>
  <div id="menuTut" class="myMenu">
  <div class="w3-container w3-padding-top">
  <h3>HTML/CSS</h3></div>
  <a href="../html/default.html">Learn HTML</a>
  <a href="../css/default.html">Learn CSS</a>
  <a href="default.html">Learn W3.CSS</a>
  <a href="../colors/default.html">Learn Colors</a>
  <a href="../bootstrap/default.html">Learn Bootstrap</a>
  <div class="w3-container"><h3>HTML Graphics</h3></div>
  <a href="../canvas/default.html">Learn Canvas</a>
  <a href="../svg/default.html">Learn SVG</a>
  <a href="../icons/default.html">Learn Icons</a>
  <a href="../googleapi/default.html">Learn Google Maps</a>
  <a href="../games/default.html">Learn HTML Games</a>    
  <div class="w3-container"><h3>JavaScript</h3></div>
  <a href="../js/default.html">Learn JavaScript</a>
  <a href="../jquery/default.html">Learn jQuery</a>
  <a href="../jquerymobile/default.html">Learn jQueryMobile</a>
  <a href="../appml/default.html">Learn AppML</a>
  <a href="../angular/default.html">Learn AngularJS</a>
  <a href="../json/default.html">Learn JSON</a>
  <div class="w3-container"><h3>XML Tutorials</h3></div>
  <a href="../xml/default.html">Learn XML</a>
  <a href="../xsl/default.html">Learn XSLT</a>
  <a href="../ajax/default.html">Learn AJAX</a>
  <div class="w3-container"><h3>Server Side</h3></div>
  <a href="../sql/default.html">Learn SQL</a>
  <a href="../php/default.html">Learn PHP</a>
  <a href="../asp/default.html">Learn ASP</a>
  <a href="../aspnet/default.html">Learn ASP.NET</a>
  <div class="w3-container"><h3>Web Building</h3></div>
  <a href="../website/default.html">Web Building</a>
  <a href="../browsers/default.html">Web Statistics</a>
  <a href="../cert/default.html">Web Certificates</a>
  </div>
  <div id="menuRef" class="myMenu w3-padding-top" style="display:none">
  <div class="w3-container"><h3>HTML</h3></div>
  <a href="../tags/default.html">HTML Tag Reference</a>
  <a href="../tags/ref_eventattributes.html">HTML Event Reference</a>
  <a href="../colors/default.html">HTML Color Reference</a>
  <div class="w3-container"><h3>CSS</h3></div>
  <a href="../cssref/default.html">CSS Reference</a>
  <a href="../cssref/css_selectors.html">CSS Selector Reference</a>
  <a href="w3css_references.html">W3.CSS Reference</a>
  <a href="../bootstrap/bootstrap_ref_css_text.html">Bootstrap Reference</a>
  <div class="w3-container"><h3>JavaScript</h3></div>
  <a href="../jsref/default.html">JavaScript Reference</a>
  <a href="../jsref/default.html">HTML DOM Reference</a>
  <a href="../jquery/jquery_ref_selectors.html">jQuery Reference</a>
  <a href="../jquerymobile/jquerymobile_ref_data.html">jQuery Mobile Reference</a>
  <a href="../angular/angular_ref_directives.html">AngularJS Reference</a>    
  <a href="../googleAPI/google_maps_ref.html">Google Maps Reference</a>
  <div class="w3-container"><h3>XML</h3></div>
  <a href="../xml/dom_nodetype.html">XML DOM Reference</a>
  <a href="../xsl/xsl_w3celementref.html">XSLT Reference</a>
  <a href="../xml/schema_elements_ref.html">XML Schema Reference</a>
  <a href="../svg/svg_reference.html">SVG Reference</a>
  <div class="w3-container"><h3>Character Sets</h3></div>
  <a href="../charsets/default.html">HTML Character Sets</a>
  <a href="../charsets/ref_html_ascii.html">HTML ASCII</a>
  <a href="../charsets/ref_html_ansi.html">HTML ANSI</a>
  <a href="../charsets/ref_html_ansi.html">HTML Windows-1252</a>
  <a href="../charsets/ref_html_8859.html">HTML ISO-8859-1</a>
  <a href="../charsets/ref_html_symbols.html">HTML Symbols</a>
  <a href="../charsets/ref_html_utf8.html">HTML UTF-8</a>
  <div class="w3-container"><h3>Server Side</h3></div>
  <a href="../php/php_ref_array.html">PHP Reference</a>
  <a href="../sql/sql_quickref.html">SQL Reference</a>
  <a href="../asp/asp_ref_response.html">ASP Reference</a>
  <a href="../Users/base/w3schools.mirror/http:/www.w3schools.com/aspnet/aspnet_intro.asp">ASP.NET Reference</a>
  <a href="../aspnet/webpages_ref_classes.html">Razor Reference</a>
  </div>
</nav>

<!-- Overlay effect when opening sidenav on small screens -->
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu"></div>

<!-- Main content: shift it to the right by 270 pixels when the sidenav is visible -->
<div class="w3-main w3-container" style="margin-left:270px;margin-top:117px;">

<div class="w3-container w3-section w3-padding-large w3-card-4 w3-light-grey">
  <h1 class="w3-jumbo">HTML</h1>
  <p class="w3-xlarge">The Language for Building Web Pages</p>
  <a href="../html/default.html" class="w3-btn w3-hover-white">LEARN HTML</a>
  <a href="../tags/default.html" class="w3-btn w3-hover-white">HTML REFERENCE</a>
  <p><div class="w3-code htmlHigh notranslate">
  <!DOCTYPE html><br>
  <html><br>
  <title>HTML Tutorial</title><br>
  <body><br><br>
  <h1>This is a heading</h1><br>
  <p>This is a paragraph.</p><br><br>
  </body><br>
  </html>
  </div>
  <a href="../html/tryhtml_default.html?filename=tryhtml_default" target="_blank" class="w3-btn w3-hover-white">Try it Yourself</a>
</p></div>

<div class="w3-container w3-section w3-padding-large w3-card-4 w3-light-grey">
  <h1 class="w3-jumbo">CSS</h1>
  <p class="w3-xlarge">The Language for Styling Web Pages</p>
  <a class="w3-btn w3-hover-white" href="../css/default.html">LEARN CSS</a>
  <a class="w3-btn w3-hover-white" href="../404.html">CSS REFERENCE</a>
  <p class="w3-large">
  </p><p><div class="w3-code cssHigh notranslate">
  body {<br>
      background-color: #d0e4fe;<br>}<br>h1 {<br>
      color: orange;<br>
      text-align: center;<br>}<br>p {<br>
      font-family: "Times New Roman";<br>
      font-size: 20px;<br>}
  </div>
  <a class="w3-btn w3-hover-white" href="../css/trycss_default.html?filename=trycss_default" target="_blank">Try it Yourself</a>
</p></div>

<div class="w3-container w3-section w3-padding-large w3-card-4 w3-light-grey">
  <h1 class="w3-jumbo">JS</h1>
  <p class="w3-xlarge">The Language for Programming Web Pages</p>
  <a href="../js/default.html" class="w3-btn w3-hover-white">LEARN JS</a>
  <a href="../jsref/default.html" class="w3-btn w3-hover-white">JS REFERENCE</a>

  <p><div class="w3-code jsHigh notranslate">
   // Click the button to change the color of this paragraph<br><br>function myFunction() {<br>
      var x;<br>
      x = document.getElementById("demo");<br>
      x.style.fontSize = "25px"; <br>
      x.style.color = "red"; <br>}
  </div>
  <a class="w3-btn w3-hover-white" href="../js/tryjs_default.html?filename=tryjs_default" target="_blank">Try it Yourself</a>
</p></div>

<div class="w3-container w3-section w3-padding-large w3-card-4 w3-light-grey">
  <h1 class="w3-jumbo">W3.CSS</h1>
  <p class="w3-xlarge">The Framework for Building Responsive Sites</p>
  <a href="default.html" class="w3-btn w3-hover-white">LEARN W3.CSS</a>
  <a href="../404.html" class="w3-btn w3-hover-white">W3.CSS REFERENCE</a>
  <p><div class="w3-code htmlHigh notranslate">
  <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-hover-white" href="tryw3css_intro.html?filename=tryw3css_intro" target="_blank">Try it Yourself</a>
</p></div>

<footer class="w3-container w3-section w3-padding-jumbo w3-card-4 w3-light-grey w3-center w3-opacity">
  <p><nav>
   |
  <a href="../about/default.html" target="_top">ABOUT</a>
  </nav></p>
  <p>
  W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.
  Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.
  While using this site, you agree to have read and accepted our <a href="../about/about_copyright.html">terms of use</a>, <a href="../about/about_privacy.html">cookie and privacy policy</a>.<br>
  <a href="../about/about_copyright.html">Copyright 1999-2016</a> by Refsnes Data. All Rights Reserved.<br><br>
  </p>
</footer>

<!-- END MAIN -->
</div>

<script>
// Script to open and close the sidenav
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";
}
function w3_show_nav(name) {
    document.getElementById("menuTut").style.display = "none";
    document.getElementById("menuRef").style.display = "none";
    document.getElementById(name).style.display = "block";
    w3-open();
}
</script>
<script src="../lib/w3codecolors.js"></script>

</body>
</html>