Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html lang="no">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <title>Grid Design</title>
- <style>
- body {
- margin: 0;
- display: grid;
- min-height: 100vh;
- grid-template-rows: auto 1fr auto;
- font-family: sans-serif;
- }
- body > header {
- background-color: white;
- filter: drop-shadow(0 5px 5px black);
- }
- body > header > nav {
- display: grid;
- grid-auto-flow: column;
- }
- body > header > nav > a {
- text-decoration: none;
- font-weight: bold;
- text-align: center;
- padding: 10px;
- color: #333;
- }
- body > header > nav > a.valgt {
- background-color: darkorange;
- color: white;
- }
- body > header > nav > a:hover {
- background-color: darkorange;
- color: white;
- }
- body > footer {
- padding-top: 10px;
- padding-bottom: 10px;
- display: grid;
- grid-gap: 20px;
- grid-auto-flow: column;
- text-align: center;
- }
- body > footer > article > img {
- width: 90px;
- }
- body > main {
- background-image: url("bgr.jpg");
- background-size: cover;
- background-position: center center;
- min-height: 100vh;
- }
- </style>
- </head>
- <body>
- <header>
- <nav>
- <a href="#">HOME</a>
- <a href="#">AWAY</a>
- <a href="#">CONTACTS</a>
- <a class="valgt" href="#">ABOUT US</a>
- <a href="#">STORE</a>
- <a href="#">IMAGES</a>
- </nav>
- </header>
- <main>
- </main>
- <footer>
- <article>
- <img src="kikkert.png">
- <p>sdf sdfsd sdfsdf sdfsd sd sdsdf sdfs sdfsdf sdf</p>
- </article>
- <article>
- <img src="lys.png">
- <p>sdf sdfsd sdfsdf sdfsd sd sdsdf sdfs sdfsdf sdf</p>
- </article>
- <article>
- <img src="papir.png">
- <p>sdf sdfsd sdfsdf sdfsd sd sdsdf sdfs sdfsdf sdf</p>
- </article>
- </footer>
- </body>
- </html>
Add Comment
Please, Sign In to add comment