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

جزء من قسم 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>