مشروع: صفحة هبوط متجاوبة — تصميم CSS

مشروع: صفحة هبوط متجاوبة

ستبني صفحة هبوط لتطبيق تعليمي، أو تطبّق التنسيق على صفحتك الشخصية من دورة HTML. اقرأ CSS الكامل في قسم المثال واستخدم هذا الدليل لبنائه بنفسك خطوة خطوة.

الأقسام

1. شريط التنقل: الشعار والروابط بـ Flexbox.

2. البطل (Hero): عنوان كبير بـ clamp، وصف، وزرّا دعوة لإجراء.

3. المميزات: شبكة بطاقات auto-fit.

4. آراء المستخدمين: بطاقات اقتباس.

5. التذييل.

الهيكل

<header class="navbar">
    <a class="logo" href="index.html">Kodax</a>
    <nav aria-label="القائمة الرئيسية">
        <ul class="nav-links">
            <li><a href="#features">المميزات</a></li>
            <li><a href="#reviews">الآراء</a></li>
        </ul>
    </nav>
</header>
<main>
    <section class="hero">
        <h1>تعلّم البرمجة بالعربية</h1>
        <p>دروس تفاعلية وتحديات يومية.</p>
        <a class="btn" href="#start">ابدأ مجاناً</a>
    </section>
    <section id="features" class="features">
        <h2>المميزات</h2>
        <div class="features-grid">
            <article class="feature-card"><h3>دروس قصيرة</h3><p>عشر دقائق يومياً.</p></article>
        </div>
    </section>
</main>
<footer class="footer"><p>&copy; 2026 Kodax</p></footer>

خطوات البناء

1. الأساس: إعادة الضبط (box-sizing، margin، الصور)، الخط، والمتغيرات في :root.

2. الجوال أولاً: كل الأقسام عمود واحد، مسافات مريحة، أزرار كبيرة (44px على الأقل للمس).

3. المكونات: .btn بمتغير لونه، .feature-card بحشو وزوايا وظل.

4. التخطيط: .features-grid بـ repeat(auto-fit, minmax(min(260px, 100%), 1fr)).

5. الشاشات الأكبر: @media (min-width: 768px) لشريط التنقل الأفقي وحجم البطل.

6. التفاصيل: hover بـ @media (hover: hover)، و focus-visible، والوضع الليلي، و prefers-reduced-motion.

قرارات تستحق الانتباه

| القرار | لماذا |

|---|---|

| الروابط لا تُخفى على الجوال | التنقل يجب أن يبقى متاحاً؛ نعيد ترتيبه في سطرين بدل إخفائه. (قائمة "همبرغر" تحتاج JavaScript — في دورة JS.) |

| clamp() لعنوان البطل | حجم مرن بين حدين بلا media query |

| margin-inline و padding-inline | تعمل مع rtl و ltr |

| ألوان في متغيرات | الوضع الليلي = إعادة تعريف المتغيرات فقط |

قائمة التحقق

- [ ] لا تمرير أفقي على عرض 320px.

- [ ] النص مقروء (تباين 4.5:1) في الوضعين الفاتح والداكن.

- [ ] كل عنصر تفاعلي له حالة تركيز مرئية.

- [ ] الأزرار والروابط بحجم مناسب للمس.

- [ ] لا يوجد left أو right أو margin-left حيث يجب أن يكون منطقياً.

- [ ] Lighthouse: وصولية 90+.

تحديات إضافية

- قسم أسعار بثلاث بطاقات، الوسطى مميزة وأكبر قليلاً.

- انتقال ناعم عند التمرير للأقسام: html { scroll-behavior: smooth; } داخل prefers-reduced-motion: no-preference.

- زر تبديل الوضع الليلي يدوياً (بعد دورة JavaScript).

بعد هذا المشروع تابع مع CSS المتقدم: التحويلات والانتقالات والحركات والتصميم الحديث.

/* Landing Page كامل */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #6366f1;
    --dark: #1e1e2e;
    --light: #f8fafc;
}

/* Navigation */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    position: fixed;
    width: 100%;
    z-index: 100;
}

.nav-links {
    display: flex;
    gap: 30px;
    list-style: none;
}

/* Hero Section */
.hero {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--primary), #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5%;
}

.hero h1 {
    font-size: clamp(2rem, 5vw, 4rem);
    color: white;
    margin-bottom: 20px;
}

/* Features */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    padding: 80px 5%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
    .navbar { flex-direction: column; gap: 12px; }
    .nav-links { flex-wrap: wrap; justify-content: center; gap: 12px; }  /* لا نخفي التنقل: نعيد ترتيبه */
    .hero h1 { text-align: center; }
}