Objectif : Construire une page web avec une disposition similaire à celle présentée dans l'image, en utilisant HTML pour la structure et CSS pour la mise en forme.
---
Structure HTML
1. Header
Consigne :
- Créez une balise `<header>` qui contiendra le logo et le titre principal de la page.
- Utilisez `<div>` pour le logo avec une classe `logo` et un `<h1>` pour le titre principal.
2. Section Principale
Consigne :
- En dessous du `<header>`, créez une `<section>` avec une classe `main-banner`.
- À l'intérieur, ajoutez un `<h2>` pour le slogan "BEST HEADLINE IN THE WORLD" et un `<p>` pour le texte descriptif en dessous.
3. Vidéo Explicative
Consigne :
- Créez une nouvelle `<section>` avec une classe `video-explanation`.
- Utilisez un élément `<video>` ou pour simplifier, un `<div>` avec une classe `video-placeholder` pour représenter l'espace de la vidéo.
- Ajoutez une liste non ordonnée `<ul>` avec des éléments `<li>` pour les points "HOW IT WORKS".
4. À Propos de Nous
Consigne :
- Créez une autre `<section>` avec une classe `about-us`.
- Incluez un `<h2>` pour le titre "ABOUT US" et un `<p>` pour le texte descriptif.
- Ajoutez trois `<div>` avec une classe `profile-placeholder` pour représenter les images des profils.
5. Témoignages
Consigne :
- Ajoutez une `<section>` avec une classe `testimonials`.
- À l'intérieur, placez un `<h2>` pour "WHAT THEY SAY ABOUT US", un `<blockquote>` pour la citation et un `<footer>` pour le nom et le titre de la personne.
6. Footer
Consigne :
- Terminez avec un `<footer>` contenant le texte de droit d'auteur.
---
Stylisation CSS
1. Header
Consigne :
- Appliquez un style au `<header>` pour aligner le logo et le titre.
- Utilisez `display: flex;` et centrez les éléments avec `justify-content: space-between;`.
2. Section Principale
Consigne :
- Stylisez la `.main-banner` pour qu'elle ressemble à l'image, avec un fond et un espacement approprié (`padding`).
3. Vidéo Explicative
Consigne :
- Donnez un style à `.video-placeholder` pour qu'il ressemble à un lecteur vidéo (par exemple, avec un fond gris et un pseudo-élément pour le bouton de lecture).
- Stylisez la liste pour qu'elle soit alignée verticalement avec des puces personnalisées.
4. À Propos de Nous
Consigne :
- Utilisez `display: flex;` sur la `.about-us` pour aligner le texte et les placeholders des profils.
- Stylisez `.profile-placeholder` pour qu'ils ressemblent à des images de profil (cercles gris, par exemple).
5. Témoignages
Consigne :
- Centrez le texte du témoignage et stylez le `<blockquote>` et le `<footer>` pour refléter le design.
6. Footer
Consigne :
- Appliquez un style simple au `<footer>` pour inclure le texte de droit d'auteur centré et avec un fond différent si nécessaire.
Want to print your doc? This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (