Tantangan Rangkuman

Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 25 dari 43.

Tantangan

Mudah

Dalam tantangan ini, kamu akan membuat halaman web kedai kopi yang sederhana tetapi terlihat modern. Ini kesempatanmu untuk berlatih semua yang sudah kamu pelajari sejauh ini, termasuk gradien, filter CSS, transformasi, dan transisi.

Tugasmu adalah menyelesaikan hal-hal berikut:

Terapkan gradien linear pada latar belakang bagian hero. Kamu bisa menggunakan warna apa pun yang kamu suka.
Saat diarahkan, buat tombol CTA sedikit berputar dengan transform: rotate(-3deg) dan tambahkan transisi yang mulus.
Terapkan filter sepia(60%) pada gambar kopi dalam keadaan default.
Saat diarahkan, ubah filter gambar kopi menjadi sepia(0%), lalu perbesar gambar dengan transform: scale(1.1).

Coba sendiri

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