API tools faq
paste
Advertisement
CarterFromSL

HTML Template

CarterFromSL
Jun 22nd, 2021
1,304
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.59 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!