تحدي المراجعة

جزء من قسم CSS Mastery في رحلة HTML على Coddy. الدرس 25 من 43.

التحدي

سهل

في هذا التحدي، ستقوم بإنشاء صفحة ويب بسيطة ولكنها ذات مظهر عصري لمقهى. إنها فرصتك لـ ممارسة كل ما تعلمته حتى الآن — بما في ذلك التدرجات (gradients)، وفلاتر CSS، والتحويلات (transforms)، والانتقالات (transitions).

مهمتك هي إكمال ما يلي:

قم بتطبيق تدرج خطي (linear gradient) على خلفية قسم الـ hero. يمكنك استخدام أي ألوان تفضلها.
عند تمرير الماوس (hover)، اجعل زر CTA يدور قليلاً باستخدام transform: rotate(-3deg) وأضف انتقالاً (transition) سلساً.
قم بتطبيق فلتر sepia(60%) على صورة القهوة في حالتها الافتراضية.
عند تمرير الماوس (hover)، قم بتغيير فلتر صورة القهوة إلى 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>