Cart Store

About the Project: Cart Store is a fully responsive eCommerce website UI built with HTML, CSS, and JavaScript. It covers fashion, footwear, jewelry, cosmetics, and more — designed to show real frontend skills in layout, interactivity, and clean code structure.

Key Highlights: Features a multi-section product layout, animated notification toast, newsletter modal, sticky sidebar with category filters, and a countdown deal timer — all fully responsive across devices.

Explore the project: Visit the Live Website or watch the Demo Video.

Project Details

What's Inside

• Header — Logo, search bar, user actions, and desktop/mobile navigation menus.
• Banner Slider — Horizontal scroll banner with product promotions and CTA buttons.
• Category Bar — Scrollable category row with icons and item counts per category.
• Product Sidebar — Accordion-based category filter with best seller product list.
• Product Minimal — Three scrollable sections: New, Trending, and Top Rated products.
• Deal of the Day — Featured products with stock status bar and live countdown timer.
• Product Grid — Responsive product card grid with hover image swap and action buttons.
• Testimonials & CTA — Customer review card, seasonal sale banner, and services section.
• Blog Section — Scrollable blog card row with category labels and post metadata.
• Footer — Brand directory, navigation links, contact info, and payment icons.
• Newsletter Modal — Auto-triggered popup with email subscription form and close control.
• Notification Toast — Animated slide-in toast showing a recent purchase notification.

Key Features

• Fully Responsive Layout — Optimized for mobile, tablet, and desktop screen sizes.
• Mobile Navigation Menu — Slide-in side menu with accordion categories for mobile users.
• Desktop Mega Menu — Multi-column dropdown panel with hover-triggered category lists.
• Newsletter Modal Popup — Auto-opens after 5 seconds with smooth scale-up animation.
• Notification Toast — Slides in and out automatically on a timed animation loop.
• Product Hover Effects — Image swap on hover with animated quick-action buttons.
• Deal Countdown Timer — Displays days, hours, minutes, and seconds for limited offers.
• Accordion Sidebar Filters — Expand and collapse category filters with single-active state.
• Horizontal Scroll Sections — Snap-scroll product rows for clean mobile browsing experience.
• Sale & New Badges — Angled ribbon-style product badges for sale and new items.

Technologies Used

• HTML5 — Semantic markup structure used throughout all page sections.
• CSS3 — Custom properties, flexbox, grid, animations, and full responsive design.
• JavaScript (ES6) — Modal, toast, accordion, and mobile menu interactivity logic.
• Google Fonts — Poppins font integrated for clean and modern typography.
• Ionicons — Icon library used for navigation, actions, and UI elements throughout.

Project Structure

cart-store/
│
├── index.html                 # Main HTML structure with all eCommerce sections
│
├── assets/
│   ├── css/
│   │   └── style.css          # Complete styles, animations, responsive design, and themes
│   │
│   ├── js/
│   │   └── script.js          # Modal, accordion, navigation, toast functionality
│   │
│   └── images/                # Product images, banners, icons, blog photos, payments
│
└── README.md                  # Project documentation
    

Quick Start

1. Clone the repository:

   git clone https://github.com/nawazdevx/cart-store.git

  <li>
    <strong>Open the project:</strong>
    <ul>
      <li>Open <code>index.html</code> directly in your browser</li>
      <li>Or run a local server:</li>
    </ul>
    <pre><code>python -m http.server 3000</code></pre>
    Then visit <code>http://localhost:3000</code>
  </li>

  <li>
    <strong>Start Customizing:</strong>
    <ul>
      <li>Update banner images and text content inside <code>index.html</code></li>
      <li>Add or remove product cards in the product grid in <code>index.html</code></li>
      <li>Change colors and fonts using CSS variables at the top of <code>style.css</code></li>
      <li>Edit category names and sidebar items directly in <code>index.html</code></li>
      <li>Adjust modal delay or toast timing in <code>script.js</code></li>
    </ul>
  </li>
</ol>

License: This project is licensed under the MIT License.

Contact: Connect with me on LinkedIn or visit my Portfolio.

Support: Found this helpful? Give it a ⭐ on GitHub! Thank you.

Project Preview