WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
PAGE DE CHARGEMENT DE NETFLIX
2682
ASKMUHAMMAD_2K
Ouvrir dans l'éditeur
Video
Publiez votre code
4
Recommandé
21 July 2025
Entrée de téléchargement de fichier avec icône SVG
5 August 2024
Lampadaire interactif
9 December 2025
Cadre électrique rouge
HTML
Copy
Netflix Login Page
Sign In
Email or phone number
Password
Sign In
Remember me
Need help?
New to Netflix?
Sign up now
This page is protected by Google reCAPTCHA to ensure you're not a bot.
Learn more.
CSS
Copy
@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; } }
JS
Copy
no needed!!!