Laboratoire 3

Exercice 1:

Objectif: Créer une page de destination pour une application mobile fictive avec une bannière d'en-tête, une section de fonctionnalités et une section de témoignages.

Instructions:

Créez un document HTML de base avec une structure de page appropriée, y compris une en-tête, une section de fonctionnalités et une section de témoignages.
Ajoutez une image pour la bannière d'en-tête et ajoutez un texte d'en-tête sur l'image.
Utilisez CSS pour centrer le texte de l'en-tête, changer la couleur de fond et modifier la police et la taille du texte.
Ajoutez une section de fonctionnalités avec trois colonnes. Ajoutez des icônes pour chaque fonctionnalité et utilisez CSS pour aligner les icônes, le texte et les boutons.
Utilisez CSS pour ajouter une bordure et un fond à chaque colonne de fonctionnalité, et ajouter une transition pour la couleur de fond des colonnes lorsqu'elles sont survolées avec la souris.
Ajoutez une section de témoignages avec des citations de clients. Utilisez CSS pour ajouter une bordure, modifier la police et la taille du texte et ajouter une couleur de fond à la section de témoignages.
Ajoutez une animation CSS pour faire défiler les témoignages automatiquement après quelques secondes.
Ajoutez un style CSS pour rendre le site web réactif afin qu'il puisse s'adapter à différents appareils et tailles d'écran.

Le code HTML suivant vous est fourni:


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Application mobile fictive</title>
    <link rel="stylesheet" type="text/css" href="exercice1.css">
</head>
<body>
    <header>
        <img src="https://via.placeholder.com/800x200" alt="Bannière">
        <div class="header-text">
            <h1>Titre de l'application</h1>
            <p>Description de l'application</p>
            <button>Télécharger</button>
        </div>
    </header>

    <section class="features">
        <div class="feature">
            <img src="https://via.placeholder.com/50x50" alt="Icône fonctionnalité 1">
            <h2>Fonctionnalité 1</h2>
            <p>Description de la fonctionnalité 1</p>
            <button>En savoir plus</button>
        </div>
        <div class="feature">
            <img src="https://via.placeholder.com/50x50" alt="Icône fonctionnalité 2">
            <h2>Fonctionnalité 2</h2>
            <p>Description de la fonctionnalité 2</p>
            <button>En savoir plus</button>
        </div>
        <div class="feature">
            <img src="https://via.placeholder.com/50x50" alt="Icône fonctionnalité 3">
            <h2>Fonctionnalité 3</h2>
            <p>Description de la fonctionnalité 3</p>
            <button>En savoir plus</button>
        </div>
    </section>

    <section class="testimonials">
        <h2>Témoignages de clients</h2>
        <div class="testimonial">
            <p>« J'ai adoré utiliser cette application, c'est très facile à utiliser et ça m'a vraiment aidé à organiser ma vie. »</p>
            <p class="author">- Jane Doe</p>
        </div>
        <div class="testimonial">
            <p>« Cette application est incroyable, je ne peux plus m'en passer. Cela a vraiment amélioré ma productivité. »</p>
            <p class="author">- John Smith</p>
        </div>
        <div class="testimonial">
            <p>« Je recommande cette application à tous mes amis, c'est vraiment la meilleure application de ce type sur le marché. »</p>
            <p class="author">- Sarah Johnson</p>
        </div>
    </section>

</body>
</html>

Laboratoire 4: CSS (Suite)

Exercice 1:

Instructions:

Exercice 2: