لینک‌های مفید برای شرکت در مسابقه:

در طول مسابقه می‌توانید سؤالات خود را از قسمت «سؤال بپرسید» مطرح کنید.

دوزیستان ناکام


متأسفانه امروز خبردار شدیم که چهار تن از دوستان قدیمی ما، Zeno ،Zhi ،Ziv و Zuberi، در یک نزاع برکه‌ای، توسط جمعی متشکل از راکون‌ها، مار‌ها، پرندگان وحشی و قوهای ساکن در اطراف برکه‌ی Z خورده شده‌اند. تصمیم داریم برای مراسم ترحیم آن‌ها اعلامیه‌ای مانند تصویر زیر در سایت برکه‌ قرار دهیم.

Funeral Invitation

پس از نوشتن کدها، هنگام بازبینی فایل‌ها،‌ بر اثر ناراحتی و بی دقتی دوستان، ترتیب فایل‌ها به هم ریخت و فایل index.html بدون ذخیره‌سازی تغییرات بسته شد. حالا محتوای لازم برای نمایش اعلامیه را نداریم. از شما می‌خواهیم این فایل را تکمیل کنید و سایر فایل‌ها را در جای صحیح خود قرار دهید. ساختار صحیح فایل‌ها در انتها ذکر شده است.

پروژه اولیه🔗

پروژه اولیه را از این لینک دانلود کنید. ساختار فایل‌های این پروژه به صورت زیر است.

funeral-invitation
├── index.html
├── style_1.css
├── style_2.css
├── zeno.jpg
├── zhi.jpg
├── ziv.jpg
└── zuberi.jpg
Plain text

جزئیات🔗

اعلامیه، در بدنه‌ی فایل index.html ، به ترتیب،‌ شامل موارد زیر است:

  • یک عنوان h1 با محتوای Condolences

  • تصاویر قربانیان به ترتیب زیر با برچسب‌های img قرار می‌گیرند. هم‌چنین تمامی تصاویر از کلاس image هستند:

    • تصویر مربوط به Zeno با شناسه‌ی zeno
    • تصویر مربوط به Zhi با شناسه‌ی zhi
    • تصویر مربوط به Ziv با شناسه‌ی ziv
    • تصویر مربوط به Zuberi با شناسه‌ی zuberi
  • یک بلوک div با شناسه‌ی container بعد از چهار تصویر، شامل موارد زیر:

    • یک بند نوشته، با برچسب p که محتوای آن در ادامه می‌آید.
      We learned with regret the death of Zeno, Zhi, Ziv and Zuberi. 
      The ceremony will take place in Z lake on Friday. 
      All animals in Z forest are invited except:
      Plain text
    • یک لیست بدون ترتیب، شامل حیواناتی که حضور آن‌ها در مراسم ممنوع شده است. موارد لیست همانند تصویر به ترتیب کلمات زیر هستند:
      Swans, Snakes, Birds, Raccoons
      Plain text
      و شناسه‌های آنها عبارتند از
      swans, snakes, birds, raccoons
      Plain text

نکات🔗

  • توجه کنید که داوری خودکار بر مبنای شناسه (id) و کلاس‌های عناصر انجام می‌شود. پس دقت کنید که عناصر، شناسه و کلاس صحیح داشته باشند.
  • بزرگی و کوچکی حروف در داوری تأثیرگذار است.
  • پروژه را با ساختار زیر ارسال کنید.
    [your-zip-file-name].zip
    ├── images
    │   ├── zeno.jpg
    │   ├── zhi.jpg
    │   ├── ziv.jpg
    │   └── zuberi.jpg
    ├── stylesheets
    │   ├── style_1.css
    │   └── style_2.css
    └── index.html
    Plain text
ارسال پاسخ برای این سؤال
در حال حاضر شما دسترسی ندارید.