Atur Gaya Bagian Header

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

Tantangan

Mudah

Dalam proyek mini ini, kamu akan menghidupkan landing page hobi yang seru, hanya dengan menggunakan CSS.

HTML-nya sudah ditulis untukmu. Tugasmu adalah menatanya langkah demi langkah, seperti developer front-end sungguhan. Ini cara yang bagus untuk berlatih membuat tata letak, tombol, dan trik penataan gaya yang digunakan di dunia nyata!

Berikut pratinjau hasil yang akan kamu buat:

Dalam tantangan pertama, kita akan mulai dengan menata bagian atas halaman: header (juga disebut bagian "hero"). Saat ini, bagian itu hanya berupa teks biasa di bagian atas. Tujuanmu adalah mengubahnya menjadi pengantar halaman yang rapi dan menarik perhatian.

Tantangan CSS-mu:

Hilangkan jarak bawaan: atur margin: 0 pada body, lalu tambahkan warna latar belakang.
Tata bagian .hero dengan warna latar belakang (rgb(30, 207, 104)) dan padding 50px.
Gunakan Flexbox pada .hero untuk menengahkan semua elemen:
1. display: flex
2. flex-direction: column
3. align-items: center
4. justify-content: center
5. text-align: center
Gunakan .hero h1 dan .hero p untuk menata teks.

Pastikan bagian atas halaman terlihat rapi dan menarik perhatian.

Coba sendiri

<html>
<head>
  <title>Hobby Club Landing Page</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
    
  <header class="hero">
      <div class="container">
        <h1>Welcome to Hobby Club</h1>
        <p>Find your passion. Join a community. Grow your skills.</p>
        <a href="#" class="btn">Get Started</a>
      </div>
  </header>

  <section class="features">
    <h2 class="section-title">Popular Clubs</h2>
    <div class="cards">
      <div class="feature">
        <div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/f/fa/Android_Emoji_1f4f7_red.svg" width="20px"></div>
        <h3>Photography</h3>
        <p>Capture the moment and share your perspective.</p>
      </div>
      <div class="feature">
        <div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/5/51/Emoji_u1f3a8.svg" width="20px"></div>
        <h3>Art & Design</h3>
        <p>Draw, paint, and bring your creative ideas to life.</p>
      </div>
      <div class="feature">
        <div class="icon"><img src="https://upload.wikimedia.org/wikipedia/commons/e/e6/Emoji_u1f3ae.svg" width="20px"></div>
        <h3>Gaming</h3>
        <p>Connect with fellow gamers and play your favorite titles.</p>
      </div>
    </div>
  </section>

</body>
</html>