netflix clone using html and css with source code

How to Create Netflix Login Page in HTML and CSS – Complete Source Code

by

Hi guys I am back with another fantastic and inspiring project in this project I create a Netflix Login page Clone using HTML and CSS only I also share a complete source code that you can download and use for free.

NOTE: To stay informed about my new projects, join our WhatsApp and Telegram community and be part of the conversation.” Links are given below.

Join Our WhatsApp Community
Join Our Telegram Channel

What is NetFlix?

As one of the most popular streaming platforms worldwide, Netflix has a user-friendly login page that captures our attention with its sleek and intuitive design. Have you ever wondered how they create such a visually appealing login page? Well, Look no further!

In this beginner’s nice post, I will tell you how to make this type of animation with all the necessary elements and tags used to create this netflix login page.

By the end of this blog post, you will have a solid understanding of how HTML and CSS work together to create a visually appealing and user-friendly form that looks great on all devices. So, let’s get started!

About This Project

Created byCoding Pakistan
Languages HTML / CSS
Source CodeGitHub
PreviewTake Preview
ResponsiveYes

How To Create a NetFlix Login Page Using HTML and CSS

There are some steps to create this type of Logn Page design Using HTML and CSS that are given below.

  1. The first step is to create one folder.
  2. Open this folder in Vs Code Editor and create two files HTML and CSS.
  3. Make sure the HTML file extension is (.html), the CSS file extension will be (.css)
  4. After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
  5. The last step is copying and pasting the given code into your files.

Netflix Login Page – Source Code

HTML FILE

<!DOCTYPE html>
<!-- Coding By CodingPakistan - www.codingpakistan.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Netflix Login Page | CodingPakistan </title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <a href="#"><img src="logo.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 FILE

@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("background-image.jpg");
    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, .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;
    }
}

Final OutPut [Laptop or Desktop]

netflix clone using html and css with source code

Final OutPut [Mobile]

Netflix Clone Login Page mobile view

Related Articles

Conclusion

In this blog post, we have shown how to create a Netflix login page in HTML and CSS. We have provided the complete source code, so you can follow along and create your own login page.

We have also included some tips on how to make your login page more responsive and user-friendly.

We hope you found this blog post helpful. If you have any questions, please feel free to leave a comment below.

Here are some additional tips for creating a Netflix login page:

  • Use a responsive design so that your page looks good on all devices.
  • Use clear and concise labels for all of your input fields.
  • Make sure your form is well-validated so that users can’t submit invalid data.
  • Add a “forgot password” link so that users can reset their passwords if they forget them.
  • Use a secure connection (HTTPS) so that users’ passwords are protected.

Leave a Comment