Dans le but de s’amuser, nous allons pour ce projet essayer de reproduire le mieux possible l’espace de connexion de célèbre réseau social Facebook. Vous pouvez vous rendre sur Facebook afin de prendre connaissance du design adapté aux pages web. Allez, commençons !
Objectifs du Projet
- Créer une page de connexion statique : Aucune fonction d’authentification n’est intégrée, mais la structure visuelle imite la page de connexion de Facebook.
- Utiliser Bootstrap pour simplifier la mise en page et garantir que la page est responsive.
- Appliquer un style personnalisé pour que la page ressemble autant que possible à celle de Facebook.
Prérequis
- Connaissances de base en HTML, CSS et Bootstrap.
- Un éditeur de texte (comme VS Code, Atom, Sublime Text).
- Un navigateur pour tester la page.
Étape 1 : Structure de Base en HTML
Commencez par créer un fichier index.html et ajoutez la structure de base HTML. La page est divisée en deux sections principales :
- Logo Facebook et texte descriptif.
- Formulaire de connexion.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Facebook Login</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Page Content Here -->
</body>
</html>Ajoutez un lien vers Bootstrap dans la balise <head> pour avoir accès aux styles et composants prédéfinis.
Étape 2 : Contenu de la Page
Dans le <body>, ajoutez une div principale qui contient deux sections côte à côte : une pour le logo et l’autre pour le formulaire de connexion. Utilisez les classes Bootstrap pour aligner et espacer les éléments.
<div class="facebook-container">
<!-- Facebook Logo Section -->
<div>
<h1 class="facebook-logo">facebook</h1>
<small>Connect with friends and the world around you on Facebook.</small>
</div>
<!-- Login Form Section -->
<div class="login-card">
<form>
<div class="mb-3">
<input type="text" class="form-control" placeholder="Email or phone number" required>
</div>
<div class="mb-3">
<input type="password" class="form-control" placeholder="Password" required>
</div>
<button type="submit" class="btn btn-primary login-btn w-100">Log In</button>
<div class="text-center mt-3">
<a href="#" class="forgot-link">Forgot Password?</a>
</div>
<hr>
<div class="text-center create-account">
<a href="#" class="btn btn-success w-75">Create New Account</a>
</div>
</form>
</div>
</div>Explication des Classes et Composants Bootstrap Utilisés
facebook-container: Utilisé comme conteneur principal pour aligner les sections.facebook-logo: Affiche le texte « facebook » avec le style et la couleur de marque.login-card: Section contenant le formulaire, incluant des champs de texte, un bouton de connexion, un lien de réinitialisation et un bouton de création de compte.
Étape 3 : Ajout de Styles Personnalisés (CSS)
Dans le <head>, ajoutez une balise <style> pour appliquer des personnalisations CSS afin que le design se rapproche de celui de Facebook.
<style>
body {
background-color: #f0f2f5;
}
.facebook-container {
max-width: 1000px;
margin: auto;
padding: 40px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.facebook-logo {
font-size: 48px;
color: #1877f2;
font-weight: bold;
}
.facebook-logo small {
display: block;
font-size: 24px;
color: #000;
}
.login-card {
max-width: 400px;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
background-color: #fff;
}
.login-btn {
background-color: #1877f2;
border: none;
}
.login-btn:hover {
background-color: #165ec6;
}
.forgot-link, .create-link {
color: #1877f2;
text-decoration: none;
}
.create-account {
margin-top: 20px;
}
</style>Explication du CSS
- Body Background :
background-color: #f0f2f5;pour imiter le fond gris clair de Facebook. - facebook-logo : Applique une couleur bleue (#1877f2) et un style gras pour ressembler au logo Facebook.
- login-card : Encadre le formulaire de connexion avec une ombre légère et un fond blanc pour donner un effet « carte ».
Étape 4 : Intégrer Bootstrap et Finaliser
Enfin, ajoutez le fichier JavaScript de Bootstrap pour que les composants interactifs (comme les boutons) fonctionnent correctement.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>Résultat
- Formulaire de Connexion : L’utilisateur peut entrer un e-mail/téléphone et un mot de passe et cliquer sur « Log In ».
- Lien « Forgot Password » : Redirige les utilisateurs vers une page de récupération (ici fictive).
- Bouton « Create New Account » : Simule la création d’un nouveau compte.
Voilà, j’espère que ce petit tuto vous fera le plus grand bien. Pour en faire un formulaire de connexion entièrement fonctionnel, il serait nécessaire de connecter le formulaire à un backend pour la gestion des utilisateurs et l’authentification avec PHP et MySql. J’ajouterai le lien ici dès que le tuto sera disponible.
Bon code !
