How to Create Responsive Netflix Login Page by using HTML and CSS

simple card design

Creating a responsive sign-in page inspired by Netflix using HTML and CSS involves several steps. Below is a step-by-step guide to help you create such a page:

Step 1: Set Up Your Project

  1. Create a new folder for your project, e.g., 'netflix-signin-page.'
  2. Inside the folder, create two files: index.html and styles.css.

Step 2: HTML Structure Open the index.html file and set up the HTML structure. We'll create a simple sign-in form within a container:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>How to Create Responsive Netflix Login Page by using HTML and CSS | Assignment Hippo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <a href="#">NETFLIX</a>
    </nav>
    <p class="hippo">Assignment Hippo</p>
    <div class="wrapper">
        <h2>Sign In</h2>
        <form action="#">
            <div class="input-box">
                <input type="text" required>
                <label>Email or phone number</label>
            </div>
            <div class="input-box">
                <input type="password" required>
                <label>Password</label>
            </div>
            <button type="submit">Sign In</button>
            <div class="help-section"> 
                <div class="remember">
                    <input type="checkbox" id="remember">
                    <label for="remember">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>
    

Step 3: CSS Styling Open the styles.css file and add CSS to style the sign-in 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://www.assignmenthippo.com/images/html-and-css/netflix.jpg");
                  background-position: center;
                  background-size: cover;
              }
              
              nav {
                  position: fixed;
                  padding: 25px 60px;
                  z-index: 1;
                  
              }
              
              nav a {
                  color: #e50914;
                  font-size: 3rem;
                  text-decoration: none;
              }
              .hippo {
                  color: white;
                  position: absolute;
                  top: 0.5rem;
                  left: 60px;
              
              }
              
              .wrapper {
                  position: absolute;
                  left: 50%;
                  top: 50%;
                  border-radius: 6px;
                  padding: 70px;
                  width: 450px;
                  transform: translate(-50%, -50%);
                  background: #000000bf;
              }
              
              .wrapper h2 {
                  color: #fff;
                  font-size: 2rem;
              }
              
              .wrapper form {
                  margin: 25px 0 65px;
              }
              
              form .input-box {
                  height: 50px;
                  position: relative;
                  margin-bottom: 16px;
              }
              
              .input-box input {
                  height: 100%;
                  width: 100%;
                  background: #333;
                  border: none;
                  outline: none;
                  border-radius: 4px;
                  color: #fff;
                  font-size: 1rem;
                  padding: 0 20px;
              }
              
              .input-box input:is(:focus, :valid) {
                  background: #444;
                  padding: 16px 20px 0;
              }
              
              .input-box label {
                  position: absolute;
                  left: 20px;
                  top: 50%;
                  transform: translateY(-50%);
                  font-size: 1rem;
                  pointer-events: none;
                  color: #8c8c8c;
                  transition: all 0.1s ease;
              }
              
              .input-box 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;
              }
              
              .wrapper a {
                  text-decoration: none;
              }
              
              .wrapper a:hover {
                  text-decoration: underline;
              }
              
              .wrapper :where(label, p, small, a) {
                  color: #b3b3b3;
              }
              
              form .help-section {
                  display: flex;
                  justify-content: space-between;
              }
              
              form .remember {
                  display: flex;
              }
              
              form .remember input {
                  margin-right: 5px;
                  accent-color: #b3b3b3;
              }
              
              form .help-section :where(label, a) {
                  font-size: 0.9rem;
              }
              
              .wrapper p a {
                  color: #fff;
              }
              
              .wrapper small {
                  display: block;
                  margin-top: 15px;
                  color: #b3b3b3;
              }
              
              .wrapper small a {
                  color: #0071eb;
              }
              
              @media (max-width: 740px) {
                  body::before {
                      display: none;
                  }
              
                  nav, .wrapper {
                      padding: 20px;
                  }
              
                  nav a img {
                      width: 140px;
                  }
              
                  .wrapper {
                      width: 100%;
                      top: 43%;
                  }
              
                  .wrapper form {
                      margin: 25px 0 40px;
                  }
              }
         

Step 4: Assets Place your Netflix logo (named netflix-logo.png) in the project folder. You can download the logo or create a similar one.

Step 5: Testing Open the index.html file in a web browser to see your responsive Netflix-like sign-in page. Resize the browser window to test its responsiveness.

You now have a basic Netflix-inspired responsive sign-in page. You can further enhance the design, add user authentication, and integrate it into a larger project as needed.