Explication détaillée du code HTML (ligne par
ligne)
Ce document explique le code HTML fourni. Chaque section (header, main, section, etc.) est
décrite pour vous aider à comprendre le rôle des balises, des class et des id dans la structure d’un
site web moderne.
<body>
Contient tout le contenu visible de la page web (menu, sections, images, pied de page).
<header class='header' id='header'>
En-tête du site. L’attribut id='header' permet de le cibler en JavaScript ou CSS. La classe header
sert au style.
<nav class='nav container'>
Menu de navigation. container sert à centrer et limiter la largeur.
nav__logo
Logo ou nom du site affiché dans le menu.
nav__menu (id='nav-menu')
Menu principal. L’ID est utilisé en JavaScript pour ouvrir/fermer le menu sur mobile.
nav__list / nav__link
Liste des liens de navigation. Chaque lien pointe vers une section grâce aux ancres (#home,
#products…).
nav__close
Bouton pour fermer le menu (icône X). Utilisé en version mobile.
nav__toggle
Bouton pour ouvrir le menu (icône menu).
<main class='main'>
Contenu principal du site (toutes les sections importantes).
<section id='home'>
Section d’accueil. L’ID permet d’y accéder avec un lien (#home).
home__container container grid
Conteneur principal utilisant le système de grille CSS (grid).
home__data
Contient le texte principal : titre, description et boutons.
home__images
Contient toutes les images décoratives de la section Home.
<section id='favorites'>
Section des produits favoris avec un carrousel (Swiper).
swiper / swiper-slide
Classes utilisées par la librairie Swiper JS pour créer le slider.
<section id='care'>
Section expliquant les avantages santé des produits.
care__list
Liste d’éléments avec icônes et descriptions.
<section class='banner'>
Bannière informative mettant en avant des qualités du produit.
<section id='products'>
Section des produits les plus vendus.
products__card
Carte produit individuelle avec image, nom, prix et bouton d’achat.
<section id='contact'>
Section contact avec réseaux sociaux, téléphone et adresse.
<footer>
Pied de page contenant le logo, les liens légaux et le copyright.
scrollup (id='scroll-up')
Bouton permettant de revenir en haut de la page.
ScrollReveal
Bibliothèque JavaScript pour les animations lors du scroll.
Swiper JS
Bibliothèque JavaScript utilisée pour le carrousel des favoris.
[Link]
Fichier JavaScript principal qui gère les interactions (menu, scroll, animations).