WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Facebook Login Page
1180
Andev.web
Open In Editor
Publish Your Code
Recommended
19 October 2024
Animated HTML Login Form
17 May 2025
modern login
10 February 2025
Modern Login Form Template
HTML
Copy
Andev Web
facebook
Connect with friends and the world
around you on Facebook.
Login
Forgot password?
Create new account
CSS
Copy
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Roboto', sans-serif; } .flex { display: flex; align-items: center; } .container { padding: 0 15px; min-height: 100vh; justify-content: center; background: #f0f2f5; } .facebook-page { justify-content: space-between; max-width: 1000px; width: 100%; } .facebook-page .text { margin-bottom: 90px; } .facebook-page h1 { color: #1877f2; font-size: 4rem; margin-bottom: 10px; } .facebook-page p { font-size: 1.75rem; white-space: nowrap; } form { display: flex; flex-direction: column; background: #fff; border-radius: 8px; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1); max-width: 400px; width: 100%; } form input { height: 55px; width: 100%; border: 1px solid #ccc; border-radius: 6px; margin-bottom: 15px; font-size: 1rem; padding: 0 14px; } form input:focus { outline: none; border-color: #1877f2; } ::placeholder { color: #777; font-size: 1.063rem; } .link { display: flex; flex-direction: column; text-align: center; gap: 15px; } .link .login { border: none; outline: none; cursor: pointer; background: #1877f2; padding: 15px 0; border-radius: 6px; color: #fff; font-size: 1.25rem; font-weight: 600; transition: 0.2s ease; } .link .login:hover { background: #0d65d9; } form a { text-decoration: none; } .link .forgot { color: #1877f2; font-size: 0.875rem; } .link .forgot:hover { text-decoration: underline; } hr { border: none; height: 1px; background-color: #ccc; margin-bottom: 20px; margin-top: 20px; } .button { margin-top: 25px; text-align: center; margin-bottom: 20px; } .button a { padding: 15px 20px; background: #42b72a; border-radius: 6px; color: #fff; font-size: 1.063rem; font-weight: 600; transition: 0.2s ease; } .button a:hover { background: #3ba626; } @media (max-width: 900px) { .facebook-page { flex-direction: column; text-align: center; } .facebook-page .text { margin-bottom: 30px; } } @media (max-width: 460px) { .facebook-page h1 { font-size: 3.5rem; } .facebook-page p { font-size: 1.3rem; } form { padding: 15px; } }
JS
Copy
//This code does not need javascript:)