Food Website

A modern, responsive food website built with pure HTML, CSS, and JavaScript. This project features a clean design with smooth animations and an intuitive user interface.

Features

• Pure Vanilla Stack: Built with HTML5, CSS3, and vanilla JavaScript
• Responsive Design: Mobile-first approach that works on all devices
• Modern UI: Clean and intuitive interface with smooth animations
• Fast Loading: No framework overhead, optimized for performance
• Cross-Browser Compatible: Works on all modern browsers
• Easy to Customize: Simple file structure and well-commented code

Tech Stack

• HTML5: Semantic markup for better accessibility and SEO
• CSS3: Modern styling with Flexbox/Grid layouts and animations
• JavaScript: Vanilla JS for interactive features
• No Dependencies: Pure web technologies, no frameworks required

Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• A code editor (VS Code, Sublime Text, etc.)
• Optional: A local development server

Installation

1. Clone the repository ```bash git clone cd food-website ```

2. Open in browser

   Simply open index.html in your web browser, or use a local development server:

   Using Python: ```bash python -m http.server 8000 ```

   Using Node.js (http-server): ```bash npx http-server ```

   Using VS Code Live Server:

   • Install the Live Server extension
   • Right-click on index.html and select "Open with Live Server"

3. View the site

   Navigate to http://localhost:8000 (or the port shown by your server)

Features Overview

• Hero Section: Eye-catching hero with call-to-action
• Menu Display: Showcase food items with images and descriptions
• Responsive Navigation: Mobile-friendly navigation menu
• Smooth Scrolling: Smooth scroll to sections
• Image Gallery: Display food items in an attractive layout
• Contact Form: Get in touch section with form validation
• Footer: Social media links and contact information

Customization

Colors

Edit the CSS variables in css/style.css:

```css :root { --primary-color: #ff6b6b; --secondary-color: #4ecdc4; --text-color: #333; --bg-color: #fff; --accent-color: #ffe66d; } ```

Content

• Update text content in index.html
• Replace images in the images/ folder
• Modify menu items and descriptions

Styling

• Main styles: css/style.css
• Responsive breakpoints: css/responsive.css
• Animations: css/animations.css

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Opera (latest)

Support

For support, please open an issue in the GitHub repository.

---

Made with HTML, CSS, and JavaScript