Premium Laptop Store Template
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LaptopHub Pro - Premium Laptop Store</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> </head> <body> <!-- Loading Screen --> <!-- <div class="loading" id="loading"> <div class="spinner"></div> </div> --> <!-- Header --> <header class="header"> <div class="header-top"> <div class="container"> <div style="display: flex; justify-content: space-between; align-items: center;"> <div>? Free shipping on orders over $500 | ? 24/7 Tech Support</div> <div style="display: flex; gap: 1rem;"> <span>Track Order</span> <span>Business Sales</span> <span>Student Discounts</span> </div> </div> </div> </div> <div class="header-main"> <div class="container"> <div class="header-content"> <a href="#" class="logo"> <div class="logo-icon"> <i class="fas fa-laptop"></i> </div> LaptopHub Pro </a> <div class="search-container"> <div class="search-wrapper"> <input type="text" class="search-input" id="searchInput" placeholder="Search laptops, brands, processors..."> <button class="search-btn" id="searchBtn"> <i class="fas fa-search"></i> </button> </div> </div> <div class="header-actions"> <a href="#" class="header-link"> <i class="fas fa-heart"></i> Wishlist </a> <a href="#" class="header-link" id="cartBtn"> <i class="fas fa-shopping-cart"></i> Cart <span class="cart-count" id="cartCount">0</span> </a> </div> </div> </div> </div> <nav class="nav"> <div class="container"> <ul class="nav-menu"> <li><a href="#categories">All Laptops</a></li> <li><a href="#gaming">Gaming</a></li> <li><a href="#business">Business</a></li> <li><a href="#ultrabooks">Ultrabooks</a></li> <li><a href="#workstations">Workstations</a></li> <li><a href="#budget">Budget</a></li> <li><a href="#accessories">Accessories</a></li> <li><a href="#deals">Deals</a></li> </ul> </div> </nav> </header> <!-- Hero Section --> <section class="hero"> <div class="container"> <div class="hero-content"> <div class="hero-text"> <h1>Power Your Productivity</h1> <p>Discover premium laptops from top brands. Whether for gaming, business, or creative work, find your perfect machine with expert guidance and unbeatable prices.</p> <a href="#products" class="hero-cta"> <i class="fas fa-rocket"></i> Shop Now </a> </div> <div class="hero-image"> <img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&q=80" alt="Premium Laptop Display" class="hero-laptop" onerror="this.src=''; this.alt='Laptop image failed to load'; this.style.display='none';"> </div> </div> </div> </section> <!-- Features --> <section class="features"> <div class="container"> <div class="features-grid"> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-tools"></i> </div> <h3 class="feature-title">Expert Setup Service</h3> <p class="feature-description">Professional data transfer, software installation, and optimization included with every purchase.</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-shield-alt"></i> </div> <h3 class="feature-title">Extended Warranty</h3> <p class="feature-description">Comprehensive coverage with accidental damage protection and priority repair service.</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-graduation-cap"></i> </div> <h3 class="feature-title">Student Discounts</h3> <p class="feature-description">Special pricing for students and educators with verified academic status.</p> </div> <div class="feature-card"> <div class="feature-icon"> <i class="fas fa-exchange-alt"></i> </div> <h3 class="feature-title">30-Day Returns</h3> <p class="feature-description">Not satisfied? Return your laptop within 30 days for a full refund, no questions asked.</p> </div> </div> </div> </section> <!-- Categories --> <section class="categories" id="categories"> <div class="container"> <h2 class="section-title">Shop by Category</h2> <div class="categories-grid"> <div class="category-card" data-category="gaming"> <div class="category-image"> <img src="https://images.unsplash.com/photo-1603302576837-37561b2e2302?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Gaming Laptop" onerror="this.src=''; this.alt='Gaming laptop image failed to load'; this.style.display='none';"> </div> <div class="category-content"> <h3 class="category-name">Gaming Laptops</h3> <p class="category-description">High-performance machines with dedicated graphics and fast processors</p> <p class="category-count">120+ models available</p> </div> </div> <div class="category-card" data-category="business"> <div class="category-image"> <img src="https://images.unsplash.com/photo-1541807084-5c52b6b3adef?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Business Laptop" onerror="this.src=''; this.alt='Business laptop image failed to load'; this.style.display='none';"> </div> <div class="category-content"> <h3 class="category-name">Business Laptops</h3> <p class="category-description">Professional-grade laptops with enterprise security and reliability</p> <p class="category-count">200+ models available</p> </div> </div> <div class="category-card" data-category="ultrabooks"> <div class="category-image"> <img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Ultrabook" onerror="this.src=''; this.alt='Ultrabook image failed to load'; this.style.display='none';"> </div> <div class="category-content"> <h3 class="category-name">Ultrabooks</h3> <p class="category-description">Ultra-thin, lightweight laptops perfect for mobility and style</p> <p class="category-count">85+ models available</p> </div> </div> <div class="category-card" data-category="workstations"> <div class="category-image"> <img src="https://images.unsplash.com/photo-1588872657578-7efd1f1555ed?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Workstation Laptop" onerror="this.src=''; this.alt='Workstation laptop image failed to load'; this.style.display='none';"> </div> <div class="category-content"> <h3 class="category-name">Workstations</h3> <p class="category-description">Professional workstations for CAD, video editing, and development</p> <p class="category-count">60+ models available</p> </div> </div> </div> </div> </section> <!-- Products --> <section class="products" id="products"> <div class="container"> <div class="products-header"> <h2 class="section-title">Featured Laptops</h2> <div class="products-filters"> <select class="filter-select" id="brandFilter"> <option value="all">All Brands</option> <option value="apple">Apple</option> <option value="dell">Dell</option> <option value="hp">HP</option> <option value="lenovo">Lenovo</option> <option value="asus">ASUS</option> </select> <select class="filter-select" id="priceFilter"> <option value="all">All Prices</option> <option value="under-500">Under $500</option> <option value="500-1000">$500 - $1000</option> <option value="1000-2000">$1000 - $2000</option> <option value="over-2000">Over $2000</option> </select> <select class="filter-select" id="sortFilter"> <option value="featured">Featured</option> <option value="price-low">Price: Low to High</option> <option value="price-high">Price: High to Low</option> <option value="rating">Customer Rating</option> <option value="newest">Newest First</option> </select> </div> </div> <div class="products-grid" id="productsGrid"> <div class="product-card" data-brand="apple" data-price="1299"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="MacBook Air M2" onerror="this.src=''; this.alt='Laptop image failed to load'; this.style.display='none';"> <div class="product-badge">Best Seller</div> <div class="product-wishlist"> <i class="far fa-heart"></i> </div> </div> <div class="product-content"> <div class="product-brand">Apple</div> <h3 class="product-title">MacBook Air 13" with M2 Chip</h3> <div class="product-specs"> <div class="spec-item"> <span class="spec-label">Processor:</span> <span>Apple M2</span> </div> <div class="spec-item"> <span class="spec-label">RAM:</span> <span>8GB</span> </div> <div class="spec-item"> <span class="spec-label">Storage:</span> <span>256GB SSD</span> </div> <div class="spec-item"> <span class="spec-label">Display:</span> <span>13.6" Retina</span> </div> </div> <div class="product-rating"> <div class="stars"> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> </div> <span class="rating-count">(4,521)</span> </div> <div class="product-price"> <span class="current-price">$1,299.99</span> <span class="original-price">$1,499.99</span> <span class="discount">13% off</span> </div> <div class="product-actions"> <button class="btn-primary add-to-cart" data-product="MacBook Air 13 with M2 Chip" data-price="1299.99">Add to Cart</button> <button class="btn-secondary compare-btn" data-product="MacBook Air 13 with M2 Chip">Compare</button> </div> </div> </div> <div class="product-card" data-brand="dell" data-price="899"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1588872657578-7efd1f1555ed?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="Dell XPS 13" onerror="this.src=''; this.alt='Laptop image failed to load'; this.style.display='none';"> <div class="product-badge">Premium</div> <div class="product-wishlist"> <i class="far fa-heart"></i> </div> </div> <div class="product-content"> <div class="product-brand">Dell</div> <h3 class="product-title">XPS 13 Plus Ultrabook</h3> <div class="product-specs"> <div class="spec-item"> <span class="spec-label">Processor:</span> <span>Intel i7-1260P</span> </div> <div class="spec-item"> <span class="spec-label">RAM:</span> <span>16GB</span> </div> <div class="spec-item"> <span class="spec-label">Storage:</span> <span>512GB SSD</span> </div> <div class="spec-item"> <span class="spec-label">Display:</span> <span>13.4" 4K OLED</span> </div> </div> <div class="product-rating"> <div class="stars"> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> </div> <span class="rating-count">(2,847)</span> </div> <div class="product-price"> <span class="current-price">$899.99</span> <span class="original-price">$1,199.99</span> <span class="discount">25% off</span> </div> <div class="product-actions"> <button class="btn-primary add-to-cart" data-product="Dell XPS 13 Plus Ultrabook" data-price="899.99">Add to Cart</button> <button class="btn-secondary compare-btn" data-product="Dell XPS 13 Plus Ultrabook">Compare</button> </div> </div> </div> <div class="product-card" data-brand="asus" data-price="1599"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1603302576837-37561b2e2302?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="ASUS ROG Gaming Laptop" onerror="this.src=''; this.alt='Laptop image failed to load'; this.style.display='none';"> <div class="product-badge">Gaming</div> <div class="product-wishlist"> <i class="far fa-heart"></i> </div> </div> <div class="product-content"> <div class="product-brand">ASUS</div> <h3 class="product-title">ROG Strix G15 Gaming Laptop</h3> <div class="product-specs"> <div class="spec-item"> <span class="spec-label">Processor:</span> <span>AMD Ryzen 7</span> </div> <div class="spec-item"> <span class="spec-label">RAM:</span> <span>16GB DDR4</span> </div> <div class="spec-item"> <span class="spec-label">Graphics:</span> <span>RTX 3070</span> </div> <div class="spec-item"> <span class="spec-label">Display:</span> <span>15.6" 144Hz</span> </div> </div> <div class="product-rating"> <div class="stars"> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="far fa-star star"></i> </div> <span class="rating-count">(1,923)</span> </div> <div class="product-price"> <span class="current-price">$1,599.99</span> <span class="original-price">$1,899.99</span> <span class="discount">16% off</span> </div> <div class="product-actions"> <button class="btn-primary add-to-cart" data-product="ASUS ROG Strix G15 Gaming Laptop" data-price="1599.99">Add to Cart</button> <button class="btn-secondary compare-btn" data-product="ASUS ROG Strix G15 Gaming Laptop">Compare</button> </div> </div> </div> <div class="product-card" data-brand="hp" data-price="449"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1541807084-5c52b6b3adef?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="HP Pavilion" onerror="this.src=''; this.alt='Laptop image failed to load'; this.style.display='none';"> <div class="product-badge">Budget Pick</div> <div class="product-wishlist"> <i class="far fa-heart"></i> </div> </div> <div class="product-content"> <div class="product-brand">HP</div> <h3 class="product-title">Pavilion 15 Laptop</h3> <div class="product-specs"> <div class="spec-item"> <span class="spec-label">Processor:</span> <span>Intel i5-1135G7</span> </div> <div class="spec-item"> <span class="spec-label">RAM:</span> <span>8GB DDR4</span> </div> <div class="spec-item"> <span class="spec-label">Storage:</span> <span>256GB SSD</span> </div> <div class="spec-item"> <span class="spec-label">Display:</span> <span>15.6" Full HD</span> </div> </div> <div class="product-rating"> <div class="stars"> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="far fa-star star"></i> </div> <span class="rating-count">(3,421)</span> </div> <div class="product-price"> <span class="current-price">$449.99</span> <span class="original-price">$599.99</span> <span class="discount">25% off</span> </div> <div class="product-actions"> <button class="btn-primary add-to-cart" data-product="HP Pavilion 15 Laptop" data-price="449.99">Add to Cart</button> <button class="btn-secondary compare-btn" data-product="HP Pavilion 15 Laptop">Compare</button> </div> </div> </div> <div class="product-card" data-brand="lenovo" data-price="2299"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="ThinkPad X1 Carbon" onerror="this.src=''; this.alt='Laptop image failed to load'; this.style.display='none';"> <div class="product-badge">Business</div> <div class="product-wishlist"> <i class="far fa-heart"></i> </div> </div> <div class="product-content"> <div class="product-brand">Lenovo</div> <h3 class="product-title">ThinkPad X1 Carbon Gen 10</h3> <div class="product-specs"> <div class="spec-item"> <span class="spec-label">Processor:</span> <span>Intel i7-1260P</span> </div> <div class="spec-item"> <span class="spec-label">RAM:</span> <span>32GB LPDDR5</span> </div> <div class="spec-item"> <span class="spec-label">Storage:</span> <span>1TB SSD</span> </div> <div class="spec-item"> <span class="spec-label">Display:</span> <span>14" 4K HDR</span> </div> </div> <div class="product-rating"> <div class="stars"> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> </div> <span class="rating-count">(856)</span> </div> <div class="product-price"> <span class="current-price">$2,299.99</span> <span class="original-price">$2,699.99</span> <span class="discount">15% off</span> </div> <div class="product-actions"> <button class="btn-primary add-to-cart" data-product="Lenovo ThinkPad X1 Carbon Gen 10" data-price="2299.99">Add to Cart</button> <button class="btn-secondary compare-btn" data-product="Lenovo ThinkPad X1 Carbon Gen 10">Compare</button> </div> </div> </div> <div class="product-card" data-brand="apple" data-price="1999"> <div class="product-image"> <img src="https://images.unsplash.com/photo-1517336714731-489689fd1ca8?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80" alt="MacBook Pro 14" onerror="this.src=''; this.alt='Laptop image failed to load'; this.style.display='none';"> <div class="product-badge">Pro</div> <div class="product-wishlist"> <i class="far fa-heart"></i> </div> </div> <div class="product-content"> <div class="product-brand">Apple</div> <h3 class="product-title">MacBook Pro 14" M2 Pro</h3> <div class="product-specs"> <div class="spec-item"> <span class="spec-label">Processor:</span> <span>Apple M2 Pro</span> </div> <div class="spec-item"> <span class="spec-label">RAM:</span> <span>16GB</span> </div> <div class="spec-item"> <span class="spec-label">Storage:</span> <span>512GB SSD</span> </div> <div class="spec-item"> <span class="spec-label">Display:</span> <span>14.2" Liquid Retina XDR</span> </div> </div> <div class="product-rating"> <div class="stars"> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> <i class="fas fa-star star"></i> </div> <span class="rating-count">(1,234)</span> </div> <div class="product-price"> <span class="current-price">$1,999.99</span> <span class="original-price">$2,199.99</span> <span class="discount">9% off</span> </div> <div class="product-actions"> <button class="btn-primary add-to-cart" data-product="MacBook Pro 14 M2 Pro" data-price="1999.99">Add to Cart</button> <button class="btn-secondary compare-btn" data-product="MacBook Pro 14 M2 Pro">Compare</button> </div> </div> </div> </div> </div> </section> <!-- Deals --> <section class="deals" id="deals"> <div class="container"> <h2 class="section-title">Special Offers</h2> <div class="deals-grid"> <div class="deal-card"> <div class="deal-icon"> <i class="fas fa-graduation-cap"></i> </div> <h3 class="deal-title">Student Discounts</h3> <p class="deal-description">Save up to 10% on select laptops with valid student ID. Perfect for back-to-school season.</p> <button class="deal-cta">Verify Student Status</button> </div> <div class="deal-card"> <div class="deal-icon"> <i class="fas fa-briefcase"></i> </div> <h3 class="deal-title">Business Solutions</h3> <p class="deal-description">Bulk pricing and enterprise support for business customers. Volume discounts available.</p> <button class="deal-cta">Contact Sales</button> </div> <div class="deal-card"> <div class="deal-icon"> <i class="fas fa-exchange-alt"></i> </div> <h3 class="deal-title">Trade-In Program</h3> <p class="deal-description">Trade in your old laptop and get up to $500 credit towards a new purchase.</p> <button class="deal-cta">Get Trade Value</button> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-section"> <h3>Customer Service</h3> <ul> <li><a href="#">Contact Support</a></li> <li><a href="#">Order Status</a></li> <li><a href="#">Shipping Info</a></li> <li><a href="#">Returns & Exchanges</a></li> <li><a href="#">Setup Services</a></li> </ul> </div> <div class="footer-section"> <h3>Products</h3> <ul> <li><a href="#">Gaming Laptops</a></li> <li><a href="#">Business Laptops</a></li> <li><a href="#">Ultrabooks</a></li> <li><a href="#">Workstations</a></li> <li><a href="#">Accessories</a></li> </ul> </div> <div class="footer-section"> <h3>Brands</h3> <ul> <li><a href="#">Apple</a></li> <li><a href="#">Dell</a></li> <li><a href="#">HP</a></li> <li><a href="#">Lenovo</a></li> <li><a href="#">ASUS</a></li> </ul> </div> <div class="footer-section"> <h3>Company</h3> <ul> <li><a href="#">About Us</a></li> <li><a href="#">Careers</a></li> <li><a href="#">Press</a></li> <li><a href="#">Business Sales</a></li> <li><a href="#">Sustainability</a></li> </ul> </div> </div> <div class="footer-bottom"> <p>© 2024 LaptopHub Pro. All rights reserved. | Privacy Policy | Terms of Service | Accessibility</p> </div> </div> </footer> <!-- Cart Sidebar --> <div class="cart-sidebar" id="cartSidebar"> <div class="cart-header"> <h3 class="cart-title">Shopping Cart</h3> <button class="cart-close" id="cartClose"> <i class="fas fa-times"></i> </button> </div> <div class="cart-items" id="cartItems"> <p style="text-align: center; color: var(--text-secondary); padding: 2rem;">Your cart is empty</p> </div> <div class="cart-footer"> <div class="cart-total"> <span>Total: $<span id="cartTotal">0.00</span></span> </div> <button class="checkout-btn" id="checkoutBtn"> Proceed to Checkout </button> </div> </div> <!-- Compare Modal --> <div class="compare-modal" id="compareModal"> <div class="compare-content"> <button class="compare-close" id="compareClose"> <i class="fas fa-times"></i> </button> <h2>Compare Laptops</h2> <div id="compareTable"> <p style="text-align: center; color: var(--text-secondary); padding: 2rem;">No laptops selected for comparison</p> </div> </div> </div> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'96e24e99f3e7ff6b',t:'MTc1NTAyNjE4Ni4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>
CSS
:root { --primary-color: #2563eb; --primary-dark: #1d4ed8; --secondary-color: #0f172a; --accent-color: #f59e0b; --success-color: #10b981; --warning-color: #f59e0b; --danger-color: #ef4444; --light-gray: #f8fafc; --medium-gray: #e2e8f0; --dark-gray: #64748b; --text-primary: #0f172a; --text-secondary: #64748b; --border-color: #e2e8f0; --white: #ffffff; --shadow-light: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-heavy: 0 10px 25px rgba(0, 0, 0, 0.15); --border-radius: 12px; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; line-height: 1.6; color: var(--text-primary); background-color: var(--white); } /* Header */ .header { background: var(--white); box-shadow: var(--shadow-light); position: sticky; top: 0; z-index: 1000; } .header-top { background: var(--secondary-color); color: white; padding: 0.5rem 0; font-size: 0.9rem; } .header-main { padding: 1rem 0; } .container { max-width: 1400px; margin: 0 auto; padding: 0 1rem; } .header-content { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .logo { display: flex; align-items: center; gap: 0.5rem; font-size: 1.8rem; font-weight: 800; color: var(--primary-color); text-decoration: none; } .logo-icon { background: var(--primary-color); color: white; padding: 0.5rem; border-radius: var(--border-radius); } .search-container { flex: 1; max-width: 600px; position: relative; } .search-wrapper { display: flex; border: 2px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; transition: var(--transition); } .search-wrapper:focus-within { border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .search-input { flex: 1; padding: 0.8rem 1rem; border: none; font-size: 1rem; outline: none; } .search-btn { background: var(--primary-color); color: white; border: none; padding: 0.8rem 1.5rem; cursor: pointer; font-size: 1rem; transition: var(--transition); } .search-btn:hover { background: var(--primary-dark); } .header-actions { display: flex; align-items: center; gap: 1.5rem; } .header-link { display: flex; align-items: center; gap: 0.5rem; color: var(--text-primary); text-decoration: none; padding: 0.5rem 1rem; border-radius: var(--border-radius); transition: var(--transition); font-weight: 500; } .header-link:hover { background: var(--light-gray); color: var(--primary-color); } .cart-count { background: var(--danger-color); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; margin-left: -10px; margin-top: -10px; } /* Navigation */ .nav { background: var(--light-gray); padding: 1rem 0; } .nav-menu { display: flex; align-items: center; gap: 2rem; list-style: none; } .nav-menu a { color: var(--text-primary); text-decoration: none; font-weight: 500; padding: 0.5rem 1rem; border-radius: var(--border-radius); transition: var(--transition); } .nav-menu a:hover { background: var(--primary-color); color: white; } /* Hero Section */ .hero { background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: white; padding: 4rem 0; position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>'); opacity: 0.3; } .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; position: relative; z-index: 2; } .hero-text h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.1; } .hero-text p { font-size: 1.3rem; margin-bottom: 2rem; opacity: 0.9; } .hero-cta { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--accent-color); color: var(--secondary-color); padding: 1rem 2rem; border: none; border-radius: var(--border-radius); font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: var(--transition); text-decoration: none; } .hero-cta:hover { background: #d97706; transform: translateY(-2px); box-shadow: var(--shadow-medium); } .hero-image { text-align: center; } .hero-laptop { width: 100%; max-width: 500px; height: auto; border-radius: var(--border-radius); box-shadow: var(--shadow-heavy); } /* Features */ .features { padding: 4rem 0; background: var(--white); } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; } .feature-card { text-align: center; padding: 2rem; border-radius: var(--border-radius); transition: var(--transition); } .feature-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); } .feature-icon { width: 80px; height: 80px; background: var(--primary-color); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1.5rem; } .feature-title { font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; color: var(--text-primary); } .feature-description { color: var(--text-secondary); line-height: 1.6; } /* Categories */ .categories { padding: 4rem 0; background: var(--light-gray); } .section-title { text-align: center; font-size: 2.5rem; font-weight: 800; margin-bottom: 3rem; color: var(--text-primary); } .categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .category-card { background: white; border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--shadow-light); transition: var(--transition); cursor: pointer; } .category-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); } .category-image { height: 200px; background: var(--medium-gray); position: relative; overflow: hidden; } .category-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .category-card:hover .category-image img { transform: scale(1.05); } .category-content { padding: 1.5rem; } .category-name { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--text-primary); } .category-description { color: var(--text-secondary); margin-bottom: 1rem; } .category-count { color: var(--primary-color); font-weight: 600; } /* Products */ .products { padding: 4rem 0; background: var(--white); } .products-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; } .products-filters { display: flex; gap: 1rem; align-items: center; } .filter-select { padding: 0.5rem 1rem; border: 1px solid var(--border-color); border-radius: var(--border-radius); background: white; font-size: 0.9rem; cursor: pointer; } .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 2rem; } .product-card { background: white; border: 1px solid var(--border-color); border-radius: var(--border-radius); overflow: hidden; transition: var(--transition); cursor: pointer; box-shadow: var(--shadow-light); } .product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-medium); border-color: var(--primary-color); } .product-image { position: relative; height: 250px; background: var(--light-gray); overflow: hidden; } .product-image img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .product-card:hover .product-image img { transform: scale(1.05); } .product-badge { position: absolute; top: 1rem; left: 1rem; background: var(--danger-color); color: white; padding: 0.3rem 0.8rem; border-radius: var(--border-radius); font-size: 0.8rem; font-weight: 600; } .product-wishlist { position: absolute; top: 1rem; right: 1rem; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); } .product-wishlist:hover { background: var(--danger-color); color: white; } .product-content { padding: 1.5rem; } .product-brand { color: var(--text-secondary); font-size: 0.9rem; margin-bottom: 0.5rem; } .product-title { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; line-height: 1.4; } .product-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 1rem; font-size: 0.9rem; color: var(--text-secondary); } .spec-item { display: flex; justify-content: space-between; padding: 0.3rem 0; } .spec-label { font-weight: 500; } .product-rating { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .stars { display: flex; gap: 0.2rem; } .star { color: var(--accent-color); font-size: 0.9rem; } .rating-count { color: var(--text-secondary); font-size: 0.9rem; } .product-price { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; } .current-price { font-size: 1.5rem; font-weight: 800; color: var(--primary-color); } .original-price { font-size: 1.1rem; color: var(--text-secondary); text-decoration: line-through; } .discount { background: var(--success-color); color: white; padding: 0.2rem 0.5rem; border-radius: var(--border-radius); font-size: 0.8rem; font-weight: 600; } .product-actions { display: flex; gap: 0.5rem; } .btn-primary { background: var(--primary-color); color: white; border: none; padding: 0.8rem 1.5rem; border-radius: var(--border-radius); font-weight: 600; cursor: pointer; transition: var(--transition); flex: 1; font-size: 0.9rem; } .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); } .btn-secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--border-color); padding: 0.8rem 1.5rem; border-radius: var(--border-radius); font-weight: 600; cursor: pointer; transition: var(--transition); flex: 1; font-size: 0.9rem; } .btn-secondary:hover { background: var(--light-gray); border-color: var(--primary-color); } /* Deals */ .deals { padding: 4rem 0; background: var(--secondary-color); color: white; } .deals .section-title { color: white; } .deals-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .deal-card { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--border-radius); padding: 2rem; text-align: center; transition: var(--transition); } .deal-card:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-5px); } .deal-icon { font-size: 3rem; color: var(--accent-color); margin-bottom: 1rem; } .deal-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .deal-description { margin-bottom: 2rem; opacity: 0.9; } .deal-cta { background: var(--accent-color); color: var(--secondary-color); padding: 1rem 2rem; border: none; border-radius: var(--border-radius); font-weight: 700; cursor: pointer; transition: var(--transition); } .deal-cta:hover { background: #d97706; transform: translateY(-2px); } /* Footer */ .footer { background: var(--secondary-color); color: white; padding: 3rem 0 1rem; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .footer-section h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 1rem; } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 0.5rem; } .footer-section ul li a { color: #cbd5e1; text-decoration: none; transition: var(--transition); } .footer-section ul li a:hover { color: var(--accent-color); } .footer-bottom { border-top: 1px solid #334155; padding-top: 2rem; text-align: center; color: #cbd5e1; } /* Cart Sidebar */ .cart-sidebar { position: fixed; top: 0; right: -400px; width: 400px; height: 100vh; background: white; box-shadow: var(--shadow-heavy); z-index: 10000; transition: var(--transition); display: flex; flex-direction: column; } .cart-sidebar.open { right: 0; } .cart-header { padding: 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; background: var(--light-gray); } .cart-title { font-size: 1.3rem; font-weight: 700; } .cart-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); } .cart-items { flex: 1; padding: 1.5rem; overflow-y: auto; } .cart-item { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border-color); } .cart-item-image { width: 80px; height: 80px; background: var(--light-gray); border-radius: var(--border-radius); overflow: hidden; } .cart-item-image img { width: 100%; height: 100%; object-fit: cover; } .cart-item-details { flex: 1; } .cart-item-title { font-weight: 600; margin-bottom: 0.5rem; font-size: 0.9rem; line-height: 1.3; } .cart-item-price { color: var(--primary-color); font-weight: 700; margin-bottom: 0.5rem; } .cart-item-quantity { display: flex; align-items: center; gap: 0.5rem; } .quantity-btn { width: 30px; height: 30px; border: 1px solid var(--border-color); background: white; border-radius: var(--border-radius); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; } .quantity-btn:hover { background: var(--light-gray); } .cart-footer { padding: 1.5rem; border-top: 1px solid var(--border-color); background: var(--light-gray); } .cart-total { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-size: 1.2rem; font-weight: 700; } .checkout-btn { width: 100%; background: var(--primary-color); color: white; border: none; padding: 1rem; border-radius: var(--border-radius); font-size: 1.1rem; font-weight: 700; cursor: pointer; transition: var(--transition); } .checkout-btn:hover { background: var(--primary-dark); } /* Compare Modal */ .compare-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 10001; opacity: 0; visibility: hidden; transition: var(--transition); } .compare-modal.open { opacity: 1; visibility: visible; } .compare-content { background: white; border-radius: var(--border-radius); padding: 2rem; max-width: 90%; max-height: 90%; overflow-y: auto; position: relative; } .compare-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); } .compare-table { width: 100%; border-collapse: collapse; margin-top: 2rem; } .compare-table th, .compare-table td { padding: 1rem; text-align: left; border-bottom: 1px solid var(--border-color); } .compare-table th { background: var(--light-gray); font-weight: 700; } /* Responsive Design */ @media (max-width: 1024px) { .hero-text h1 { font-size: 2.5rem; } .hero-content { grid-template-columns: 1fr; text-align: center; } } @media (max-width: 768px) { .header-content { flex-direction: column; gap: 1rem; } .search-container { width: 100%; } .nav-menu { flex-wrap: wrap; gap: 1rem; } .hero-text h1 { font-size: 2rem; } .products-grid { grid-template-columns: 1fr; } .cart-sidebar { width: 100%; right: -100%; } } @media (max-width: 480px) { .container { padding: 0 0.5rem; } .section-title { font-size: 2rem; } .hero { padding: 2rem 0; } } /* Loading Animation */ .loading { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; display: flex; align-items: center; justify-content: center; z-index: 10000; transition: opacity 0.5s ease; } .loading.hidden { opacity: 0; pointer-events: none; } .spinner { width: 50px; height: 50px; border: 4px solid var(--light-gray); border-top: 4px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Animations */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeInUp 0.6s ease forwards; }
JavaScript
// Loading screen window.addEventListener('load', () => { const loading = document.getElementById('loading'); setTimeout(() => { loading.classList.add('hidden'); }, 1000); }); // Cart functionality let cart = []; let cartTotal = 0; let compareList = []; function updateCartUI() { const cartCount = document.getElementById('cartCount'); const cartItems = document.getElementById('cartItems'); const cartTotalElement = document.getElementById('cartTotal'); cartCount.textContent = cart.length; cartTotalElement.textContent = cartTotal.toFixed(2); if (cart.length === 0) { cartItems.innerHTML = '<p style="text-align: center; color: var(--text-secondary); padding: 2rem;">Your cart is empty</p>'; } else { cartItems.innerHTML = cart.map(item => ` <div class="cart-item"> <div class="cart-item-image"> <img src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-4.0.3&auto=format&fit=crop&w=100&q=80" alt="${item.name}" onerror="this.src=''; this.alt='Laptop image failed to load'; this.style.display='none';"> </div> <div class="cart-item-details"> <div class="cart-item-title">${item.name}</div> <div class="cart-item-price">$${item.price}</div> <div class="cart-item-quantity"> <button class="quantity-btn" onclick="updateQuantity('${item.id}', -1)">-</button> <span>${item.quantity}</span> <button class="quantity-btn" onclick="updateQuantity('${item.id}', 1)">+</button> <button class="quantity-btn" onclick="removeFromCart('${item.id}')" style="margin-left: 1rem; color: var(--danger-color);">×</button> </div> </div> </div> `).join(''); } } function updateCompareUI() { const compareCount = document.getElementById('compareCount'); const compareTable = document.getElementById('compareTable'); compareCount.textContent = compareList.length; if (compareList.length === 0) { compareTable.innerHTML = '<p style="text-align: center; color: var(--text-secondary); padding: 2rem;">No laptops selected for comparison</p>'; } else { compareTable.innerHTML = ` <table class="compare-table"> <thead> <tr> <th>Feature</th> ${compareList.map(item => `<th>${item}</th>`).join('')} </tr> </thead> <tbody> <tr> <td>Processor</td> ${compareList.map(() => '<td>High-performance CPU</td>').join('')} </tr> <tr> <td>RAM</td> ${compareList.map(() => '<td>8GB - 32GB options</td>').join('')} </tr> <tr> <td>Storage</td> ${compareList.map(() => '<td>SSD storage available</td>').join('')} </tr> <tr> <td>Display</td> ${compareList.map(() => '<td>High-resolution display</td>').join('')} </tr> <tr> <td>Battery Life</td> ${compareList.map(() => '<td>All-day battery</td>').join('')} </tr> </tbody> </table> `; } } function addToCart(productName, price) { const existingItem = cart.find(item => item.name === productName); if (existingItem) { existingItem.quantity += 1; } else { cart.push({ id: Date.now().toString(), name: productName, price: parseFloat(price), quantity: 1 }); } cartTotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0); updateCartUI(); alert(`${productName} added to cart!`); } function addToCompare(productName) { if (compareList.includes(productName)) { alert('This laptop is already in your comparison list!'); return; } if (compareList.length >= 4) { alert('You can compare up to 4 laptops at a time. Please remove one to add another.'); return; } compareList.push(productName); updateCompareUI(); alert(`${productName} added to comparison!`); } function updateQuantity(itemId, change) { const item = cart.find(item => item.id === itemId); if (item) { item.quantity += change; if (item.quantity <= 0) { removeFromCart(itemId); } else { cartTotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0); updateCartUI(); } } } function removeFromCart(itemId) { cart = cart.filter(item => item.id !== itemId); cartTotal = cart.reduce((total, item) => total + (item.price * item.quantity), 0); updateCartUI(); } // Event listeners document.querySelectorAll('.add-to-cart').forEach(btn => { btn.addEventListener('click', function() { const productName = this.getAttribute('data-product'); const price = this.getAttribute('data-price'); addToCart(productName, price); }); }); document.querySelectorAll('.compare-btn').forEach(btn => { btn.addEventListener('click', function() { const productName = this.getAttribute('data-product'); addToCompare(productName); }); }); // Cart sidebar toggle document.getElementById('cartBtn').addEventListener('click', (e) => { e.preventDefault(); document.getElementById('cartSidebar').classList.add('open'); }); document.getElementById('cartClose').addEventListener('click', () => { document.getElementById('cartSidebar').classList.remove('open'); }); // Compare modal toggle document.getElementById('compareBtn').addEventListener('click', (e) => { e.preventDefault(); document.getElementById('compareModal').classList.add('open'); }); document.getElementById('compareClose').addEventListener('click', () => { document.getElementById('compareModal').classList.remove('open'); }); // Search functionality document.getElementById('searchBtn').addEventListener('click', () => { const searchTerm = document.getElementById('searchInput').value.trim(); if (searchTerm) { alert(`Searching for "${searchTerm}". This would show filtered laptop results based on your search.`); } }); document.getElementById('searchInput').addEventListener('keypress', function(e) { if (e.key === 'Enter') { document.getElementById('searchBtn').click(); } }); // Category filtering document.querySelectorAll('.category-card').forEach(card => { card.addEventListener('click', function() { const category = this.getAttribute('data-category'); alert(`Browsing ${category} category. This would show filtered laptop results.`); }); }); // Product filtering document.getElementById('brandFilter').addEventListener('change', function() { const brand = this.value; filterProducts('brand', brand); }); document.getElementById('priceFilter').addEventListener('change', function() { const priceRange = this.value; filterProducts('price', priceRange); }); document.getElementById('sortFilter').addEventListener('change', function() { const sortBy = this.value; sortProducts(sortBy); }); function filterProducts(filterType, filterValue) { const products = document.querySelectorAll('.product-card'); products.forEach(product => { let show = true; if (filterType === 'brand' && filterValue !== 'all') { const productBrand = product.getAttribute('data-brand'); show = productBrand === filterValue; } if (filterType === 'price' && filterValue !== 'all') { const productPrice = parseFloat(product.getAttribute('data-price')); switch(filterValue) { case 'under-500': show = productPrice < 500; break; case '500-1000': show = productPrice >= 500 && productPrice <= 1000; break; case '1000-2000': show = productPrice >= 1000 && productPrice <= 2000; break; case 'over-2000': show = productPrice > 2000; break; } } product.style.display = show ? 'block' : 'none'; }); } function sortProducts(sortBy) { const productsGrid = document.getElementById('productsGrid'); const products = Array.from(productsGrid.querySelectorAll('.product-card')); products.sort((a, b) => { switch(sortBy) { case 'price-low': return parseFloat(a.getAttribute('data-price')) - parseFloat(b.getAttribute('data-price')); case 'price-high': return parseFloat(b.getAttribute('data-price')) - parseFloat(a.getAttribute('data-price')); case 'rating': return Math.random() - 0.5; case 'newest': return Math.random() - 0.5; default: return 0; } }); products.forEach(product => productsGrid.appendChild(product)); } // Wishlist functionality document.querySelectorAll('.product-wishlist').forEach(btn => { btn.addEventListener('click', function(e) { e.stopPropagation(); const icon = this.querySelector('i'); if (icon.classList.contains('far')) { icon.classList.remove('far'); icon.classList.add('fas'); this.style.background = 'var(--danger-color)'; this.style.color = 'white'; alert('Added to wishlist!'); } else { icon.classList.remove('fas'); icon.classList.add('far'); this.style.background = 'rgba(255, 255, 255, 0.9)'; this.style.color = 'var(--text-primary)'; alert('Removed from wishlist!'); } }); }); // Deal buttons document.querySelectorAll('.deal-cta').forEach(btn => { btn.addEventListener('click', function() { const dealTitle = this.parentElement.querySelector('.deal-title').textContent; alert(`Accessing ${dealTitle}. This would show special laptop offers and programs.`); }); }); // Checkout functionality document.getElementById('checkoutBtn').addEventListener('click', () => { if (cart.length === 0) { alert('Your cart is empty!'); return; } alert(`Proceeding to checkout with ${cart.length} laptop(s) totaling $${cartTotal.toFixed(2)}. Expert setup service available!`); }); // Close modals when clicking outside document.addEventListener('click', function(e) { const compareModal = document.getElementById('compareModal'); if (e.target === compareModal) { compareModal.classList.remove('open'); } }); // Initialize updateCartUI(); updateCompareUI(); // Smooth scrolling for navigation links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { target.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }); });
Output Preview
Desktop
Mobile
Fullscreen