Advertisement
bootleg64

Broody Template

Aug 3rd, 2022
52
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.00 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <title>Title</title>
  7.         <meta name="description" content="">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1">
  9.         <style>
  10.             @import url('https://fonts.googleapis.com/css2?family=Germania+One&family=Pirata+One&display=swap');
  11.             body {
  12.                 background: url('http://thepatternlibrary.com/img/b.jpg') #000;
  13.                 font-family: 'Courier New', Courier, monospace;
  14.                 margin: 0px;
  15.             }
  16.             /* header */
  17.             header {
  18.                 width: 50%;
  19.                 margin: auto;
  20.                 height: 100px;
  21.                 display: flex;
  22.             }
  23.             header h1 {
  24.                 position: relative;
  25.                 font-family: 'Pirata One';
  26.                 color: #fff;
  27.                 font-size: 40pt;
  28.                 text-shadow: #000 2px 2px 2px;
  29.             }
  30.             /* navigation */
  31.             nav {
  32.                 background: #131217;    
  33.                 text-align: center;
  34.                 width: 100%;
  35.                 position:fixed;
  36.                 bottom: 0px;
  37.             }
  38.             nav li {
  39.                 font-family: 'Germania One';
  40.                 display: inline;
  41.                 color: white;
  42.                 text-transform: uppercase;
  43.             }
  44.             nav a {
  45.                 color: rgb(170, 170, 170);
  46.                 transition: 1s;
  47.             }
  48.             nav a:hover {
  49.                 color: #fff;
  50.             }
  51.             /* main content */
  52.             #content {
  53.                 background-color: rgba(255, 255, 255, 0.7);
  54.                 width: 50%;
  55.                 padding: 20px;
  56.                 padding-top: 20px;
  57.                 height: 800px;
  58.                 margin: auto;
  59.                 overflow: auto;
  60.                 border-radius: 2px;
  61.                 margin-bottom: 0;
  62.                 display: flexbox;
  63.                 z-index: 1;
  64.             }
  65.             #content p a {
  66.                 color: #4D495A;
  67.                 font-weight: bold;
  68.             }
  69.         </style>
  70.     </head>
  71.     <body>
  72.         <!-- header -->
  73.         <header>
  74.             <h1>Title.
  75.             </h1>
  76.         </header>
  77.             <!-- navigation -->
  78.             <nav>
  79.                 <ul>
  80.                     <li><a href="#">item 1</a></li>
  81.                     <li><a href="#">item 2</a></li>
  82.                     <li><a href="#">item 3</a></li>
  83.                     <li><a href="#">item 4</a></li>
  84.                     <li><a href="#">item 5</a></li>
  85.                     <li><a href="#">item 6</a></li>
  86.                     <li><a href="#">item 7</a></li>
  87.                     <li><a href="#">item 8</a></li>
  88.                 </ul>
  89.             </nav>
  90.             <!-- content -->
  91.         <div id="content">
  92.         <h1>Lorem Ipsum</h1>
  93.             <p>
  94.                 <strong>Lorem.</strong> <em>Lorem.</em> <a href="#">Lorem.</a><br>
  95.                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, accusantium architecto cumque totam laboriosam placeat aliquid dolore sequi illum distinctio excepturi eaque qui tempora eius rem velit eveniet animi veniam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti a consequatur alias aspernatur dolore neque vitae laborum facilis reiciendis! Distinctio ad earum nobis aspernatur, enim repellendus ratione animi vero deserunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In placeat voluptas tempore maiores iste ea possimus ut esse ratione. Repudiandae unde dolor quibusdam tenetur repellendus impedit qui ex ipsam eum. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis ut eum, dicta voluptatem laudantium dolor velit alias doloremque ipsam sapiente facere voluptatibus aliquam incidunt cupiditate molestiae? Rerum, ipsam? Aut, possimus.
  96.             </p>
  97.             <hr>
  98.         </div>
  99.     </body>
  100. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement