Omkar Groceries-Multi-Page Frontend Grocery Web Application

Project Overview

Omkar Groceries is a fully functional, multi-page frontend grocery website designed to simulate a real-world online grocery shopping experience. It features a professional user interface, categorized product listings, product detail views, and a modal-based login system — all styled for responsiveness and visual appeal using modern web technologies.

Technologies Used

• HTML5-Semantic structure of pages
• CSS3-Responsive styling (Grid & Flexbox), animations
• JavaScript (DOM)-Interactivity (login modal, alerts)
• Font Awesome-Social media and UI icons
• Google Fonts-Modern typography (e.g., Poppins)

Pages & Functional Sections

1. Homepage (index.html)

• Fixed header with delivery info, search bar, login, and cart buttons
• Two product category grids with 14+ categories
• Horizontal product sliders for Dairy, Bread & Eggs and Cool Drinks & Juices
• Each product shows name, image, price, and an “ADD” button

2. Login Page (login.html)

• Mobile-friendly UI with country code and phone number input
• Opened via modal pop-up loaded in an iframe
• Includes a privacy disclaimer for user consent

3. Category Page (breakfast.html)

• Product grid for Breakfast & Instant Food (Maggi, Yippee, Corn Flakes)
• Product cards include image, size, price, and discount (if applicable)

4. Product Detail Page (toned.html)

• Focused on Heritage Toned Milk
• Includes unit selector, highlights, product description, and suggested recipes (e.g., Rasmalai, Kulfi)

Features & Functionalities

• Search Bar (UI only)-Suggests search capability
• Cart Simulation-ADD buttons for interactivity
• Responsive Design-Adapts layout across devices
• Login Modal-Iframe-based login popup
• Footer-Contains app badges, links, categories, and social icons

Learning Outcomes

• Learned to design and structure multi-page frontend websites
• Improved skills in:
  • CSS Grid & Flexbox for layout
  • JavaScript DOM manipulation and modal logic
  • UX/UI design principles for e-commerce simulation
• Gained experience in responsive design and modular coding

GitHub Repository

View Project on GitHub