هذا كود css and java script
خاص بمدونة بلوجر لطريقة عرض المشاركات في هذا الكود شكل food item
في شكل عرض list تبدو غير منسقة ومتزاحمة
حيث تظهر بالشكل التالي
في اليمين صورة المنتج
في الوسط في الاعلى العنوان
واسفلة يظهر مربعين الاول لعرض السعرات الحرارية والثاني لعرض نسبة البروتين
اسفلة يظهر وصف المنتج
في اليسار في الاعلى يظهر مربعين بجانب بعض لعرض حقول الفئة الاولى والفئة الثانية
اسفلة يعرض سعر المنتج الحالي
اسفلة سعر المنتج السابق قبل الخصم
اسفلة بخط صغير وفرت مبلغ الفارق بين السعرين
ثم اسفلة زر اضف للسلة او زر عرض الخيارات
وهذا كلة جعل عرض المنتج بشكل متزاحم وغير منسق
التعديل الجديد اريد فقط اعادة تنسيق شكل العرض كما هو الشكل في الصورة المرفقة
في اليمين صورة المنتج
اسفل الصورة فوق الصورة تظهر مربعين الفئات
ثم في اليسار في الاعلى العنوان
اسفلة مربعين بجانب بعض عرص السعرات الحرارية ونسبة البروتين
اسفلة وصف المنتج
اسفلة مستطيل يحتوي على الاتي
في يمين المربع السعر السابق
اسفلة جملة وفرت مبلغ والذي هو عبارة عن الفرق بين السعرين
في الوسط السعر الخالي بحجم اكبر
في اقصى يسار المستطيل زر اضف للسلة او زر عرض الخيارات
التصميم موضح في الصورة المرفقة اريد منك تنسيق الكود ليظهر مطابق لشكل الصورة المرفقة
