جسم الصفحة

جزء من قسم Styling with CSS في رحلة HTML على Coddy. الدرس 50 من 76.

التحدي

سهل

في هذا المشروع، سنقوم ببناء وتنسيق Login Form بسيط. سيساعدك هذا المشروع على ممارسة مفاهيم CSS الأساسية، بما في ذلك:
✅ توسيط العناصر بشكل مثالي على صفحة الويب
✅ تنسيق عناصر النموذج مثل المدخلات والأزرار
✅ التعامل مع الحدود، والظلال، والتباعد
✅ إتاحة المجال للإبداع في التصميم

بحلول نهاية المشروع، سيكون لديك نموذج تسجيل دخول منسق بشكل جيد يبدو حديثاً ومصقولاً، على غرار الصورة أدناه.

قم بتطبيق التنسيقات على وسم <body>. اتبع الخطوات أدناه:

قم بتعيين background color إلى درجة فاتحة من اختيارك.
استخدم Flexbox لتوسيط النموذج أفقياً وعمودياً.
قم بتعيين height الصفحة إلى 100vh بحيث يظل النموذج متوسطاً حتى عند تغيير حجم النافذة.

جرّب بنفسك

<html>
<head>
    <title>Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form class="login-form">
        <h2>Login</h2>
        <input type="text" placeholder="Username">
        <input type="password" placeholder="Password">
        <button type="submit">Login</button>
    </form>
</body>
</html>