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