Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PixelMarket - Premium Digital Products</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* Reset & Base Styles */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| color: #333; | |
| line-height: 1.6; | |
| background-color: #f9f9f9; | |
| } | |
| a { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| ul { | |
| list-style: none; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header & Navigation */ | |
| header { | |
| background-color: #fff; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); | |
| position: fixed; | |
| width: 100%; | |
| z-index: 100; | |
| } | |
| .navbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px 0; | |
| } | |
| .logo { | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: #6c5ce7; | |
| } | |
| .logo span { | |
| color: #333; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 30px; | |
| } | |
| .nav-links a { | |
| font-weight: 500; | |
| transition: color 0.3s; | |
| } | |
| .nav-links a:hover { | |
| color: #6c5ce7; | |
| } | |
| .nav-actions { | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| } | |
| .cart-icon { | |
| position: relative; | |
| cursor: pointer; | |
| } | |
| .cart-count { | |
| position: absolute; | |
| top: -10px; | |
| right: -10px; | |
| background-color: #6c5ce7; | |
| color: white; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 12px; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 10px 25px; | |
| border-radius: 30px; | |
| font-weight: 500; | |
| transition: all 0.3s; | |
| cursor: pointer; | |
| } | |
| .btn-primary { | |
| background-color: #6c5ce7; | |
| color: white; | |
| border: 2px solid #6c5ce7; | |
| } | |
| .btn-primary:hover { | |
| background-color: #5649c4; | |
| border-color: #5649c4; | |
| } | |
| .btn-outline { | |
| border: 2px solid #6c5ce7; | |
| color: #6c5ce7; | |
| } | |
| .btn-outline:hover { | |
| background-color: #6c5ce7; | |
| color: white; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding-top: 150px; | |
| padding-bottom: 80px; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%); | |
| text-align: center; | |
| } | |
| .hero h1 { | |
| font-size: 48px; | |
| margin-bottom: 20px; | |
| font-weight: 700; | |
| } | |
| .hero p { | |
| font-size: 18px; | |
| color: #666; | |
| max-width: 700px; | |
| margin: 0 auto 40px; | |
| } | |
| .hero-btns { | |
| display: flex; | |
| gap: 15px; | |
| justify-content: center; | |
| } | |
| .rotating-products { | |
| margin-top: 60px; | |
| display: flex; | |
| justify-content: center; | |
| overflow: hidden; | |
| height: 300px; | |
| position: relative; | |
| } | |
| .product-slide { | |
| position: absolute; | |
| width: 100%; | |
| max-width: 800px; | |
| background: white; | |
| border-radius: 10px; | |
| padding: 30px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); | |
| display: flex; | |
| align-items: center; | |
| opacity: 0; | |
| transition: all 0.5s ease; | |
| transform: translateX(100%); | |
| } | |
| .product-slide.active { | |
| opacity: 1; | |
| transform: translateX(0); | |
| } | |
| .product-slide.next { | |
| transform: translateX(100%); | |
| } | |
| .product-slide.prev { | |
| transform: translateX(-100%); | |
| } | |
| .product-image { | |
| width: 240px; | |
| height: 240px; | |
| border-radius: 8px; | |
| object-fit: cover; | |
| margin-right: 30px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .product-info { | |
| text-align: left; | |
| } | |
| .product-info h3 { | |
| font-size: 24px; | |
| margin-bottom: 10px; | |
| } | |
| .product-info .price { | |
| font-size: 22px; | |
| font-weight: 600; | |
| color: #6c5ce7; | |
| margin: 15px 0; | |
| } | |
| .product-info p { | |
| color: #666; | |
| margin-bottom: 20px; | |
| } | |
| .product-dots { | |
| display: flex; | |
| justify-content: center; | |
| margin-top: 20px; | |
| gap: 10px; | |
| } | |
| .dot { | |
| width: 12px; | |
| height: 12px; | |
| background-color: #ddd; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| .dot.active { | |
| background-color: #6c5ce7; | |
| } | |
| /* Categories Section */ | |
| .categories { | |
| padding: 80px 0; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 50px; | |
| } | |
| .section-title h2 { | |
| font-size: 36px; | |
| margin-bottom: 15px; | |
| } | |
| .section-title p { | |
| color: #666; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .category-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 30px; | |
| } | |
| .category-card { | |
| background: white; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .category-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .category-img { | |
| height: 180px; | |
| width: 100%; | |
| object-fit: cover; | |
| } | |
| .category-info { | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| .category-info h3 { | |
| margin-bottom: 10px; | |
| } | |
| /* Products Section */ | |
| .products { | |
| padding: 80px 0; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%); | |
| } | |
| .product-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 30px; | |
| } | |
| .product-card { | |
| background: white; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| transition: all 0.3s; | |
| position: relative; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .product-badge { | |
| position: absolute; | |
| top: 10px; | |
| right: 10px; | |
| background-color: #6c5ce7; | |
| color: white; | |
| padding: 5px 10px; | |
| border-radius: 4px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| .product-img { | |
| height: 200px; | |
| width: 100%; | |
| object-fit: cover; | |
| } | |
| .product-details { | |
| padding: 20px; | |
| } | |
| .product-details h3 { | |
| margin-bottom: 10px; | |
| } | |
| .product-price { | |
| display: flex; | |
| align-items: center; | |
| margin: 15px 0; | |
| font-weight: 600; | |
| } | |
| .current-price { | |
| color: #6c5ce7; | |
| font-size: 18px; | |
| } | |
| .original-price { | |
| text-decoration: line-through; | |
| color: #999; | |
| font-size: 14px; | |
| margin-left: 10px; | |
| } | |
| .product-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| color: #666; | |
| font-size: 14px; | |
| } | |
| .add-to-cart { | |
| display: block; | |
| width: 100%; | |
| padding: 10px; | |
| background-color: #6c5ce7; | |
| color: white; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| font-weight: 500; | |
| } | |
| .add-to-cart:hover { | |
| background-color: #5649c4; | |
| } | |
| /* Testimonials */ | |
| .testimonials { | |
| padding: 80px 0; | |
| } | |
| .testimonial-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .testimonial-card { | |
| background: white; | |
| padding: 30px; | |
| border-radius: 10px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| } | |
| .testimonial-text { | |
| font-style: italic; | |
| margin-bottom: 20px; | |
| color: #666; | |
| } | |
| .testimonial-author { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .author-img { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| margin-right: 15px; | |
| } | |
| .author-info h4 { | |
| font-size: 16px; | |
| margin-bottom: 5px; | |
| } | |
| .author-info p { | |
| font-size: 14px; | |
| color: #666; | |
| } | |
| .rating { | |
| color: #ffc107; | |
| margin-bottom: 10px; | |
| } | |
| /* Newsletter */ | |
| .newsletter { | |
| padding: 80px 0; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: white; | |
| text-align: center; | |
| } | |
| .newsletter h2 { | |
| margin-bottom: 20px; | |
| font-size: 36px; | |
| } | |
| .newsletter p { | |
| max-width: 600px; | |
| margin: 0 auto 30px; | |
| opacity: 0.9; | |
| } | |
| .newsletter-form { | |
| max-width: 500px; | |
| margin: 0 auto; | |
| display: flex; | |
| } | |
| .newsletter-input { | |
| flex: 1; | |
| padding: 15px 20px; | |
| border: none; | |
| border-radius: 30px 0 0 30px; | |
| font-size: 16px; | |
| } | |
| .newsletter-btn { | |
| padding: 15px 30px; | |
| background-color: #6c5ce7; | |
| color: white; | |
| border: none; | |
| border-radius: 0 30px 30px 0; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: background-color 0.3s; | |
| } | |
| .newsletter-btn:hover { | |
| background-color: #5649c4; | |
| } | |
| /* Footer */ | |
| footer { | |
| background-color: #2d3436; | |
| color: #fff; | |
| padding: 60px 0 20px; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 40px; | |
| margin-bottom: 40px; | |
| } | |
| .footer-column h3 { | |
| font-size: 18px; | |
| margin-bottom: 20px; | |
| color: #6c5ce7; | |
| } | |
| .footer-links li { | |
| margin-bottom: 10px; | |
| } | |
| .footer-links a { | |
| color: #b2bec3; | |
| transition: color 0.3s; | |
| } | |
| .footer-links a:hover { | |
| color: #6c5ce7; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .social-links a { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 40px; | |
| height: 40px; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| color: white; | |
| transition: all 0.3s; | |
| } | |
| .social-links a:hover { | |
| background-color: #6c5ce7; | |
| transform: translateY(-5px); | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 20px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #b2bec3; | |
| font-size: 14px; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 992px) { | |
| .product-slide { | |
| flex-direction: column; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .product-image { | |
| margin-right: 0; | |
| margin-bottom: 20px; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .hero h1 { | |
| font-size: 36px; | |
| } | |
| .hero-btns { | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .newsletter-form { | |
| flex-direction: column; | |
| } | |
| .newsletter-input { | |
| border-radius: 30px; | |
| margin-bottom: 10px; | |
| } | |
| .newsletter-btn { | |
| border-radius: 30px; | |
| width: 100%; | |
| } | |
| .navbar { | |
| flex-direction: column; | |
| padding: 15px 0; | |
| } | |
| .nav-links { | |
| margin: 15px 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="container"> | |
| <nav class="navbar"> | |
| <div class="logo">Pixel<span>Market</span></div> | |
| <ul class="nav-links"> | |
| <li><a href="#products">Products</a></li> | |
| <li><a href="#categories">Categories</a></li> | |
| <li><a href="#testimonials">Reviews</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| <div class="nav-actions"> | |
| <div class="cart-icon"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span class="cart-count">0</span> | |
| </div> | |
| <a href="#" class="btn btn-outline">Sign In</a> | |
| </div> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="container"> | |
| <h1>Premium Digital Products For Creatives</h1> | |
| <p>Discover high-quality digital assets including templates, themes, graphics, and more to power up your creative projects.</p> | |
| <div class="hero-btns"> | |
| <a href="#products" class="btn btn-primary">Browse Products</a> | |
| <a href="#categories" class="btn btn-outline">View Categories</a> | |
| </div> | |
| <div class="rotating-products"> | |
| <div class="product-slide active"> | |
| <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Web Template" class="product-image"> | |
| <div class="product-info"> | |
| <h3>Ultimate Web Template Bundle</h3> | |
| <p>50+ responsive HTML5 templates with modern design and clean code.</p> | |
| <div class="price">$49.99 <span class="original-price">$199.99</span></div> | |
| <button class="add-to-cart" data-id="1">Add to Cart</button> | |
| </div> | |
| </div> | |
| <div class="product-slide"> | |
| <img src="https://images.unsplash.com/photo-1626785774573-4b799315345d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Photo Pack" class="product-image"> | |
| <div class="product-info"> | |
| <h3>Professional Stock Photo Collection</h3> | |
| <p>1000+ high-resolution images for commercial use with no attribution.</p> | |
| <div class="price">$29.99 <span class="original-price">$99.99</span></div> | |
| <button class="add-to-cart" data-id="2">Add to Cart</button> | |
| </div> | |
| </div> | |
| <div class="product-slide"> | |
| <img src="https://images.unsplash.com/photo-1546054454-aa26e2b734c7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="UI Kit" class="product-image"> | |
| <div class="product-info"> | |
| <h3>Complete UI Design Kit</h3> | |
| <p>Fully customizable Figma and Adobe XD UI components for web and mobile.</p> | |
| <div class="price">$39.99 <span class="original-price">$149.99</span></div> | |
| <button class="add-to-cart" data-id="3">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="product-dots"> | |
| <div class="dot active" data-slide="0"></div> | |
| <div class="dot" data-slide="1"></div> | |
| <div class="dot" data-slide="2"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Categories Section --> | |
| <section class="categories" id="categories"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Shop By Category</h2> | |
| <p>Explore our wide range of digital products organized by category to find exactly what you need.</p> | |
| </div> | |
| <div class="category-grid"> | |
| <div class="category-card"> | |
| <img src="https://images.unsplash.com/photo-1559028012-481c04fa702d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Templates" class="category-img"> | |
| <div class="category-info"> | |
| <h3>Website Templates</h3> | |
| <p>150+ products</p> | |
| </div> | |
| </div> | |
| <div class="category-card"> | |
| <img src="https://images.unsplash.com/photo-1541462608143-67571c6738dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Graphics" class="category-img"> | |
| <div class="category-info"> | |
| <h3>Graphics & Icons</h3> | |
| <p>320+ products</p> | |
| </div> | |
| </div> | |
| <div class="category-card"> | |
| <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="UI Kits" class="category-img"> | |
| <div class="category-info"> | |
| <h3>UI/UX Kits</h3> | |
| <p>90+ products</p> | |
| </div> | |
| </div> | |
| <div class="category-card"> | |
| <img src="https://images.unsplash.com/photo-1483728642387-6c3bdd6c93e5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Fonts" class="category-img"> | |
| <div class="category-info"> | |
| <h3>Fonts & Typefaces</h3> | |
| <p>180+ products</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Section --> | |
| <section class="products" id="products"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Featured Products</h2> | |
| <p>Check out our most popular digital products that customers love.</p> | |
| </div> | |
| <div class="product-grid"> | |
| <div class="product-card"> | |
| <span class="product-badge">Best Seller</span> | |
| <img src="https://images.unsplash.com/photo-1627634771-be8caded60e4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="WordPress Theme" class="product-img"> | |
| <div class="product-details"> | |
| <h3>Enterprise WordPress Theme</h3> | |
| <div class="product-price"> | |
| <span class="current-price">$59.99</span> | |
| <span class="original-price">$129.99</span> | |
| </div> | |
| <div class="product-meta"> | |
| <span><i class="fas fa-download"></i> 1,250+ sales</span> | |
| <span><i class="fas fa-star"></i> 4.9 (145)</span> | |
| </div> | |
| <button class="add-to-cart" data-id="4">Add to Cart</button> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <img src="https://images.unsplash.com/photo-1561154464-82e9adf32764?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Presentation Templates" class="product-img"> | |
| <div class="product-details"> | |
| <h3>Professional Presentation Kit</h3> | |
| <div class="product-price"> | |
| <span class="current-price">$24.99</span> | |
| <span class="original-price">$49.99</span> | |
| </div> | |
| <div class="product-meta"> | |
| <span><i class="fas fa-download"></i> 980+ sales</span> | |
| <span><i class="fas fa-star"></i> 4.8 (89)</span> | |
| </div> | |
| <button class="add-to-cart" data-id="5">Add to Cart</button> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <span class="product-badge">New</span> | |
| <img src="https://images.unsplash.com/photo-1574717024453-3545e3879667?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Illustrations" class="product-img"> | |
| <div class="product-details"> | |
| <h3>Modern Illustration Pack</h3> | |
| <div class="product-price"> | |
| <span class="current-price">$19.99</span> | |
| <span class="original-price">$39.99</span> | |
| </div> | |
| <div class="product-meta"> | |
| <span><i class="fas fa-download"></i> 630+ sales</span> | |
| <span><i class="fas fa-star"></i> 4.7 (42)</span> | |
| </div> | |
| <button class="add-to-cart" data-id="6">Add to Cart</button> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <span class="product-badge">Popular</span> | |
| <img src="https://images.unsplash.com/photo-1555774698-0b77e0d5fac6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Mockups" class="product-img"> | |
| <div class="product-details"> | |
| <h3>Device Mockup Bundle</h3> | |
| <div class="product-price"> | |
| <span class="current-price">$29.99</span> | |
| <span class="original-price">$69.99</span> | |
| </div> | |
| <div class="product-meta"> | |
| <span><i class="fas fa-download"></i> 1,520+ sales</span> | |
| <span><i class="fas fa-star"></i> 4.9 (210)</span> | |
| </div> | |
| <button class="add-to-cart" data-id="7">Add to Cart</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="testimonials" id="testimonials"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>What Our Customers Say</h2> | |
| <p>Don't just take our word for it - hear from some of our satisfied customers.</p> | |
| </div> | |
| <div class="testimonial-grid"> | |
| <div class="testimonial-card"> | |
| <div class="rating"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <p class="testimonial-text">"The website templates I purchased saved me countless hours of development time. Professional quality at an affordable price."</p> | |
| <div class="testimonial-author"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Johnson" class="author-img"> | |
| <div class="author-info"> | |
| <h4>Sarah Johnson</h4> | |
| <p>Freelance Web Designer</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card"> | |
| <div class="rating"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <p class="testimonial-text">"As a startup founder, the UI kit was exactly what I needed to create a professional app design without hiring a designer. Huge value!"</p> | |
| <div class="testimonial-author"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael Chen" class="author-img"> | |
| <div class="author-info"> | |
| <h4>Michael Chen</h4> | |
| <p>Founder, Tech Startup</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="testimonial-card"> | |
| <div class="rating"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <p class="testimonial-text">"The stock photo collection is my go-to resource for blog images. High quality and comprehensive - worth every penny."</p> | |
| <div class="testimonial-author"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emily Rodriguez" class="author-img"> | |
| <div class="author-info"> | |
| <h4>Emily Rodriguez</h4> | |
| <p>Content Marketer</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section class="newsletter" id="contact"> | |
| <div class="container"> | |
| <h2>Join Our Newsletter</h2> | |
| <p>Subscribe to get exclusive deals, new product announcements, and creative tips directly to your inbox.</p> | |
| <form class="newsletter-form" id="newsletterForm"> | |
| <input type="email" placeholder="Enter your email address" class="newsletter-input" required> | |
| <button type="submit" class="newsletter-btn">Subscribe</button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-column"> | |
| <h3>PixelMarket</h3> | |
| <p>Premium digital products for creatives, designers, and developers. Quality assets to power your projects.</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-instagram"></i></a> | |
| <a href="#"><i class="fab fa-dribbble"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Quick Links</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#products">Products</a></li> | |
| <li><a href="#categories">Categories</a></li> | |
| <li><a href="#testimonials">Reviews</a></li> | |
| <li><a href="#">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Support</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#">Contact Us</a></li> | |
| <li><a href="#">Help Center</a></li> | |
| <li><a href="#">Refund Policy</a></li> | |
| <li><a href="#">License Terms</a></li> | |
| <li><a href="#">System Status</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-column"> | |
| <h3>Contact</h3> | |
| <ul class="footer-links"> | |
| <li><i class="fas fa-envelope"></i> hello@pixelmarket.com</li> | |
| <li><i class="fas fa-phone"></i> +1 (555) 123-4567</li> | |
| <li><i class="fas fa-map-marker-alt"></i> 123 Digital Ave, San Francisco, CA</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2023 PixelMarket. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Rotating Product Slider | |
| let currentSlide = 0; | |
| const slides = document.querySelectorAll('.product-slide'); | |
| const dots = document.querySelectorAll('.dot'); | |
| const totalSlides = slides.length; | |
| function showSlide(index) { | |
| // Hide all slides | |
| slides.forEach(slide => { | |
| slide.classList.remove('active', 'next', 'prev'); | |
| }); | |
| // Update current slide index | |
| currentSlide = (index + totalSlides) % totalSlides; | |
| // Show current slide | |
| slides[currentSlide].classList.add('active'); | |
| // Update next and previous slides for animation | |
| const nextIndex = (currentSlide + 1) % totalSlides; | |
| const prevIndex = (currentSlide - 1 + totalSlides) % totalSlides; | |
| slides[nextIndex].classList.add('next'); | |
| slides[prevIndex].classList.add('prev'); | |
| // Update dots | |
| dots.forEach(dot => dot.classList.remove('active')); | |
| dots[currentSlide].classList.add('active'); | |
| } | |
| // Auto rotate slides | |
| let slideInterval = setInterval(() => { | |
| showSlide(currentSlide + 1); | |
| }, 5000); | |
| // Click on dots to navigate | |
| dots.forEach(dot => { | |
| dot.addEventListener('click', () => { | |
| clearInterval(slideInterval); | |
| showSlide(parseInt(dot.dataset.slide)); | |
| slideInterval = setInterval(() => { | |
| showSlide(currentSlide + 1); | |
| }, 5000); | |
| }); | |
| }); | |
| // Newsletter Form Submission | |
| const newsletterForm = document.getElementById('newsletterForm'); | |
| newsletterForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const emailInput = this.querySelector('input[type="email"]'); | |
| const email = emailInput.value; | |
| // In a real app, you would send this to your backend | |
| console.log('Subscribed with email:', email); | |
| // Show success message | |
| alert('Thank you for subscribing! You\'ll receive our next newsletter.'); | |
| emailInput.value = ''; | |
| }); | |
| // Shopping Cart Functionality | |
| let cartCount = 0; | |
| const cartItems = []; | |
| const cartCountElement = document.querySelector('.cart-count'); | |
| const addToCartButtons = document.querySelectorAll('.add-to-cart'); | |
| addToCartButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| const productId = this.dataset.id; | |
| cartItems.push(productId); | |
| cartCount++; | |
| cartCountElement.textContent = cartCount; | |
| // Animation for cart | |
| this.textContent = 'Added!'; | |
| this.style.backgroundColor = '#27ae60'; | |
| setTimeout(() => { | |
| this.textContent = 'Add to Cart'; | |
| this.style.backgroundColor = '#6c5ce7'; | |
| }, 1500); | |
| }); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 100, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |