A responsive food delivery website built as a practice project to learn HTML, CSS, and especially media queries. This repository contains the source HTML and CSS used to build the site and demonstrates responsive layout, visual styling, and semantic structure for a simple food-ordering landing page.
This is a small front-end project intended for learning and experimentation. The site focuses on:
- Responsive layout using CSS media queries
- Clean HTML structure and semantic tags
- Styling techniques with CSS (Flexbox, Grid, typography, color schemes)
- Responsive header and navigation
- Hero/banner section showcasing featured dishes
- Menu sections with cards for food items
- Contact or order call-to-action
- Mobile-first breakpoints with adjusted layouts for tablet and desktop
- HTML5
- CSS3 (Flexbox, Grid, Media Queries)
- No JavaScript (static prototype) — easy to extend with JS later
- Clone the repository:
git clone https://github.com/sunilpy-dev/Project2.git
- Open the project folder and open the main HTML file (e.g.,
index.html) in your browser.
Tip: Use your browser devtools to test different viewport sizes and observe how media queries adjust the layout.
- index.html
- css/
- styles.css
- images/
- (project screenshots and assets)
- Accessibility: add meaningful
altattributes and consider ARIA attributes where appropriate. - Interactivity: add JavaScript for a simple cart, filtering, or a mock order flow.
- Deployment: add a live demo via GitHub Pages or Netlify and include a demo badge/link in this README.
- Testing: add cross-browser checks and refine breakpoints for edge-case viewports.
This is a personal practice repository. Contributions are welcome — open an issue or submit a pull request with improvements or suggestions.
If you have questions or suggestions, open an issue in this repository or visit my GitHub profile: https://github.com/sunilpy-dev