تحدي المراجعة

جزء من قسم Practical Frontend في رحلة HTML على Coddy. الدرس 16 من 35.

التحدي

سهل

لقد تم تزويدك بصفحة HTML حول الاستثمار والحرية المالية. مهمتك هي استخدام ما تعلمته حول السمات (theming):

الألوان الأساسية والثانوية
- قم بتعريف --primary-color و --secondary-color في :root.
- استخدم --primary-color لخلفيات header و footer، و --secondary-color لخلفية body.
الوضع الداكن (Dark Mode)
- أنشئ فئة .dark-mode تقوم بتغيير ألوان الخلفية والنص والعناوين.
- اختبرها عن طريق إضافة class="dark-mode" يدويًا إلى <body>.
لون التمييز (Accent Color)
- قم بتعريف --accent-color واستخدمه لـ background color الخاص بـ button ولـ link text color في footer (rgb(249, 168, 37)).
الطباعة (Typography)
- قم بتعريف --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>