🏆 پروژه نهایی CSS: صفحه فرود حرفه‌ای

🎯 هدف این پروژه: طراحی یک صفحه فرود حرفه‌ای با استفاده از تمام مباحث CSS

سلام دوست عزیز! 👋

به پروژه نهایی دوره CSS خوش آمدی! 🎉 توی این پروژه، همه چیزهایی که توی ۶ درس گذشته یاد گرفتی رو کنار هم می‌ذاریم و یه صفحه فرود (Landing Page) حرفه‌ای می‌سازیم.

توی این پروژه، از این مباحث استفاده می‌کنیم:

✅ انتخابگرها و استایل‌دهی پایه
✅ رنگ‌ها، فونت‌ها و متن برای زیبایی
✅ مدل جعبه (Box Model) برای فاصله‌ها
✅ Flexbox و Grid برای چیدمان
✅ طراحی واکنش‌گرا برای همه دستگاه‌ها

📋 بخش ۱: توضیح پروژه

صفحه فرودی طراحی می‌کنیم که شامل بخش‌های زیر باشد:

هدر با لوگو، منو و دکمه CTA
بخش قهرمان (Hero) با عنوان، توضیحات و دکمه اقدام
بخش ویژگی‌ها با ۳ کارت
بخش آمار با اعداد
بخش تماس با فرم
فوتر با لینک‌ها

🔧 بخش ۲: کد پروژه

🎨
صفحه فرود

CSS
v3


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه فرود حرفه‌ای</title>
    <style>
        /* ============================================
           تنظیمات کلی
           ============================================ */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "Vazir", "Arial", sans-serif;
            background: #ffffff;
            color: #1e293b;
            direction: rtl;
            line-height: 1.6;
        }

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 20px;
        }

        section {
            padding: 60px 0;
        }

        h2 {
            font-size: 2.2rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 40px;
            color: #0f172a;
        }

        /* ============================================
           هدر
           ============================================ */

        header {
            padding: 15px 0;
            border-bottom: 1px solid #e2e8f0;
            position: sticky;
            top: 0;
            background: white;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.04);
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 800;
            color: #2563EB;
        }

        .logo span {
            color: #0f172a;
        }

        nav {
            display: flex;
            gap: 25px;
            align-items: center;
        }

        nav a {
            color: #475569;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

        nav a:hover {
            color: #2563EB;
        }

        .btn-primary {
            background: #2563EB;
            color: white;
            border: none;
            padding: 10px 24px;
            border-radius: 8px;
            font-size: 0.95rem;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s, transform 0.2s;
        }

        .btn-primary:hover {
            background: #1D4ED8;
            transform: scale(1.04);
        }

        /* ============================================
           بخش قهرمان (Hero)
           ============================================ */

        .hero {
            display: flex;
            align-items: center;
            gap: 50px;
            min-height: 70vh;
        }

        .hero-content {
            flex: 1;
        }

        .hero-content h1 {
            font-size: 3rem;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 20px;
            color: #0f172a;
        }

        .hero-content h1 span {
            color: #2563EB;
        }

        .hero-content p {
            font-size: 1.15rem;
            color: #475569;
            max-width: 500px;
            margin-bottom: 25px;
        }

        .hero-image {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        .hero-image .placeholder {
            width: 100%;
            max-width: 450px;
            height: 300px;
            background: linear-gradient(135deg, #2563EB, #7C3AED);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 4rem;
            color: white;
            box-shadow: 0 20px 50px rgba(37, 99, 235, 0.25);
        }

        /* ============================================
           بخش ویژگی‌ها
           ============================================ */

        .features {
            background: #f8fafc;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        .feature-card {
            background: white;
            padding: 30px;
            border-radius: 16px;
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
            border: 1px solid #e2e8f0;
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 40px rgba(0,0,0,0.08);
        }

        .feature-card .icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
        }

        .feature-card h3 {
            font-size: 1.2rem;
            color: #0f172a;
            margin-bottom: 10px;
        }

        .feature-card p {
            color: #475569;
            font-size: 0.95rem;
        }

        /* ============================================
           بخش آمار
           ============================================ */

        .stats {
            background: white;
        }

        .stats-grid {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            gap: 30px;
            text-align: center;
        }

        .stat-item {
            flex: 1;
            min-width: 120px;
        }

        .stat-number {
            font-size: 2.8rem;
            font-weight: 800;
            color: #2563EB;
        }

        .stat-label {
            color: #475569;
            font-size: 1rem;
            margin-top: 5px;
        }

        /* ============================================
           بخش تماس
           ============================================ */

        .contact {
            background: #f8fafc;
        }

        .contact-form {
            max-width: 550px;
            margin: 0 auto;
        }

        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 14px;
            border: 1px solid #d1d5db;
            border-radius: 10px;
            font-size: 1rem;
            margin-bottom: 15px;
            font-family: inherit;
            transition: border-color 0.3s;
        }

        .contact-form input:focus,
        .contact-form textarea:focus {
            outline: none;
            border-color: #2563EB;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

        .contact-form .btn-submit {
            background: #2563EB;
            color: white;
            border: none;
            padding: 14px 40px;
            border-radius: 10px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            width: 100%;
            transition: background 0.3s, transform 0.2s;
        }

        .contact-form .btn-submit:hover {
            background: #1D4ED8;
            transform: scale(1.01);
        }

        /* ============================================
           فوتر
           ============================================ */

        footer {
            background: #0f172a;
            color: #cbd5e1;
            padding: 30px 0;
            text-align: center;
        }

        .footer-links {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
            margin-bottom: 15px;
        }

        .footer-links a {
            color: #cbd5e1;
            text-decoration: none;
            transition: color 0.3s;
        }

        .footer-links a:hover {
            color: #2563EB;
        }

        /* ============================================
           واکنش‌گرا
           ============================================ */

        @media (max-width: 768px) {
            .hero {
                flex-direction: column;
                text-align: center;
            }

            .hero-content p {
                max-width: 100%;
            }

            .hero-content h1 {
                font-size: 2.2rem;
            }

            .features-grid {
                grid-template-columns: 1fr;
                max-width: 400px;
                margin: 0 auto;
            }

            .stats-grid {
                flex-direction: column;
                gap: 20px;
            }

            nav {
                gap: 15px;
                flex-wrap: wrap;
            }
        }

        @media (max-width: 480px) {
            .header-content {
                flex-direction: column;
                text-align: center;
            }

            nav {
                flex-direction: column;
                width: 100%;
            }

            .hero-content h1 {
                font-size: 1.8rem;
            }

            section {
                padding: 40px 0;
            }
        }
    </style>
</head>
<body>

    <!-- ============================================
    هدر
    ============================================ -->

    <header>
        <div class="container header-content">
            <div class="logo">🚀 <span>رجستری</span></div>
            <nav>
                <a href="#features">ویژگی‌ها</a>
                <a href="#stats">آمار</a>
                <a href="#contact">تماس</a>
                <button class="btn-primary">شروع کنید</button>
            </nav>
        </div>
    </header>

    <!-- ============================================
    بخش قهرمان (Hero)
    ============================================ -->

    <section class="hero container">
        <div class="hero-content">
            <h1>
                با <span>CSS</span> به دنیای طراحی وب قدم بگذار
            </h1>
            <p>
                از صفر تا طراحی صفحات وب حرفه‌ای را با CSS یاد بگیر.
                دوره‌های ما با مثال‌های عملی و پروژه‌های واقعی همراه است.
            </p>
            <button class="btn-primary">شروع یادگیری 🚀</button>
        </div>
        <div class="hero-image">
            <div class="placeholder">🎨</div>
        </div>
    </section>

    <!-- ============================================
    بخش ویژگی‌ها
    ============================================ -->

    <section class="features" id="features">
        <div class="container">
            <h2>✨ چرا دوره‌های ما؟</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="icon">📚</div>
                    <h3>آموزش گام‌به‌گام</h3>
                    <p>از مبتدی تا حرفه‌ای با مسیرهای یادگیری منظم</p>
                </div>
                <div class="feature-card">
                    <div class="icon">💻</div>
                    <h3>پروژه‌های عملی</h3>
                    <p>با ساخت پروژه‌های واقعی مهارت‌های خود را تقویت کن</p>
                </div>
                <div class="feature-card">
                    <div class="icon">🎯</div>
                    <h3>پشتیبانی کامل</h3>
                    <p>تیم پشتیبانی ما در هر مرحله کنار شماست</p>
                </div>
            </div>
        </div>
    </section>

    <!-- ============================================
    بخش آمار
    ============================================ -->

    <section class="stats" id="stats">
        <div class="container stats-grid">
            <div class="stat-item">
                <div class="stat-number">۱۰۰۰+</div>
                <div class="stat-label">دانشجو</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">۵۰+</div>
                <div class="stat-label">دوره آموزشی</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">۹۸%</div>
                <div class="stat-label">رضایت</div>
            </div>
            <div class="stat-item">
                <div class="stat-number">۴.۹</div>
                <div class="stat-label">میانگین امتیاز</div>
            </div>
        </div>
    </section>

    <!-- ============================================
    بخش تماس
    ============================================ -->

    <section class="contact" id="contact">
        <div class="container">
            <h2>📩 با ما در تماس باش</h2>
            <form class="contact-form">
                <input type="text" 
                       placeholder="نام و نام خانوادگی" 
                       required>
                <input type="email" 
                       placeholder="ایمیل" 
                       required>
                <textarea rows="5" 
                          placeholder="پیام شما..." 
                          required></textarea>
                <button class="btn-submit" 
                        type="submit">📤 ارسال پیام</button>
            </form>
        </div>
    </section>

    <!-- ============================================
    فوتر
    ============================================ -->

    <footer>
        <div class="container">
            <div class="footer-links">
                <a href="#">درباره ما</a>
                <a href="#">وبلاگ</a>
                <a href="#">دوره‌ها</a>
                <a href="#">تماس با ما</a>
            </div>
            <p>© ۱۴۰۴ - تمامی حقوق محفوظ است. رجستری آکادمی</p>
        </div>
    </footer>

</body>
</html>

📖 بخش ۳: توضیح کد پروژه

بیا با هم بررسی کنیم که توی این پروژه از چه مباحثی استفاده کردیم:

۱. هدر چسبنده (Sticky Header)

با position: sticky هدر رو در بالای صفحه ثابت نگه داشتیم تا کاربر همیشه دسترسی به منو داشته باشه.

۲. بخش قهرمان (Hero)

با استفاده از flex یک بخش قهرمان جذاب طراحی کردیم که شامل عنوان، توضیحات و دکمه اقدام است.

۳. ویژگی‌ها

با grid سه کارت ویژگی طراحی کردیم که با هاور کردن، انیمیشن ملایمی دارند.

۴. آمار

با flex و justify-content: space-around آمارها رو به‌صورت منظم در کنار هم قرار دادیم.

۵. فرم تماس

یک فرم تماس با استایل‌دهی حرفه‌ای طراحی کردیم که در فوکوس، هایلایت می‌شود.

۶. واکنش‌گرایی

با media queries صفحه برای سه اندازه مختلف (دسکتاپ، تبلت، موبایل) بهینه شد.

🎯 بخش ۴: تمرین برای شما

📝 تمرین: بهبود پروژه

قابلیت‌های زیر رو به پروژه اضافه کنید:

🎨 تم تاریک: با یک دکمه، تم صفحه رو به تاریک تغییر بدید.
📱 منوی همبرگری: برای موبایل، یک منوی همبرگری طراحی کنید.
✨ انیمیشن‌ها: به کارت‌های ویژگی، انیمیشن ورود اضافه کنید.
📊 نوار پیشرفت: یک بخش نوار پیشرفت برای مهارت‌ها اضافه کنید.

🧩 جمع‌بندی دوره

تبریک می‌گم! 🎉 تو یک دوره کامل CSS رو با موفقیت به پایان رسوندی. بیا با هم مرور کنیم که چی یاد گرفتی:

📚 خلاصه درس‌های دوره

درس	عنوان	مباحث اصلی
۱	آشنایی با CSS	انتخابگرها، روش‌های افزودن CSS
۲	رنگ‌ها و فونت‌ها	رنگ‌ها، فونت‌ها، استایل متن
۳	مدل جعبه	padding, margin, border
۴	Flexbox	چیدمان یک بعدی
۵	Grid	چیدمان دو بعدی
۶	واکنش‌گرا	Media Queries, واحدهای نسبی

🎯 مسیر ادامه یادگیری

توی این دوره، CSS رو یاد گرفتی. حالا می‌تونی به سراغ مباحث بعدی بری:

📚 جاوااسکریپت – تعامل با کاربر
📊 فریم‌ورک‌های CSS – Bootstrap، Tailwind
🌐 React – ساخت اپلیکیشن‌های تک صفحه‌ای
🎨 انیمیشن‌های CSS – افکت‌های پیشرفته

🔗 لینک‌های مرتبط

⬅️
درس قبل: واکنش‌گرا

🚀
دوره بعد: جاوااسکریپت

🏠
صفحه دوره‌ها

👤

نویسنده یونس رجستری

📅

تاریخ انتشار 20 مرداد 1405

🔄

آخرین بروزرسانی 20 مرداد 1405

دنیای تکنولوژی
از یادگیری شروع می‌شود

پروژه نهایی CSS: صفحه فرود حرفه‌ای