Défi récapitulatif

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 25 sur 43.

Défi

Facile

Dans ce défi, vous allez créer une page web de café simple mais moderne. C'est l'occasion de mettre en pratique tout ce que vous avez appris jusqu'à présent — y compris les dégradés, les filtres CSS, les transformations et les transitions.

Votre tâche consiste à accomplir ce qui suit :

Appliquez un dégradé linéaire à l'arrière-plan de la section hero. Vous pouvez utiliser les couleurs de votre choix.
Au survol, faites pivoter légèrement le bouton CTA avec transform: rotate(-3deg) et ajoutez une transition fluide.
Appliquez un filtre sepia(60%) à l'image du café dans son état par défaut.
Au survol, changez le filtre de l'image du café en sepia(0%) et agrandissez-la 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>