فصل ۶: پروژه نهایی
ساخت یک بخش Landing Page حرفهای
۱. نقشه راه پروژه
ما میخواهیم بخشی بسازیم که شامل یک عنوان جذاب، یک متن توضیحات و دو دکمه فراخوان (CTA) باشد. این بخش باید در موبایل تمامصفحه و در دسکتاپ به صورت متمرکز در وسط قرار بگیرد.
استراتژی ما:
- استفاده از
flexبرای وسطچین کردن کل محتوا. - استفاده از
text-centerبرای متون. - اعمال
dark:bg-slate-900برای حمایت از حالت شب.
۲. کد کامل پروژه (قابل کپی)
این کد را میتوانید در یک فایل HTML خام تست کنید. تمام درسهای ۱ تا ۵ در این کد به کار رفته است:
<!– Hero Section Project –>
<section class=”bg-white dark:bg-slate-900 py-20 px-4“>
<div class=”max-w-4xl mx-auto text-center“>
<!– Title with responsive size –>
<h1 class=”text-4xl md:text-6xl font-black text-slate-900 dark:text-white mb-6“>
Master Tailwind CSS Today
</h1>
<!– Description –>
<p class=”text-lg text-slate-600 dark:text-slate-400 mb-10“>
Build fast, responsive, and modern websites without leaving your HTML.
</p>
<!– Interactive Buttons –>
<div class=”flex flex-col sm:flex-row justify-center gap-4“>
<button class=”bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-full font-bold transition-all transform hover:scale-105“>
Get Started
</button>
<button class=”border-2 border-slate-200 dark:border-slate-700 dark:text-white px-8 py-3 rounded-full font-bold hover:bg-slate-50 dark:hover:bg-slate-800 transition“>
Learn More
</button>
</div>
</div>
</section>
<section class=”bg-white dark:bg-slate-900 py-20 px-4“>
<div class=”max-w-4xl mx-auto text-center“>
<!– Title with responsive size –>
<h1 class=”text-4xl md:text-6xl font-black text-slate-900 dark:text-white mb-6“>
Master Tailwind CSS Today
</h1>
<!– Description –>
<p class=”text-lg text-slate-600 dark:text-slate-400 mb-10“>
Build fast, responsive, and modern websites without leaving your HTML.
</p>
<!– Interactive Buttons –>
<div class=”flex flex-col sm:flex-row justify-center gap-4“>
<button class=”bg-green-600 hover:bg-green-700 text-white px-8 py-3 rounded-full font-bold transition-all transform hover:scale-105“>
Get Started
</button>
<button class=”border-2 border-slate-200 dark:border-slate-700 dark:text-white px-8 py-3 rounded-full font-bold hover:bg-slate-50 dark:hover:bg-slate-800 transition“>
Learn More
</button>
</div>
</div>
</section>
۳. مسیر بعدی شما (Next Steps)
یادگیری تیلوند اینجا تمام نمیشود. برای حرفهای شدن، این موارد را در گوگل جستجو و تمرین کنید:
- Customizing tailwind.config.js: برای اضافه کردن رنگها و فونتهای شخصی خودتان.
- Tailwind UI: برای استفاده از کامپوننتهای آماده و بسیار حرفهای.
- Directives (@apply): برای تمیز نگه داشتن کدهای HTML در پروژههای بزرگ.