Desafío de repaso

Parte de la sección Dominio de CSS del Journey de HTML de Coddy. Lección 25 de 43.

Desafío

Fácil

En este desafío, crearás una página web sencilla pero de aspecto moderno para una cafetería. Es tu oportunidad de practicar todo lo que has aprendido hasta ahora, incluidos los degradados, los filtros de CSS, las transformaciones y las transiciones.

Tu tarea es completar lo siguiente:

Aplica un degradado lineal al fondo de la sección principal. Puedes usar los colores que quieras.
Al pasar el cursor, haz que el botón CTA gire ligeramente con transform: rotate(-3deg) y añade una transición suave.
Aplica el filtro sepia(60%) a la imagen del café en su estado predeterminado.
Al pasar el cursor, cambia el filtro de la imagen del café a sepia(0%) y amplíala con transform: scale(1.1).

Pruébalo tú mismo

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