नेटफ्लिक्स लोडिंग पेज

अनुशंसित

27 November 2024

एचटीएमएल सीएसएस कॉन्टैक्ट फॉर्म

HTML

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Netflix Login Page</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<nav>
  <a href="#"><img src="http://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

@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("http://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;
  }
}

नेटफ्लिक्स लोडिंग पेज

अनुशंसित

उद्धरण जनरेटर

दिल के बुलबुले

एचटीएमएल सीएसएस कॉन्टैक्ट फॉर्म

HTML

CSS

JS

अनुशंसित

उद्धरण जनरेटर

दिल के बुलबुले

एचटीएमएल सीएसएस कॉन्टैक्ट फॉर्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS