المتغيرات

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

التحدي

سهل

لدينا صفحة حول Extreme Sports (الرياضات الخطرة). في الوقت الحالي، لا تبدو الصفحة جميلة أو مصقولة للغاية. خلال الدروس القليلة القادمة، سنقوم بتحسينها خطوة بخطوة من خلال تطبيق ما تعلمناه: متغيرات CSS، واستراتيجية mobile-first (الجوال أولاً)، وبعض تقنيات theming (التنسيق اللوني).

هذا هو الشكل الذي قد تبدو عليه الصفحة في النهاية (الألوان والأنماط الدقيقة تعود لاختيارك):

سنبدأ بتحسين مظهر صفحة Extreme Sports باستخدام متغيرات CSS.

مهمتك:

في :root، قم بإنشاء المتغيرات التالية:
- --primary-color
- --secondary-color
- --bg-color
- --text-color
- --card-bg
قم بتعيين أي قيم ألوان تفضلها لها.
قم بتطبيق هذه المتغيرات في جميع أنحاء الأنماط (styles):
- قم بتعيين --bg-color و --text-color لـ <body>.
- استخدم --primary-color كـ background color لـ <header>.
- قم بتطبيق --card-bg كـ background color لأقسام description و fun facts.
- استخدم --secondary-color للتمييز (على سبيل المثال: العناوين، الأزرار، أو النصوص المميزة).

ورقة مرجعية

يتم تعريف متغيرات CSS في محدد :root ويمكن استخدامها في جميع أنحاء ورقة الأنماط الخاصة بك:

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

استخدم متغيرات CSS مع دالة var():

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

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

جرّب بنفسك

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