Tạo kiểu cho phần đầu trang

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

Thử thách

Dễ

Trong dự án nhỏ này, bạn sẽ biến trang đích về sở thích thú vị thành hiện thực, chỉ bằng CSS.

Phần HTML đã được viết sẵn. Nhiệm vụ của bạn là tạo kiểu cho trang từng bước, như một lập trình viên front-end thực thụ. Đây là cách tuyệt vời để luyện tập bố cục thực tế, nút và các mẹo tạo kiểu!

Đây là hình xem trước sản phẩm bạn sẽ tạo ở cuối bài:

Trong thử thách đầu tiên, mình sẽ bắt đầu bằng cách tạo kiểu cho phần đầu trang: header (còn gọi là phần "hero"). Hiện tại, phần này chỉ là văn bản đơn giản ở đầu trang. Mục tiêu của bạn là biến nó thành phần giới thiệu trang gọn gàng và bắt mắt.

Thử thách CSS của bạn:

Xóa khoảng cách mặc định: đặt margin: 0 cho body và thêm màu nền cho phần này.
Tạo kiểu cho phần .hero với màu nền (rgb(30, 207, 104)) và khoảng đệm 50px.
Dùng Flexbox cho .hero để căn giữa mọi thứ:
1. display: flex
2. flex-direction: column
3. align-items: center
4. justify-content: center
5. text-align: center
Dùng .hero h1 và .hero p để tạo kiểu cho văn bản.

Hãy tạo cho phần đầu trang vẻ ngoài gọn gàng và bắt mắt.

Tự làm thử

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