Explore

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 ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.