אתגר סיכום

חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 25 מתוך 43.

אתגר

קל

באתגר הזה תיצרו דף אינטרנט פשוט אך בעל מראה מודרני לבית קפה. זו ההזדמנות שלכם לתרגל את כל מה שלמדתם עד כה, כולל מעברי צבע, מסנני CSS, טרנספורמציות ומעברים.

המשימה שלכם היא להשלים את הדברים הבאים:

החילו מעבר צבע ליניארי על הרקע של מקטע הפתיחה. תוכלו להשתמש בכל הצבעים שתרצו.
בעת ריחוף, סובבו מעט את כפתור הקריאה לפעולה באמצעות transform: rotate(-3deg) והוסיפו מעבר חלק.
החילו מסנן sepia(60%) על תמונת הקפה במצב ברירת המחדל שלה.
בעת ריחוף, שנו את מסנן תמונת הקפה ל-sepia(0%) והגדילו אותה באמצעות transform: scale(1.1).

נסו בעצמכם

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