Desafio de Revisão

Parte da seção CSS Mastery do Journey de HTML da Coddy. Lição 25 de 43.

Desafio

Fácil

Neste desafio, você criará uma página de cafeteria simples, mas com visual moderno. É a sua chance de praticar tudo o que aprendeu até agora — incluindo gradientes, filtros CSS, transformações e transições.

Sua tarefa é completar o seguinte:

Aplique um gradiente linear ao fundo da seção hero. Você pode usar as cores que preferir.
Ao passar o mouse, faça o botão CTA girar levemente com transform: rotate(-3deg) e adicione uma transição suave.
Aplique um filtro sepia(60%) à imagem do café em seu estado padrão.
Ao passar o mouse, altere o filtro da imagem do café para sepia(0%) e amplie-a com transform: scale(1.1).

Experimente você mesmo

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