Assignement HTML / CSS

TP4 : Création d'une page web structurée

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 (

CtrlP

) instead.