Code du formulaire de connexion HTML CSS

2,288 bachir123

Ouvrir dans l'éditeur Publiez votre code

Code du formulaire de connexion HTML CSS

Recommandé

10 July 2026

Préparation des étudiants

27 May 2026

Code source du jeu HTML5 Retro Bowl

15 December 2025

Bouton HTML léger avec icône et texte

HTML

CSS

/* General Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Arial', sans-serif;
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #333;
}

.login-container {
  background: rgba(255, 255, 255, 0.9);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.login-box {
  text-align: center;
}

h2 {
  margin-bottom: 1.5rem;
  font-size: 2rem;
  color: #333;
}

.input-group {
  margin-bottom: 1.5rem;
  text-align: left;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
  color: #555;
}

input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

input:focus {
  border-color: #6a11cb;
  outline: none;
}

button {
  width: 100%;
  padding: 0.75rem;
  background: #6a11cb;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: #2575fc;
}

.extra-links {
  margin-top: 1.5rem;
  display: flex;
  justify-content: space-between;
}

.extra-links a {
  color: #6a11cb;
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.extra-links a:hover {
  color: #2575fc;
}