Tematización

Parte de la sección Practical Frontend del Journey de HTML de Coddy. Lección 19 de 35.

Desafío

Fácil

Ahora mejoraremos el tematizado de la página añadiendo un color de acento y una tipografía consistente.

Tu tarea:

En el :root, define las siguientes nuevas variables CSS:
--accent-color: #1e90ff;
--heading-font: 'Arial', sans-serif;
--body-font: 'Verdana', sans-serif;
Aplica estas variables en toda la página:
- Usa --body-font para el texto del body.
- Usa --heading-font para los encabezados (h1, h2).
- Establece el color de h2 a --accent-color.
- Estiliza el botón con el --accent-color como su fondo.

Objetivo: La página ahora debe tener un tema claro con fuentes consistentes y un color de acento aplicado a los encabezados y botones.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <title>Extreme Sports Adventures</title>
<style>
  /* === Variables for Theming === */
  :root {
    --primary-color: #ff4d4f;
    --secondary-color: #333;
    --bg-color: #f7f7f7;
    --text-color: #222;
    --card-bg: #ffffff;
  }

  body {
    margin: 0;
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
  }

  header {
    text-align: center;
    padding: 2rem 1rem;
    background-color: var(--primary-color);
    color: #fff;
    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 {
    background-color: var(--card-bg);
    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 {
    background-color: var(--primary-color);
    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">
     <picture>
      <source media="(min-width: 768px)" srcset="https://upload.wikimedia.org/wikipedia/commons/3/32/Parachuting_sport.jpg">
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/32/Parachuting_sport.jpg/960px-Parachuting_sport.jpg" alt="Skydiving">
    </picture>
  </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>