Advertisement
bootleg64

Small Card Template

Jun 30th, 2022 (edited)
113
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.63 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=\, initial-scale=1.0">
  7.     <title>Title</title>
  8.     <style>
  9.         body {
  10.             background-image: url('https://i.pinimg.com/564x/cf/36/48/cf36483b063bfc9f9da4ca8fa9131bdb.jpg');
  11.             background-position: top;
  12.             background-attachment: fixed;
  13.             background-size: contain;
  14.             font-family: monospace;
  15.         }
  16.         /* links */
  17.         a {
  18.             background-color: rgba(255, 68, 0, 0.3);
  19.             color: rgb(91, 24, 0);
  20.         }
  21.         /* container holds the body, navigation, and heading */
  22.         #container {
  23.             width: 50%;
  24.             margin: auto; /* center container horizontally*/
  25.             margin-top: 10%;
  26.             /* grid styling */
  27.             display: grid;
  28.             column-gap: 5px;
  29.             row-gap: 5px;
  30.             grid-template-columns: 20% 80%;
  31.             grid-template-rows: 50px 150px 150px 35px;
  32.             grid-template-areas: "hd hd"
  33.             "nav main"
  34.             "sb main"
  35.             "footer footer";
  36.         }
  37.         /* title header */
  38.         header {
  39.             background-color: rgba(255, 255, 255, 0.50);
  40.             border: #000 solid 1px;
  41.             padding: 10px;
  42.             overflow: none;
  43.             grid-area: hd;
  44.             transition: .5s;
  45.  
  46.         }
  47.         header h1 {
  48.             /* text effects */
  49.             font-weight: bold;
  50.             margin: 0px;
  51.         }
  52.         /* side navigation */
  53.         nav {
  54.             background-color: rgba(255, 255, 255, 0.50);
  55.             border: #000 solid 1px;
  56.             padding: 10px;
  57.             overflow: auto;
  58.             grid-area: nav;
  59.             transition: .5s;
  60.         }        
  61.         nav ul {
  62.         padding-left: 5px;
  63.         }
  64.         nav li {
  65.             list-style-position:inside;
  66.             list-style: none;
  67.             margin-bottom: 5px;
  68.         }
  69.         /* bottom sidebar */
  70.         .sidebar {
  71.             background-color: rgba(255, 255, 255, 0.50);
  72.             border: #000 solid 1px;
  73.             padding: 10px;
  74.             overflow: auto;
  75.             grid-area: sb;
  76.             transition: .5s;
  77.         }
  78.         /* main body */
  79.         .content {
  80.             background-color: rgba(255, 255, 255, 0.50);
  81.             border: #000 solid 1px;
  82.             padding: 10px;
  83.             overflow: auto;
  84.             grid-area: main;
  85.             transition: .5s;
  86.         }
  87.         /* footer */
  88.         footer {
  89.             background-color: rgba(255, 255, 255, 0.50);
  90.             border: #000 solid 1px;
  91.             padding: 10px;
  92.             overflow: auto;
  93.             grid-area: footer;
  94.             transition: .5s;
  95.         }
  96.         /* hover effects */
  97.         footer:hover, .content:hover, .sidebar:hover, nav:hover, header:hover {
  98.             background-color: rgb(255, 255, 255);
  99.         }
  100.     </style>
  101.     <!-- Template by BOOTLEG64.NEOCITIES.ORG-->
  102. </head>
  103. <body>
  104.     <!-- container -->
  105.     <div id="container">
  106.         <!-- navigation -->
  107.         <nav>
  108.             <ul>
  109.                 <li><a href="#">item 1</a></li>
  110.                 <li><a href="#">item 2</a></li>
  111.                 <li><a href="#">item 3</a></li>
  112.                 <li><a href="#">item 4</a></li>
  113.                 <li><a href="#">item 5</a></li>
  114.             </ul>
  115.         </nav>
  116.         <!-- sidebar -->
  117.         <div class="sidebar">
  118.             <img src="https://64.media.tumblr.com/e84b9cdc10fa178b79d32478e2c116f8/3cd5f91c5332fd1d-91/s500x750/be98390bb50fa51055a533aa144041d2c8b207cc.png" style="width: 100%;">
  119.         </div>
  120.         <!-- heading -->
  121.         <header><h1>Title</h1></header>
  122.             <!-- main content -->
  123.             <div class="content">
  124.                
  125.                 <h1>Content</h1>
  126.                
  127.                 <p><strong>Lorem.</strong> <em>Lorem.</em> <a href="#">Lorem</a>.<br>
  128.                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta qui suscipit omnis labore iste, officia architecto non temporibus placeat aut quod minima maiores distinctio nulla consequatur repellat. Corrupti, libero enim.</p>
  129.                 <hr>
  130.                 <a href="https://thinklolita.tumblr.com/post/128096642638/little-dipper-upcoming-bunny-print-follow-me-for">Background source</a><br><a href="https://alloflove.tumblr.com/post/682792614410534912/the-antiquarian-sticker-book">Mushroom source</a>
  131.             </div>
  132.             <footer>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</footer>
  133.     </div>
  134.  
  135. </body>
  136. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement