Défi récapitulatif

Fait partie de la section Maîtrise du CSS du Journey HTML de Coddy. Leçon 25 sur 43.

Défi

Facile

Dans ce défi, tu vas créer une page web pour un café, simple mais d’apparence moderne. C’est l’occasion de mettre en pratique tout ce que tu as appris jusqu’à présent, notamment les dégradés, les filtres CSS, les transformations et les transitions.

Ta tâche consiste à réaliser les éléments suivants :

Appliquer un dégradé linéaire à l’arrière-plan de la section hero. Tu peux utiliser les couleurs de ton choix.
Au survol, faire légèrement pivoter le bouton CTA avec transform: rotate(-3deg) et ajouter une transition fluide.
Appliquer le filtre sepia(60%) à l’image du café dans son état par défaut.
Au survol, modifier le filtre de l’image du café pour utiliser sepia(0%) et l’agrandir avec transform: scale(1.1).

Essayez vous-même

<html>
<head>
    <style>
        * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
         text-align: center;
        }

        /* Hero Section with Gradient */
        .hero {
            padding: 80px 20px;
            color: #3e2723;
        }

        .hero h1 {
            font-size: 3rem;
            margin-bottom: 10px;
        }

        .hero p {
            font-size: 1.2rem;
            margin-bottom: 20px;
        }

        .cta-btn {
            background-color: #8d6e63;
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 1rem;
        }
        /* Gallery section */
        .gallery {
            padding: 50px 20px;
            background: #fffaf0;
        }

        .gallery h2 {
            margin-bottom: 20px;
            font-size: 2rem;
            color: #4e342e;
        }

        .coffee-img {
            max-width: 300px;
            border-radius: 12px;
        }
        /*Add your CSS here */

    </style>
</head>
<body>
  <header class="hero">
    <h1>Welcome to Coffee Bliss</h1>
    <p>Your daily dose of joy in a cup</p>
    <button class="cta-btn">Order Now</button>
  </header>

  <section class="gallery">
    <h2>Our Signature Blend</h2>
    <img src="https://images.unsplash.com/photo-1509042239860-f550ce710b93?auto=format&fit=crop&w=600&q=80" alt="Cup of Coffee" class="coffee-img" />
  </section>
</body>
</html>