Stationary 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>PenCraft - Premium Stationary</title> <link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> </head> <body> <!-- Header/Navigation --> <header class="header"> <div class="container"> <div class="logo">PenCraft</div> <nav class="nav"> <ul> <li><a href="#home">Home</a></li> <li><a href="#products">Products</a></li> <li><a href="#features">Features</a></li> <li><a href="#collections">Collections</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <div class="cart-icon"> <i class="fas fa-shopping-cart"></i> <span class="cart-count">0</span> </div> <div class="mobile-menu-btn"> <i class="fas fa-bars"></i> </div> </div> </header> <!-- Hero Section --> <section id="home" class="hero"> <div class="container"> <div class="hero-content"> <h1>Elevate Your Writing Experience</h1> <p>Premium stationary crafted for those who appreciate the art of writing</p> <a href="#products" class="btn">Explore Collection</a> </div> <div class="hero-image"> <img src="https://via.placeholder.com/600x400" alt="Premium Stationary"> </div> </div> </section> <!-- Products Section --> <section id="products" class="products"> <div class="container"> <h2 class="section-title">Our Products</h2> <p class="section-subtitle">Carefully crafted for your creative needs</p> <div class="product-grid"> <div class="product-card"> <img src="https://via.placeholder.com/300x200" alt="Fountain Pen"> <h3>Fountain Pens</h3> <p>Smooth writing experience with premium nibs</p> <span class="price">$49.99</span> <button class="btn add-to-cart">Add to Cart</button> </div> <div class="product-card"> <img src="https://via.placeholder.com/300x200" alt="Notebook"> <h3>Leather Notebooks</h3> <p>Premium paper with hand-stitched leather covers</p> <span class="price">$29.99</span> <button class="btn add-to-cart">Add to Cart</button> </div> <div class="product-card"> <img src="https://via.placeholder.com/300x200" alt="Ink Set"> <h3>Ink Collections</h3> <p>Vibrant colors with archival quality</p> <span class="price">$24.99</span> <button class="btn add-to-cart">Add to Cart</button> </div> <div class="product-card"> <img src="https://via.placeholder.com/300x200" alt="Desk Set"> <h3>Desk Accessories</h3> <p>Elegant organizers for your workspace</p> <span class="price">$39.99</span> <button class="btn add-to-cart">Add to Cart</button> </div> </div> </div> </section> <!-- Features Section --> <section id="features" class="features"> <div class="container"> <h2 class="section-title">Why Choose PenCraft</h2> <p class="section-subtitle">Quality that makes the difference</p> <div class="features-grid"> <div class="feature-item"> <i class="fas fa-pen-fancy"></i> <h3>Handcrafted Quality</h3> <p>Each item is carefully crafted by skilled artisans with attention to detail.</p> </div> <div class="feature-item"> <i class="fas fa-leaf"></i> <h3>Sustainable Materials</h3> <p>We use eco-friendly materials sourced from responsible suppliers.</p> </div> <div class="feature-item"> <i class="fas fa-award"></i> <h3>Lifetime Warranty</h3> <p>Our products come with a lifetime warranty against manufacturing defects.</p> </div> <div class="feature-item"> <i class="fas fa-truck"></i> <h3>Free Shipping</h3> <p>Free worldwide shipping on all orders over $100.</p> </div> </div> </div> </section> <!-- Collections Section --> <section id="collections" class="collections"> <div class="container"> <h2 class="section-title">Our Collections</h2> <p class="section-subtitle">Find your perfect match</p> <div class="collection-tabs"> <button class="tab-btn active" data-collection="all">All</button> <button class="tab-btn" data-collection="pens">Pens</button> <button class="tab-btn" data-collection="notebooks">Notebooks</button> <button class="tab-btn" data-collection="accessories">Accessories</button> </div> <div class="collection-grid"> <!-- Items will be loaded via JavaScript --> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials"> <div class="container"> <h2 class="section-title">What Our Customers Say</h2> <p class="section-subtitle">Trusted by writers worldwide</p> <div class="testimonial-slider"> <div class="testimonial-slide active"> <div class="testimonial-content"> <p>"The quality of these notebooks is unmatched. The paper is perfect for fountain pens with no bleeding or feathering."</p> <div class="testimonial-author"> <img src="https://via.placeholder.com/80x80" alt="Sarah J."> <div> <h4>Sarah J.</h4> <span>Author</span> </div> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-content"> <p>"As a designer, I appreciate the attention to detail in every PenCraft product. They're both beautiful and functional."</p> <div class="testimonial-author"> <img src="https://via.placeholder.com/80x80" alt="Michael T."> <div> <h4>Michael T.</h4> <span>Graphic Designer</span> </div> </div> </div> </div> <div class="testimonial-slide"> <div class="testimonial-content"> <p>"The fountain pen glides across the paper effortlessly. It's become my daily writer and I couldn't be happier."</p> <div class="testimonial-author"> <img src="https://via.placeholder.com/80x80" alt="Emily R."> <div> <h4>Emily R.</h4> <span>Journalist</span> </div> </div> </div> </div> </div> <div class="slider-dots"> <span class="dot active"></span> <span class="dot"></span> <span class="dot"></span> </div> </div> </section> <!-- Blog Section --> <section id="blog" class="blog"> <div class="container"> <h2 class="section-title">From Our Blog</h2> <p class="section-subtitle">Tips, stories and inspiration</p> <div class="blog-grid"> <div class="blog-card"> <img src="https://via.placeholder.com/400x250" alt="Blog Post"> <div class="blog-content"> <span class="blog-date">June 15, 2023</span> <h3>The Art of Handwriting in the Digital Age</h3> <p>Exploring why handwriting still matters and how to cultivate this valuable skill...</p> <a href="#" class="read-more">Read More</a> </div> </div> <div class="blog-card"> <img src="https://via.placeholder.com/400x250" alt="Blog Post"> <div class="blog-content"> <span class="blog-date">May 28, 2023</span> <h3>Choosing the Right Paper for Your Fountain Pen</h3> <p>A guide to understanding paper weights, textures and how they affect your writing...</p> <a href="#" class="read-more">Read More</a> </div> </div> <div class="blog-card"> <img src="https://via.placeholder.com/400x250" alt="Blog Post"> <div class="blog-content"> <span class="blog-date">April 10, 2023</span> <h3>Organizing Your Creative Workspace</h3> <p>Tips and tools to create an inspiring environment that boosts your productivity...</p> <a href="#" class="read-more">Read More</a> </div> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about"> <div class="container"> <div class="about-image"> <img src="https://via.placeholder.com/500x400" alt="Our Story"> </div> <div class="about-content"> <h2 class="section-title">Our Story</h2> <p>Founded in 2010, PenCraft began as a small workshop dedicated to preserving the art of fine writing instruments. What started as a passion project between two stationery enthusiasts has grown into a brand recognized for its commitment to quality and craftsmanship.</p> <p>Every product we create is a testament to our belief that the tools we use to express ourselves should be as thoughtful as the ideas they help bring to life. We combine traditional techniques with modern design to create stationery that stands the test of time.</p> <p>Our team of artisans takes pride in every detail, from selecting the finest materials to the final quality check before your order ships. We're not just selling stationery - we're keeping the art of handwriting alive.</p> <a href="#" class="btn">Meet the Team</a> </div> </div> </section> <!-- Newsletter Section --> <section class="newsletter"> <div class="container"> <div class="newsletter-content"> <h2>Stay Updated</h2> <p>Subscribe to our newsletter for exclusive offers, new product announcements, and writing inspiration.</p> </div> <form class="newsletter-form"> <input type="email" placeholder="Your email address" required> <button type="submit" class="btn">Subscribe</button> </form> </div> </section> <!-- Contact Section --> <section id="contact" class="contact"> <div class="container"> <h2 class="section-title">Get In Touch</h2> <p class="section-subtitle">We'd love to hear from you</p> <div class="contact-grid"> <div class="contact-info"> <div class="info-item"> <i class="fas fa-map-marker-alt"></i> <div> <h3>Address</h3> <p>123 Stationery Street, Craftville, CA 90210</p> </div> </div> <div class="info-item"> <i class="fas fa-phone"></i> <div> <h3>Phone</h3> <p>(555) 123-4567</p> </div> </div> <div class="info-item"> <i class="fas fa-envelope"></i> <div> <h3>Email</h3> <p>info@pen-craft.com</p> </div> </div> <div class="info-item"> <i class="fas fa-clock"></i> <div> <h3>Hours</h3> <p>Monday-Friday: 9am - 6pm<br>Saturday: 10am - 4pm</p> </div> </div> </div> <div class="contact-form"> <form> <div class="form-group"> <input type="text" placeholder="Your Name" required> </div> <div class="form-group"> <input type="email" placeholder="Your Email" required> </div> <div class="form-group"> <input type="text" placeholder="Subject"> </div> <div class="form-group"> <textarea placeholder="Your Message" rows="5" required></textarea> </div> <button type="submit" class="btn">Send Message</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-grid"> <div class="footer-col"> <h3>PenCraft</h3> <p>Premium stationary crafted for those who appreciate the art of writing.</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-pinterest"></i></a> </div> </div> <div class="footer-col"> <h3>Quick Links</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#products">Products</a></li> <li><a href="#collections">Collections</a></li> <li><a href="#about">About Us</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-col"> <h3>Customer Service</h3> <ul> <li><a href="#">Shipping Policy</a></li> <li><a href="#">Returns & Exchanges</a></li> <li><a href="#">FAQ</a></li> <li><a href="#">Privacy Policy</a></li> <li><a href="#">Terms of Service</a></li> </ul> </div> <div class="footer-col"> <h3>Newsletter</h3> <p>Subscribe to get updates on new arrivals and special offers.</p> <form class="footer-newsletter"> <input type="email" placeholder="Your email"> <button type="submit"><i class="fas fa-paper-plane"></i></button> </form> </div> </div> <div class="footer-bottom"> <p>© 2023 PenCraft. All Rights Reserved.</p> <div class="payment-methods"> <i class="fab fa-cc-visa"></i> <i class="fab fa-cc-mastercard"></i> <i class="fab fa-cc-amex"></i> <i class="fab fa-cc-paypal"></i> </div> </div> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
/* Global Styles */ :root { --primary-color: #2c3e50; --secondary-color: #e74c3c; --accent-color: #3498db; --light-color: #ecf0f1; --dark-color: #2c3e50; --text-color: #333; --text-light: #7f8c8d; --white: #fff; --black: #000; --gray: #95a5a6; --light-gray: #bdc3c7; --border-radius: 4px; --box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--text-color); line-height: 1.6; overflow-x: hidden; } a { text-decoration: none; color: var(--text-color); } ul { list-style: none; } img { max-width: 100%; height: auto; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .btn { display: inline-block; background-color: var(--secondary-color); color: var(--white); padding: 10px 25px; border-radius: var(--border-radius); font-weight: 600; transition: var(--transition); border: none; cursor: pointer; } .btn:hover { background-color: #c0392b; transform: translateY(-3px); box-shadow: var(--box-shadow); } .section-title { font-size: 2.5rem; margin-bottom: 1rem; color: var(--dark-color); position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 50px; height: 3px; background-color: var(--secondary-color); } .section-subtitle { color: var(--text-light); margin-bottom: 3rem; font-size: 1.1rem; } /* Header Styles */ .header { position: fixed; top: 0; left: 0; width: 100%; padding: 20px 0; background-color: var(--white); box-shadow: var(--box-shadow); z-index: 1000; transition: var(--transition); } .header.scrolled { padding: 15px 0; background-color: rgba(255, 255, 255, 0.95); } .header .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.8rem; font-weight: 700; color: var(--primary-color); } .nav ul { display: flex; } .nav ul li { margin-left: 30px; } .nav ul li a { font-weight: 600; transition: var(--transition); } .nav ul li a:hover { color: var(--secondary-color); } .cart-icon { position: relative; margin-left: 30px; cursor: pointer; } .cart-icon i { font-size: 1.5rem; color: var(--primary-color); } .cart-count { position: absolute; top: -10px; right: -10px; background-color: var(--secondary-color); color: var(--white); border-radius: 50%; width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; font-size: 0.7rem; font-weight: bold; } .mobile-menu-btn { display: none; font-size: 1.5rem; cursor: pointer; } /* Hero Section */ .hero { padding: 150px 0 100px; background-color: var(--light-color); } .hero .container { display: flex; align-items: center; justify-content: space-between; } .hero-content { flex: 1; padding-right: 50px; } .hero-content h1 { font-size: 3.5rem; margin-bottom: 20px; line-height: 1.2; } .hero-content p { font-size: 1.2rem; margin-bottom: 30px; color: var(--text-light); } .hero-image { flex: 1; } /* Products Section */ .products { padding: 100px 0; background-color: var(--white); } .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 50px; } .product-card { background-color: var(--white); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); } .product-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .product-card img { width: 100%; height: 200px; object-fit: cover; } .product-card h3 { padding: 15px 20px 0; font-size: 1.3rem; } .product-card p { padding: 10px 20px; color: var(--text-light); } .product-card .price { display: block; padding: 0 20px; font-size: 1.2rem; font-weight: bold; color: var(--secondary-color); } .product-card .add-to-cart { margin: 20px; width: calc(100% - 40px); } /* Features Section */ .features { padding: 100px 0; background-color: var(--light-color); } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 50px; } .feature-item { text-align: center; padding: 30px 20px; background-color: var(--white); border-radius: var(--border-radius); box-shadow: var(--box-shadow); transition: var(--transition); } .feature-item:hover { transform: translateY(-10px); } .feature-item i { font-size: 2.5rem; color: var(--secondary-color); margin-bottom: 20px; } .feature-item h3 { margin-bottom: 15px; font-size: 1.3rem; } /* Collections Section */ .collections { padding: 100px 0; background-color: var(--white); } .collection-tabs { display: flex; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; } .tab-btn { padding: 10px 20px; margin: 0 10px; background-color: transparent; border: none; border-bottom: 2px solid transparent; font-weight: 600; cursor: pointer; transition: var(--transition); } .tab-btn:hover, .tab-btn.active { color: var(--secondary-color); border-bottom: 2px solid var(--secondary-color); } .collection-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; } /* Testimonials Section */ .testimonials { padding: 100px 0; background-color: var(--light-color); text-align: center; } .testimonial-slider { position: relative; max-width: 800px; margin: 0 auto; overflow: hidden; } .testimonial-slide { display: none; padding: 30px; background-color: var(--white); border-radius: var(--border-radius); box-shadow: var(--box-shadow); } .testimonial-slide.active { display: block; } .testimonial-content p { font-size: 1.1rem; font-style: italic; margin-bottom: 30px; } .testimonial-author { display: flex; align-items: center; justify-content: center; } .testimonial-author img { width: 80px; height: 80px; border-radius: 50%; margin-right: 20px; } .testimonial-author h4 { font-size: 1.2rem; margin-bottom: 5px; } .testimonial-author span { color: var(--text-light); font-size: 0.9rem; } .slider-dots { display: flex; justify-content: center; margin-top: 30px; } .dot { width: 12px; height: 12px; background-color: var(--light-gray); border-radius: 50%; margin: 0 5px; cursor: pointer; transition: var(--transition); } .dot.active, .dot:hover { background-color: var(--secondary-color); } /* Blog Section */ .blog { padding: 100px 0; background-color: var(--white); } .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; } .blog-card { background-color: var(--white); border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow); transition: var(--transition); } .blog-card:hover { transform: translateY(-10px); } .blog-card img { width: 100%; height: 200px; object-fit: cover; } .blog-content { padding: 20px; } .blog-date { display: block; color: var(--text-light); font-size: 0.9rem; margin-bottom: 10px; } .blog-content h3 { margin-bottom: 15px; font-size: 1.3rem; } .blog-content p { margin-bottom: 15px; color: var(--text-light); } .read-more { color: var(--secondary-color); font-weight: 600; transition: var(--transition); } .read-more:hover { color: #c0392b; } /* About Section */ .about { padding: 100px 0; background-color: var(--light-color); } .about .container { display: flex; align-items: center; gap: 50px; } .about-image { flex: 1; } .about-content { flex: 1; } .about-content p { margin-bottom: 20px; } /* Newsletter Section */ .newsletter { padding: 80px 0; background-color: var(--secondary-color); color: var(--white); } .newsletter .container { display: flex; justify-content: space-between; align-items: center; } .newsletter-content h2 { font-size: 2rem; margin-bottom: 15px; } .newsletter-form { display: flex; max-width: 500px; width: 100%; } .newsletter-form input { flex: 1; padding: 15px; border: none; border-radius: var(--border-radius) 0 0 var(--border-radius); font-size: 1rem; } .newsletter-form button { border-radius: 0 var(--border-radius) var(--border-radius) 0; background-color: var(--dark-color); } .newsletter-form button:hover { background-color: #1a252f; } /* Contact Section */ .contact { padding: 100px 0; background-color: var(--white); } .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 50px; margin-top: 50px; } .contact-info .info-item { display: flex; align-items: flex-start; margin-bottom: 30px; } .contact-info .info-item i { font-size: 1.5rem; color: var(--secondary-color); margin-right: 20px; margin-top: 5px; } .contact-info .info-item h3 { margin-bottom: 5px; font-size: 1.2rem; } .contact-form .form-group { margin-bottom: 20px; } .contact-form input, .contact-form textarea { width: 100%; padding: 15px; border: 1px solid var(--light-gray); border-radius: var(--border-radius); font-size: 1rem; transition: var(--transition); } .contact-form input:focus, .contact-form textarea:focus { border-color: var(--secondary-color); outline: none; } .contact-form textarea { resize: vertical; } /* Footer */ .footer { background-color: var(--dark-color); color: var(--white); padding: 80px 0 0; } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px; margin-bottom: 50px; } .footer-col h3 { font-size: 1.3rem; margin-bottom: 20px; position: relative; padding-bottom: 10px; } .footer-col h3::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 2px; background-color: var(--secondary-color); } .footer-col p { margin-bottom: 20px; color: var(--light-gray); } .social-links { display: flex; gap: 15px; } .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: var(--white); transition: var(--transition); } .social-links a:hover { background-color: var(--secondary-color); transform: translateY(-3px); } .footer-col ul li { margin-bottom: 10px; } .footer-col ul li a { color: var(--light-gray); transition: var(--transition); } .footer-col ul li a:hover { color: var(--secondary-color); padding-left: 5px; } .footer-newsletter { display: flex; margin-top: 20px; } .footer-newsletter input { flex: 1; padding: 10px; border: none; border-radius: var(--border-radius) 0 0 var(--border-radius); } .footer-newsletter button { background-color: var(--secondary-color); color: var(--white); border: none; padding: 0 15px; border-radius: 0 var(--border-radius) var(--border-radius) 0; cursor: pointer; transition: var(--transition); } .footer-newsletter button:hover { background-color: #c0392b; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 20px 0; text-align: center; color: var(--light-gray); font-size: 0.9rem; } .payment-methods { margin-top: 15px; } .payment-methods i { font-size: 1.5rem; margin: 0 5px; color: var(--light-gray); } /* Responsive Styles */ @media (max-width: 992px) { .hero .container { flex-direction: column; text-align: center; } .hero-content { padding-right: 0; margin-bottom: 50px; } .about .container { flex-direction: column; } .newsletter .container { flex-direction: column; text-align: center; } .newsletter-content { margin-bottom: 30px; } .newsletter-form { max-width: 100%; } } @media (max-width: 768px) { .nav { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background-color: var(--white); transition: var(--transition); z-index: 999; } .nav.active { left: 0; } .nav ul { flex-direction: column; align-items: center; padding-top: 50px; } .nav ul li { margin: 15px 0; } .mobile-menu-btn { display: block; } .section-title { font-size: 2rem; } .hero-content h1 { font-size: 2.5rem; } } @media (max-width: 576px) { .hero { padding: 120px 0 80px; } .hero-content h1 { font-size: 2rem; } .section-title { font-size: 1.8rem; } .collection-tabs { flex-direction: column; align-items: center; } .tab-btn { margin: 5px 0; } }
JavaScript
document.addEventListener('DOMContentLoaded', function() { // Mobile Menu Toggle const mobileMenuBtn = document.querySelector('.mobile-menu-btn'); const nav = document.querySelector('.nav'); mobileMenuBtn.addEventListener('click', function() { nav.classList.toggle('active'); mobileMenuBtn.innerHTML = nav.classList.contains('active') ? '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>'; }); // Close mobile menu when clicking a link const navLinks = document.querySelectorAll('.nav ul li a'); navLinks.forEach(link => { link.addEventListener('click', function() { if (nav.classList.contains('active')) { nav.classList.remove('active'); mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>'; } }); }); // Header scroll effect const header = document.querySelector('.header'); window.addEventListener('scroll', function() { if (window.scrollY > 100) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }); // Collection tabs const tabBtns = document.querySelectorAll('.tab-btn'); const collectionGrid = document.querySelector('.collection-grid'); // Sample collection data const collections = { all: [ { name: 'Classic Fountain Pen', category: 'pens', price: '$59.99', image: 'https://via.placeholder.com/300x200' }, { name: 'Executive Ballpoint', category: 'pens', price: '$39.99', image: 'https://via.placeholder.com/300x200' }, { name: 'Leather Journal', category: 'notebooks', price: '$49.99', image: 'https://via.placeholder.com/300x200' }, { name: 'Premium Notebook Set', category: 'notebooks', price: '$34.99', image: 'https://via.placeholder.com/300x200' }, { name: 'Desk Organizer', category: 'accessories', price: '$29.99', image: 'https://via.placeholder.com/300x200' }, { name: 'Pen Stand', category: 'accessories', price: '$24.99', image: 'https://via.placeholder.com/300x200' } ], pens: [ { name: 'Classic Fountain Pen', category: 'pens', price: '$59.99', image: 'https://via.placeholder.com/300x200' }, { name: 'Executive Ballpoint', category: 'pens', price: '$39.99', image: 'https://via.placeholder.com/300x200' }, { name: 'Limited Edition Pen', category: 'pens', price: '$79.99', image: 'https://via.placeholder.com/300x200' }, { name: 'Travel Fountain Pen', category: 'pens', price: '$49.99', image: 'https://via.placeholder.com/300x200' } ], notebooks: [ { name: 'Leather Journal', category: 'notebooks', price: '$49.99', image: 'https://via.placeholder.com/300x200' }, { name: 'Premium Notebook Set', category: 'notebooks', price: '$34.99', image: 'https://via.placeholder.com/300x200' }, { name: 'Sketchbook', category: 'notebooks', price: '$29.99', image: 'https://via.placeholder.com/300x200' }, { name: 'Pocket Notebook', category: 'notebooks', price: '$19.99', image: 'https://via.placeholder.com/300x200' } ], accessories: [ { name: 'Desk Organizer', category: 'accessories', price: '$29.99', image: 'https://via.placeholder.com/300x200' }, { name: 'Pen Stand', category: 'accessories', price: '$24.99', image: 'https://via.placeholder.com/300x200' }, { name: 'Letter Opener', category: 'accessories', price: '$14.99', image: 'https://via.placeholder.com/300x200' }, { name: 'Paperweight', category: 'accessories', price: '$19.99', image: 'https://via.placeholder.com/300x200' } ] }; // Function to display collections function displayCollections(category) { collectionGrid.innerHTML = ''; const items = category === 'all' ? collections.all : collections[category]; items.forEach(item => { const collectionItem = document.createElement('div'); collectionItem.className = 'product-card'; collectionItem.innerHTML = ` <img src="${item.image}" alt="${item.name}"> <h3>${item.name}</h3> <span class="price">${item.price}</span> <button class="btn add-to-cart">Add to Cart</button> `; collectionGrid.appendChild(collectionItem); }); // Add event listeners to new add to cart buttons addCartEventListeners(); } // Initial display displayCollections('all'); // Tab button functionality tabBtns.forEach(btn => { btn.addEventListener('click', function() { // Remove active class from all buttons tabBtns.forEach(b => b.classList.remove('active')); // Add active class to clicked button this.classList.add('active'); // Display the selected collection const category = this.getAttribute('data-collection'); displayCollections(category); }); }); // Testimonial slider const testimonialSlides = document.querySelectorAll('.testimonial-slide'); const dots = document.querySelectorAll('.dot'); let currentSlide = 0; function showSlide(index) { testimonialSlides.forEach(slide => slide.classList.remove('active')); dots.forEach(dot => dot.classList.remove('active')); testimonialSlides[index].classList.add('active'); dots[index].classList.add('active'); currentSlide = index; } dots.forEach((dot, index) => { dot.addEventListener('click', () => showSlide(index)); }); // Auto slide change setInterval(() => { currentSlide = (currentSlide + 1) % testimonialSlides.length; showSlide(currentSlide); }, 5000); // Cart functionality let cartCount = 0; const cartCountElement = document.querySelector('.cart-count'); const addToCartButtons = document.querySelectorAll('.add-to-cart'); function addCartEventListeners() { const buttons = document.querySelectorAll('.add-to-cart'); buttons.forEach(button => { button.addEventListener('click', function() { cartCount++; cartCountElement.textContent = cartCount; // Animation this.textContent = 'Added!'; this.style.backgroundColor = '#27ae60'; setTimeout(() => { this.textContent = 'Add to Cart'; this.style.backgroundColor = ''; }, 1000); }); }); } // Initialize cart event listeners addCartEventListeners(); // Newsletter form const newsletterForm = document.querySelector('.newsletter-form'); newsletterForm.addEventListener('submit', function(e) { e.preventDefault(); const emailInput = this.querySelector('input'); alert(`Thank you for subscribing with ${emailInput.value}!`); emailInput.value = ''; }); // Footer newsletter form const footerNewsletter = document.querySelector('.footer-newsletter'); footerNewsletter.addEventListener('submit', function(e) { e.preventDefault(); const emailInput = this.querySelector('input'); alert(`Thank you for subscribing with ${emailInput.value}!`); emailInput.value = ''; }); // Contact form const contactForm = document.querySelector('.contact-form form'); contactForm.addEventListener('submit', function(e) { e.preventDefault(); alert('Thank you for your message! We will get back to you soon.'); this.reset(); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); } }); }); });
Output Preview
Desktop
Mobile
Fullscreen
