API tools faq
paste
Advertisement
bootleg64

Broody Template

bootleg64
Aug 3rd, 2022
64
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.00 KB | None | 0 0
raw download clone embed print report
  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
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!