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

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

پروژه اولیه

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

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

جزئیات

اعلامیه، در بدنه‌ی فایل 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:

• یک لیست بدون ترتیب، شامل حیواناتی که حضور آن‌ها در مراسم ممنوع شده است. موارد لیست همانند تصویر به ترتیب کلمات زیر هستند:

Swans, Snakes, Birds, Raccoons

و شناسه‌های آنها عبارتند از

swans, snakes, birds, raccoons

نکات

• توجه کنید که داوری خودکار بر مبنای شناسه (id) و کلاس‌های عناصر انجام می‌شود. پس دقت کنید که عناصر، شناسه و کلاس صحیح داشته باشند.
• بزرگی و کوچکی حروف در داوری تأثیرگذار است.
• پروژه را با ساختار زیر ارسال کنید.

[your-zip-file-name].zip
├── images
│   ├── zeno.jpg
│   ├── zhi.jpg
│   ├── ziv.jpg
│   └── zuberi.jpg
├── stylesheets
│   ├── style_1.css
│   └── style_2.css
└── index.html