Created
September 19, 2025 18:09
-
-
Save Signor1/7ce91390044e9882889adb1bf191ecd9 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Jumia</title> | |
| <link rel="stylesheet" href="css/styles.css"> | |
| <link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="banner"> | |
| <img src="img/1.jpg" alt="Neflix Banner"> | |
| </div> | |
| <div class="overlay"> | |
| <header> | |
| <a href="#" class="logo"> | |
| <img src="img/Logonetflix.png" alt="Netflix Logo"> | |
| </a> | |
| <button class="signin-btn">Sign In</button> | |
| </header> | |
| <div class="hero"> | |
| <h1>Unlimited movies, TV<br /> shows, and more</h1> | |
| <h2>Starts at ₦2,500. Cancel anytime.</h2> | |
| <h3>Ready to watch? Enter your email to create or restart your membership.</h3> | |
| <div class="input-group"> | |
| <input type="email" name="email" id="email" placeholder="Email address" required> | |
| <button type="submit"> | |
| Get Started | |
| <i class="ri-arrow-right-s-line"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| transition: all .3s ease; | |
| } | |
| .container { | |
| width: 100%; | |
| height: 100dvh; | |
| position: relative; | |
| } | |
| .banner { | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .banner img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .container .overlay { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| inset: 0; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: flex-start; | |
| } | |
| .overlay header { | |
| width: 100%; | |
| max-width: 1300px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| height: 100px; | |
| } | |
| header .logo { | |
| text-decoration: none; | |
| display: inline-block; | |
| width: 160px; | |
| } | |
| header .logo img { | |
| width: 100%; | |
| height: auto; | |
| object-fit: contain; | |
| } | |
| header .signin-btn { | |
| background-color: #E50914; | |
| color: white; | |
| padding: 10px 24px; | |
| font-family: sans-serif; | |
| outline: none; | |
| border: none; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| } | |
| header .signin-btn:hover { | |
| background-color: #99070e; | |
| cursor: pointer; | |
| } | |
| .overlay .hero { | |
| width: 100%; | |
| max-width: 1300px; | |
| height: calc(100% - 100px); | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .hero h1 { | |
| color: white; | |
| font-size: 4.5rem; | |
| font-family: sans-serif; | |
| font-weight: bolder; | |
| text-align: center; | |
| letter-spacing: -2px; | |
| } | |
| .hero h2 { | |
| font-weight: 500; | |
| color: white; | |
| font-family: sans-serif; | |
| margin-block: 30px; | |
| } | |
| .hero h3 { | |
| color: white; | |
| font-family: sans-serif; | |
| font-weight: 500; | |
| font-size: 1.1rem; | |
| margin-bottom: 20px; | |
| } | |
| .input-group { | |
| display: flex; | |
| width: auto; | |
| justify-content: center; | |
| align-items: stretch; | |
| gap: 10px; | |
| } | |
| .input-group input { | |
| width: 400px; | |
| height: 45px; | |
| background-color: #414141; | |
| color: white; | |
| border: 1px solid #808080; | |
| padding: 10px; | |
| border-radius: 4px; | |
| } | |
| .input-group input:focus { | |
| outline: 1px solid white; | |
| } | |
| .input-group button { | |
| background-color: #E50914; | |
| color: white; | |
| padding-inline: 24px; | |
| font-family: sans-serif; | |
| outline: none; | |
| border: none; | |
| border-radius: 4px; | |
| font-weight: 600; | |
| font-size: 1rem; | |
| } | |
| .input-group button:hover { | |
| background-color: #99070e; | |
| cursor: pointer; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment