القائمة الرئيسية

الصفحات

Food Funday Restaurant| Responsive-template html5 | بواسطة سومر للحلول البرمجية

Food Funday Restaurant| Responsive-template html5 | سومر للحلول البرمجية


مرحبًا أيها القراء ،اقدم اليوم في هذه المدونة قالب او ثيم جاهز للويب وبالخصوص مطعم الابداعي باستخدام html5  ونقدم دائما كل ماهو حصري وجديد كل ماعليك هو حفظ هذه المدونة في جوجل كروم عندك والاطلاع على المزيد بشكل يومي ان شاء الله تكون نافعة لك اذا كنت مبرمج او مصمم ويب ,اذا هذا التصميم لمن يقدم خدمة تصميم مواقع للمطاعم

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

اليوم في هذه المدونة ، سأشارك معك هذا القالب متجاوب لاجهزة الهواتف.  ، نقوم هذا بضبط عرض ارتفاعها تلقائيًا وفقًا لعرض ارتفاع الجهاز. استخدم خاصية CSS Flex وmedia لجعل ذلك متوافقا قم باستخدام هذه الخاصية من اجل التوافق مع الهواتف النقالة
إذا كنت تشعر بصعوبة في فهم ما أقوله. يمكنك مشاهدة فيديو يبين بشكل كامل عن هذا القالب

فيديو توضيحي للقالب الجاهز







كما رأيت في الفيديو ، فإن القالب هذا يكون متجاوب وجميل جدا. إذا كنت مبتدئًا في تصميم الويب ، فقد ساعدك هذا البرنامج التعليمي على فهم الرموز والمفاهيم الأساسية وراء إنشاء التصميم ذلك

إذا كنت تحب هذا القالب ) وتريد الحصول على أكواد المصدر. يمكنك بسهولة الحصول على الكود المصدري لهذا البرنامج. للحصول على رموز المصدر ، تحتاج فقط إلى التمرير لأسفل. يمكنك استخدام هذا البرنامج في مشاريعك ومواقعك. إذا كنت تعرف html ,cssتمامًا ، فيمكنك بسهولة جعل التمرير الابداعي هذا عمليًا بإضافة بعض الاكواد الخاصه بهما

قد يعجبك هذا :

كما هو الحال دائمًا ، قبل مشاركة أكواد هذا القالب. دعنا نتحدث قليلاً عن العلامات والرموز الرئيسية لهذا البرنامج. في البداية ، في ملف HTML ، قمت بإنشاء علامة <div>.بأسم الفئة "container" كما تعلم ، يتم استخدام علامة <div> بشكل كبير لإنشاء التقسيم الاول. ومع استخدامات للبوتستراب في العمل.
..
تقسيم الواجهه هيدر واضافات بداخل الهيدر بعض الامور التي من شأنها تعطي لمسة فنية مثل تغيير الالوان الانميشن او التحريك المتلاشي للنص

في ملف CSS ، قمت أولاً بإعطاء لون خلفية للتمرير الابداعي ثم باستخدام الخاصية المرنة ، قمت بوضع العنصر في الوسط . ثم قمت بالتصميم الأساسي للتقسيم وعناصر اخرى أعطيت اللون وحجم الخط والحشو وما إلى ذلك. 

الآن ، لجعل التقسيمة مع التمرير الابداعي ، استخدمت خاصية transfrom. باستخدام هذه الخاصية ، يمكنك ان تعطي عرض التحريك عرض معين. ، قمت بتحريك واعطاء ايضا درجة معينة في التحريك في اليسارو وضعت عناصر وايضا يجب ان تضع حجم الايقونة اذا كنت تحب تكبيرها يمكن ذلك بخاصية font-size
بعد ذلك يمكنك ايضا ان تستخدمه اذا تحب في مشروعك أولاً ، تحتاج إلى إنشاء ملف، أحدهما ملف HTML . يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر من خلال الرابط المحدد. انقر هنا لتنزيل ملفات التعليمات البرمجية المصدر وذلك بسبب كثرة التكويد تم تحميله هنا اضغط على github للتحميل 


هل اعجبك الموضوع :

تعليقات