Mealify 🍽

Mealify is a responsive and interactive website for a food business, focusing on promoting delicious meals, showcasing professional chefs, and featuring an enticing gallery of dishes. The website is designed to be both user-friendly and visually appealing, with integrated dark mode and smooth navigation.

---

Live Demo 🌐

• Check out the live demo of the project at Mealify Site.

---

🛠 Website Contents

1. Responsive Design:

• Fully responsive layout across devices and screen sizes.
• Burger menu for easy navigation on smaller screens (below 992px).

2. Dark Mode Toggle:

• Switch between light and dark modes using a checkbox toggle with sun/moon icons.

3. Interactive Navbar:

• A collapsible menu that transforms into a close icon when opened.
• Smooth transition to different sections through internal links.

4. Chefs Section:

• Highlights three professional chefs with their bios and social media links.
• Social media integration for Twitter, Facebook, Instagram, and LinkedIn.

5. Gallery Section:

• Features a variety of dishes with hover effects and descriptions.

6. Contact Section:

• Includes a Google Maps iframe to display the restaurant's location.
• Users can book a table or get in touch with the business easily.

---

🚀 Navigation between Sections

• Navbar allows quick access to all sections.
• Clicking on a menu item smoothly scrolls to the corresponding section, enhancing user experience.
• The site is fully responsive, ensuring it looks and works perfectly on all screen sizes and devices.

---

🧑‍💻 Languages and Technologies Used

HTML5:

• Structured the web content and added semantic tags for accessibility.

CSS3:

• Used for custom styles across the website.
• Includes separate stylesheets for media queries (media.css), general styling (general.css), and dark mode (darkmode.css).

JavaScript:

• Handles navbar toggle functionality and automatic menu closure when clicking outside.
• Implements dark mode logic using JavaScript.

Font Awesome:

• Provides icons for social media links, dark mode toggle, and navigation elements.

Google Fonts:

• Fonts used: Open Sans, Amatic SC, and Inter for enhanced typography.

Google Maps API:

• Integrated to display the restaurant's location in the contact section.

---

How to Use 🚀

We welcome contributions to Mealify! Here’s how you can help:

1. Fork the repository - Click the "Fork" button at the top right of the repository page.

2. Clone your fork - Use the command:

   git clone https://github.com/OmarrSakr/Mealify-Site.git
   

---

📂 Project Structure

# Mealify  
│  
├── 📄 *index.html*         — Main HTML file  
│
├── 📂 *CSS/*  
│   ├── 🎨 all.min.css         — Font Awesome styles  
│   ├── 🌙 darkmode.css        — Dark mode styles  
│   ├── 🖌️ general.css         — General styling  
│   ├── 📱 media.css           — Media queries for responsiveness  
│   └── 📄 style.css           — Main stylesheet  
│  
├── 📂 *images-Mealify/*    — Images for the gallery, chefs, and home section  
│  
├── 📂 *webfonts/*           — Fonts used in the project  
│   ├── fontawesome-webfont.woff2  
│   ├── fontawesome-webfont.woff  
│   └── custom-font.ttf  
│  
└── 📄 *README.md*          — Project documentation (this file)  
  

---

Future Updates 📈

• Add more interactive features, such as a reservation form with validation.
• Include a testimonials section using Swiper.js for carousel animations.
• Integrate backend functionality for handling bookings and user inquiries.

---

Important Notes 📢

• This project is a static website and does not include a backend or dynamic content.

---