Sfida di ripasso

Fa parte della sezione Padronanza di CSS del percorso HTML di Coddy. Lezione 25 di 43.

Sfida

Facile

In questa sfida, creerai una pagina web per una caffetteria semplice ma dall'aspetto moderno. È la tua occasione per mettere in pratica tutto ciò che hai imparato finora, inclusi gradienti, filtri CSS, trasformazioni e transizioni.

Il tuo compito è completare quanto segue:

Applica un gradiente lineare allo sfondo della sezione hero. Puoi usare i colori che preferisci.
Al passaggio del mouse, fai ruotare leggermente il pulsante CTA con transform: rotate(-3deg) e aggiungi una transizione fluida.
Applica un filtro sepia(60%) all'immagine del caffè nel suo stato predefinito.
Al passaggio del mouse, cambia il filtro dell'immagine del caffè in sepia(0%) e ingrandiscila con transform: scale(1.1).

Provalo tu

<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>