الخلفية والهيكل

الدرس 3 من 16 في دورة محاكاة صفحة إنستغرام | مشروع Front-End على Coddy.

لقد قمنا بتنسيق الـ body بـ display من نوع flex وقمنا بتوسيط كل شيء عمودياً وأفقياً، لأنك الآن ستقوم بإنشاء الخلفية/اللوحة (canvas) للصفحة. سيكون لدينا div بـ width و height بنسبة 95% ولاحقاً، سيكون لدينا الهيكل التالي

سيكون الجزء العلوي من موقعنا عبارة عن section يسمى profileInfo والجزء السفلي سيكون posts، وبعد ذلك سنبدأ في تقسيم كل منهما إلى أجزاء أكثر.

التحدي

سهل

أدخل وسم title في جزء head من HTML مع عنوان Instagram
داخل وسم body في ملف index.html، قم بإنشاء div بالمعرف background. اتركه فارغاً في الوقت الحالي
قم بتنسيق الـ div باستخدام المعرف الخاص به في ملف styles.css مع height و width بقيمة 95%.
خاصية background بقيمة white
و border-radius بقيمة 15px

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
    <!-- أدخل العنوان -->
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- اكتب كود HTML هنا -->
    </body>
</html>