README.md

🛍️ E-Commerce Website

A modern, responsive E-Commerce Web Application built with HTML, CSS, and Font Awesome for UI icons. This comprehensive e-commerce template features multiple pages including home, shop, about, and contact sections with a fully designed shopping front end.

🚀 Features

🏠 Homepage (index.html)

• 🧭 Fixed Header Navigation with Active States
• 🎨 Hero Banner with Call-to-Action
• ✅ Features Section (Free Shipping, Online Order, Save Money, etc.)
• 🛒 Featured Product Grid with Ratings and Cart Icons
• 🎁 Promotional Banners & Seasonal Offers
• 💌 Newsletter Subscription Section
• 📱 Fully Responsive Layout

� Shop Page (shop.html)

• 📦 Complete Product Grid (12+ Products)
• ⭐ Product Cards with Star Ratings
• 🏷️ Product Pricing and Brand Information
• 📄 Pagination Navigation
• 🎯 Promotional Banner Section
• 🛍️ Shopping Cart Integration

ℹ️ About Page (about.html)

• 👥 Company Story and Mission
• 🎥 App Download Section with Video Placeholder
• 👨‍💼 Team Members Showcase
• 📊 Company Statistics (Customers, Products, Countries)
• 🎯 Mission & Vision Banners
• 🌟 Features Grid Display

📞 Contact Page (contact.html)

• 📍 Contact Information with Static Map
• 🎧 Customer Support Options (24/7 Support, Order Tracking, Returns, Tech Support)
• 📝 Contact Form with Required Fields
• ❓ FAQ Section with Common Questions
• 💬 Multiple Ways to Get Help

�🛠 Tech Stack

• HTML5 - Semantic markup and structure
• CSS3 - Advanced styling with Flexbox, Grid, and Animations
• Google Fonts - League Spartan typography
• Font Awesome - Professional icons and symbols
• Responsive Design - Mobile-first approach

📁 Folder Structure

ecommerce-website/
├── index.html          # Homepage
├── shop.html           # Product catalog page
├── about.html          # Company information page
├── contact.html        # Contact and support page
├── index.css           # Main stylesheet for all pages
├── images/
│   ├── aboutimage.jpg  # Hero background
│   ├── about/          # About page images
│   │   ├── a1.png      # Company image
│   │   ├── a2.jpg      # Team member photos
│   │   ├── a3.png
│   │   ├── a4.png
│   │   ├── a5.jpg      # Mission/Vision banners
│   │   ├── a6.jpg
│   │   └── banner.png  # About page banner
│   ├── features/       # Feature icons
│   │   ├── f1.png      # Free shipping
│   │   ├── f2.png      # Online order
│   │   ├── f3.png      # Save money
│   │   ├── f4.png      # Promotions
│   │   ├── f5.png      # Happy sell
│   │   └── f6.png      # 24/7 Support
│   ├── products/       # Product images
│   │   ├── f1.jpg-f8.jpg  # Featured products
│   │   └── n1.jpg-n8.jpg  # New arrivals
│   └── banner/         # Marketing banners
│       ├── b1.jpg      # Hero banners
│       ├── b2.jpg      # Promotional banners
│       ├── b10.jpg     # Shop banners
│       ├── b16.jpg
│       ├── foot5.jpg
│       ├── laptop.webp
│       └── new-product-500x500.webp

🎨 Design Features

• Navigation Enhancement: Active state indicators with bottom borders
• Hover Effects: Smooth transitions on cards and buttons
• Responsive Grid: Flexible product layouts for all screen sizes
• Professional Typography: Clean, modern font choices
• Color Scheme: Consistent teal (#088178) accent color throughout
• Card Design: Shadow effects and rounded corners for modern look

📦 How to Run

1. Clone the repository:

   git clone https://github.com/vigneshsiva11/ecommerce-website.git

2. Navigate to the project directory:

   cd ecommerce-website

3. Open index.html in your browser:

   # On Windows
   start index.html
   
   

🔗 Page Navigation

• Home (index.html) - Main landing page with featured products
• Shop (shop.html) - Complete product catalog with filtering
• About (about.html) - Company information and team
• Contact (contact.html) - Customer support and contact forms

🌟 Key Highlights

• ✅ Multi-page Architecture - Complete e-commerce site structure
• ✅ Professional Design - Modern, clean, and user-friendly interface
• ✅ Mobile Responsive - Works perfectly on all device sizes
• ✅ Performance Optimized - Fast loading with optimized images
• ✅ SEO Ready - Semantic HTML structure for search engines
• ✅ Accessibility - Alt tags and proper heading structure

🛠️ Customization

The website is built with modular CSS and can be easily customized:

• Colors: Modify the CSS variables for brand colors
• Products: Replace product images in the /images/products/ folder
• Content: Update text content in HTML files
• Layout: Adjust CSS Grid and Flexbox properties
• Branding: Replace logo and banner images