daily pastebin goal
20%
SHARE
TWEET

abudipota

a guest Jan 22nd, 2019 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <title>W3.CSS Template</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://fonts.googleapis.com/css?family=Raleway">
  8. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  9. <style>
  10. html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
  11. </style>
  12. <body class="w3-light-grey">
  13.  
  14. <!-- Top container -->
  15. <div class="w3-bar w3-top w3-black w3-large" style="z-index:4">
  16.   <button class="w3-bar-item w3-button w3-hide-large w3-hover-none w3-hover-text-light-grey" onclick="w3_open();"><i class="fa fa-bars"></i>  Menu</button>
  17.   <span class="w3-bar-item w3-right"><img src="https://media.discordapp.net/attachments/462498439746289666/536511221017608214/imags_logo.png?width=892&height=436" style="max-width: 80px;height:auto;"/> </span>
  18. </div>
  19.  
  20. <!-- Sidebar/menu -->
  21. <nav class="w3-sidebar w3-collapse w3-white w3-animate-left" style="z-index:3;width:300px;" id="mySidebar"><br>
  22.   <div class="w3-container w3-row">
  23.     <div class="w3-col s4">
  24.       <img src="https://www.shareicon.net/data/2016/05/26/771202_people_512x512.png" class="w3-circle w3-margin-right" style="width:46px">
  25.     </div>
  26.     <div class="w3-col s8 w3-bar">
  27.       <span>Welcome, <strong>Potato Patata</strong></span><br>
  28.       <a href="#" class="w3-bar-item w3-button"><i class="fa fa-envelope"></i></a>
  29.       <a href="#" class="w3-bar-item w3-button"><i class="fa fa-user"></i></a>
  30.       <a href="#" class="w3-bar-item w3-button"><i class="fa fa-cog"></i></a>
  31.     </div>
  32.   </div>
  33.   <hr>
  34.   <div class="w3-container">
  35.     <h5>Dashboard</h5>
  36.   </div>
  37.   <div class="w3-bar-block">
  38.     <a href="#" class="w3-bar-item w3-button w3-padding-16 w3-hide-large w3-dark-grey w3-hover-black" onclick="w3_close()" title="close menu"><i class="fa fa-remove fa-fw"></i>  Close Menu</a>
  39.     <a href="#" class="w3-bar-item w3-button w3-padding w3-blue"><i class="fa fa-asterisk fa-fw"></i>  Actions</a>
  40.     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-users fa-fw"></i>  Encode Users</a>
  41.     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-eye fa-fw"></i>  View Applications</a>
  42.     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-check fa-fw"></i>  Deployment</a>
  43.     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-clone fa-fw"></i>  Evaluation Form</a>
  44.     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-address-card fa-fw"></i>  Hiring</a>
  45.     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-user-times fa-fw"></i>  Leave of absences</a>
  46.     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-building fa-fw"></i>  Plantilla</a>
  47.     <a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-search fa-fw"></i>  Search</a><br><br>
  48.   </div>
  49. </nav>
  50.  
  51. <div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
  52.  
  53. <div class="w3-main" style="margin-left:300px;margin-top:43px;">
  54. <br>
  55. <div class="w3-container">
  56.   <div id="searchWindow" style="margin-top:12px;padding:10px;" class="w3-ul w3-card-4 w3-white">
  57. <h2>Search</h2>
  58.     <form action="" method="get">
  59.       <input class="w3-input" style="padding:10px;" type="text" placeholder="Search for applicants information..." /><br>
  60.       <button type="submit" class="w3-btn w3-blue"><span class='fa fa-search fa-fw'></span> Search </button>
  61.     </form>
  62.   </div>
  63. </div>
  64.   <br>
  65.   <div class="w3-container w3-black w3-padding-32">
  66.     <div class="w3-row">
  67.       <div class="w3-container w3-third">
  68.         <h5 class="w3-bottombar w3-border-green">Demographic</h5>
  69.         <p>Language</p>
  70.         <p>Country</p>
  71.         <p>City</p>
  72.       </div>
  73.       <div class="w3-container w3-third">
  74.         <h5 class="w3-bottombar w3-border-red">System</h5>
  75.         <p>M.I 7</p>
  76.         <p>Spetsnaz</p>
  77.         <p>French Intelligence</p>
  78.       </div>
  79.       <div class="w3-container w3-third">
  80.         <h5 class="w3-bottombar w3-border-orange">Target</h5>
  81.         <p>C.I.A</p>
  82.         <p>F.B.I</p>
  83.         <p>Homeland Security</p>
  84.         <p>Pentagon</p>
  85.       </div>
  86.     </div>
  87.   </div>
  88.   <footer class="w3-container w3-padding-16 w3-light-grey">
  89.     <h4>Written By Knyt with shining armor(Let's G @ 10pm)</h4>
  90.     <p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
  91.   </footer>
  92.  
  93. </div>
  94.  
  95. <script>
  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. </script>
  119.  
  120. </body>
  121. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top