Desafio de Revisão

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

Desafio

Fácil

Neste desafio, você criará uma página da cafeteria simples, mas com aparência moderna. Esta é sua chance de praticar tudo o que aprendeu até agora, incluindo gradientes, filtros CSS, transformações e transições.

Sua tarefa é concluir o seguinte:

Aplique um gradiente linear ao plano de fundo da seção principal. Você pode usar as cores que quiser.
Ao passar o mouse, faça o botão de CTA girar levemente com transform: rotate(-3deg) e adicione uma transição suave.
Aplique o 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 aumente-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>