برمجه المواقع

البروجكت ده عبارة عن **موقع ويب كامل لمخبز (Bakery Website)** معمول باستخدام **HTML** و **CSS**، وبيحتوي على أقسام رئيسية زي اللي بتشوفها في أي موقع احترافي.

الوصف التفصيلي:

1. **الهيدر (Header) والقائمة العلوية (Navigation Bar):**

* في أعلى الصفحة فيه شريط تنقّل (Nav-Bar) فيه لوجو المخبز وروابط للأقسام المختلفة زي: Home, About, Our Offer, Gallery, Blog, Contact.

* الخلفية عبارة عن صورة كبيرة (Hero Section) عليها عنوان ترحيبي ونص قصير مع أزرار **Learn More** و **Contact Us**.

2. **قسم من نحن (About Us):**

* بيعرض صورة للمخبز ونص تعريفي عن تاريخ المخبز وخدماته.

* فيه نقاط مميزة (Features) زي العناية بالبيئة، الثقة من العملاء، وحب السوشيال ميديا.

3. **قسم الموقع الجغرافي (Our Location):**

* بيعرض نصوص تعريفية بالمكان وصورة توضّح الموقع.

4. **قسم المنتجات (Our Baking):**

* بيعرض 3 عناصر (Superior Breads, Bagels, Cookies) مع صورهم ووصف لكل نوع.

5. **قسم التواصل (Contact Information):**

* فيه نص ترحيبي، بيانات التواصل (عنوان، أرقام الهواتف، إيميل)، وخريطة Google Maps مدمجة بتوضح مكان المخبز.

6. **الفوتر (Footer):**

* مقسوم لجزئين:

* **Upper Footer:** فيه 4 قوائم: عنّا (About Us)، لماذا نحن مميزون (Why we are special?)، مواعيد العمل (Opening Hours)، وبيانات التواصل (Contact Details).

* **Lower Footer:** فيه لوجو المخبز مرة تانية، حقوق الملكية (Copyright)، وأيقونات للسوشيال ميديا زي فيسبوك وتويتر.

7. **تصميم CSS:**

* تم استخدام **CSS** لتنسيق الألوان والخطوط وتوزيع العناصر باستخدام **float** و**inline-block**.

* تم استخدام خلفيات للصور (Background Image) وألوان مميزة (#8E7754، #403d38، #353330).

* في كلاس `.clear-fix` لحل مشاكل الـ float.

* الموقع متجاوب بشكل أساسي مع الشاشات الكبيرة، لكن مفيش كود Media Queries للتحكم في الموبايل.

**باختصار:**

المشروع ده نموذج لموقع ويب ثابت (Static Website) لمخبز، بيعرض معلومات عن المكان، المنتجات، الموقع الجغرافي، وسائل التواصل، ومواعيد العمل، وده بيديك تمرين عملي قوي على هيكلة الـ HTML وتنسيق الصفحات بالـ CSS.