(Source Code) Make Netflix Login Page With HTML & CSS
Hey! Frontend Web Devs. In this blog post, we will make (clone) a Netflix login page with HTML & CSS.
Creating a clone of popular websites can help you level up your front-end development skills. Apart from this you will understand the structure (HTML) and styling (CSS) of popular web pages & boost your confidence as a frontend web developer.
Also Read: Instagram Login Page With HTML & CSS
In this tutorial, I will start by setting basic HTML code that will act as structure and style it with CSS to look & feel like the original Netflix login page. At the end of this tutorial, I will provide the entire source code of this Netflix Login Page So that You Can Run it On Your Local Machine
Key Concepts:
- CSS Form Styling
- CSS CheckBox Styling
- CSS Link Styling & Language Selector Styling
- CSS Universal Selector
Understanding the HTML Structure Of the Netflix Login Page
- The code starts with the
<header class="showcase">tag, indicating the beginning of a header section with the class name “showcase”.
<header class="showcase">- Inside the header, there are various divisions (
<div>) with different classes like “logo”, “showcase-content”, “fcbk”, “signup”, and “more”.
<div class="logo">
<div class="showcase-content">
<div class="fcbk">
<div class="signup">
<div class="more">- The “logo” division contains an image tag (
<img>) with a source link to a logo image.
<img src="https://i.ibb.co/r5krrdz/logo.png">- The “showcase-content” division includes a form for signing in, a section for Facebook login, a signup prompt, and a message about Google reCAPTCHA.
<form>
<a href="https://facebook.com">
<a href="https://www.netflix.com/dz-en/">Sign up now</a>
<a href="#">Learn more.</a>- The “footer” section starts with the
<footer>tag. Inside it, there are divisions with classes “ftr-content”, “contact”, “ftr”, and “select”. These divisions contain links and a dropdown menu for language selection.
<footer>
<div class="ftr-content">
<div class="contact">
<div class="ftr">
<div class="select">ALSO READ: Google Login Page With HTML & CSS
Understanding CSS To Make Netflix Login Page
- The CSS code starts with the universal selector (
*), setting all elements to have a border-box sizing, zero margin, and zero padding.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}- The body of the page is styled with a specific font-family, background color, and text color.
body {
font-family: 'Arial', sans-serif;
background: #000;
color: #999;
}- Various elements like headings (
h1,h2, etc.), links (a), paragraphs (p), and images (img) are styled with specific colors and margins.
h1, h2, h3, h4 {
color: #fff;
}
a {
color: #fff;
text-decoration: none;
}
p {
margin: 0.5rem 0;
}
img {
width: 100%;
}- The “showcase” class styles the header section with a background image and overlay, creating a visual effect.
.showcase {
width: 100%;
height: 100vh;
position: relative;
background: url('https://i.ibb.co/vXqDmnh/background.jpg') no-repeat center center/cover;
}
.showcase::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;
}- The form elements inside the “showcase-content” division are styled with specific widths, heights, colors, and padding to create a visually appealing sign-in form.
.formm .info .email {
margin-bottom: 30px;
width: 100%;
height: 50px;
border-radius: 5px;
border: none;
padding: 10px;
font-size: inherit;
}- The “footer” section is positioned at the bottom of the page and styled with specific dimensions, background color, and text alignment.
footer {
position: absolute;
margin-top: 50px;
z-index: 2;
background: rgba(0, 0, 0, 0.65);
width: 100%;
height: 200px;
}- Links inside the footer are styled with specific colors, and the language dropdown menu is styled with specific dimensions and background colors.
.ftr-content a {
color: #999;
}
.select select {
width: 100px;
height: 40px;
border: none;
font-size: inherit;
padding-left: 10px;
background: #333333;
}Source Code Of Netflix Login Page With HTML & CSS
HTML:
<header class="showcase">
<div class="logo">
<img src="https://i.ibb.co/r5krrdz/logo.png">
</div>
<div class="showcase-content">
<div class="formm">
<form>
<h1>Sign In</h1>
<div class="info">
<input class="email" type="email" placeholder="Email or phone number"> <br>
<input class="email" type="password" placeholder="Password">
</div>
<div class="btn">
<button class="btn-primary" type="submit">Sign In</button>
</div>
<div class="help">
<div>
<input value="true" type="checkbox"><label>Remember me</label>
</div>
<a href="https://www.netflix.com/dz-en/LoginHelp">Need Help ?</a>
</div>
</form>
</div>
<div class="fcbk">
<a href="https://facebook.com">
<img src="https://i.ibb.co/LrVMXNR/social-fb.png" alt="Facebook">
</a>
<p>Login with Facebook</p>
</div>
<div class="signup">
<p>New to Netflix ?</p>
<a href="https://www.netflix.com/dz-en/">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>
</div>
<footer>
<div class="ftr-content">
<div class="contact">
<a href="#">Quesions? Contact us.</a>
</div>
<div class="ftr">
<a href="#">Gift Card Terms</a>
<a href="#">Terms of Use</a>
<a href="#">Privacy Statement</a>
</div>
<div class="select">
<select>
<option>English</option>
<option>العربية</option>
<option>Français</option>
</select>
</div>
</div>
</footer>
</header>ALSO READ: Facebook Login Page With HTML & CSS
CSS:
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Arial', 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;
}
img {
width: 100%;
}
.showcase {
width: 100%;
height: 100vh;
position: relative;
background: url('https://i.ibb.co/vXqDmnh/background.jpg') no-repeat center center/cover;
}
.showcase::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;
}
.logo {
position: relative;
z-index: 2;
height: 90px;
}
.logo img {
width: 170px;
position: absolute;
top: 20px;
left: 40px;
}
.showcase-content {
position: relative;
z-index: 2;
width: 450px;
height: 650px;
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;
}
.formm h1 {
margin-bottom: 20px;
}
.formm {
width: 100%;
margin-bottom: 40px;
}
.formm .info {
padding: 5px 0;
/* margin-bottom: 20px; */
}
.formm .info .email {
margin-bottom: 30px;
width: 100%;
height: 50px;
border-radius: 5px;
border: none;
padding: 10px;
font-size: inherit;
}
.formm .btn {
margin-bottom: 10px;
width: 100%;
}
.btn-primary {
width: 100%;
height: 50px;
border-radius: 5px;
background: red;
color: #fff;
font-size: inherit;
font-weight: bold;
border: none;
cursor: pointer;
outline: none;
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.help {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
}
.help a {
color: #999;
}
.help a:hover {
text-decoration: underline;
}
/* ------ input ------- */
input[type=checkbox] {
background: #737373;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
border: 0;
height: 16px;
left: -20px;
width: 16px;
margin-right: 5px;
}
input[type=email] {
background: #343434;
}
input[type=password] {
background: #343434;
}
/* ------ input end ------- */
.fcbk {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
font-size: 0.8em;
}
.fcbk img {
width: 20px;
margin-right: 10px;
}
.signup {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-start;
}
.signup p {
margin-right: 5px;
}
.more {
font-size: 0.8em;
line-height: 1.1em;
}
.more a {
color: rgb(17, 108, 228);
}
.more a:hover,
.signup a:hover {
text-decoration: underline;
}
/* ------ 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: 20px;
font-size: 1em;
}
.ftr-content a {
color: #999;
}
.ftr-content a:hover {
text-decoration: underline;
}
.contact {
margin-bottom: 30px;
}
.contact a:hover {
text-decoration: underline;
}
.ftr {
margin-bottom: 30px;
width: 70%;
font-size: 0.8em;
display: flex;
justify-content: space-between;
}
.select select {
width: 100px;
height: 40px;
border: none;
font-size: inherit;
padding-left: 10px;
background: #333333;
}
</style>Also Read: Cool Yeti Login Page With HTML & CSS
Last Updated: June 18, 2024
About Author
