CarterFromSL

HTML Template

Jun 22nd, 2021
1,054
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <title>My Website</title>
  6.   <meta charset="UTF-8">
  7.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.   <style type="text/css">
  9.     @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap");
  10.  
  11.     :root {
  12.       --main-color: #00b6b9;
  13.       --alt-color: #394284;
  14.       --main-font: "poppins", "open sans", "HelveticaNeue", "Helvetica Neue", "Helvetica-Neue", Helvetica, Arial, sans-serif;
  15.     }
  16.  
  17.     * {
  18.       -moz-box-sizing: border-box;
  19.       -webkit-box-sizing: border-box;
  20.       box-sizing: border-box;
  21.       font-family: var(--main-font);
  22.       line-height: 1.5em;
  23.     }
  24.  
  25.     *::selection {
  26.       background: var(--main-color);
  27.       color: white;
  28.     }
  29.  
  30.     body {
  31.       background: #f7f7f7;
  32.       color: #333;
  33.       padding: 0;
  34.       margin: 0;
  35.     }
  36.  
  37.     a {
  38.       text-decoration: none;
  39.       color: var(--alt-color);
  40.     }
  41.  
  42.     a:hover {
  43.       color: var(--main-color);
  44.       text-decoration: underline;
  45.     }
  46.  
  47.     strong,
  48.     b {
  49.       color: var(--main-color);
  50.     }
  51.  
  52.     #page,
  53.     .footer {
  54.       width: 1310px;
  55.       max-width: 96%;
  56.       margin: 0 auto;
  57.       box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
  58.       position: relative;
  59.     }
  60.  
  61.     #page {
  62.       background: white;
  63.       display: block;
  64.       min-height: 95vh;
  65.       z-index: 1;
  66.     }
  67.  
  68.     .footer {
  69.       background: #222;
  70.       color: white;
  71.       padding: 15px 30px;
  72.       z-index: 0;
  73.       min-height: 5vh;
  74.     }
  75.  
  76.     .footer p {
  77.       margin: 0;
  78.     }
  79.  
  80.     .content {
  81.       border-bottom: 1px solid #ddd;
  82.       background: white;
  83.       float: left;
  84.       width: 100%;
  85.       clear: both;
  86.     }
  87.  
  88.     .main,
  89.     aside {
  90.       padding: 15px 30px;
  91.     }
  92.  
  93.     .header {
  94.       overflow: hidden;
  95.       background: white;
  96.       border-bottom: 1px solid #ddd;
  97.       top: 0;
  98.       float: left;
  99.       width: 100%;
  100.       box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  101.     }
  102.  
  103.     .header * {
  104.       line-height: inherit;
  105.     }
  106.  
  107.     .header h1 {
  108.       margin: 0;
  109.       float: left;
  110.       color: var(--alt-color);
  111.     }
  112.  
  113.     .header nav {
  114.       float: right;
  115.     }
  116.  
  117.     .header nav ul {
  118.       list-style: none;
  119.       margin: 0;
  120.       padding: 0;
  121.       font-size: 0;
  122.     }
  123.  
  124.     .header nav li {
  125.       display: inline-block;
  126.     }
  127.  
  128.     .header nav a {
  129.       display: block;
  130.       padding: 0 10px;
  131.       text-decoration: none;
  132.       text-transform: uppercase;
  133.       letter-spacing: 0.05em;
  134.       font-size: 14px;
  135.       font-weight: bold;
  136.     }
  137.  
  138.     .header nav a:hover {
  139.       color: var(--main-color);
  140.       background: #f7f7f7;
  141.     }
  142.  
  143.     aside ul {
  144.       list-style: disclosure-closed;
  145.       margin: 10px 0;
  146.       padding-left: 1em;
  147.     }
  148.  
  149.     aside h3 {
  150.       margin: 0;
  151.       border-bottom: 1px solid;
  152.     }
  153.  
  154.     @media only screen and (min-width: 767px) {
  155.       .main {
  156.         width: 76%;
  157.         float: left;
  158.       }
  159.  
  160.       aside {
  161.         width: 24%;
  162.         float: left;
  163.         border-left: 1px solid #ddd;
  164.       }
  165.  
  166.       .header {
  167.         display: block;
  168.         position: sticky;
  169.         height: 70px;
  170.         line-height: 70px;
  171.         padding: 0 30px;
  172.       }
  173.     }
  174.  
  175.     @media only screen and (max-width: 767px) {
  176.       .header nav {
  177.         float: left;
  178.         width: 100%;
  179.         padding: 0 20px;
  180.       }
  181.  
  182.       .header nav li {
  183.         display: block;
  184.         height: 100%;
  185.         float: left;
  186.       }
  187.  
  188.       .header h1 {
  189.         padding: 15px 30px;
  190.         float: none;
  191.         width: 100%;
  192.         border-bottom: 1px solid #ddd;
  193.       }
  194.     }
  195.   </style>
  196. </head>
  197.  
  198. <body>
  199.   <div id="page">
  200.     <div class="header">
  201.       <h1>Site Header</h1>
  202.       <nav>
  203.         <ul>
  204.           <li><a href="#">Home</a></li>
  205.           <li><a href="#">About</a></li>
  206.           <li><a href="#">Contact</a></li>
  207.         </ul>
  208.       </nav>
  209.     </div>
  210.     <div class="content">
  211.       <div class="main">
  212.         <h3>Main Content</h3>
  213.         <p>This is the <strong>main content</strong>.</p>
  214.       </div>
  215.       <aside>
  216.         <h3>Sidebar</h3>
  217.         <ul>
  218.           <li><a href="https://www.example.com/" target="_blank">Link 1</a></li>
  219.           <li><a href="https://www.example.com/" target="_blank">Link 2</a></li>
  220.           <li><a href="https://www.example.com/" target="_blank">Link 3</a></li>
  221.           <li><a href="https://www.example.com/" target="_blank">Link 4</a></li>
  222.         </ul>
  223.       </aside>
  224.     </div>
  225.   </div>
  226.   <div class="footer">
  227.     <p>This is the Footer.</p>
  228.   </div>
  229. </body>
  230.  
  231. </html>
RAW Paste Data