אתגר סיכום

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-HTML של Coddy. שיעור 16 מתוך 35.

אתגר

קל

ניתן לך דף HTML בנושא השקעות וחופש כלכלי. המשימה שלך היא להשתמש במה שלמדת על עיצוב ערכות נושא:

צבעים ראשיים ומשניים
- הגדירו את --primary-color ואת --secondary-color בתוך :root.
- השתמשו ב---primary-color לרקעים של הכותרת העליונה ושל הכותרת התחתונה, וב---secondary-color לרקע של גוף הדף.
מצב כהה
- צרו מחלקה בשם .dark-mode שמשנה את צבעי הרקע, הטקסט והכותרות.
- בדקו זאת על ידי הוספה ידנית של class="dark-mode" אל <body>.
צבע הדגשה
- הגדירו את --accent-color והשתמשו בו עבור צבע הרקע של הכפתור ועבור צבע הטקסט של הקישור בכותרת התחתונה (rgb(249, 168, 37)).
טיפוגרפיה
- הגדירו את --h1-size ואת --h2-size והחילו אותם על הכותרות.

מטרה: לגרום לדף להיראות אחיד, מקצועי וקל לקריאה גם בערכות נושא בהירות וגם בערכות נושא כהות.

נסו בעצמכם

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