طراحی به سبک کداستار


مهارت‌های لازم:

  • آشنایی با HTML و CSS

در این سوال از شما خواسته شده است که با استفاده از CSS لوگوی کداستار را طراحی کنید. این لوگو شامل 5 تگ بسته (Closing Tag) است که هر کدام از آن‌ها به مقداری چرخانده شده‌اند.

حال شما باید با استفاده از فایل‌هایی که ما برای شما آماده کرده‌ایم این لوگو را طراحی کنید. دقت داشته باشید به غیر از فایل style.css حق تغییر هیچ کدام از فایل‌ها را ندارید.

می‌توانید خروجی نمونه را در این تصویر مشاهده کنید: خروجی نمونه

موارد قابل توجه🔗

  • برای شما یک عکس کمکی قرار داده شده است شما باید دقیقا همانند این عکس لوگو را طراحی کنید.

  • از فونت شبنم که در کنار فایل‌های شما قرار داده شده است برای طراحی استفاده کنید.

پروژه اولیه🔗

پروژه اولیه را از این لینک دانلود کنید.

ساختار فایل‌های این پروژه به این صورت است
initialProject03.zip
├── fonts
│   ├── shabnam-bold.ttf
│   ├── shabnam-light.ttf
│   ├── shabnam-medium.ttf
│   └── shabnam-thin.ttf
├── index.html
├── main.css
├── star-logo.png
├── star-logo-on-quera.png
└── style.css
Plain text
راه اندازی پروژه
  • ابتدا پروژه‌ی اولیه را دانلود و از حالت فشرده خارج کنید.
  • سپس فایل index.html را در مرورگر خود باز کنید.

راهنمایی🔗

اعداد زیر اعداد جادوئی هستند از آن‌ها برای طراحی خود استفاده کنید

  • 170px

  • 30px

  • 108px

  • 700

  • -7px

  • 72deg

  • -90deg