حالا قطعه‌های جدا رو توی یک صفحه کامل جمع می‌کنیم. HTML این مرحله همه بخش‌ها رو داره تا تمرکزت روی رابطه قانون‌های CSS باشه. هدر و مهارت‌ها چیدمان یک‌بعدی دارن، پروژه‌ها شبکه سه‌ستونه می‌خوان و متن معرفی باید خوانایی خودش رو حفظ کنه. یک رنگ برند مشترک هم هدر و لینک تماس رو به هم وصل می‌کنه.
مثال حل‌شده یک صفحه رویداد کوچکه که ظرف کلی، نوار و شبکه مستقل داره؛ این تفکیک نقش‌ها توی پروژه شخصی هم کمک می‌کنه. خطای رایج کپی‌کردن قانون‌های خیلی کلی مثل section{display:flex} است؛ اون قانون بخش‌های نامرتبط رو هم درگیر می‌کنه. هر انتخابگر رو با مسئولیت روشن بنویس و برای رفع یک مسئله، قانون بخش دیگر رو تغییر نده. سند مستقل و کامل است؛ لازم نیست فایل‌های مرحله‌های قبل رو وارد کنی. پیش‌نمایش ۶۴۰ در ۴۸۰ است و صفحه بلندتر می‌تونه پیمایش بشه. معیارها همین صفحه ثابت رو بررسی می‌کنن؛ نیازی به اسکریپت، تصویر خارجی یا رفتار چنداندازه‌ای نیست.
✍️ مثال حل‌شده:
<div class="event"><header>نشست کتاب</header><main class="sessions"><article>صبح</article><article>عصر</article></main></div>
<style>.event { width:400px; } .event header { display:flex; padding:12px; background:teal; color:white; } .sessions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }</style>
حالا نوبت توئه: روی HTML آماده، .profile را width:560px و box-sizing:border-box بده. هدر flex با space-between و align-items:center و زمینه navy؛ منو flex با gap:16px؛ .about زمینه white و padding:20px؛ .bio اندازه 16px و line-height:28px؛ .skills فلکس با gap:8px و سه مهارت با radius:6px باشد. .projects با عرض 480px شبکه سه ستون برابر با gap:12px و سه کارت با padding:12px و radius:8px؛ لینک تماس inline-block با زمینه navy و متن white؛ فوتر وسط‌چین با رنگ #475569 باشد. سه مقصد منو و mailto:sara@example.com و همه متن‌ها و بخش‌ها را حفظ کن. صفحه بلند می‌تواند در پیش‌نمایش پیمایش شود. اندازه ستون‌ها را دقیقاً با grid-template-columns:152px 152px 152px و مقدارهای پیکسلی جداگانه بنویس؛ از fr یا repeat در پاسخ این تمرین استفاده نکن.
فعالیت شما
روی HTML آماده، .profile را width:560px و box-sizing:border-box بده. هدر flex با space-between و align-items:center و زمینه navy؛ منو flex با gap:16px؛ .about زمینه white و padding:20px؛ .bio اندازه 16px و line-height:28px؛ .skills فلکس با gap:8px و سه مهارت با radius:6px باشد. .projects با عرض 480px شبکه سه ستون برابر با gap:12px و سه کارت با padding:12px و radius:8px؛ لینک تماس inline-block با زمینه navy و متن white؛ فوتر وسط‌چین با رنگ #475569 باشد. سه مقصد منو و mailto:sara@example.com و همه متن‌ها و بخش‌ها را حفظ کن. صفحه بلند می‌تواند در پیش‌نمایش پیمایش شود. اندازه ستون‌ها را دقیقاً با grid-template-columns:152px 152px 152px و مقدارهای پیکسلی جداگانه بنویس؛ از fr یا repeat در پاسخ این تمرین استفاده نکن.