Recap Challenge

Part of the Practical Frontend section of Coddy's HTML journey. Lesson 16 of 35.

Challenge

Easy

You are given an HTML page about investing and financial freedom. Your task is to use what you’ve learned about theming:

Primary & Secondary Colors
- Define --primary-color and --secondary-color in :root.
- Use --primary-color for the header and footer backgrounds, and --secondary-color for the body background.
Dark Mode
- Create a .dark-mode class that changes the background, text, and heading colors.
- Test it by manually adding class="dark-mode" to <body>.
Accent Color
- Define --accent-color and use it for the button background color and footer link text color (rgb(249, 168, 37)).
Typography
- Define --h1-size and --h2-size and apply them to headings.

Goal: Make the page look consistent, professional, and easy to read in both light and dark themes.

Try it yourself

<!DOCTYPE html>
<html>
<head>
  <title>Recap Challenge</title>
  <style>
    /*  Theme variables */
    :root {
      --text-color: #333333;
      --heading-color: #1a3a6d;

      --primary-font: "Georgia", serif;
      --secondary-font: "Arial", sans-serif;
    }

    body {
      font-family: var(--primary-font);
      color: var(--text-color);
      margin: 0;
      line-height: 1.6;
    }

    header {
      color: white;
      text-align: center;
      padding: 2rem 1rem;
      background-color: #000000;
    }

    h1 {
      font-family: var(--secondary-font);
      margin-bottom: 0.5rem;
    }

    h2 {
      font-family: var(--secondary-font);
      color: var(--heading-color);
    }

    main {
      max-width: 800px;
      margin: 2rem auto;
      padding: 1rem;
    }

    section {
      margin-bottom: 2rem;
      background: #fff;
      padding: 1.5rem;
      border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    ul li {
      margin-bottom: 0.6rem;
    }

    button {
      background-color: #000000;
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      font-size: 1rem;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
    }

    button:hover {
      background: #c17900;
    }

    footer {
      text-align: center;
      padding: 1rem;
      color: white;
      background-color: #000000;
    }

    a {
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <header>
    <h1>Financial Freedom</h1>
    <p>Smart habits for building wealth and living on your own terms.</p>
  </header>

  <main>
    <section>
      <h2>What is Financial Freedom?</h2>
      <p>Financial freedom means having enough savings, investments, and cash on hand to afford the lifestyle you want, without worrying about money day-to-day.</p>
    </section>

    <section>
      <h2>Timeless Investing Advice</h2>
      <ul>
        <li>Start early — the power of compounding works best with time.</li>
        <li>Live below your means and save consistently.</li>
        <li>Diversify your investments to reduce risk.</li>
        <li>Stay patient — avoid emotional decisions during market ups and downs.</li>
      </ul>
    </section>

    <section>
      <h2>Money Mindset</h2>
      <p>Money is less about numbers and more about behavior. Your mindset and habits matter more than chasing the highest returns.</p>
      <button>Learn More</button>
    </section>
  </main>

  <footer>
    <p>More resources on <a href="#">Investing & Financial Freedom</a></p>
  </footer>
</body>
</html>