Page de connexion Facebook

Ouvrir dans l'éditeur Publiez votre code Precisa de um site?

Recommandé

2 March 2025

HTML, Connexion Inscription animée

28 December 2024

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

Page de connexion Facebook

Recommandé

HTML, Connexion Inscription animée

Un code par staticdata256

animation de voiture

HTML

CSS

JS

Recommandé

HTML, Connexion Inscription animée

Un code par staticdata256

animation de voiture

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS