WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Page de connexion Facebook
1570
Andev.web
Ouvrir dans l'éditeur
Video
Publiez votre code
0
Recommandé
14 December 2024
Un code par ab_andybv
14 September 2024
Formulaire de connexion moderne
7 January 2026
Modèle de site Web de portfolio holographique
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:)