M-binary
Une bonne page de connexion est la première impression que tu offres à l'utilisateur. Elle doit être claire, rapide, accessible sur mobile et stylée. Dans cet article, découvre comment construire une page de login moderne et responsive avec seulement HTML et CSS, sans frameworks externes.
Ce modèle est parfait pour :
• Des interfaces d’administration
• Des applications web
• Des espaces membres ou tableaux de bord
Code HTML (structure du formulaire)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login | Mukaz Josue</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="background"></div>
<div class="login-card">
<h2>Welcome</h2>
<form>
<input type="email" placeholder="Email" required />
<input type="password" placeholder="Password" required />
<button type="submit">LOGIN</button>
<div class="links">
<a href="#">Forgot Password ?</a>
<a href="#">Sign Up</a>
</div>
<div class="divider">OR LOGIN WITH</div>
<div class="social-login">
<a href="#"><i class="fab fa-google"></i></a>
<a href="#"><i class="fab fa-facebook-f"></i></a>
</div>
</form>
<footer>
<small>Designed by Mukaz Josue | <a href="https://m-binary.com" target="_blank">m-binary.com</a> | M-corp</small>
</footer>
</div>
</body>
</html>
Code CSS (design propre, responsive et animations)
Fait par Mukaz Josue | m-binary.com | M-corp
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
font-family: 'Segoe UI', sans-serif;
display: flex;
align-items: center;
justify-content: center;
background: url('gon_&_kirua.jpg') no-repeat center center/cover;
position: relative;
overflow: hidden;
}
.background {
position: absolute;
width: 100%;
height: 100%;
backdrop-filter: blur(4px);
z-index: 0;
}
.login-card {
position: relative;
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 2rem;
width: 100%;
max-width: 360px;
z-index: 1;
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px rgba(0,0,0,0.25);
text-align: center;
color: white;
}
.login-card h2 {
margin-bottom: 1.5rem;
}
form input {
width: 100%;
padding: 0.75rem;
margin-bottom: 1rem;
border: none;
border-radius: 30px;
background: rgba(255, 255, 255, 0.1);
color: white;
outline: none;
}
form input::placeholder {
color: #ddd;
}
form button {
width: 100%;
padding: 0.75rem;
border: none;
background: #822f42;
color: white;
font-weight: bold;
border-radius: 30px;
cursor: pointer;
margin-bottom: 1rem;
transition: 0.3s;
}
form button:hover {
background: #a53950;
}
.links {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
margin-bottom: 1rem;
}
.links a {
color: #ddd;
text-decoration: none;
}
.divider {
margin: 1rem 0 0.5rem;
font-size: 0.8rem;
color: #ccc;
}
.social-login {
display: flex;
justify-content: center;
gap: 20px;
font-size: 1.5rem;
}
.social-login a {
color: white;
transition: 0.3s;
}
.social-login a:hover {
color: #c8e100;
}
footer {
margin-top: 1.5rem;
font-size: 0.7rem;
color: #ccc;
}
footer a {
color: #c8e100;
text-decoration: none;
}
@media (max-width: 400px) {
.login-card {
padding: 1.5rem;
}
}
💡 Ce que tu peux inclure
• 🖼️ Un logo ou titre personnalisé
• 📱 Champs email et mot de passe stylisés
• 🔒 Un bouton de connexion avec effet hover
• 🌓 Mode sombre ou clair
• ⚠️ Message d’erreur en cas d’identifiants incorrects (à ajouter avec JS ou backend)
Pourquoi ce modèle est efficace
• ✅ Interface minimaliste, moderne et épurée
• 🧩 Facile à intégrer dans n’importe quel projet
• 💼 Adapté aussi bien aux sites vitrines qu’aux dashboards
• 🔁 Peut être connecté à une API ou un système PHP/JavaScript pour valider les identifiants
📦 Tu peux copier et coller le code ci-dessus dans ton éditeur et l’adapter à ton besoin en quelques minutes. Ajoute ton logo, personnalise les couleurs, change les polices tout est modifiable.
Merci pour ta visite sur le site !
N'hésite pas à explorer nos autres tutoriels front-end pour booster l’apparence et l’efficacité de tes projets web. À très bientôt pour un nouveau composant !