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 !

homepage facebook

Dans ce projet, on ne fait pas d’authentification réelle, mais on construit une interface complète et crédible, avec :

  • Une page de connexion réaliste (layout Facebook)
  • Un vrai mini-parcours : inscription, mot de passe oublié, créer une page, à propos
  • Un style global cohérent via un seul fichier style.css
  • Un footer “à la Facebook” (langues + liens)
  • Une structure propre de projet web

Arborescence du projet

Tu vas structurer ton projet comme ceci :

  • facebook/index.html : page de connexion
  • facebook/style.css : styles globaux (layout + formulaire + footer + responsive)
  • facebook/pages/register.html : page inscription
  • facebook/pages/forgot-password.html : mot de passe oublié
  • facebook/pages/pages.html : page “Créer une Page”
  • facebook/pages/about.html : page “À propos”
  • facebook/assets/ : images, icônes, logo, background, etc.

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 : Créer la page principale index.html

Ce que tu dois obtenir (UI)

  • Layout en 2 colonnes (desktop) :
    • à gauche : logo “facebook” + phrase d’accroche
    • à droite : une carte blanche (formulaire de connexion)
  • Sous le formulaire : “Créer une Page”
  • En bas : footer complet (langues + liens)

Ce que tu dois mettre dans le code

  • un wrapper principal (ex: .container)
  • deux sections :
    • .left-section (branding)
    • .right-section (carte formulaire)
  • un vrai <form> avec :
    • input email/téléphone
    • input mot de passe
    • bouton “Connexion”
    • lien “Mot de passe oublié ?”
    • séparateur
    • bouton “Créer un compte”
  • et surtout : les liens pointent vers tes pages internes
    Exemple :
    • pages/forgot-password.html
    • pages/register.html
    • pages/pages.html
&lt;!DOCTYPE html>
&lt;html lang="fr">
&lt;head>
    &lt;meta charset="UTF-8">
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
    &lt;title>Facebook - Connectez-vous ou inscrivez-vous&lt;/title>
    &lt;link rel="stylesheet" href="style.css">
    &lt;!-- Favicon Facebook -->
    &lt;link rel="icon" href="https://static.xx.fbcdn.net/rsrc.php/yb/r/hLRJ1GG_y0J.ico">
&lt;/head>
&lt;body>
    &lt;!-- Conteneur principal : divisé en deux parties comme sur le vrai Facebook -->
    &lt;div class="container-login">
        &lt;!-- PARTIE GAUCHE : Le branding et le pitch marketing de Facebook -->
        &lt;div class="left-panel">
            &lt;!-- Le logo iconique en bleu Facebook -->
            &lt;h1 class="facebook-logo">facebook&lt;/h1>

            &lt;!-- Le slogan qui explique ce qu'est Facebook -->
            &lt;p class="tagline">
                Facebook vous permet de rester en contact et de partager votre vie avec votre entourage.
            &lt;/p>
        &lt;/div>

        &lt;!-- PARTIE DROITE : Le formulaire de connexion blanc bien propre -->
        &lt;div class="right-panel">
            &lt;!-- Formulaire de connexion -->
            &lt;form class="login-form">
                &lt;!-- Champ email/téléphone -->
                &lt;input
                    type="text"
                    class="input-field"
                    placeholder="Adresse e-mail ou numéro de tél."
                    required
                >

                &lt;!-- Champ mot de passe -->
                &lt;input
                    type="password"
                    class="input-field"
                    placeholder="Mot de passe"
                    required
                >

                &lt;!-- Bouton de connexion en gros et bien bleu -->
                &lt;button type="submit" class="btn-login">Se connecter&lt;/button>

                &lt;!-- Lien mot de passe oublié, bien centré -->
                &lt;a href="pages/forgot-password.html" class="forgot-link">Mot de passe oublié ?&lt;/a>

                &lt;!-- Ligne de séparation -->
                &lt;div class="separator">&lt;/div>

                &lt;!-- Bouton de création de compte en vert -->
                &lt;a href="pages/register.html" class="btn-create-account">Créer nouveau compte&lt;/a>
            &lt;/form>

            &lt;!-- Petit texte pour créer une page (entreprises, célébrités, etc.) -->
            &lt;div class="create-page">
                &lt;a href="pages/pages.html">&lt;strong>Créer une Page&lt;/strong>&lt;/a> pour une célébrité, un groupe ou une entreprise.
            &lt;/div>
        &lt;/div>
    &lt;/div>

    &lt;!-- Footer avec les liens légaux et autres -->
    &lt;footer class="footer">
        &lt;div class="footer-content">
            &lt;!-- Sélecteur de langue -->
            &lt;div class="language-selector">
                &lt;a href="#" class="active">Français (France)&lt;/a>
                &lt;a href="#">English (US)&lt;/a>
                &lt;a href="#">Español&lt;/a>
                &lt;a href="#">Deutsch&lt;/a>
                &lt;a href="#">Português (Brasil)&lt;/a>
                &lt;a href="#">Nederlands&lt;/a>
                &lt;a href="#">Italiano&lt;/a>
                &lt;a href="#">日本語&lt;/a>
                &lt;a href="#">한국어&lt;/a>
                &lt;a href="#">中文(简体)&lt;/a>
                &lt;button class="more-languages">+&lt;/button>
            &lt;/div>

            &lt;!-- Ligne de séparation -->
            &lt;div class="separator-footer">&lt;/div>

            &lt;!-- Liens du footer -->
            &lt;div class="footer-links">
                &lt;a href="#">Inscription&lt;/a>
                &lt;a href="pages/about.html">À propos&lt;/a>
                &lt;a href="#">Messenger&lt;/a>
                &lt;a href="#">Facebook Lite&lt;/a>
                &lt;a href="#">Vidéo&lt;/a>
                &lt;a href="#">Lieux&lt;/a>
                &lt;a href="#">Jeux&lt;/a>
                &lt;a href="#">Marketplace&lt;/a>
                &lt;a href="#">Meta Pay&lt;/a>
                &lt;a href="#">Meta Store&lt;/a>
                &lt;a href="#">Meta Quest&lt;/a>
                &lt;a href="#">Instagram&lt;/a>
                &lt;a href="#">Threads&lt;/a>
                &lt;a href="#">Collecte de fonds&lt;/a>
                &lt;a href="#">Services&lt;/a>
                &lt;a href="#">Centre d'information sur les élections&lt;/a>
                &lt;a href="#">Politique de confidentialité&lt;/a>
                &lt;a href="#">Centre de confidentialité&lt;/a>
                &lt;a href="#">Groupes&lt;/a>
                &lt;a href="#">Conditions générales&lt;/a>
                &lt;a href="#">Publicité&lt;/a>
                &lt;a href="#">Créer une publicité&lt;/a>
                &lt;a href="#">Créer une Page&lt;/a>
                &lt;a href="#">Développeurs&lt;/a>
                &lt;a href="#">Carrières&lt;/a>
                &lt;a href="#">Cookies&lt;/a>
                &lt;a href="#">Choix publicitaires&lt;/a>
            &lt;/div>

            &lt;!-- Copyright Meta -->
            &lt;div class="copyright">
                Meta © 2025
            &lt;/div>
        &lt;/div>
    &lt;/footer>
&lt;/body>
&lt;/html>

Ajoutez un lien vers Bootstrap dans la balise <head> pour avoir accès aux styles et composants prédéfinis.

Étape 2 : Centraliser tout le style dans style.css

L’idée : toutes les pages partagent la même charte en important style.css.

Sections recommandées dans ton CSS (avec commentaires)

  1. Base
  • fond gris clair type Facebook
  • police system (ou Arial)
  • centrage vertical/horizontal
  1. Layout
  • container max-width
  • flex en 2 colonnes sur desktop
  • espacement propre (gap)
  1. Branding
  • grand texte “facebook” bleu
  • slogan sous le logo
  • tailles adaptées au desktop
  1. Carte formulaire
  • fond blanc + box-shadow
  • bord arrondi
  • inputs avec état focus propre (:focus-visible)
  • bouton bleu (login)
  • bouton vert (create account)
  • séparateur (ligne grise)
  1. Footer
  • bloc langues
  • bloc liens
  • copyright
  • style discret, alignement propre
  1. Responsive
  • ajuste les tailles de police et padding
  • passage en 1 colonne sur mobile
  • centre le logo + carte
/* ==============================================
   RESET ET BASE
   On commence par mettre tout à plat
   ============================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Le body prend toute la hauteur de l'écran */
body {
    font-family: Helvetica, Arial, sans-serif;
    /* Ce gris très clair est la couleur signature du fond de Facebook */
    background-color: #f0f2f5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ==============================================
   CONTENEUR PRINCIPAL
   La page de connexion est divisée en deux : gauche (branding) et droite (formulaire)
   ============================================== */
.container-login {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px;
    padding: 100px 20px;
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

/* ==============================================
   PANNEAU GAUCHE
   Le logo Facebook et le slogan marketing
   ============================================== */
.left-panel {
    max-width: 580px;
}

/* Le logo "facebook" en minuscules avec la police et couleur iconiques */
.facebook-logo {
    font-size: 60px;
    font-weight: bold;
    /* Le bleu Facebook, reconnaissable entre mille */
    color: #1877f2;
    margin-bottom: 16px;
    letter-spacing: -2px;
}

/* Le slogan qui explique ce qu'est Facebook */
.tagline {
    font-size: 28px;
    color: #1c1e21;
    line-height: 32px;
    font-weight: normal;
}

/* ==============================================
   PANNEAU DROIT
   Le formulaire de connexion dans une carte blanche
   ============================================== */
.right-panel {
    width: 100%;
    max-width: 396px;
}

/* Le formulaire lui-même - carte blanche avec ombre */
.login-form {
    background-color: #ffffff;
    border-radius: 8px;
    /* Ombre douce pour donner de la profondeur */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
    padding: 24px 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Les champs de saisie (email et mot de passe) */
.input-field {
    width: 100%;
    padding: 14px 16px;
    font-size: 17px;
    border: 1px solid #dddfe2;
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s;
}

/* Bordure bleue quand on clique dans un champ */
.input-field:focus {
    border-color: #1877f2;
    /* Petite ombre bleue pour accentuer le focus */
    box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2);
}

/* Placeholder gris clair */
.input-field::placeholder {
    color: #8a8d91;
}

/* ==============================================
   BOUTONS
   Le bouton bleu "Se connecter" et le vert "Créer nouveau compte"
   ============================================== */

/* Bouton de connexion - grand et bien bleu */
.btn-login {
    width: 100%;
    padding: 14px 16px;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    background-color: #1877f2;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 6px;
}

.btn-login:hover {
    background-color: #166fe5;
}

.btn-login:active {
    background-color: #1464d4;
}

/* Lien "Mot de passe oublié ?" */
.forgot-link {
    text-align: center;
    color: #1877f2;
    font-size: 14px;
    text-decoration: none;
    padding: 8px 0;
}

.forgot-link:hover {
    text-decoration: underline;
}

/* Ligne de séparation horizontale */
.separator {
    border-top: 1px solid #dadde1;
    margin: 20px 0;
}

/* Bouton "Créer nouveau compte" - le vert iconique de Facebook */
.btn-create-account {
    display: inline-block;
    padding: 14px 16px;
    font-size: 17px;
    font-weight: bold;
    color: #ffffff;
    background-color: #42b72a;
    border: none;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
    align-self: center;
}

.btn-create-account:hover {
    background-color: #36a420;
}

.btn-create-account:active {
    background-color: #2e8b18;
}

/* Texte sous le formulaire pour créer une Page */
.create-page {
    text-align: center;
    font-size: 14px;
    color: #1c1e21;
    margin-top: 28px;
}

.create-page a {
    color: #1c1e21;
    text-decoration: none;
}

.create-page a:hover {
    text-decoration: underline;
}

/* ==============================================
   FOOTER
   Tout en bas avec les liens de langue et légaux
   ============================================== */
.footer {
    background-color: #ffffff;
    padding: 20px 0;
    border-top: 1px solid #dadde1;
}

.footer-content {
    max-width: 980px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Sélecteur de langue */
.language-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 8px;
    align-items: center;
}

.language-selector a {
    font-size: 12px;
    color: #8a8d91;
    text-decoration: none;
}

.language-selector a:hover {
    text-decoration: underline;
}

.language-selector a.active {
    color: #1c1e21;
    font-weight: 600;
}

/* Bouton "+" pour afficher plus de langues */
.more-languages {
    background-color: #f5f6f7;
    border: 1px solid #ccd0d5;
    color: #4b4f56;
    font-size: 16px;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.more-languages:hover {
    background-color: #ebedf0;
}

/* Ligne de séparation dans le footer */
.separator-footer {
    border-top: 1px solid #dddfe2;
    margin: 12px 0;
}

/* Liens du footer (tous les petits liens en bas) */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 16px;
}

.footer-links a {
    font-size: 12px;
    color: #8a8d91;
    text-decoration: none;
}

.footer-links a:hover {
    text-decoration: underline;
}

/* Copyright Meta en tout petit */
.copyright {
    font-size: 11px;
    color: #8a8d91;
    margin-top: 20px;
}

/* ==============================================
   RESPONSIVE DESIGN
   Adaptation pour tablettes et mobiles
   ============================================== */

/* Tablettes et écrans moyens */
@media (max-width: 992px) {
    .container-login {
        flex-direction: column;
        gap: 40px;
        padding: 60px 20px;
    }

    .left-panel {
        text-align: center;
        max-width: 100%;
    }

    .facebook-logo {
        font-size: 50px;
    }

    .tagline {
        font-size: 24px;
        line-height: 28px;
    }

    .right-panel {
        max-width: 450px;
    }
}

/* Smartphones */
@media (max-width: 576px) {
    .container-login {
        padding: 40px 16px;
    }

    .facebook-logo {
        font-size: 40px;
    }

    .tagline {
        font-size: 20px;
        line-height: 24px;
    }

    .login-form {
        padding: 20px 12px 24px;
    }

    .input-field {
        font-size: 16px;
        padding: 12px 14px;
    }

    .btn-login {
        font-size: 18px;
        padding: 12px 14px;
    }

    .btn-create-account {
        font-size: 16px;
        padding: 12px 14px;
    }

    .footer-content {
        padding: 0 16px;
    }

    .language-selector {
        gap: 8px 12px;
    }

    .footer-links {
        gap: 6px 10px;
    }
}
Télécharge rle code source complet du projet

Étape 3: Ajouter les pages dans facebook/pages/

Le but : simuler une vraie navigation comme sur le vrai site. Tu trouveras le code source complet de ces pages sur le repo github.

1) register.html (Inscription)

UI attendu :

  • carte centrée
  • formulaire plus long (nom, prénom, email, mot de passe, date de naissance…)
  • boutons propres (CTA principal + annuler / retour)

Important : cette page doit importer ../style.css.

subscribe page

2) forgot-password.html (Mot de passe oublié)

UI attendu :

  • carte simple centrée
  • un champ (email/téléphone)
  • 2 boutons (ex : “Rechercher” + “Annuler”)
forgotten password

3) pages.html (Créer une Page)

UI attendu :

  • page marketing (titres, sections, avantages)
  • CTA visible
  • blocs en colonnes ou cartes
create page

4) about.html (À propos)

UI attendu :

  • une bannière en haut (hero)
  • overlay léger (pseudo-élément ::after)
  • contenu : texte + liens + sections

Astuce : image dans assets/ + class .about-hero.

about

Étape 4 : Cohérence & navigation

Pour que ça fasse “vrai mini-site”, assure-toi que :

  • chaque page a un lien Retour (vers ../index.html)
  • le style est identique partout (même carte, mêmes boutons, mêmes polices)
  • les liens sont corrects :
    • depuis index.html → pages/...
    • depuis pages/*.html → ../index.html

Résultat

homepage facebook
  • 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.
Télécharger le code source complet du projet

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.

Conseils d’amélioration rapide

– Ajoute des effets subtils :

  • hover sur les boutons
  • underline au hover des liens

-Ajoute une icône favicon dans assets/

-Ajoute un assets/logo.svg ou image (optionnel)

-Vérifie l’affichage mobile (important pour “vrai” rendu)

Bon code !

Comments

No comments yet. Why don’t you start the discussion?

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *