Author: JM Language: html4strict
Description: w3theme Timestamp: 2018-07-01 01:23:54 +0000
View raw paste Reply
  1. <!DOCTYPE html> <html> <head> <meta charset="utf-8">
  2. <title>Reeks</title>
  3. <meta name="viewport" content="width=device-width, initial-scale=1">
  4. <meta name="theme-color" content="#06233a">
  5. <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  6. <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue.css">
  7. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  8. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  9. body {
  10. font-family: "Roboto", sans-serif
  11. }
  12. .w3-bar-block .w3-bar-item{padding:16px;font-weight:bold}
  13. </style> </head> <body>
  14.  
  15. <nav class="w3-sidebar w3-bar-block w3-collapse w3-animate-left w3-card" style="z-index:3;width:250px;" id="mySidebar">
  16.   <a class="w3-bar-item w3-button w3-border-bottom w3-large" href="#"><img src="https://www.w3schools.com/images/w3schools.png" style="width:80%;"></a>
  17.   <a class="w3-bar-item w3-button w3-hide-large w3-large" href="javascript:void(0)" onclick="w3_close()">Close <i class="fa fa-remove"></i></a>
  18.   <a class="w3-bar-item w3-button w3-teal" href="#">Home</a>
  19.   <a class="w3-bar-item w3-button" href="#">Link 1</a>
  20.   <a class="w3-bar-item w3-button" href="#">Link 2</a>
  21.   <a class="w3-bar-item w3-button" href="#">Link 3</a>
  22.   <a class="w3-bar-item w3-button" href="#">Link 4</a>
  23.   <a class="w3-bar-item w3-button" href="#">Link 5</a>
  24.   <div>
  25.     <a class="w3-bar-item w3-button" onclick="myAccordion('demo')" href="javascript:void(0)">Dropdown <i class="fa fa-caret-down"></i></a>
  26.     <div id="demo" class="w3-hide">
  27.       <a class="w3-bar-item w3-button" href="#">Link</a>
  28.       <a class="w3-bar-item w3-button" href="#">Link</a>
  29.       <a class="w3-bar-item w3-button" href="#">Link</a>
  30.     </div>
  31.   </div>
  32. </nav>
  33.  
  34. <div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div>
  35.  
  36. <div class="w3-main" style="margin-left:250px;">
  37.  
  38. <div id="myTop" class="w3-container w3-top w3-theme w3-large">
  39.   <p><i class="fa fa-bars w3-button w3-teal w3-hide-large w3-xlarge" onclick="w3_open()"></i>
  40.   <span id="myIntro" class="w3-hide">W3.CSS: Introduction</span></p>
  41. </div>
  42.  
  43. <header class="w3-container w3-theme" style="padding:64px 32px">
  44.   <h1 class="w3-xxxlarge">W3.CSS</h1>
  45. </header>
  46.  
  47. <div class="w3-container" style="padding:32px">
  48.  
  49. <h2>What is W3.CSS?</h2>
  50.  
  51. <p>W3.CSS is a modern CSS framework with built-in responsiveness:</p>
  52.  
  53. <ul class="w3-leftbar w3-theme-border" style="list-style:none">
  54.  <li>Smaller and faster than other CSS frameworks.</li>
  55.  <li>Easier to learn, and easier to use than other CSS frameworks.</li>
  56.  <li>Uses standard CSS only (No jQuery or JavaScript library).</li>
  57.  <li>Speeds up mobile HTML apps.</li>
  58.  <li>Provides CSS equality for all devices. PC, laptop, tablet, and mobile:</li>
  59. </ul>
  60. <br>
  61. <img src="img_responsive.png" style="width:100%" alt="Responsive">
  62.  
  63. <hr>
  64. <h2>W3.CSS is Free</h2>
  65. <p>W3.CSS is free to use. No license is necessary.</p>
  66.  
  67. <hr>
  68. <h2>Easy to Use</h2>
  69. <div class="w3-container w3-sand w3-leftbar">
  70. <p><i>Make it as simple as possible, but not simpler.</i><br>
  71. Albert Einstein</p>
  72. </div>
  73.  
  74. <hr>
  75. <h2>W3.CSS Web Site Templates</h2>
  76.  
  77. <p>We have created some responsive W3CSS templates for you to use.</p>
  78. <p>You are free to modify, save, share, use or do whatever you want with them:</p>
  79.  
  80.  
  81. <div class="w3-panel w3-light-grey w3-padding-16 w3-card">
  82. <h3 class="w3-center">Band Template</h3>
  83. <div class="w3-content" style="max-width:800px">
  84. <a href="tryw3css_templates_band.htm" target="_blank"  title="Band Demo"><img src="img_temp_band.jpg" style="width:98%;margin:20px 0" alt="Band Template"></a><br>
  85. <div class="w3-row">
  86.   <div class="w3-col m6">
  87.     <a href="tryw3css_templates_band.htm" target="_blank" class="w3-button w3-padding-large w3-dark-grey" style="width:98.5%">Demo</a>
  88.   </div>
  89.   <div class="w3-col m6">
  90.     <a href="w3css_templates.asp" class="w3-button w3-padding-large w3-dark-grey" style="width:98.5%">More Templates »</a>
  91.   </div>
  92. </div>
  93. </div>
  94. </div>
  95.  
  96. <div class="w3-container w3-padding-16 w3-card" style="background-color:#eee">
  97. <h3 class="w3-center">Blog Template</h3>
  98. <div class="w3-content" style="max-width:800px">
  99. <img src="img_temp_blog.jpg" style="width:98%;margin:20px 0" alt="Blog Template"><br>
  100. <div class="w3-row">
  101.   <div class="w3-col m6">
  102.     <a href="tryw3css_templates_blog.htm" target="_blank" class="w3-button w3-padding-large w3-dark-grey" style="width:98.5%">Demo</a>
  103.   </div>
  104.   <div class="w3-col m6">
  105.     <a href="w3css_templates.asp" class="w3-button w3-padding-large w3-dark-grey" style="width:98.5%">More Templates »</a>
  106.   </div>
  107. </div>
  108. </div>
  109. </div>
  110.  
  111. </div>
  112.  
  113. <footer class="w3-container w3-theme" style="padding:32px">
  114.   <p>Footer information goes here</p>
  115. </footer>
  116.      
  117. </div>
  118.  
  119. // Open and close the sidebar on medium and small screens
  120. function w3_open() {
  121.     document.getElementById("mySidebar").style.display = "block";
  122.     document.getElementById("myOverlay").style.display = "block";
  123. }
  124. function w3_close() {
  125.     document.getElementById("mySidebar").style.display = "none";
  126.     document.getElementById("myOverlay").style.display = "none";
  127. }
  128.  
  129. // Change style of top container on scroll
  130. window.onscroll = function() {myFunction()};
  131. function myFunction() {
  132.     if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
  133.         document.getElementById("myTop").classList.add("w3-card-4", "w3-animate-opacity");
  134.         document.getElementById("myIntro").classList.add("w3-show-inline-block");
  135.     } else {
  136.         document.getElementById("myIntro").classList.remove("w3-show-inline-block");
  137.         document.getElementById("myTop").classList.remove("w3-card-4", "w3-animate-opacity");
  138.     }
  139. }
  140.  
  141. // Accordions
  142. function myAccordion(id) {
  143.     var x = document.getElementById(id);
  144.     if (x.className.indexOf("w3-show") == -1) {
  145.         x.className += " w3-show";
  146.         x.previousElementSibling.className += " w3-theme";
  147.     } else {
  148.         x.className = x.className.replace("w3-show", "");
  149.         x.previousElementSibling.className =
  150.         x.previousElementSibling.className.replace(" w3-theme", "");
  151.     }
  152. }
  153.      
  154. </body>
  155. </html>
View raw paste Reply