Variables

Fait partie de la section Practical Frontend du Journey HTML de Coddy — leçon 17 sur 35.

Défi

Facile

Nous avons une page sur les Sports Extrêmes. Pour l'instant, elle n'est pas très esthétique ni aboutie. Au cours des prochaines leçons, nous l'améliorerons étape par étape en appliquant ce que nous avons appris : les variables CSS, la stratégie mobile-first et quelques techniques de thématisation.

Voici à quoi la page pourrait ressembler à la fin (les couleurs et styles exacts dépendent de vous) :

Nous allons commencer par améliorer l'apparence de la page des Sports Extrêmes en utilisant des variables CSS.

Votre tâche :

Dans le :root, créez les variables suivantes :
- --primary-color
- --secondary-color
- --bg-color
- --text-color
- --card-bg
Attribuez-leur les valeurs de couleur de votre choix.
Appliquez ces variables dans l'ensemble des styles :
- Définissez --bg-color et --text-color pour le <body>.
- Utilisez --primary-color comme couleur d'arrière-plan pour le <header>.
- Appliquez --card-bg comme couleur d'arrière-plan pour les sections description et fun facts.
- Utilisez --secondary-color pour les éléments mis en évidence (par exemple : les titres, les boutons ou le texte d'accentuation).

Aide-mémoire

Les variables CSS sont définies dans le sélecteur :root et peuvent être utilisées dans toute votre feuille de style :

:root {
  --primary-color: #value;
  --secondary-color: #value;
  --bg-color: #value;
  --text-color: #value;
  --card-bg: #value;
}

Utilisez les variables CSS avec la fonction var() :

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

header {
  background-color: var(--primary-color);
}

Essayez vous-même

<!DOCTYPE html>
<html>
<head>
  <title>Extreme Sports Adventures</title>
  <style>
  /* === Variables === */

  body {
    margin: 0;
    line-height: 1.6;
  }

  header {
    text-align: center;
    padding: 2rem 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  }

  header h1 {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
  }

  header p {
    margin: 0;
    font-size: 1.1rem;
  }

  main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .hero {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  }

  .hero img {
    width: 100%;
    height: 350px;
    object-fit: cover;
  }

  .description, .facts {
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }

  .description h2, .facts h2 {
    margin-top: 0;
  }

  .btn {
    display: inline-block;
    margin-top: 1rem;
    padding: 10px 20px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 8px;
    transition: transform 0.3s, background-color 0.3s;
  }

  .btn:hover {
    transform: scale(1.05);
  }

  ul {
    padding-left: 20px;
  }
</style>
</head>
<body>
<header>
  <h1>Extreme Sports Adventures</h1>
  <p>Feel the adrenaline with the world's most thrilling sports!</p>
</header>

<main>
  <section class="hero">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Parachuting_sport.jpg/960px-Parachuting_sport.jpg" alt="Skydiving">
  </section>

  <section class="description">
    <h2>What is Extreme Sports?</h2>
    <p>Extreme sports are activities that involve high risks and adrenaline. From skydiving and rock climbing to snowboarding and bungee jumping, these sports push your limits and give an unforgettable thrill.</p>
    <a href="#" class="btn">Learn More</a>
  </section>

  <section class="facts">
    <h2>Fun Facts</h2>
    <ul>
      <li>Skydiving reaches speeds over 120 mph during free fall.</li>
      <li>Bungee jumping started as a ritual in Vanuatu called "land diving."</li>
      <li>Rock climbing requires both strength and strategy.</li>
      <li>Snowboarding evolved from surfing and skateboarding.</li>
    </ul>
  </section>
</main>
</body>
</html>