Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <style>
- body, html {
- height: 100%;
- margin: 0;
- font-family: Arial, Helvetica, sans-serif;
- }
- .hero-image {
- background-image: url("https://i.gyazo.com/516db7e210e0eaa847d5fa57834381df.png");
- height: 50%;
- background-position: center;
- background-repeat: no-repeat;
- background-size: cover;
- margin: 0px 30px 0px 30px;
- }
- @media screen and (min-width: 0px) and (max-width: 600px) {
- .hero-image {margin: 0px 0px 0px 0px;}
- .sidenav { display: none; } /* Hide sidenav on small screens */
- }
- .sidenav {
- height: 100vh;
- width: 5%;
- position: fixed;
- z-index: 1;
- top: 0;
- left: 0;
- background-color: red;
- overflow-x: hidden;
- padding-top: 30px;
- }
- </style>
- </head>
- <body>
- <div class="hero-image">
- </div>
- <div class="sidenav">
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement