Let’s build a Netflix Login Page using HTML and CSS 🎬. This sleek and responsive form replicates the iconic Netflix style – perfect for practicing modern UI design.
🛠 What we’ll use:
- HTML to structure the login form (email, password, checkbox, and buttons).
- CSS to style it with Netflix’s signature dark theme, responsive layout, and polished visuals.
You’ll learn:
- Centering elements using Flexbox
- Creating a frosted-glass background
- Designing responsive input fields and buttons
This project is perfect for beginners looking to improve their form design skills and learn layout techniques.
HTML :
The given HTML code represents a login page for Netflix. It includes a navigation bar with the Netflix logo, a form for users to enter their email/phone number and password, a “Sign In” button, options for remembering the user, a “Need help?” link, a “New to Netflix?” sign-up link, and information about Google reCAPTCHA for security purposes.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Netflix Login Page | @coding.stella</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<nav>
<a href="#"><img src="https://codingstella.com/wp-content/uploads/2024/01/580b57fcd9996e24bc43c529.png" alt="logo"></a>
</nav>
<div class="form-wrapper">
<h2>Sign In</h2>
<form action="#">
<div class="form-control">
<input type="text" required>
<label>Email or phone number</label>
</div>
<div class="form-control">
<input type="password" required>
<label>Password</label>
</div>
<button type="submit">Sign In</button>
<div class="form-help">
<div class="remember-me">
<input type="checkbox" id="remember-me">
<label for="remember-me">Remember me</label>
</div>
<a href="#">Need help?</a>
</div>
</form>
<p>New to Netflix? <a href="#">Sign up now</a></p>
<small>
This page is protected by Google reCAPTCHA to ensure you're not a bot.
<a href="#">Learn more.</a>
</small>
</div>
</body>
</html>
CSS :
The given CSS code styles the Netflix login page. It sets the font family to “Roboto”, applies a background image to the body, positions the navigation bar and form, styles the form inputs and buttons, and adjusts the layout for smaller screens. The code also includes various color and transition effects to enhance the visual appearance of the page.
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Roboto", sans-serif;
}
body {
background: #000;
}
body::before {
content: "";
position: absolute;
left: 0;
top: 0;
opacity: 0.5;
width: 100%;
height: 100%;
background: url("https://codingstella.com/wp-content/uploads/2024/01/download-4.jpeg");
background-position: center;
}
nav {
position: fixed;
padding: 25px 60px;
z-index: 1;
}
nav a img {
width: 167px;
}
.form-wrapper {
position: absolute;
left: 50%;
top: 50%;
border-radius: 4px;
padding: 70px;
width: 450px;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.75);
}
.form-wrapper h2 {
color: #fff;
font-size: 2rem;
}
.form-wrapper form {
margin: 25px 0 65px;
}
form .form-control {
height: 50px;
position: relative;
margin-bottom: 16px;
}
.form-control input {
height: 100%;
width: 100%;
background: #333;
border: none;
outline: none;
border-radius: 4px;
color: #fff;
font-size: 1rem;
padding: 0 20px;
}
.form-control input:is(:focus, :valid) {
background: #444;
padding: 16px 20px 0;
}
.form-control label {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 1rem;
pointer-events: none;
color: #8c8c8c;
transition: all 0.1s ease;
}
.form-control input:is(:focus, :valid) ~ label {
font-size: 0.75rem;
transform: translateY(-130%);
}
form button {
width: 100%;
padding: 16px 0;
font-size: 1rem;
background: #e50914;
color: #fff;
font-weight: 500;
border-radius: 4px;
border: none;
outline: none;
margin: 25px 0 10px;
cursor: pointer;
transition: 0.1s ease;
}
form button:hover {
background: #c40812;
}
.form-wrapper a {
text-decoration: none;
}
.form-wrapper a:hover {
text-decoration: underline;
}
.form-wrapper :where(label, p, small, a) {
color: #b3b3b3;
}
form .form-help {
display: flex;
justify-content: space-between;
}
form .remember-me {
display: flex;
}
form .remember-me input {
margin-right: 5px;
accent-color: #b3b3b3;
}
form .form-help :where(label, a) {
font-size: 0.9rem;
}
.form-wrapper p a {
color: #fff;
}
.form-wrapper small {
display: block;
margin-top: 15px;
color: #b3b3b3;
}
.form-wrapper small a {
color: #0071eb;
}
@media (max-width: 740px) {
body::before {
display: none;
}
nav,
.form-wrapper {
padding: 20px;
}
nav a img {
width: 140px;
}
.form-wrapper {
width: 100%;
top: 43%;
}
.form-wrapper form {
margin: 25px 0 40px;
}
}
Creating a Netflix login page with HTML and CSS helps you practice form design, Flexbox, and dark UI styling. A great mini-project to improve your front-end skills and replicate real-world UIs. 🎥💻
Facing any problems in your project journey? Stay confident! Click Download, obtain the source code, and tackle your coding issues with determination. May your coding experience be smooth and rewarding!
