Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta name="viewport" content="width=\, initial-scale=1.0">
- <title>Title</title>
- <style>
- body {
- background-image: url('https://i.pinimg.com/564x/cf/36/48/cf36483b063bfc9f9da4ca8fa9131bdb.jpg');
- background-position: top;
- background-attachment: fixed;
- background-size: contain;
- font-family: monospace;
- }
- /* links */
- a {
- background-color: rgba(255, 68, 0, 0.3);
- color: rgb(91, 24, 0);
- }
- /* container holds the body, navigation, and heading */
- #container {
- width: 50%;
- margin: auto; /* center container horizontally*/
- margin-top: 10%;
- /* grid styling */
- display: grid;
- column-gap: 5px;
- row-gap: 5px;
- grid-template-columns: 20% 80%;
- grid-template-rows: 50px 150px 150px 35px;
- grid-template-areas: "hd hd"
- "nav main"
- "sb main"
- "footer footer";
- }
- /* title header */
- header {
- background-color: rgba(255, 255, 255, 0.50);
- border: #000 solid 1px;
- padding: 10px;
- overflow: none;
- grid-area: hd;
- transition: .5s;
- }
- header h1 {
- /* text effects */
- font-weight: bold;
- margin: 0px;
- }
- /* side navigation */
- nav {
- background-color: rgba(255, 255, 255, 0.50);
- border: #000 solid 1px;
- padding: 10px;
- overflow: auto;
- grid-area: nav;
- transition: .5s;
- }
- nav ul {
- padding-left: 5px;
- }
- nav li {
- list-style-position:inside;
- list-style: none;
- margin-bottom: 5px;
- }
- /* bottom sidebar */
- .sidebar {
- background-color: rgba(255, 255, 255, 0.50);
- border: #000 solid 1px;
- padding: 10px;
- overflow: auto;
- grid-area: sb;
- transition: .5s;
- }
- /* main body */
- .content {
- background-color: rgba(255, 255, 255, 0.50);
- border: #000 solid 1px;
- padding: 10px;
- overflow: auto;
- grid-area: main;
- transition: .5s;
- }
- /* footer */
- footer {
- background-color: rgba(255, 255, 255, 0.50);
- border: #000 solid 1px;
- padding: 10px;
- overflow: auto;
- grid-area: footer;
- transition: .5s;
- }
- /* hover effects */
- footer:hover, .content:hover, .sidebar:hover, nav:hover, header:hover {
- background-color: rgb(255, 255, 255);
- }
- </style>
- <!-- Template by BOOTLEG64.NEOCITIES.ORG-->
- </head>
- <body>
- <!-- container -->
- <div id="container">
- <!-- navigation -->
- <nav>
- <ul>
- <li><a href="#">item 1</a></li>
- <li><a href="#">item 2</a></li>
- <li><a href="#">item 3</a></li>
- <li><a href="#">item 4</a></li>
- <li><a href="#">item 5</a></li>
- </ul>
- </nav>
- <!-- sidebar -->
- <div class="sidebar">
- <img src="https://64.media.tumblr.com/e84b9cdc10fa178b79d32478e2c116f8/3cd5f91c5332fd1d-91/s500x750/be98390bb50fa51055a533aa144041d2c8b207cc.png" style="width: 100%;">
- </div>
- <!-- heading -->
- <header><h1>Title</h1></header>
- <!-- main content -->
- <div class="content">
- <h1>Content</h1>
- <p><strong>Lorem.</strong> <em>Lorem.</em> <a href="#">Lorem</a>.<br>
- 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>
- <hr>
- <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>
- </div>
- <footer>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</footer>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement