A modern, responsive ecommerce website specializing in graphics cards for PC enthusiasts and gamers. Built with vanilla HTML, CSS, and JavaScript for optimal performance and compatibility.
- Product Catalog: Browse GPUs from NVIDIA and AMD with detailed specifications
- Smart Filtering: Filter products by brand (NVIDIA, AMD) and price category (Budget, All)
- Shopping Cart: Add/remove items with persistent storage using localStorage
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Interactive UI: Smooth animations and hover effects throughout
- Hero Section: Eye-catching landing area with call-to-action buttons
- Category Navigation: Quick access to different GPU categories
- Product Cards: Detailed product information with pricing and specifications
- Cart Sidebar: Slide-out cart with quantity controls and total calculation
- Newsletter Signup: Email subscription with animated feedback
- Smooth Scrolling: Navigation with automatic section highlighting
- Modern CSS: CSS Grid, Flexbox, and CSS Custom Properties (variables)
- Vanilla JavaScript: No external dependencies for fast loading
- Local Storage: Cart persistence across browser sessions
- Intersection Observer: Scroll-triggered animations
- Mobile-First: Responsive design with progressive enhancement
- HTML5: Semantic markup with accessibility features
- CSS3: Modern styling with custom properties and animations
- JavaScript ES6+: Modern JavaScript with classes and modules
- Google Fonts: Inter font family for clean typography
- SVG Icons: Scalable vector graphics for crisp icons
10x-ecom-ui/
├── index.html # Main HTML file
├── styles/
│ └── main.css # All CSS styles and responsive design
├── js/
│ └── main.js # JavaScript functionality and interactivity
└── README.md # Project documentation
- Primary:
#00d4ff(Cyan blue) - Primary Dark:
#00b8e6 - Secondary:
#ff6b35(Orange) - Accent:
#7c3aed(Purple) - Text Primary:
#1a1a1a - Text Secondary:
#666666 - Background:
#ffffff - Background Alt:
#f8fafc
- Font Family: Inter (Google Fonts)
- Font Sizes: Responsive scale from 0.75rem to 3rem
- Font Weights: 300, 400, 500, 600, 700
- Base Unit: 1rem (16px)
- Scale: xs(0.25), sm(0.5), md(1), lg(1.5), xl(2), 2xl(3), 3xl(4)
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Local web server (optional but recommended)
-
Clone the repository
git clone https://github.com/maxa101/10x-ecom-ui.git cd 10x-ecom-ui -
Open the project
- Option 1: Open
index.htmldirectly in your browser - Option 2: Use a local server for better development experience
- Option 1: Open
-
Using a local server (recommended)
# Using Python 3 python -m http.server 8000 # Using Node.js (if you have http-server installed) npx http-server # Using PHP php -S localhost:8000
-
Access the site
- Direct file:
file:///path/to/index.html - Local server:
http://localhost:8000
- Direct file:
- HTML: Semantic structure with proper accessibility attributes
- CSS: Organized with CSS custom properties and mobile-first approach
- JavaScript: ES6 class-based architecture with modular functions
The main JavaScript class that handles:
- Product data management
- Cart functionality
- UI interactions
- Event handling
- Local storage operations
- Reset & Base: Normalize styles and base typography
- Components: Reusable UI components (buttons, cards, forms)
- Layout: Grid and flexbox layouts for different sections
- Responsive: Mobile-first media queries
- Utilities: Helper classes for common styling needs
To add new products, modify the loadProducts() method in js/main.js:
{
id: 9,
name: 'Your GPU Name',
brand: 'NVIDIA', // or 'AMD'
category: 'nvidia', // 'nvidia', 'amd', or 'budget'
price: 999.99,
originalPrice: 1099.99, // optional
image: 'gpu-image.jpg',
specs: ['Memory Size', 'Core Count'],
badge: 'New', // optional
inStock: true,
description: 'GPU description'
}- Mobile: < 480px
- Tablet: 481px - 768px
- Desktop: > 768px
- Chrome: 60+
- Firefox: 60+
- Safari: 12+
- Edge: 79+
Modify CSS custom properties in :root selector in styles/main.css:
:root {
--primary-color: #your-color;
--secondary-color: #your-color;
/* ... other variables */
}Change the Google Fonts import in index.html and update the font family variable:
--font-family: 'Your-Font', sans-serif;Adjust grid and flexbox properties in the respective component sections.
- Minimal Dependencies: No external JavaScript libraries
- Optimized Images: CSS-based graphics for GPU visuals
- Efficient CSS: Uses modern CSS features for better performance
- Local Storage: Client-side cart persistence
- Lazy Loading: Intersection Observer for scroll animations
- Product search functionality
- User authentication and accounts
- Wishlist functionality
- Product reviews and ratings
- Checkout and payment integration
- Admin panel for product management
- Real product images
- Advanced filtering (price range, specifications)
- Product comparison tool
- Build compatibility checker
- Service Worker for offline functionality
- Progressive Web App (PWA) features
- API integration for dynamic product data
- Image optimization and lazy loading
- Advanced animations with CSS/JS
- A/B testing framework
- Analytics integration
- SEO optimizations
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
10X GPU Store Team
- Website: 10x-gpu-store.com
- GitHub: @maxa101
- Inter Font: Google Fonts for the beautiful typography
- Feather Icons: Inspiration for SVG icons
- Modern CSS: CSS Grid and Flexbox specifications
- Web Standards: W3C for web accessibility guidelines
Built with ❤️ for PC enthusiasts and gamers worldwide