About Project: A responsive eCommerce website featuring product catalogs, category filtering, and shopping cart functionality with smooth animations and mobile-friendly navigation. Built with semantic HTML5, CSS Grid and Flexbox layouts, custom CSS properties for theming, and vanilla JavaScript for interactive menus, accordions, and modal popups all organized in clean, maintainable code that online stores can easily customize, and much more.
What I learned: Created a complete multi-section eCommerce layout with product grids, sidebar filters, implemented accordion menus with single-active state logic, built a newsletter modal with timed auto-popup animation, and developed responsive navigation with mobile slide-out menus, and much more.
Personal Note:
I started building HTML, CSS, and JavaScript projects in 2022.
At that time, I focused on learning first and began uploading to GitHub recently.
Now I'm working with React.js and Next.js, and seeking opportunities as a frontend or web developer.
- Newsletter Modal - Auto-popup subscription form with email input, close button, and timed appearance animation
- Notification Toast - Bottom-left notification with product preview, sliding animation, and auto-dismiss timer
- Header Navigation - Logo, search bar, user action buttons (profile, wishlist, cart with counters), and social links
- Desktop Mega Menu - Multi-column dropdown panels with category links and product subcategories
- Mobile Navigation - Slide-in sidebar menu with accordion categories, language/currency selectors, and social links
- Hero Banner Slider - Horizontal scrollable promotional banners with content overlays and call-to-action buttons
- Category Cards - Scrollable category items with icons, product counts, and quick navigation links
- Product Sidebar - Collapsible category filters with stock counts and best seller showcase section
- Product Showcases - Multiple product sections including New Arrivals, Trending Items, and Top Rated with horizontal scroll
- Deal of the Day - Featured products with countdown timer, progress bar, star ratings, and add-to-cart button
- Product Grid - Responsive grid layout with image hover effects, quick action buttons, sale badges, and price displays
- Testimonials Section - Customer review card with profile image and quotation styling
- CTA Banner - Promotional image with centered discount offer and shop now button
- Services Section - Icon-based service features like worldwide delivery and return policy
- Blog Section - Horizontal scrollable blog cards with images, categories, and publication dates
- Footer - Brand directory, navigation links, contact information, social media, and payment methods
- Mobile Bottom Bar - Fixed bottom navigation with menu, cart, home, wishlist, and category icons
- HTML5 - Semantic markup with data attributes for JavaScript interactions and accessibility
- CSS3 - Advanced styling with Grid, Flexbox, custom properties, transforms, transitions, and animations
- JavaScript (ES6) - Vanilla JS for modal controls, accordion menus, mobile navigation, and toast notifications
- Google Fonts - Poppins font family for modern, clean typography across all text elements
- Ionicons - SVG icon library for navigation, social media, and user interface elements
- CSS Custom Properties - Variables for colors, typography, spacing, and timing for consistent theming
- CSS Animations - Keyframe animations for popup modals, slide-in menus, and notification toasts
- Media Queries - Responsive breakpoints at 480px, 570px, 768px, 1024px, 1200px, and 1400px
- Flexbox & Grid - Modern layout systems for product grids, category cards, and responsive sections
- Scroll Snap - CSS scroll-snap for smooth horizontal scrolling in product showcases and banners
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
- Fully Responsive Design - Works seamlessly on all devices from 320px mobile to 1920px+ desktop screens
- Auto-Popup Newsletter - Modal appears after 5 seconds with scale-up animation and email subscription form
- Product Notification Toast - Sliding notification showing recent purchases with auto-dismiss after 21.5 seconds
- Mobile-First Navigation - Full-height slide-in menu with accordion categories and smooth transitions
- Desktop Mega Menu - Multi-column dropdown panels with category organization and hover animations
- Horizontal Scroll Sections - Smooth scrollable product showcases with snap points for better UX
- Accordion Filtering - Single-active accordion menus for product categories with stock display
- Product Hover Effects - Image swap on hover, quick action buttons slide-in, and smooth transitions
- Countdown Timer - Deal of the day section with days, hours, minutes, seconds display
- Progress Indicators - Visual product availability bars showing sold vs available stock
- Sale Badges - Angled and standard badges for new, sale, and discount indicators
- Star Ratings - Product rating displays using Ionicons with filled and outline stars
- Shopping Cart Counters - Live count badges on cart and wishlist action buttons
- Custom Scrollbars - Styled scrollbars for better visual consistency across the site
- Overlay System - Global overlay for modal, menu, and sidebar interactions
- Cross-Browser Compatible - Tested on Chrome, Firefox, Safari, Edge, and Opera browsers
- Easy Customization - CSS variables allow quick color, font, and spacing changes
-
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 store name and branding in <code>index.html</code></li>
<li>Change color scheme in <code>style.css</code> using CSS variables</li>
<li>Replace product images in <code>assets/images/</code> folder</li>
<li>Update contact details and social links in footer section</li>
</ul>
</li>
</ol>
- Text Content: Edit directly in
index.html- update store name, product titles, descriptions, prices, and all text content - Colors: Update CSS variables in
:rootselector at the top ofstyle.css:root { --slate-gray: hsl(210, 15%, 55%); /* Text and secondary elements */ --golden-amber: hsl(45, 90%, 60%); /* Primary accent color */ --steel-blue: hsl(220, 43%, 35%); /* Primary dark color */ --porcelain: hsl(210, 25%, 96%); /* Light backgrounds */ } - Images: Replace files inside
assets/images/with your own product photos (keep same filenames or update HTML references) - Fonts: Change the Google Fonts link in HTML
<head>section and update font-family in CSS - Product Grid: Add or remove products by duplicating
<div class="showcase">elements in the product-grid section - Categories: Modify sidebar categories, desktop menu dropdowns, and mobile accordion menus to match your product catalog
- Newsletter Modal: Adjust popup timing by changing the animation delay in CSS (default 5s) or disable it by removing
data-modalattribute - Countdown Timer: Update timer values in HTML or connect to JavaScript for live countdown functionality
- Footer Content: Modify brand directory links, navigation menus, contact details, and payment method logos
- Responsive Breakpoints: Adjust media query values in CSS to customize responsive behavior for different screen sizes
- Animations: Modify animation timing and effects in
@keyframessections and transition properties throughout CSS
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.
