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

همانطور که می‌بینید وقتی ماوس روی یک حلقه قرار گیرد، آن را از حلقه‌ی دیگر خارج می‌کند. بخشی از پیاده‌سازی در فایل rectangular_ring.html صورت گرفته است. شما باید تنها با استفاده از عناصر این فایل، ویژگی‌های مطلوب را در فایلی به نام style.css بنویسید.

پروژه اولیه

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

rectangular-rings
└── rectangular_ring.html

جزئیات

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

<div id="container">
	<div class="right"></div>
	<div class="right"></div>
	<div class="right"></div>
	<div class="right"></div>
	<div class="left"></div> 
	<div class="left"></div> 
	<div class="left"></div> 
	<div class="left"></div> 
</div>

• عنصر #container همان مربع خاکستری رنگی است که در تصویر دیده می‌شود. این بلوک در پس‌زمینه‌ی حلقه‌ها قرار می‌گیرد، هر کدام از ابعاد آن 400px ، فاصله‌ی آن از هر کدام از اضلاع سمت چپ و بالای صفحه برابر با 100px ، و رنگ پس‌زمینه‌ی آن #D5D8DC است.
• ‌عناصر .right حلقه‌ی سمت راست را تشکیل می‌دهند. هر کدام از div ها یکی از اضلاع حلقه هستند. رنگ پس‌زمینه‌ی هر کدام از اضلاع این حلقه ‍#2ECC71 است.
• عناصر .left نیز حلقه‌ی سمت چپ را تشکیل می‌دهند. هر کدام از div ها یکی از اضلاع حلقه هستند و رنگ پس‌زمینه‌شان #E74C3C است.
• دو مربع در دو نقطه یکدیگر را قطع می‌کنند؛‌ همانطور که در نمایش بالا مشاهده می‌شود،‌ ضلع سمت چپ مربع سبز بر روی ضلع بالایی مربع قرمز قرار می‌گیرد، و ضلع سمت راست مربع قرمز بر روی ضلع پایینی مربع سبز کشیده می‌شود. به این ترتیب دو مربع تودرتو به نظر خواهند رسید.
• با قرار گرفتن و حرکت ماوس بر روی هر کدام از اضلاع یک حلقه، اضلاع آن در هر دو نقطه‌ی تقاطع بر روی اضلاع حلقه‌ی دیگر قرار خواهند گرفت. به این ترتیب به نظر می‌رسد که حلقه‌ی مورد نظر از حلقه‌ی دیگر خارج شده است.
• ابعاد حلقه‌ها مانند یکدیگر است و فاصله‌ها متقارن هستند. نسبت ابعاد حلقه‌ها به #container در زیر قابل مشاهده است.

• توصیه می‌شود ابتدا ویژگی margin را برای body برابر با صفر قرار دهید و سپس مکان بقیه‌ی عناصر را تعیین کنید تا #container دقیقا 100px‌ از بالا و از چپ صفحه فاصله داشته باشد.

نکات

• به هیچ عنوان فایل rectangular_ring.html را تغییر ندهید؛ تنها کد مورد نظر خود را در فایل style.css بنویسید.
• داوری بر اساس شناسه‌ (id) و کلاس عناصر صورت خواهد گرفت؛ بنابراین دقیقا از اسامی تعریف شده در فایل اولیه استفاده کنید.
• پروژه را با ساختار زیر ارسال کنید.

[your-zip-file-name].zip 
└── style.css