Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create Netflix Login Page in HTML and CSS?
Netflix is designed with a user-friendly layout and friendly UI, it's a good example for aspiring web developers to learn. Creating a login page similar to Netflix is a good practice. This article will guide you to create a Netflix login page using HTML and CSS.
Why create a Netflix Login Page?
Creating a Netflix login page in HTML and CSS will help you as a web developer in several ways.
- It helps to learn various concepts in web development such as how different layouts are created in HTML, and how a login form is designed in HTML.
- It can be used to highlight your knowledge of web development while applying for jobs.
Basic Layout of the Netflix Login Page
The Netflix login page contains the following elements that we need to create.
- Netflix Logo: The top of the website contains a Netflix logo in the top left corner.
- Background: The Netflix login page uses an image of several movies available on Netflix as the background.
- Login Form: The login form is the main element of the Netflix login page. It includes space to enter a Username and password and a submit button.
- Footer: The footer element consists of some options like "Help", "FAQs", "Terms of use" etc. spaced out neatly.
Creating Netflix login page layout using HTML
- Create two div elements for the Netflix logo and the webpage's body. Also in the end create a footer element for footer.
- In the first div add the Netflix logo and in the body create the login form.
- In the login form, add input fields for the "Username", "Password" and "Submit" button
- Also add additional elements in the div for "Forget Password", "Use a sign-in code," a "Remember me" checkbox, and a "New to Netflix" link for signing up inside the login form.
- In the footer add links for "FAQs", "Help Centre", "Terms of Use" etc.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netflix</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="banner">
<!-- Structure for Netflix logo on top-->
<div class="logo">
<img src="https://i.ibb.co/SNKRx9w/Netflixlogo.png">
</div>
<div class="main">
<div class="form1">
<!-- Create login form -->
<form>
<h1>Sign In</h1>
<div class="input-field">
<input class="text-input" type="email" required placeholder=" ">
<span >Email or mobile number</span> <br>
<p class="error-message">Please enter a valid e-mail address</p>
</div>
<div class="input-field">
<input class="text-input" type="password" required placeholder=" ">
<span >Password</span>
</div>
<div class="button">
<button class="button1" type="submit">Sign In</button>
</div>
<div class="or">
<p>OR</p>
</div>
<div class="button">
<button class="button2" type="button"
onclick="document.location.href='#'">
Use a sign-in code
</button>
</div>
<div class="fp"><a href="#">Forgot Password?</a></div>
<div class="checkbox">
<label class="container">Remember me
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="signup">
<p>New to Netflix ?</p>
<a href="https://www.netflix.com/">Sign up now</a>
</div>
<div class="more">
<p>
This page is protected by Google reCAPTCHA to
ensure you're not a bot.
<a href="#">Learn more.</a>
</p>
</div>
</form>
</div>
</div>
<!-- Create Netflix footer -->
<footer>
<div class="ftr-content">
<div class="contact">
Questions? Call <a href="tel:000-800-919-1694">000-800-919-1694</a>
</div>
<div class="ftr">
<a href="#">FAQ</a>
<a href="#">Help Centre</a>
<a href="#">Terms of Use</a>
<a href="#">Privacy</a>
<a href="#">Cookie Preferences</a>
<a href="#">Corporate Information</a>
</div>
<div class="language">
<select>
<option>English</option>
<option>??????</option>
<option>???????</option>
<option>Français</option>
</select>
</div>
</div>
</footer>
</header>
</body>
</html>
Styling Netflix Login page using CSS
- The background of the login page is set to an image using background in CSS.
- Every element is styled by providing background color, height, width, adequate margin, and padding using background, height, width, padding, and margin respectively.
- We have used focus to apply two different styles to input elements while on focus and not on focus.
- Also, hover is used to change the color of the submit button and link attributes when hovering with the mouse pointer.
- The transition-duration is used to smoothen out the animations on hovering.
- Pseudo class not(:focus) is used to identify whether the input is not in focus to style the placeholder text while in focus and not in focus.
- The font is set desired color and size using the font-size and color in the CSS.
CSS Code
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
background: #000;
color: #999;
}
ul {
list-style: none;
}
h1,h2,h3,h4 {
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
p {
margin: 0.5rem 0;
}
/* Style the backgorund of Netflix */
img {
width: 100%;
}
.banner {
width: 100%;
height: 100vh;
position: relative;
background: url('https://www.tutorialspoint.com/assets/questions/media/1039321-1731037718.jpg') no-repeat center center/cover;
}
.banner::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.65);
box-shadow: inset 30px 10px 150px #000000;
}
/* Style the Netflix logo */
.logo {
position: relative;
z-index: 2;
height: 90px;
}
.logo img {
margin-left: 7%;
padding-top: 10px;
width: 170px;
position: absolute;
top: 20px;
left: 40px;
}
/* Style login form container */
.main {
position: relative;
z-index: 2;
width: 450px;
height: 750px;
background: rgb(0, 0, 0, 0.65);
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
padding: 60px 65px;
}
/* Style login form heading */
.form1 h1 {
margin-bottom: 20px;
}
/* Style login form */
.form1 {
width: 100%;
margin-bottom: 10px;
}
/* Style text input */
.form1 .input-field {
padding: 5px 0;
position: relative;
}
.form1 .input-field .text-input {
margin-bottom: 10px;
width: 100%;
height: 56px;
color: white;
border: 1px solid rgba(128, 128, 128, 0.7);
border-radius: 5px;
padding: 20px 10px 5px 14px;
font-size: 15.5px;
}
.input-field input {
display: inline-block;
padding: 10px;
}
.input-field span {
color: #aaa;
position: absolute;
pointer-events: none;
left: 15px;
top: 21px;
transition: 0.3s;
}
.input-field input:focus+span,
.input-field input:not(:placeholder-shown)+span{
top: 15px;
left: 15px;
font-size: 11px;
}
.input-field input:not(:focus):not(:placeholder-shown):invalid{
border:1px solid rgba(255, 24, 24, 0.821);
}
.input-field input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
display: block;
}
.input-field input:not(:focus):not(:placeholder-shown):valid {
border-color: var(--color-valid);
}
input[type=email],input[type=password] {
background: #3434343f;
}
input[type=email]:focus, input[type=password]:focus{
outline:2px solid #f5f5f5;
outline-offset: 1px;
}
/* Style error message */
.error-message {
display: none;
font-size: small;
padding-left: 5px;
margin-top:0px;
color: rgba(255, 23, 23, 0.796);
}
/* Style signin button */
.form1 .button {
margin-bottom: 10px;
width: 100%;
}
button{
width: 100%;
height: 40px;
border-radius: 5px;
font-size: inherit;
font-weight: bold;
border: none;
cursor: pointer;
outline: none;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
transition-duration: 0.4s;
color: #fff;
}
.button1{
background: red;
}
.button1:hover{
background: rgb(171, 0, 0);
}
/* Style OR */
.or{
padding: 1px;
text-align: center;
}
/* Style Use sign-in code button */
.button2{
background: rgb(66, 56, 56);
}
.button2:hover{
background: rgba(66, 56, 56, 0.688);
}
/* Style forgot password */
.fp{
text-align: center;
height: 40px;
padding: 10px;
margin-bottom: 10px;
text-decoration: none;
width: 100%;
}
.fp a:hover{
text-decoration: underline;
color: #999;
}
/* Style Remember me and checkbox */
.checkbox {
display: flex;
margin-top: 10px;
vertical-align: middle;
justify-content: flex-start;
font-size: 1rem;
}
.checkbox label{
color: #fff;
text-decoration: none;
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
border-radius: 3px;
border: 1px solid #939393;
width: 18px;
background-color: #2828288a;
transition-duration: 0.4s;
}
.container:hover input ~ .checkmark {
border: 1px solid #f1f1f1;
}
.container input:checked ~ .checkmark {
background-color: #ffffff;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
left: 5.5px;
top: 2px;
width: 3px;
height: 9px;
border: solid black;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Style bottom of login form */
.signup {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding-top: 10px;
}
.signup p {
margin-right: 5px;
}
.more {
font-size: 0.8em;
line-height: 1.1em;
padding-top: 10px;
}
.more a {
color: rgb(17, 108, 228);
}
.more a:hover,
.signup a:hover {
text-decoration: underline;
}
/* Style Netflix footer */
footer {
position: absolute;
margin-top: 50px;
z-index: 2;
background: rgba(0, 0, 0, 0.65);
width: 100%;
height: 200px;
}
.ftr-content {
margin-left: 10%;
padding-top: 50px;
padding-bottom: 100px;
font-size: 1em;
}
.ftr-content a {
color: #999;
}
.contact {
margin-bottom: 30px;
}
.contact a:hover {
text-decoration: underline;
}
.ftr a{
margin-bottom: 30px;
min-width: 200px;
width: 24%;
font-size: 14px;
text-decoration: underline;
display: inline-block;
justify-content: space-between;
}
.language select{
color: #fff;
width: 120px;
height: 40px;
border-radius: 5px;
font-size: inherit;
padding-left: 10px;
background: #2828288a;
}
Complete Code of Netflix Login Page
Here is the final code for creating a Netflix login page using HTML and CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Netflix</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Netflix Sans, Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif;
-webkit-font-smoothing: antialiased;
background: #000;
color: #999;
}
ul {
list-style: none;
}
h1,h2,h3,h4 {
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
p {
margin: 0.5rem 0;
}
/* Style the backgorund of Netflix */
img {
width: 100%;
}
.banner {
width: 100%;
height: 100vh;
position: relative;
background: url(
'https://www.tutorialspoint.com/assets/questions/media/1039321-1731037718.jpg') no-repeat center center/cover;
}
.banner::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: rgba(0, 0, 0, 0.65);
box-shadow: inset 30px 10px 150px #000000;
}
/* Style the Netflix logo */
.logo {
position: relative;
z-index: 2;
height: 90px;
}
.logo img {
margin-left: 7%;
padding-top: 10px;
width: 170px;
position: absolute;
top: 20px;
left: 40px;
}
/* Style login form container */
.main {
position: relative;
z-index: 2;
width: 450px;
height: 750px;
background: rgb(0, 0, 0, 0.65);
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
padding: 60px 65px;
}
/* Style login form heading */
.form1 h1 {
margin-bottom: 20px;
}
/* Style login form */
.form1 {
width: 100%;
margin-bottom: 10px;
}
/* Style text input */
.form1 .input-field {
padding: 5px 0;
position: relative;
}
.form1 .input-field .text-input {
margin-bottom: 10px;
width: 100%;
height: 56px;
color: white;
border: 1px solid rgba(128, 128, 128, 0.7);
border-radius: 5px;
padding: 20px 10px 5px 14px;
font-size: 15.5px;
}
.input-field input {
display: inline-block;
padding: 10px;
}
.input-field span {
color: #aaa;
position: absolute;
pointer-events: none;
left: 15px;
top: 21px;
transition: 0.3s;
}
.input-field input:focus+span, .input-field input:not(:placeholder-shown)+span{
top: 15px;
left: 15px;
font-size: 11px;
}
.input-field input:not(:focus):not(:placeholder-shown):invalid{
border:1px solid rgba(255, 24, 24, 0.821);
}
.input-field input:not(:focus):not(:placeholder-shown):invalid ~ .error-message {
display: block;
}
.input-field input:not(:focus):not(:placeholder-shown):valid {
border-color: var(--color-valid);
}
input[type=email],input[type=password] {
background: #3434343f;
}
input[type=email]:focus, input[type=password]:focus{
outline:2px solid #f5f5f5;
outline-offset: 1px;
}
/* Style error message */
.error-message {
display: none;
font-size: small;
padding-left: 5px;
margin-top:0px;
color: rgba(255, 23, 23, 0.796);
}
/* Style signin button */
.form1 .button {
margin-bottom: 10px;
width: 100%;
}
button{
width: 100%;
height: 40px;
border-radius: 5px;
font-size: inherit;
font-weight: bold;
border: none;
cursor: pointer;
outline: none;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
transition-duration: 0.4s;
color: #fff;
}
.button1{
background: red;
}
.button1:hover{
background: rgb(171, 0, 0);
}
/* Style OR */
.or{
padding: 1px;
text-align: center;
}
/* Style Use sign-in code button */
.button2{
background: rgb(66, 56, 56);
}
.button2:hover{
background: rgba(66, 56, 56, 0.688);
}
/* Style forgot password */
.fp{
text-align: center;
height: 40px;
padding: 10px;
margin-bottom: 10px;
text-decoration: none;
width: 100%;
}
.fp a:hover{
text-decoration: underline;
color: #999;
}
/* Style Remember me and checkbox */
.checkbox {
display: flex;
margin-top: 10px;
vertical-align: middle;
justify-content: flex-start;
font-size: 1rem;
}
.checkbox label{
color: #fff;
text-decoration: none;
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 18px;
border-radius: 3px;
border: 1px solid #939393;
width: 18px;
background-color: #2828288a;
transition-duration: 0.4s;
}
.container:hover input ~ .checkmark {
border: 1px solid #f1f1f1;
}
.container input:checked ~ .checkmark {
background-color: #ffffff;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.container input:checked ~ .checkmark:after {
display: block;
}
.container .checkmark:after {
left: 5.5px;
top: 2px;
width: 3px;
height: 9px;
border: solid black;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/* Style bottom of login form */
.signup {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
padding-top: 10px;
}
.signup p {
margin-right: 5px;
}
.more {
font-size: 0.8em;
line-height: 1.1em;
padding-top: 10px;
}
.more a {
color: rgb(17, 108, 228);
}
.more a:hover, .signup a:hover {
text-decoration: underline;
}
/* Style Netflix footer */
footer {
position: absolute;
margin-top: 50px;
z-index: 2;
background: rgba(0, 0, 0, 0.65);
width: 100%;
height: 200px;
}
.ftr-content {
margin-left: 10%;
padding-top: 50px;
padding-bottom: 100px;
font-size: 1em;
}
.ftr-content a {
color: #999;
}
.contact {
margin-bottom: 30px;
}
.contact a:hover {
text-decoration: underline;
}
.ftr a{
margin-bottom: 30px;
min-width: 200px;
width: 24%;
font-size: 14px;
text-decoration: underline;
display: inline-block;
justify-content: space-between;
}
.language select{
color: #fff;
width: 120px;
height: 40px;
border-radius: 5px;
font-size: inherit;
padding-left: 10px;
background: #2828288a;
}
</style>
</head>
<body>
<header class="banner">
<!-- Structure for Netflix logo on top-->
<div class="logo">
<img src="https://i.ibb.co/SNKRx9w/Netflixlogo.png">
</div>
<div class="main">
<div class="form1">
<!-- Create login form -->
<form>
<h1>Sign In</h1>
<div class="input-field">
<input class="text-input" type="email" required placeholder=" ">
<span >Email or mobile number</span> <br>
<p class="error-message">Please enter a valid e-mail address</p>
</div>
<div class="input-field">
<input class="text-input" type="password" required placeholder=" ">
<span >Password</span>
</div>
<div class="button">
<button class="button1" type="submit">Sign In</button>
</div>
<div class="or">
<p>OR</p>
</div>
<div class="button"></div>
<button class="button2" type="button"
onclick="document.location.href='#'">
Use a sign-in code
</button>
<div class="fp"><a href="#">Forgot Password?</a></div>
<div class="checkbox">
<label class="container">Remember me
<input type="checkbox">
<span class="checkmark"></span>
</label>
</div>
<div class="signup">
<p>New to Netflix ?</p>
<a href="https://www.netflix.com/">Sign up now</a>
</div>
<div class="more">
<p>
This page is protected by Google reCAPTCHA
to ensure you're not a bot.
<a href="#">Learn more.</a>
</p>
</div>
</form>
</div>
</div>
<!-- Create Netflix footer -->
<footer>
<div class="ftr-content">
<div class="contact">
Questions? Call <a href="tel:000-800-919-1694">000-800-919-1694</a>
</div>
<div class="ftr">
<a href="#">FAQ</a>
<a href="#">Help Centre</a>
<a href="#">Terms of Use</a>
<a href="#">Privacy</a>
<a href="#">Cookie Preferences</a>
<a href="#">Corporate Information</a>
</div>
<div class="language">
<select>
<option>English</option>
<option>??????</option>
<option>???????</option>
<option>Français</option>
</select>
</div>
</div>
</footer>
</header>
</body>
</html>
Output
Here is the final output of the Netflix login page created using HTML and CSS.
In this article, we successfully created a Netflix login page using HTML and CSS. I hope creating Netflix login page enhanced your web development knowledge and provided better insight into how HTML and CSS work. If you want to learn more about web development and other related content, you can check out other articles on Tutorialspoint.
Updated on: 2024-11-08T09:39:38+05:30
372 Views
Advertisements