Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Premium Digital Template - Product Showcase</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| :root { | |
| --primary-color: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary-color: #ec4899; | |
| --dark-color: #1f2937; | |
| --light-color: #f3f4f6; | |
| --white: #ffffff; | |
| --gray: #6b7280; | |
| --gray-light: #e5e7eb; | |
| --success: #10b981; | |
| --warning: #f59e0b; | |
| --error: #ef4444; | |
| --shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| line-height: 1.6; | |
| color: var(--dark-color); | |
| background-color: var(--white); | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header */ | |
| header { | |
| background: var(--white); | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); | |
| position: sticky; | |
| top: 0; | |
| z-index: 1000; | |
| transition: var(--transition); | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1rem 0; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| } | |
| .logo:hover { | |
| color: var(--primary-dark); | |
| } | |
| .nav-links { | |
| display: flex; | |
| list-style: none; | |
| gap: 2rem; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--dark-color); | |
| font-weight: 500; | |
| transition: var(--transition); | |
| position: relative; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary-color); | |
| } | |
| .nav-links a::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -5px; | |
| left: 0; | |
| width: 0; | |
| height: 2px; | |
| background: var(--primary-color); | |
| transition: var(--transition); | |
| } | |
| .nav-links a:hover::after { | |
| width: 100%; | |
| } | |
| .cart-icon { | |
| position: relative; | |
| font-size: 1.2rem; | |
| color: var(--dark-color); | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .cart-icon:hover { | |
| color: var(--primary-color); | |
| } | |
| .cart-count { | |
| position: absolute; | |
| top: -8px; | |
| right: -8px; | |
| background: var(--secondary-color); | |
| color: var(--white); | |
| border-radius: 50%; | |
| width: 20px; | |
| height: 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding: 4rem 0; | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| color: var(--white); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23ffffff" fill-opacity="0.1" d="M0,96L48,112C96,128,192,160,288,165.3C384,171,480,149,576,149.3C672,149,768,171,864,165.3C960,160,1056,128,1152,122.7C1248,117,1344,139,1392,149.3L1440,160L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path></svg>'); | |
| background-size: cover; | |
| opacity: 0.3; | |
| } | |
| .hero-content { | |
| position: relative; | |
| z-index: 1; | |
| text-align: center; | |
| } | |
| .hero h1 { | |
| font-size: 3.5rem; | |
| margin-bottom: 1rem; | |
| font-weight: 800; | |
| line-height: 1.2; | |
| } | |
| .hero p { | |
| font-size: 1.25rem; | |
| margin-bottom: 2rem; | |
| opacity: 0.9; | |
| } | |
| .cta-button { | |
| display: inline-block; | |
| padding: 1rem 2.5rem; | |
| background: var(--white); | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| border-radius: 50px; | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| transition: var(--transition); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .cta-button:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| /* Product Showcase */ | |
| .product-showcase { | |
| padding: 4rem 0; | |
| } | |
| .product-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 4rem; | |
| align-items: center; | |
| } | |
| .product-image { | |
| position: relative; | |
| border-radius: 20px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| } | |
| .product-image img { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| transition: var(--transition); | |
| } | |
| .product-image:hover img { | |
| transform: scale(1.05); | |
| } | |
| .product-badge { | |
| position: absolute; | |
| top: 1rem; | |
| left: 1rem; | |
| background: var(--secondary-color); | |
| color: var(--white); | |
| padding: 0.5rem 1rem; | |
| border-radius: 30px; | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| } | |
| .product-details h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| line-height: 1.2; | |
| } | |
| .product-rating { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .stars { | |
| color: var(--warning); | |
| } | |
| .rating-count { | |
| color: var(--gray); | |
| font-size: 0.875rem; | |
| } | |
| .product-price { | |
| display: flex; | |
| align-items: center; | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .current-price { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| } | |
| .original-price { | |
| font-size: 1.5rem; | |
| color: var(--gray); | |
| text-decoration: line-through; | |
| } | |
| .discount-badge { | |
| background: var(--success); | |
| color: var(--white); | |
| padding: 0.5rem 1rem; | |
| border-radius: 30px; | |
| font-weight: 600; | |
| font-size: 0.875rem; | |
| } | |
| .product-description { | |
| margin-bottom: 2rem; | |
| line-height: 1.8; | |
| color: var(--gray); | |
| } | |
| .features-list { | |
| list-style: none; | |
| margin-bottom: 2rem; | |
| } | |
| .features-list li { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| padding: 1rem; | |
| background: var(--light-color); | |
| border-radius: 10px; | |
| transition: var(--transition); | |
| } | |
| .features-list li:hover { | |
| background: var(--primary-color); | |
| color: var(--white); | |
| transform: translateX(5px); | |
| } | |
| .features-list i { | |
| font-size: 1.2rem; | |
| } | |
| .purchase-options { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| } | |
| .option { | |
| flex: 1; | |
| padding: 1rem; | |
| border: 2px solid var(--gray-light); | |
| border-radius: 10px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| } | |
| .option:hover { | |
| border-color: var(--primary-color); | |
| background: var(--light-color); | |
| } | |
| .option.selected { | |
| border-color: var(--primary-color); | |
| background: var(--primary-color); | |
| color: var(--white); | |
| } | |
| .option-title { | |
| font-weight: 600; | |
| margin-bottom: 0.5rem; | |
| } | |
| .option-price { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| } | |
| .add-to-cart { | |
| width: 100%; | |
| padding: 1.2rem; | |
| background: var(--primary-color); | |
| color: var(--white); | |
| border: none; | |
| border-radius: 10px; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| } | |
| .add-to-cart:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-2px); | |
| box-shadow: var(--shadow); | |
| } | |
| /* Tabs Section */ | |
| .tabs-section { | |
| padding: 4rem 0; | |
| background: var(--light-color); | |
| } | |
| .tabs-container { | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .tabs-header { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 2rem; | |
| border-bottom: 2px solid var(--gray-light); | |
| } | |
| .tab { | |
| padding: 1rem 2rem; | |
| cursor: pointer; | |
| font-weight: 600; | |
| color: var(--gray); | |
| position: relative; | |
| transition: var(--transition); | |
| } | |
| .tab.active { | |
| color: var(--primary-color); | |
| } | |
| .tab.active::after { | |
| content: ''; | |
| position: absolute; | |
| bottom: -2px; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: var(--primary-color); | |
| } | |
| .tab-content { | |
| display: none; | |
| animation: fadeIn 0.5s ease; | |
| } | |
| .tab-content.active { | |
| display: block; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| /* Reviews Section */ | |
| .reviews-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .review-card { | |
| background: var(--white); | |
| padding: 2rem; | |
| border-radius: 15px; | |
| box-shadow: var(--shadow); | |
| } | |
| .review-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin-bottom: 1rem; | |
| } | |
| .reviewer-avatar { | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| background: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--white); | |
| font-weight: 600; | |
| font-size: 1.2rem; | |
| } | |
| .reviewer-info h4 { | |
| font-size: 1.1rem; | |
| margin-bottom: 0.25rem; | |
| } | |
| .reviewer-info p { | |
| font-size: 0.875rem; | |
| color: var(--gray); | |
| } | |
| .review-rating { | |
| color: var(--warning); | |
| } | |
| .review-text { | |
| line-height: 1.6; | |
| color: var(--gray); | |
| } | |
| /* Related Products */ | |
| .related-products { | |
| padding: 4rem 0; | |
| } | |
| .section-title { | |
| font-size: 2rem; | |
| margin-bottom: 2rem; | |
| text-align: center; | |
| } | |
| .products-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .product-card { | |
| background: var(--white); | |
| border-radius: 15px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| cursor: pointer; | |
| } | |
| .product-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); | |
| } | |
| .product-card-image { | |
| height: 200px; | |
| overflow: hidden; | |
| } | |
| .product-card-image img { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: var(--transition); | |
| } | |
| .product-card:hover .product-card-image img { | |
| transform: scale(1.1); | |
| } | |
| .product-card-content { | |
| padding: 1.5rem; | |
| } | |
| .product-card-title { | |
| font-size: 1.1rem; | |
| margin-bottom: 0.5rem; | |
| font-weight: 600; | |
| } | |
| .product-card-price { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark-color); | |
| color: var(--white); | |
| padding: 4rem 0 2rem; | |
| } | |
| .footer-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 3rem; | |
| margin-bottom: 3rem; | |
| } | |
| .footer-section h3 { | |
| font-size: 1.2rem; | |
| margin-bottom: 1.5rem; | |
| color: var(--primary-color); | |
| } | |
| .footer-links { | |
| list-style: none; | |
| } | |
| .footer-links li { | |
| margin-bottom: 0.75rem; | |
| } | |
| .footer-links a { | |
| color: var(--white); | |
| text-decoration: none; | |
| opacity: 0.8; | |
| transition: var(--transition); | |
| } | |
| .footer-links a:hover { | |
| opacity: 1; | |
| color: var(--primary-color); | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1.5rem; | |
| } | |
| .social-links a { | |
| width: 40px; | |
| height: 40px; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: var(--transition); | |
| } | |
| .social-links a:hover { | |
| background: var(--primary-color); | |
| transform: translateY(-3px); | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 2rem; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| font-size: 0.875rem; | |
| opacity: 0.8; | |
| } | |
| /* Mobile Menu */ | |
| .mobile-menu { | |
| display: none; | |
| cursor: pointer; | |
| } | |
| .mobile-menu span { | |
| display: block; | |
| width: 25px; | |
| height: 3px; | |
| background: var(--dark-color); | |
| margin: 5px; | |
| transition: var(--transition); | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 992px) { | |
| .product-grid { | |
| grid-template-columns: 1fr; | |
| gap: 2rem; | |
| } | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .hero p { | |
| font-size: 1.1rem; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: none; | |
| } | |
| .mobile-menu { | |
| display: block; | |
| } | |
| .hero h1 { | |
| font-size: 2rem; | |
| } | |
| .purchase-options { | |
| flex-direction: column; | |
| } | |
| .tabs-header { | |
| overflow-x: auto; | |
| padding-bottom: 0.5rem; | |
| } | |
| .tab { | |
| white-space: nowrap; | |
| padding: 0.75rem 1.5rem; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .hero { | |
| padding: 2rem 0; | |
| } | |
| .hero h1 { | |
| font-size: 1.8rem; | |
| } | |
| .product-details h2 { | |
| font-size: 2rem; | |
| } | |
| .current-price { | |
| font-size: 2rem; | |
| } | |
| } | |
| /* Animations */ | |
| .fade-in { | |
| animation: fadeIn 1s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .slide-in { | |
| animation: slideIn 0.5s ease; | |
| } | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateX(-20px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| /* Built with anycoder link */ | |
| .built-with { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background: var(--primary-color); | |
| color: var(--white); | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 30px; | |
| text-decoration: none; | |
| font-weight: 600; | |
| box-shadow: var(--shadow); | |
| transition: var(--transition); | |
| z-index: 1000; | |
| } | |
| .built-with:hover { | |
| background: var(--primary-dark); | |
| transform: translateY(-3px); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="container header-content"> | |
| <a href="#" class="logo">ClipTiger</a> | |
| <nav> | |
| <ul class="nav-links"> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">Templates</a></li> | |
| <li><a href="#">Categories</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Contact</a></li> | |
| </ul> | |
| </nav> | |
| <div class="mobile-menu"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| <div class="cart-icon"> | |
| <i class="fas fa-shopping-cart"></i> | |
| <span class="cart-count">3</span> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="container hero-content"> | |
| <h1>Premium Digital Template Collection</h1> | |
| <p>Discover our exclusive collection of high-quality digital templates designed for modern creators</p> | |
| <a href="#product" class="cta-button">Explore Now</a> | |
| </div> | |
| </section> | |
| <!-- Product Showcase --> | |
| <section class="product-showcase" id="product"> | |
| <div class="container"> | |
| <div class="product-grid fade-in"> | |
| <div class="product-image"> | |
| <span class="product-badge">Best Seller</span> | |
| <img src="https://picsum.photos/seed/template1/600/400.jpg" alt="Premium Template"> | |
| </div> | |
| <div class="product-details"> | |
| <h2>Creative Agency Template</h2> | |
| <div class="product-rating"> | |
| <div class="stars"> | |
| <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> | |
| <span class="rating-count">(128 reviews)</span> | |
| </div> | |
| <div class="product-price"> | |
| <span class="current-price">$49</span> | |
| <span class="original-price">$99</span> | |
| <span class="discount-badge">Save 50%</span> | |
| </div> | |
| <p class="product-description"> | |
| Elevate your creative projects with our premium agency template. Perfect for designers, marketers, and creative professionals who demand excellence and sophistication in their work. | |
| </p> | |
| <ul class="features-list"> | |
| <li><i class="fas fa-check-circle"></i> Fully responsive design</li> | |
| <li><i class="fas fa-check-circle"></i> 100+ customizable elements</li> | |
| <li><i class="fas fa-check-circle"></i> Lifetime updates</li> | |
| <li><i class="fas fa-check-circle"></i> 24/7 customer support</li> | |
| <li><i class="fas fa-check-circle"></i> Multi-language support</li> | |
| </ul> | |
| <div class="purchase-options"> | |
| <div class="option selected"> | |
| <div class="option-title">Standard</div> | |
| <div class="option-price">$49</div> | |
| </div> | |
| <div class="option"> | |
| <div class="option-title">Pro</div> | |
| <div class="option-price">$79</div> | |
| </div> | |
| <div class="option"> | |
| <div class="option-title">Enterprise</div> | |
| <div class="option-price">$149</div> | |
| </div> | |
| </div> | |
| <button class="add-to-cart"> | |
| <i class="fas fa-shopping-cart"></i> | |
| Add to Cart | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tabs Section --> | |
| <section class="tabs-section"> | |
| <div class="container tabs-container"> | |
| <div class="tabs-header"> | |
| <div class="tab active" data-tab="description">Description</div> | |
| <div class="tab" data-tab="features">Features</div> | |
| <div class="tab" data-tab="reviews">Reviews</div> | |
| <div class="tab" data-tab="specifications">Specifications</div> | |
| </div> | |
| <div class="tab-content active" id="description"> | |
| <p>Our Creative Agency Template is meticulously crafted to provide you with a professional foundation for your digital projects. Whether you're building a portfolio, a marketing website, or a corporate presence, this template offers the flexibility and power you need to succeed.</p> | |
| <p>With clean code, modern design principles, and extensive documentation, you'll be up and running in no time. The template is built with the latest web technologies and follows best practices for performance and accessibility.</p> | |
| </div> | |
| <div class="tab-content" id="features"> | |
| <ul class="features-list"> | |
| <li><i class="fas fa-paint-brush"></i> Modern design with clean aesthetics</li> | |
| <li><i class="fas fa-mobile-alt"></i> Fully responsive and mobile-optimized</li> | |
| <li><i class="fas fa-bolt"></i> Lightning-fast performance</li> | |
| <li><i class="fas fa-shield-alt"></i> Secure and reliable code</li> | |
| <li><i class="fas fa-cogs"></i> Easy customization options</li> | |
| <li><i class="fas fa-file-alt"></i> Comprehensive documentation</li> | |
| <li><i class="fas fa-users"></i> Active community support</li> | |
| <li><i class="fas fa-sync-alt"></i> Regular updates and improvements</li> | |
| </ul> | |
| </div> | |
| <div class="tab-content" id="reviews"> | |
| <div class="reviews-grid"> | |
| <div class="review-card"> | |
| <div class="review-header"> | |
| <div class="reviewer-avatar">JD</div> | |
| <div class="reviewer-info"> | |
| <h4>John Doe</h4> | |
| <p>Professional Designer</p> | |
| </div> | |
| <div class="review-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> | |
| </div> | |
| <p class="review-text">"This template has completely transformed my workflow. The attention to detail and quality of the code is exceptional. Highly recommended!"</p> | |
| </div> | |
| <div class="review-card"> | |
| <div class="review-header"> | |
| <div class="reviewer-avatar">SM</div> | |
| <div class="reviewer-info"> | |
| <h4>Sarah Miller</h4> | |
| <p>Marketing Manager</p> | |
| </div> | |
| <div class="review-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> | |
| </div> | |
| <p class="review-text">"The template is incredibly versatile and works perfectly for our agency needs. The support team is also very responsive."</p> | |
| </div> | |
| <div class="review-card"> | |
| <div class="review-header"> | |
| <div class="reviewer-avatar">AK</div> | |
| <div class="reviewer-info"> | |
| <h4>Alex Kumar</h4> | |
| <p>Freelance Developer</p> | |
| </div> | |
| <div class="review-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> | |
| </div> | |
| <p class="review-text">"As a developer, I appreciate the clean code structure and extensive documentation. This template saved me countless hours of work."</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="tab-content" id="specifications"> | |
| <table style="width: 100%; border-collapse: collapse;"> | |
| <tr> | |
| <td style="padding: 1rem; font-weight: 600; background: var(--light-color);">Version</td> | |
| <td style="padding: 1rem;">2.4.1</td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 1rem; font-weight: 600; background: var(--light-color);">Last Updated</td> | |
| <td style="padding: 1rem;">March 15, 2024</td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 1rem; font-weight: 600; background: var(--light-color);">File Size</td> | |
| <td style="padding: 1rem;">12.5 MB</td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 1rem; font-weight: 600; background: var(--light-color);">License</td> | |
| <td style="padding: 1rem;">Commercial</td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 1rem; font-weight: 600; background: var(--light-color);">Compatibility</td> | |
| <td style="padding: 1rem;">Chrome, Firefox, Safari, Edge</td> | |
| </tr> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Related Products --> | |
| <section class="related-products"> | |
| <div class="container"> | |
| <h2 class="section-title">Related Products</h2> | |
| <div class="products-grid"> | |
| <div class="product-card"> | |
| <div class="product-card-image"> | |
| <img src="https://picsum.photos/seed/template2/400/200.jpg" alt="E-commerce Template"> | |
| </div> | |
| <div class="product-card-content"> | |
| <h3 class="product-card-title">E-commerce Template</h3> | |
| <div class="product-card-price">$39</div> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-card-image"> | |
| <img src="https://picsum.photos/seed/template3/400/200.jpg" alt="Portfolio Template"> | |
| </div> | |
| <div class="product-card-content"> | |
| <h3 class="product-card-title">Portfolio Template</h3> | |
| <div class="product-card-price">$29</div> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-card-image"> | |
| <img src="https://picsum.photos/seed/template4/400/200.jpg" alt="Blog Template"> | |
| </div> | |
| <div class="product-card-content"> | |
| <h3 class="product-card-title">Blog Template</h3> | |
| <div class="product-card-price">$24</div> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-card-image"> | |
| <img src="https://picsum.photos/seed/template5/400/200.jpg" alt="Landing Page"> | |
| </div> | |
| <div class="product-card-content"> | |
| <h3 class="product-card-title">Landing Page</h3> | |
| <div class="product-card-price">$34</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-section"> | |
| <h3>About ClipTiger</h3> | |
| <p style="opacity: 0.8; margin-bottom: 1rem;">Your trusted source for premium digital templates and creative assets.</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-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Quick Links</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">Templates</a></li> | |
| <li><a href="#">Pricing</a></li> | |
| <li><a href="#">Support</a></li> | |
| <li><a href="#">Blog</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Categories</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#">Web Templates</a></li> | |
| <li><a href="#">Graphics</a></li> | |
| <li><a href="#">Icons</a></li> | |
| <li><a href="#">Photos</a></li> | |
| <li><a href="#">Fonts</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-section"> | |
| <h3>Contact Us</h3> | |
| <ul class="footer-links"> | |
| <li><i class="fas fa-envelope" style="margin-right: 0.5rem;"></i> support@cliptiger.com</li> | |
| <li><i class="fas fa-phone" style="margin-right: 0.5rem;"></i> +1 (555) 123-4567</li> | |
| <li><i class="fas fa-map-marker-alt" style="margin-right: 0.5rem;"></i> New York, NY 10001</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2024 ClipTiger. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Built with anycoder link --> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="built-with" target="_blank">Built with anycoder</a> | |
| <script> | |
| // Tab functionality | |
| const tabs = document.querySelectorAll('.tab'); | |
| const tabContents = document.querySelectorAll('.tab-content'); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| const target = tab.dataset.tab; | |
| // Remove active class from all tabs and contents | |
| tabs.forEach(t => t.classList.remove('active')); | |
| tabContents.forEach(content => content.classList.remove('active')); | |
| // Add active class to clicked tab and corresponding content | |
| tab.classList.add('active'); | |
| document.getElementById(target).classList.add('active'); | |
| }); | |
| }); | |
| // Purchase options | |
| const options = document.querySelectorAll('.option'); | |
| options.forEach(option => { | |
| option.addEventListener('click', () => { | |
| options.forEach(opt => opt.classList.remove('selected')); | |
| option.classList.add('selected'); | |
| }); | |
| }); | |
| // Add to cart functionality | |
| const addToCartBtn = document.querySelector('.add-to-cart'); | |
| addToCartBtn.addEventListener('click', () => { | |
| const cartCount = document.querySelector('.cart-count'); | |
| let count = parseInt(cartCount.textContent); | |
| cartCount.textContent = count + 1; | |
| // Show success message | |
| const successMessage = document.createElement('div'); | |
| successMessage.textContent = 'Item added to cart!'; | |
| successMessage.style.cssText = ` | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| background: var(--success); | |
| color: white; | |
| padding: 1rem 2rem; | |
| border-radius: 10px; | |
| box-shadow: var(--shadow); | |
| z-index: 1000; | |
| animation: slideIn 0.3s ease; | |
| `; | |
| document.body.appendChild(successMessage); | |
| setTimeout(() => { | |
| successMessage.remove(); | |
| }, 3000); | |
| }); | |
| // Mobile menu toggle | |
| const mobileMenu = document.querySelector('.mobile-menu'); | |
| const navLinks = document.querySelector('.nav-links'); | |
| mobileMenu.addEventListener('click', () => { | |
| navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex'; | |
| navLinks.style.flexDirection = 'column'; | |
| navLinks.style.gap = '1rem'; | |
| navLinks.style.position = 'absolute'; | |
| navLinks.style.top = '60px'; | |
| navLinks.style.right = '20px'; | |
| navLinks.style.background = 'white'; | |
| navLinks.style.padding = '1rem'; | |
| navLinks.style.boxShadow = 'var(--shadow)'; | |
| navLinks.style.borderRadius = '10px'; | |
| }); | |
| // Smooth scroll for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Fade in animation on scroll | |
| const fadeElements = document.querySelectorAll('.fade-in'); | |
| const fadeInOnScroll = () => { | |
| fadeElements.forEach(element => { | |
| const elementTop = element.getBoundingClientRect().top; | |
| const elementVisible = 150; | |
| if (elementTop < window.innerHeight - elementVisible) { | |
| element.style.opacity = '1'; | |
| element.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }; | |
| window.addEventListener('scroll', fadeInOnScroll); | |
| fadeInOnScroll(); // Initial check | |
| </script> | |
| </body> | |
| </html> |