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 da web simples, mas com aparência moderna, para uma cafeteria. Esta é sua chance de praticar tudo o que aprendeu até agora, incluindo linear gradient, CSS filters, transform e transition.

Sua tarefa é concluir o seguinte:

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

REQUIRED OUTPUT FORMAT: [Your translated content here]

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>