Variablen

Teil des Abschnitts Practical Frontend der HTML-Journey von Coddy — Lektion 17 von 35.

Aufgabe

Einfach

Wir haben eine Seite über Extreme Sports. Im Moment sieht sie noch nicht sehr ansprechend oder ausgefeilt aus. In den nächsten Lektionen werden wir sie Schritt für Schritt verbessern, indem wir das Gelernte anwenden: CSS-Variablen, die Mobile-First-Strategie und einige Theming-Techniken.

So könnte die Seite am Ende aussehen (die genauen Farben und Stile liegen bei dir):

Wir beginnen damit, das Aussehen der Extreme Sports Seite mithilfe von CSS-Variablen zu verbessern.

Deine Aufgabe:

Erstelle im :root die folgenden Variablen:
- --primary-color
- --secondary-color
- --bg-color
- --text-color
- --card-bg
Weise ihnen beliebige Farbwerte zu.
Wende diese Variablen in den Styles an:
- Setze --bg-color und --text-color für den <body>.
- Verwende --primary-color als Hintergrundfarbe für den <header>.
- Wende --card-bg als Hintergrundfarbe für die Abschnitte description und fun facts an.
- Verwende --secondary-color für Highlights (zum Beispiel: Überschriften, Buttons oder Akzenttext).

Spickzettel

CSS-Variablen werden im :root-Selektor definiert und können im gesamten Stylesheet verwendet werden:

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

Verwenden Sie CSS-Variablen mit der var()-Funktion:

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

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

Probier es selbst

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