Wiederholungs-Challenge

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

Aufgabe

Einfach

In dieser Herausforderung erstellen Sie eine einfache, aber modern aussehende Webseite für ein Café. Es ist Ihre Chance, alles zu üben, was Sie bisher gelernt haben — einschließlich Gradients, CSS-Filter, Transforms und Transitions.

Ihre Aufgabe ist es, Folgendes abzuschließen:

Wenden Sie einen linear gradient auf den Hintergrund des Hero-Bereichs an. Sie können beliebige Farben verwenden.
Lassen Sie die CTA-Schaltfläche beim Darüberfahren (Hover) mit transform: rotate(-3deg) leicht rotieren und fügen Sie eine geschmeidige transition hinzu.
Wenden Sie im Standardzustand einen filter sepia(60%) auf das Kaffeebild an.
Ändern Sie beim Darüberfahren den Filter des Kaffeebildes auf sepia(0%) und vergrößern Sie 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>