WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
NETFLIX LOADING PAGE
2684
ASKMUHAMMAD_2K
Open In Editor
Video
Publish Your Code
4
Recommended
23 March 2025
Portofolio
10 December 2025
Memory Game: Copy CPU Sequence JavaScript
11 September 2025
Starbucks HTML Website Template
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!!!