<!
doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Rend la page responsive : adapte la largeur au format du téléphone ou de
l’écran -->
<title>Mon Site Coloré</title>
<!-- Titre de la page (visible dans l’onglet du navigateur) -->
<!-- Bootstrap 5 : bibliothèque CSS pour la mise en page responsive -->
<link
href="[Link]
rel="stylesheet">
<nav class="navbar navbar-expand-lg navbar-dark bg-gradient-primary shadow">
<!-- navbar : composant Bootstrap pour le menu -->
<!-- navbar-expand-lg : menu horizontal sur grand écran, vertical sur petit -->
<!-- navbar-dark : texte clair -->
<!-- bg-gradient-primary : couleur de fond personnalisée (dégradé dans
[Link]) -->
<!-- shadow : effet d’ombre -->
<div class="container"> <!-- Centre et limite la largeur du contenu -->
<a class="navbar-brand fw-bold fs-3" href="#">MonSite</a>
<!-- navbar-brand : logo ou nom du site -->
<!-- fw-bold : texte en gras / fs-3 : grande taille de police -->
<!-- href="#" : lien vers le haut de la page -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarNav">
<!-- Bouton affiché uniquement sur mobile pour ouvrir/fermer le menu -->
<span class="navbar-toggler-icon"></span>
<!-- Icône "burger" -->
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<!-- collapse : partie du menu qui se replie sur mobile -->
<!-- id="navbarNav" : relié au bouton ci-dessus -->
<ul class="navbar-nav ms-auto">
<!-- ms-auto : pousse le menu à droite -->
<li class="nav-item"><a class="btn btn-pink m-1" href="#">Accueil</a></li>
<li class="nav-item"><a class="btn btn-success m-1"
href="#services">Services</a></li>
<li class="nav-item"><a class="btn btn-warning m-1"
href="#projets">Projets</a></li>
<li class="nav-item"><a class="btn btn-info m-1"
href="#contact">Contact</a></li>
<!-- Chaque bouton mène à une section différente
m-1 : est un margin de dimension 0,25 rem
-->
</ul>
</div>
</div>
</nav>
<!-- ================= HERO SECTION (bannière d’accueil) ========= -->
<header class="hero text-white text-center d-flex align-items-center">
<!-- hero : classe personnalisée (dans [Link]) -->
<!-- text-white : texte blanc -->
<!-- text-center : texte centré -->
<!-- d-flex align-items-center : centre verticalement le contenu avec Flexbox -->
<div class="container py-5">
<!-- py-5 : padding vertical (haut/bas) -->
<h1 class="display-5 fw-bold">Bienvenue dans mon univers coloré </h1>
<!-- display-5 : très grand titre -->
<!-- fw-bold : texte gras -->
<p class="lead mb-4">Un site moderne, dynamique et plein de couleurs.</p>
<!-- lead : texte de description plus grand -->
<!-- mb-4 : marge inférieure -->
<a href="#services" class="btn btn-lg btn-light text-primary shadow-sm me-2 mb-
2">Voir les services</a>
<!-- btn-lg : bouton large / btn-light : bouton clair -->
<!-- text-primary : texte bleu / shadow-sm : petite ombre -->
<!-- me-2 : marge à droite -->
<a href="#projets" class="btn btn-lg btn-warning shadow-sm mb-2">Voir les
projets</a>
</div>
</header>
<!-- ================= SERVICES SECTION ================= -->
<section id="services" class="py-5 text-center">
<!-- id="services" : ancre pour les liens -->
<!-- py-5 : espace vertical -->
<!-- text-center : texte centré -->
<div class="container">
& Nos Services</h2>
%
$
#
"
<h2 class="mb-4 text-primary">!
<div class="row g-4">
<!-- row : ligne Bootstrap -->
<!-- g-4 : espace entre les colonnes -->
<!-- Colonne 1 -->
<div class="col-md-4">
<div class="card h-100 shadow border-0">
<!-- card : carte Bootstrap -->
<!-- h-100 : prend toute la hauteur disponible -->
<!-- border-0 : sans bordure -->
<!-- shadow : effet d’ombre -->
<div class="card-body">
<h5 class="text-pink">🎨 Design Web</h5>
<p>Des interfaces attrayantes et colorées, pensées pour vos utilisateurs.</p>
<a href="#" class="btn btn-pink">Découvrir</a>
</div>
</div>
</div>
<!-- Colonne 2 -->
<div class="col-md-4">
<div class="card h-100 shadow border-0">
<div class="card-body">
<h5 class="text-success">💻 Développement</h5>
<p>Des solutions modernes, responsives et rapides avec Bootstrap.</p>
<a href="#" class="btn btn-success">Explorer</a>
</div>
</div>
</div>
<!-- Colonne 3 -->
<div class="col-md-4">
<div class="card h-100 shadow border-0">
<div class="card-body">
<h5 class="text-warning">📚 Formation</h5>
<p>Apprenez à créer vos propres sites web colorés et modernes.</p>
<a href="#" class="btn btn-warning">Commencer</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ================= PROJETS SECTION ================= -->
<section id="projets" class="py-5 bg-light text-center">
<!-- bg-light : fond clair -->
<div class="container">
0 Projets Récents</h2>
/
.
-
,
+
<h2 class="mb-4 text-success">*
<div class="row g-4">
<!-- Projet 1 -->
<div class="col-md-4 col-sm-6">
<div class="card shadow border-0">
<img src="[Link] class="card-img-top"
alt="Projet 1">
<div class="card-body">
<h5>Projet Coloré 1</h5>
<p>Un design vibrant et créatif.</p>
</div>
</div>
</div>
<!-- Projet 2 -->
<div class="col-md-4 col-sm-6">
<div class="card shadow border-0">
<img src="[Link] class="card-img-top"
alt="Projet 2">
<div class="card-body">
<h5>Projet Coloré 2</h5>
<p>Une interface moderne et dynamique.</p>
</div>
</div>
</div>
<!-- Projet 3 -->
<div class="col-md-4 col-sm-6 mx-auto">
<div class="card shadow border-0">
<img src="[Link] class="card-img-top"
alt="Projet 3">
<div class="card-body">
<h5>Projet Coloré 3</h5>
<p>Une expérience utilisateur unique.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ================= CONTACT SECTION ================= -->
<section id="contact" class="py-5 text-center">
<div class="container">
6 Contactez-nous</h2>
5
4
3
2
<h2 class="mb-4 text-info">1
<form class="p-4 mx-auto bg-white rounded shadow" style="max-width: 500px;">
<!-- p-4 : padding intérieur / mx-auto : centré -->
<!-- bg-white : fond blanc / rounded : coins arrondis / shadow : ombre -->
<input type="text" class="form-control mb-3" placeholder="Votre nom">
<input type="email" class="form-control mb-3"
placeholder="email@[Link]">
<textarea class="form-control mb-3" rows="4" placeholder="Votre
message..."></textarea>
<button type="submit" class="btn btn-info text-white w-100">Envoyer</button>
<!-- w-100 : bouton prend toute la largeur -->
</form>
</div>
</section>
<!-- ================= FOOTER ================= -->
<footer class="py-4 bg-dark text-light text-center">
<p class="mb-1">© 2025 MonSite Coloré. Tous droits réservés.</p>
<div>
<a href="#" class="btn btn-outline-light btn-sm me-2">Twitter</a>
<a href="#" class="btn btn-outline-light btn-sm me-2">LinkedIn</a>
<a href="#" class="btn btn-outline-light btn-sm">GitHub</a>
</div>
</footer>
<!—me-4 : margin end qui vaut 1.2 em equivalent à 24 px- ->
<!-- ================= Bootstrap JS ================= -->
<script
src="[Link]
cript>
<!-- Charge les fonctions interactives Bootstrap (navbar responsive, etc.) -->
</body>
</html>
Fichier [Link]
/* ==========================
VARIABLES CSS GLOBALES
========================== */
:root {
--pink: #e83e8c;
/* Déclare une variable CSS nommée "pink" utilisée pour la couleur rose */
--primary: #0d6efd;
/* Déclare une variable CSS nommée "primary" pour la couleur principale (bleue) */
}
/* ==========================
STYLE GLOBAL DU CORPS DE PAGE
========================== */
body {
font-family: "Poppins", Arial, sans-serif; /* Définit la police principale du site */
background-color: #fdfdfd;
/* Définit la couleur d’arrière-plan du corps de la page */
color: #333; /* Définit la couleur du texte (gris foncé) */
}
/* ==========================
BARRE DE NAVIGATION (NAVBAR)
========================== */
.bg-gradient-primary {
background: linear-gradient(90deg, var(--primary), var(--pink));
/* Crée un dégradé horizontal du bleu vers le rose
en utilisant les variables CSS définies plus haut */
}
/* ==========================
SECTION HERO (EN-TÊTE COLORÉ)
========================== */
.hero {
min-height: 70vh;
/* Définit une hauteur minimale de 70% de la hauteur de l’écran */
background: linear-gradient(135deg, #6f42c1, #20c997);
/* Crée un dégradé diagonal violet → vert pour le fond du hero */
}
/* ==========================
BOUTONS PERSONNALISÉS (ROSES)
========================== */
.btn-pink {
background-color: var(--pink); /* Utilise la couleur rose comme fond du bouton */
color: #fff; /* Texte du bouton en blanc */
}
.btn-pink:hover {
background-color: #d63384; /* Change légèrement le rose au survol de la souris
*/
color: #fff; /* Le texte reste blanc */
}
/* ==========================
CARTES DE SERVICES
========================== */
.service-card {
transition: transform 0.3s ease; /* Ajoute une animation fluide lors du survol */
}
.service-card:hover {
transform: translateY(-8px); /* Fait remonter légèrement la carte au survol */
}
/* ==========================
IMAGES DES PROJETS
========================== */
.project-card img {
height: 220px; /* Fixe la hauteur de l’image */
object-fit: cover; /* Recadre l’image sans la déformer */
border-top-left-radius: .75rem; /* Arrondit le coin supérieur gauche */
border-top-right-radius: .75rem; /* Arrondit le coin supérieur droit */
}
/* ==========================
PIED DE PAGE (FOOTER)
========================== */
footer {
background: linear-gradient(90deg, #343a40, #212529);
/* Crée un dégradé sombre horizontal (gris foncé vers noir) */
}