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