Plus de styles

Fait partie de la section CSS Mastery du Journey HTML de Coddy — leçon 19 sur 43.

Défi

Facile

Ciblons des paragraphes et des éléments de menu spécifiques et appliquons-leur des styles différents en utilisant des sélecteurs structurels et de voisinage.

Stylez le premier paragraphe (premier enfant) à l'intérieur de .info-section. Modifiez sa taille de police (20px) et sa graisse pour le faire ressortir.
Stylez tous les paragraphes qui suivent (voisin général) celui qui possède la classe .intro. Ajoutez un padding pour les rendre plus faciles à lire.
Stylez 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>