The text below is selected, press Ctrl+C to copy to your clipboard. (⌘+C on Mac) No line numbers will be copied.
Guest
Home Page
By Guest on 26th November 2018 01:58:39 PM | Syntax: HTML4STRICT | Views: 1



New paste | Download | Show/Hide line no. | Copy text to clipboard
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <title>Harish Industries</title>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  7. <link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-black.css">
  8. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
  9. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  10. html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif;}
  11. .w3-sidebar {
  12.   z-index: 3;
  13.   width: 250px;
  14.   top: 43px;
  15.   bottom: 0;
  16.   height: inherit;
  17. }
  18.  
  19. <!-- Navbar -->
  20. <div class="w3-top">
  21.   <div class="w3-bar w3-theme w3-top w3-left-align w3-large">
  22.     <a class="w3-bar-item w3-button w3-right w3-hide-large w3-hover-white w3-large w3-theme-l1" href="javascript:void(0)" onclick="w3_open()"><i class="fa fa-bars"></i></a>
  23.     <a href="#" class="w3-bar-item w3-button w3-theme-l1">Logo</a>
  24.     <a href="profile.htm" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Comapny Profile</a>
  25.     <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hover-white">Clients</a>
  26.     <a href="#" class="w3-bar-item w3-button w3-hide-small w3-hide-medium w3-hover-white">Contact</a>
  27.   </div>
  28. </div>
  29.  
  30. <!-- Sidebar -->
  31. <nav class="w3-sidebar w3-bar-block w3-collapse w3-large w3-theme-l5 w3-animate-left" id="mySidebar">
  32.   <a href="javascript:void(0)" onclick="w3_close()" class="w3-right w3-xlarge w3-padding-large w3-hover-black w3-hide-large" title="Close Menu">
  33.     <i class="fa fa-remove"></i>
  34.   </a>
  35.   <h4 class="w3-bar-item"><b>Menu</b></h4>
  36.   <a class="w3-bar-item w3-button w3-hover-black" href="#">Home</a>
  37.   <a class="w3-bar-item w3-button w3-hover-black" href="#">Contact Us</a>
  38.   <a class="w3-bar-item w3-button w3-hover-black" href="#">Get Latest Price Quote</a>
  39.  
  40. </nav>
  41.  
  42. <!-- Overlay effect when opening sidebar on small screens -->
  43. <div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
  44.  
  45. <!-- Main content: shift it to the right by 250 pixels when the sidebar is visible -->
  46. <div class="w3-main" style="margin-left:250px">
  47.  
  48.   <div class="w3-row w3-padding-64">
  49.     <div class="w3-twothird w3-container">
  50.       <h1 class="w3-text-teal">Harish Industries</h1>
  51.           <h5 class="w3-text-teal">Nagpur, Maharashtra</h5>
  52.       <p>INFO ABOUT COMPANY HERE.</p>
  53.     </div>
  54.     <div class="w3-third w3-container">
  55.       <p class="w3-border w3-padding-large w3-padding-32 w3-center">LOGO</p>
  56.     </div>
  57.   </div>
  58.  
  59.   <div class="w3-row">
  60.     <div class="w3-twothird w3-container">
  61.       <h1 class="w3-text-teal">Heading</h1>
  62.       <p>.</p>
  63.     </div>
  64.     <div class="w3-third w3-container">
  65.       <p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
  66.       <p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
  67.     </div>
  68.   </div>
  69.  
  70.   <div class="w3-row w3-padding-64">
  71.     <div class="w3-twothird w3-container">
  72.       <h1 class="w3-text-teal">ABOUT SODIUM SILICATE</h1>
  73.       <p>INFO ABOUT SODIUM SILICATE HERE</p>
  74.     </div>
  75.     <div class="w3-third w3-container">
  76.       <p class="w3-border w3-padding-large w3-padding-32 w3-center">AD</p>
  77.       <p class="w3-border w3-padding-large w3-padding-64 w3-center">AD</p>
  78.     </div>
  79.   </div>
  80.  
  81.   <!-- Footer -->
  82.  
  83.   <footer id="myFooter">
  84.     <div class="w3-container w3-theme-l2 w3-padding-32">
  85.       <h4>Footer</h4>
  86.     </div>
  87.  
  88.     <div class="w3-container w3-theme-l1">
  89.        <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">Contact Us</a>
  90.     </div>
  91.   </footer>
  92.  
  93. <!-- END MAIN -->
  94. </div>
  95.  
  96. // Get the Sidebar
  97. var mySidebar = document.getElementById("mySidebar");
  98.  
  99. // Get the DIV with overlay effect
  100. var overlayBg = document.getElementById("myOverlay");
  101.  
  102. // Toggle between showing and hiding the sidebar, and add overlay effect
  103. function w3_open() {
  104.     if (mySidebar.style.display === 'block') {
  105.         mySidebar.style.display = 'none';
  106.         overlayBg.style.display = "none";
  107.     } else {
  108.         mySidebar.style.display = 'block';
  109.         overlayBg.style.display = "block";
  110.     }
  111. }
  112.  
  113. // Close the sidebar with the close button
  114. function w3_close() {
  115.     mySidebar.style.display = "none";
  116.     overlayBg.style.display = "none";
  117. }
  118.  
  119. </body>
  120. </html>



  • Recent Pastes