Wiederholungs-Challenge

Teil des Abschnitts CSS-Meisterschaft der HTML-Journey von Coddy. Lektion 25 von 43.

Aufgabe

Einfach

In dieser Herausforderung erstellst du eine einfache, aber modern aussehende Webseite für ein Café. Das ist deine Gelegenheit, alles zu üben, was du bisher gelernt hast, einschließlich Verläufen, CSS-Filtern, Transformationen und Übergängen.

Deine Aufgabe ist es, Folgendes umzusetzen:

Wende einen linearen Verlauf auf den Hintergrund des Hero-Bereichs an. Du kannst beliebige Farben verwenden.
Lass die CTA-Schaltfläche beim Darüberfahren mit transform: rotate(-3deg) leicht rotieren und füge einen sanften Übergang hinzu.
Wende im Standardzustand den Filter sepia(60%) auf das Kaffeebild an.
Ändere beim Darüberfahren den Filter des Kaffeebilds zu sepia(0%) und vergrößere es mit transform: scale(1.1).

Probier es selbst

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