PAGINA DE CARGA DE NETFLIX

Abrir en el editor Video Publica tu código

Recomendado

5 June 2025

Demostración del juego de lucha Ragdoll (HTML, CSS, JS)

15 May 2025

<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;
  }
}

PAGINA DE CARGA DE NETFLIX

Recomendado

Un código de alejandrokundrah

Demostración del juego de lucha Ragdoll (HTML, CSS, JS)

El código de Mete

HTML

CSS

JS

Recomendado

Un código de alejandrokundrah

Demostración del juego de lucha Ragdoll (HTML, CSS, JS)

El código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS