Stylizacja sekcji nagłówka

Część sekcji Mistrzowskie opanowanie CSS ścieżki HTML w Coddy. Lekcja 26 z 43.

Wyzwanie

Łatwy

W tym miniprojekcie ożywisz ciekawą stronę powitalną klubu hobbystycznego, używając wyłącznie CSS.

Kod HTML jest już przygotowany. Twoim zadaniem jest stylizować go krok po kroku, tak jak robi to prawdziwy programista front-end. To świetny sposób, aby poćwiczyć układy stron, przyciski i triki związane ze stylizacją, które przydają się w praktyce!

Oto podgląd tego, co stworzysz na koniec:

W pierwszym wyzwaniu zaczniemy od stylizacji górnej części strony: nagłówka (nazywanego też sekcją „hero”). Na razie to tylko zwykły tekst u góry strony. Twoim celem jest przekształcenie go w przejrzyste i przyciągające wzrok wprowadzenie.

Twoje wyzwanie CSS:

Usuń domyślne odstępy: ustaw margin: 0 dla body i dodaj mu kolor tła.
Nadaj sekcji .hero kolor tła (rgb(30, 207, 104)) i padding 50px.
Użyj Flexboxa w sekcji .hero, aby wyśrodkować wszystkie elementy:
1. display: flex
2. flex-direction: column
3. align-items: center
4. justify-content: center
5. text-align: center
Użyj .hero h1 i .hero p, aby wystylizować tekst.

Upewnij się, że górna sekcja wygląda przejrzyście i przyciąga wzrok.

Spróbuj swoich sił

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