Plus de styles

Fait partie de la section Maîtrise du CSS du Journey HTML de Coddy. Leçon 19 sur 43.

Défi

Facile

Ciblons des paragraphes et des éléments de menu spécifiques, puis appliquons à chacun des styles différents à l’aide de sélecteurs structurels et de sélecteurs de frères.

Stylisez le premier paragraphe (premier enfant) à l’intérieur de .info-section. Modifiez sa taille de police (20px) et son épaisseur pour le mettre en évidence.
Stylisez tous les paragraphes qui suivent (frères généraux) celui qui possède la classe .intro. Ajoutez une marge intérieure pour les rendre plus faciles à lire.
Stylisez chaque élément de menu impair (nth-child) dans la navigation supérieure. Donnez-leur une couleur différente pour créer un effet rayé.

Essayez vous-même

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