iProgeny

Flat UI website template made by iHackBanMe (iProgeny)

Feb 28th, 2021
1,168
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <style>
  8. @import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
  9. @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');
  10.  
  11. * {
  12.     margin: 0;
  13.     padding: 0;
  14.     box-sizing: border-box;
  15.     font-family: 'Roboto', sans-serif;
  16. }
  17.  
  18. body {
  19.     display: grid;
  20.     width: 100%;
  21.     height: 120vh;
  22.     grid-template-areas: "head head"
  23.                          "nav  main"
  24.                          "first-foot  first-foot"
  25.                          "second-foot second-foot";
  26.     grid-template-rows: 50px 1fr 50px 35px;
  27.     grid-template-columns: 200px 1fr;
  28. }
  29.  
  30. body > header {
  31.     grid-area: head;
  32.     background-color: #2f4154;    
  33.     z-index: 10;
  34. }
  35.  
  36. body > nav {
  37.     grid-area: nav;
  38.     background-color: #f7f7f7;
  39.     border-right: 2px solid black;
  40.     z-index: 9;
  41. }
  42.  
  43. body > main {
  44.     grid-area: main;
  45.     background-color: white;  
  46.     z-index: 8;
  47. }
  48.  
  49. body > .first-footer {
  50.     grid-area: first-foot;
  51.     background-color: #f7f7f7;
  52.     border-top: 2px solid black;    
  53.     z-index: 10;
  54. }
  55. body > .second-footer {
  56.     grid-area: second-foot;
  57.     background-color: #f0f0f0;    
  58.     z-index: 10;
  59. }
  60.  
  61. header h1 {
  62.     position: absolute;
  63.     color: white;
  64.     margin: 8px 0px 0px 10px;
  65.     text-transform: uppercase;
  66.     transition: 1s;
  67.     z-index: 12;
  68. }
  69.  
  70. header i {
  71.     color: white;
  72. }
  73.  
  74. header button {
  75.     position: absolute;
  76.     right: 10px;
  77.     background-color: #1abc9c;
  78.     border-style: none;
  79.     border-radius: 5px;
  80.     padding: 10px;
  81.     margin-top: 8px;
  82.     cursor: pointer;
  83.     transition:  all 1s ease;
  84. }
  85.  
  86. header button:hover {
  87.     filter: brightness(1.25);
  88. }
  89.  
  90. h1:hover {
  91.     cursor: pointer;
  92.     color: #1abc9c;
  93.    
  94. }
  95.  
  96. nav ul {
  97.     list-style: none;
  98. }
  99.  
  100. nav a {
  101.     display: flex;
  102.     text-decoration: none;
  103.     color: black;
  104.     line-height: 2.5;
  105.     margin-top: 30px;
  106.     padding-left: 15px;
  107.     font-size: 15px;
  108.     border-left: 0px solid #1abc9c;
  109.     transition: border-left .2s, padding-left .2s;
  110. }
  111.  
  112. nav a:hover, a.active {
  113.     border-left: 5px solid #1abc9c;
  114.     padding-left: 20px;
  115.     background-color: #f0f0f0;
  116.     color: #1abc9c;
  117. }
  118.  
  119. nav i {
  120.     margin-top: 11px;
  121.     margin-right: 5px;
  122. }
  123.  
  124. .first-footer p {
  125.     text-align: center;
  126.     margin-top: 15px;
  127.     color: #bababa;
  128. }
  129.  
  130. </style>
  131. </head>
  132. <body>
  133.     <header>
  134.         <h1>Website Name</h1>
  135.         <button href="#"><i class="fas fa-sign-out-alt"></i></button>
  136.     </header>
  137.    
  138.     <nav>
  139.         <ul>
  140.             <li><a href="#" class="active"><i class="fas fa-home fa-lg"></i>Home</a></li>
  141.             <li><a href="#"><i class="fas fa-chart-line"></i>Campaigns</a></li>
  142.             <li><a href="#"><i class="fas fa-users"></i>Users & Groups</a></li>
  143.            <li><a href="#"><i class="fas fa-envelope-open-text"></i>Email Templates</a></li>
  144.            <li><a href="#"><i class="fas fa-file-word"></i>Landing Pages</a></li>
  145.            <li><a href="#"><i class="fas fa-id-badge"></i>Sending Profiles</a></li>
  146.            <li><a href="#"><i class="fas fa-cogs"></i>Account Settings</a></li>
  147.            <li><a href="#"><i class="fas fa-user"></i>User Management</a></li>
  148.            <li><a href="#"><i class="fas fa-anchor"></i>Webhooks</a></li>
  149.            <br>
  150.             <hr>            
  151.            <li><a href="#"><i class="fas fa-map-signs"></i>User Guide</a></li>
  152.            <li><a href="#"><i class="fas fa-cloud"></i>API Documentation</a></li>
  153.        </ul>
  154.    </nav>
  155.    
  156.    <main>
  157.    
  158.    </main>
  159.    
  160.    <div class="first-footer">
  161.         <p>&copy; Website designed by <a style="color:#1abc9c">iHackBanMe</a> 2021.</p>
  162.     </div>
  163.     <div class="second-footer">
  164.    
  165.     </div>
  166. </body>
  167.  
  168. </html>
  169.  
RAW Paste Data

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×