Daha Fazla Stil Verme

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 19 / 43.

Görev

Kolay

Yapısal ve kardeş seçicileri kullanarak belirli paragrafları ve menü öğelerini hedefleyelim ve her birine farklı stiller uygulayalım.

.info-section içindeki ilk paragrafı (first child) stillendirin. Öne çıkması için yazı tipi boyutunu (20px) ve ağırlığını değiştirin.
.intro sınıfına sahip olan paragraftan sonra gelen tüm paragrafları (general sibling) stillendirin. Daha kolay okunmalarını sağlamak için bir dolgu (padding) ekleyin.
Üst navigasyondaki her tek numaralı menü öğesini (nth-child) stillendirin. Çizgili bir efekt oluşturmak için onlara farklı bir renk verin.

Kendin dene

<html>
<head>
  <title>Dropdown Menu</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
 <section class="menu-panel">
  <h2>Hobby Club</h2>
  <nav class="top-menu">
    <ul class="menu-list">
      <li class="menu-item">Photography</li>
      <li class="menu-item">Cooking</li>
      <li class="menu-item has-submenu">
        Games
        <ul class="submenu">
          <li>Board Games</li>
          <li>Card Games</li>
          <li>Video Games</li>
        </ul>
      </li>
      <li class="menu-item">Drawing</li>
      <li class="menu-item">Music</li>
    </ul>
  </nav>
  <div class="menu-controls">
    <input type="text" class="search" placeholder="Search activities..." />
    <button class="cta-button">Join a Club!</button>
  </div>
  <div class="info-section">
    <p class="intro">Welcome to the Hobby Club community!</p>
    <p>Joining a hobby club is a great way to meet people who share your interests.</p>
    <p>You can learn new skills, have fun, and even discover talents you didn’t know you had!</p>
   </div>
</section>
</body>
</html>