طريقة تصميم صفحة تسجيل دخول أنيقة و مميزة بالـ html و css

السلام عليكم

سأشرح لكم اليوم كيفية تصميم صفحة تسجيل دخول بشكل جميل وأنيق

النتيجة النهائية

نبدأ على بركة الله

نفتح برنامج  ++notepad و نفتح عمل جديد ، نغير اللغة الى html و نضع بالصفحة أكواد الـ html الاساسية بهذا الشكل

كالمعتاد سأضع لكم مخطط للصفحة التي سنعمل عليها ، و ذلك لتتضح الفكرة لديكم ، المخطط بسيط جدا و هو كالتالي

اذن سنحتاج الى section و بداخله سنضع section و form الـ section الثاني سنضع به الصورة و الفورم سنضع به خانتين خاصتين بالاسم و كلمة السر و سنستعمل لذلك و سم input و p و سنضيف زر بواسطة وسم button .
و عليه سيكون الكود كالتالي

الان لنكتب الـ css الخاص بالصفحة و الذي سيكون بهذا الشكل

في السطر رقم 17 ضع عنوان الصورة التي تريد ، في حالتي كانت الصورة التي استعملتها في نفس مكان ملف الصفحة

لذا وضعت اسم الصورة وكتبت الامتداد ، و أنت ضع عنوان الصورة التي تريد أياً كان مكانها .

 ثم

الان لنحفظ العمل و نفتحه في المتصفحة و النتيجة