Thử thách ôn tập

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 25 trên 43.

Thử thách

Dễ

Trong thử thách này, bạn sẽ tạo một trang web quán cà phê đơn giản nhưng hiện đại. Đây là cơ hội để bạn luyện tập mọi thứ đã học đến giờ, bao gồm gradient, bộ lọc CSS, phép biến đổi và hiệu ứng chuyển tiếp.

Nhiệm vụ của bạn là hoàn thành các yêu cầu sau:

Áp dụng gradient tuyến tính cho nền của phần hero. Bạn có thể dùng màu sắc tùy thích.
Khi di chuột qua, làm cho nút CTA xoay nhẹ bằng transform: rotate(-3deg) và thêm hiệu ứng chuyển tiếp mượt mà.
Áp dụng bộ lọc sepia(60%) cho ảnh cà phê ở trạng thái mặc định.
Khi di chuột qua, đổi bộ lọc của ảnh cà phê thành sepia(0%), phóng to ảnh bằng transform: scale(1.1).

Tự làm thử

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