Bangal Chudi Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shree Bangal Chudi - Premium Bangle Manufacturer</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css">
</head>
<body>
    
    <div class="preloader">
        <div class="bangle-spin"></div>
    </div>

<header class="header">
        <div class="container">
            <a href="#" class="logo">Shree<span>Bangal</span>Chudi</a>
            <nav class="navbar">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#products">Products</a></li>
                    <li><a href="#collections">Collections</a></li>
                    <li><a href="#materials">Materials</a></li>
                    <li><a href="#process">Process</a></li>
                    <li><a href="#testimonials">Testimonials</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
            <div class="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </header>

<section class="hero" id="home">
        <div class="container">
            <div class="hero-content">
                <h1 class="hero-title">Exquisite <span>Bangal Chudi</span> Craftsmanship</h1>
                <p class="hero-subtitle">Handcrafted with tradition, designed for modern elegance</p>
                <div class="hero-btns">
                    <a href="#products" class="btn-primary">Explore Collection</a>
                    <a href="#contact" class="btn-secondary">Custom Order</a>
                </div>
            </div>
            <div class="hero-image">
                <img src="https://images.unsplash.com/photo-1602173574767-37ac01994b2a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Beautiful Bangles" class="floating">
            </div>
        </div>
        <div class="hero-bg-elements">
            <div class="bangle bangle-1"></div>
            <div class="bangle bangle-2"></div>
            <div class="bangle bangle-3"></div>
            <div class="bangle bangle-4"></div>
        </div>
    </section>

<section class="brand-scroller">
        <div class="scroller-inner">
            <div class="scroller-content">
                <span>Trusted By</span>
                <div class="logos">
                    <img src="https://via.placeholder.com/150x60?text=Bridal+Brand" alt="Brand 1">
                    <img src="https://via.placeholder.com/150x60?text=Jewelry+Store" alt="Brand 2">
                    <img src="https://via.placeholder.com/150x60?text=Fashion+House" alt="Brand 3">
                    <img src="https://via.placeholder.com/150x60?text=Luxury+Boutique" alt="Brand 4">
                    <img src="https://via.placeholder.com/150x60?text=Wedding+Planner" alt="Brand 5">
                    <img src="https://via.placeholder.com/150x60?text=Designer+Label" alt="Brand 6">
                </div>
            </div>
        </div>
    </section>

<section class="about" id="about">
        <div class="container">
            <div class="about-image">
                <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Bangle Making">
                <div class="experience-badge">
                    <span>25+</span>
                    <p>Years Experience</p>
                </div>
            </div>
            <div class="about-content">
                <h2 class="section-title">Our <span>Heritage</span> in Bangle Making</h2>
                <p class="section-subtitle">Preserving tradition while innovating designs</p>
                <p>Founded in 1998, Shree Bangal Chudi has been at the forefront of bangle manufacturing, combining traditional craftsmanship with contemporary designs. Our artisans bring decades of expertise to create pieces that adorn women across generations.</p>
                <div class="about-features">
                    <div class="feature">
                        <i class="fas fa-gem"></i>
                        <h3>Premium Materials</h3>
                        <p>Only the finest metals, lac, and embellishments</p>
                    </div>
                    <div class="feature">
                        <i class="fas fa-hand-sparkles"></i>
                        <h3>Handcrafted</h3>
                        <p>Each piece meticulously crafted by skilled artisans</p>
                    </div>
                    <div class="feature">
                        <i class="fas fa-medal"></i>
                        <h3>Quality Assurance</h3>
                        <p>Rigorous quality checks at every stage</p>
                    </div>
                </div>
                <a href="#process" class="btn-primary">Our Process</a>
            </div>
        </div>
    </section>

<section class="products" id="products">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Our <span>Collections</span></h2>
                <p class="section-subtitle">Explore our exquisite range of bangles</p>
            </div>
            <div class="product-categories">
                <button class="category-btn active" data-category="all">All</button>
                <button class="category-btn" data-category="bridal">Bridal</button>
                <button class="category-btn" data-category="traditional">Traditional</button>
                <button class="category-btn" data-category="contemporary">Contemporary</button>
                <button class="category-btn" data-category="kids">Kids</button>
            </div>
            <div class="product-grid">
                
            </div>
            <div class="view-all">
                <a href="#collections" class="btn-secondary">View All Collections</a>
            </div>
        </div>
    </section>

<section class="materials" id="materials">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Premium <span>Materials</span></h2>
                <p class="section-subtitle">The foundation of our exquisite bangles</p>
            </div>
            <div class="materials-grid">
                <div class="material-card">
                    <div class="material-icon gold-bg">
                        <i class="fas fa-ring"></i>
                    </div>
                    <h3>Gold Plated</h3>
                    <p>24K gold plating for lasting shine and elegance</p>
                    <div class="material-properties">
                        <span>Luxurious</span>
                        <span>Durable</span>
                        <span>Hypoallergenic</span>
                    </div>
                </div>
                <div class="material-card">
                    <div class="material-icon silver-bg">
                        <i class="fas fa-moon"></i>
                    </div>
                    <h3>Silver</h3>
                    <p>925 Sterling silver for timeless beauty</p>
                    <div class="material-properties">
                        <span>Elegant</span>
                        <span>Tarnish-resistant</span>
                        <span>Versatile</span>
                    </div>
                </div>
                <div class="material-card">
                    <div class="material-icon lac-bg">
                        <i class="fas fa-paint-brush"></i>
                    </div>
                    <h3>Lac Bangles</h3>
                    <p>Traditional lac work with vibrant colors</p>
                    <div class="material-properties">
                        <span>Lightweight</span>
                        <span>Colorful</span>
                        <span>Cultural</span>
                    </div>
                </div>
                <div class="material-card">
                    <div class="material-icon kundan-bg">
                        <i class="fas fa-gem"></i>
                    </div>
                    <h3>Kundan/Polki</h3>
                    <p>Uncut diamonds set in pure gold foil</p>
                    <div class="material-properties">
                        <span>Royal</span>
                        <span>Handcrafted</span>
                        <span>Heirloom</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="process" id="process">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Our <span>Craftsmanship</span></h2>
                <p class="section-subtitle">The art behind every bangle</p>
            </div>
            <div class="process-steps">
                <div class="process-card">
                    <div class="step-number">1</div>
                    <h3>Design & Conceptualization</h3>
                    <p>Our designers create sketches and 3D models of new bangle designs, blending traditional motifs with contemporary aesthetics.</p>
                </div>
                <div class="process-card">
                    <div class="step-number">2</div>
                    <h3>Material Selection</h3>
                    <p>Only premium materials are selected - from metals to gemstones, ensuring quality and durability in every piece.</p>
                </div>
                <div class="process-card">
                    <div class="step-number">3</div>
                    <h3>Metal Shaping</h3>
                    <p>Skilled artisans shape the metal into perfect circles using traditional techniques passed down through generations.</p>
                </div>
                <div class="process-card">
                    <div class="step-number">4</div>
                    <h3>Embellishment</h3>
                    <p>Intricate work of stone setting, engraving, or lac decoration is done by master craftsmen with exceptional attention to detail.</p>
                </div>
                <div class="process-card">
                    <div class="step-number">5</div>
                    <h3>Quality Inspection</h3>
                    <p>Each bangle undergoes rigorous quality checks for finish, durability, and aesthetic perfection before packaging.</p>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="container">
            <div class="section-header">
                <h2 class="section-title">Client <span>Testimonials</span></h2>
                <p class="section-subtitle">What our customers say about us</p>
            </div>
            <div class="swiper testimonial-slider">
                <div class="swiper-wrapper">
                    <div class="swiper-slide testimonial-card">
                        <div class="testimonial-content">
                            <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>"The bridal set I ordered was absolutely stunning! The craftsmanship exceeded my expectations and all my bridesmaids wanted to know where I got them."</p>
                            <div class="client-info">
                                <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Priya Sharma">
                                <div>
                                    <h4>Priya Sharma</h4>
                                    <span>Bride, New Delhi</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide testimonial-card">
                        <div class="testimonial-content">
                            <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>"As a jewelry retailer, I've been sourcing from Shree Bangal Chudi for 8 years. Their consistent quality and unique designs keep my customers coming back."</p>
                            <div class="client-info">
                                <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Rahul Mehta">
                                <div>
                                    <h4>Rahul Mehta</h4>
                                    <span>Jewelry Store Owner, Mumbai</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide testimonial-card">
                        <div class="testimonial-content">
                            <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>"I ordered custom bangles for my daughter's wedding. The team was incredibly helpful in creating exactly what we envisioned. The bangles were the talk of the event!"</p>
                            <div class="client-info">
                                <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Geeta Patel">
                                <div>
                                    <h4>Geeta Patel</h4>
                                    <span>Mother of the Bride, Ahmedabad</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="container">
            <div class="contact-content">
                <h2 class="section-title">Get In <span>Touch</span></h2>
                <p class="section-subtitle">We'd love to hear from you</p>
                <form class="contact-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="tel" placeholder="Phone Number">
                    </div>
                    <div class="form-group">
                        <select>
                            <option value="">Select Inquiry Type</option>
                            <option value="wholesale">Wholesale Inquiry</option>
                            <option value="custom">Custom Order</option>
                            <option value="general">General Question</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <textarea placeholder="Your Message" rows="5"></textarea>
                    </div>
                    <button type="submit" class="btn-primary">Send Message</button>
                </form>
            </div>
            <div class="contact-info">
                <div class="info-card">
                    <i class="fas fa-map-marker-alt"></i>
                    <h3>Our Workshop</h3>
                    <p>123 Bangle Street, Firozabad, Uttar Pradesh, India - 283203</p>
                </div>
                <div class="info-card">
                    <i class="fas fa-phone-alt"></i>
                    <h3>Call Us</h3>
                    <p>+91 98765 43210</p>
                    <p>+91 11 2345 6789</p>
                </div>
                <div class="info-card">
                    <i class="fas fa-envelope"></i>
                    <h3>Email Us</h3>
                    <p>info@shreebangalchudi.com</p>
                    <p>orders@shreebangalchudi.com</p>
                </div>
                <div class="info-card">
                    <i class="fas fa-clock"></i>
                    <h3>Working Hours</h3>
                    <p>Monday - Saturday: 9:00 AM - 7:00 PM</p>
                    <p>Sunday: Closed</p>
                </div>
            </div>
        </div>
    </section>

<footer class="footer">
        <div class="container">
            <div class="footer-grid">
                <div class="footer-col">
                    <h3>Shree Bangal Chudi</h3>
                    <p>Preserving traditional bangle craftsmanship while innovating designs for the modern woman since 1998.</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-facebook-f"></i></a>
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <a href="#"><i class="fab fa-pinterest-p"></i></a>
                        <a href="#"><i class="fab fa-youtube"></i></a>
                    </div>
                </div>
                <div class="footer-col">
                    <h3>Quick Links</h3>
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#products">Products</a></li>
                        <li><a href="#process">Our Process</a></li>
                        <li><a href="#testimonials">Testimonials</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Products</h3>
                    <ul>
                        <li><a href="#">Bridal Bangles</a></li>
                        <li><a href="#">Lac Bangles</a></li>
                        <li><a href="#">Gold Plated</a></li>
                        <li><a href="#">Silver Bangles</a></li>
                        <li><a href="#">Kids Collection</a></li>
                        <li><a href="#">Festive Specials</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Newsletter</h3>
                    <p>Subscribe to get updates on new collections and offers.</p>
                    <form class="newsletter-form">
                        <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>&copy; 2023 Shree Bangal Chudi. All Rights Reserved.</p>
                <div class="footer-links">
                    <a href="#">Privacy Policy</a>
                    <a href="#">Terms & Conditions</a>
                    <a href="#">Shipping Policy</a>
                </div>
            </div>
        </div>
    </footer>

<a href="#home" class="back-to-top">
        <i class="fas fa-arrow-up"></i>
    </a>

CSS

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

/* Variables */
:root {
    --primary-color: #d4af37; /* Gold */
    --secondary-color: #b76e79; /* Rose gold */
    --accent-color: #6d4c41; /* Brown */
    --text-color: #333;
    --light-text: #777;
    --bg-color: #fff;
    --light-bg: #f9f9f9;
    --dark-bg: #222;
    --border-color: #e0e0e0;
    --shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    line-height: 1.2;
}

h1 {
    font-size: 5rem;
}

h2 {
    font-size: 3.5rem;
}

h3 {
    font-size: 2.5rem;
}

h4 {
    font-size: 2rem;
}

p {
    font-size: 1.6rem;
    color: var(--light-text);
    margin-bottom: 1.5rem;
}

a {
    text-decoration: none;
    color: var(--text-color);
    transition: var(--transition);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

span {
    color: var(--primary-color);
}

.container {
    max-width: 1200px;
    width: 90%;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.btn {
    display: inline-block;
    padding: 1.2rem 2.5rem;
    border-radius: 5rem;
    font-weight: 500;
    font-size: 1.6rem;
    transition: var(--transition);
    text-align: center;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #fff;
    border: 2px solid var(--primary-color);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.section-title {
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
}

.section-subtitle {
    margin-bottom: 3rem;
    font-size: 1.8rem;
}

/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}

.preloader.fade-out {
    opacity: 0;
}

.bangle-spin {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(212, 175, 55, 0.2);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 2rem 0;
    z-index: 999;
    transition: var(--transition);
}

.header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    padding: 1.5rem 0;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    color: var(--text-color);
}

.logo span {
    color: var(--primary-color);
}

.navbar ul {
    display: flex;
}

.navbar ul li {
    margin-left: 3rem;
}

.navbar ul li a {
    font-size: 1.6rem;
    font-weight: 500;
    position: relative;
    padding: 0.5rem 0;
}

.navbar ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: var(--transition);
}

.navbar ul li a:hover::after {
    width: 100%;
}

.navbar ul li a.active {
    color: var(--primary-color);
}

.mobile-menu-btn {
    font-size: 2.5rem;
    color: var(--text-color);
    cursor: pointer;
    display: none;
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    padding-top: 8rem;
}

.hero .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 5rem;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    margin-bottom: 2rem;
    animation: fadeInUp 1s ease;
}

.hero-subtitle {
    font-size: 2rem;
    margin-bottom: 3rem;
    animation: fadeInUp 1s ease 0.2s forwards;
    opacity: 0;
}

.hero-btns {
    display: flex;
    gap: 2rem;
    animation: fadeInUp 1s ease 0.4s forwards;
    opacity: 0;
}

.hero-image {
    position: relative;
    z-index: 2;
    animation: fadeInRight 1s ease;
}

.hero-image img {
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transform: rotate(-5deg);
    transition: var(--transition);
}

.hero-image img:hover {
    transform: rotate(0);
}

.floating {
    animation: floating 3s ease-in-out infinite;
}

@keyframes floating {
    0% {
        transform: translateY(0) rotate(-5deg);
    }
    50% {
        transform: translateY(-15px) rotate(-5deg);
    }
    100% {
        transform: translateY(0) rotate(-5deg);
    }
}

.hero-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.bangle {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(212, 175, 55, 0.1);
    border: 2px solid rgba(212, 175, 55, 0.3);
    animation: float 10s infinite linear;
}

.bangle-1 {
    width: 50px;
    height: 50px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.bangle-2 {
    width: 80px;
    height: 80px;
    top: 60%;
    left: 5%;
    animation-delay: 2s;
}

.bangle-3 {
    width: 30px;
    height: 30px;
    top: 30%;
    right: 10%;
    animation-delay: 4s;
}

.bangle-4 {
    width: 100px;
    height: 100px;
    bottom: 10%;
    right: 15%;
    animation-delay: 6s;
}

@keyframes float {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
    }
    100% {
        transform: translateY(0) rotate(360deg);
    }
}

/* Brand Scroller */
.brand-scroller {
    padding: 3rem 0;
    background-color: var(--light-bg);
    margin: 5rem 0;
    overflow: hidden;
}

.scroller-inner {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.scroller-content {
    display: flex;
    align-items: center;
    gap: 3rem;
    animation: scroll 20s linear infinite;
    white-space: nowrap;
}

.scroller-content span {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--primary-color);
}

.logos {
    display: flex;
    align-items: center;
    gap: 4rem;
}

.logos img {
    height: 40px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: var(--transition);
}

.logos img:hover {
    filter: grayscale(0);
    opacity: 1;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* About Section */
.about {
    padding: 8rem 0;
}

.about .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.about-image {
    position: relative;
}

.about-image img {
    border-radius: 1rem;
    box-shadow: var(--shadow);
}

.experience-badge {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background-color: var(--primary-color);
    color: #fff;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: var(--shadow);
    animation: pulse 2s infinite;
}

.experience-badge span {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
}

.experience-badge p {
    font-size: 1.4rem;
    color: #fff;
    margin: 0;
    text-align: center;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.about-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin: 3rem 0;
}

.feature {
    text-align: center;
    padding: 2rem;
    border-radius: 1rem;
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.feature:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: var(--primary-color);
}

.feature i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.feature h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.feature p {
    font-size: 1.4rem;
}

/* Products Section */
.products {
    padding: 8rem 0;
    background-color: var(--light-bg);
}

.product-categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.category-btn {
    padding: 0.8rem 2rem;
    border-radius: 5rem;
    background-color: transparent;
    border: 1px solid var(--border-color);
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition);
}

.category-btn:hover, .category-btn.active {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 3rem;
}

.product-card {
    background-color: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    position: relative;
}

.product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.product-image {
    height: 250px;
    overflow: hidden;
    position: relative;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.product-card:hover .product-image img {
    transform: scale(1.1);
}

.product-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: var(--primary-color);
    color: #fff;
    padding: 0.3rem 1rem;
    border-radius: 5rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.product-content {
    padding: 2rem;
}

.product-title {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.product-category {
    font-size: 1.2rem;
    color: var(--light-text);
    margin-bottom: 1rem;
    display: inline-block;
    padding: 0.3rem 1rem;
    background-color: var(--light-bg);
    border-radius: 5rem;
}

.product-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.product-rating {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.product-cta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.view-all {
    text-align: center;
    margin-top: 4rem;
}

/* Materials Section */
.materials {
    padding: 8rem 0;
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 3rem;
}

.material-card {
    text-align: center;
    padding: 3rem 2rem;
    border-radius: 1rem;
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

.material-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.material-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 2rem;
    font-size: 3rem;
    color: #fff;
}

.gold-bg {
    background-color: var(--primary-color);
}

.silver-bg {
    background-color: #c0c0c0;
}

.lac-bg {
    background-color: #e91e63;
}

.kundan-bg {
    background-color: #6a1b9a;
}

.material-card h3 {
    margin-bottom: 1.5rem;
}

.material-properties {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.material-properties span {
    font-size: 1.2rem;
    padding: 0.5rem 1rem;
    background-color: var(--light-bg);
    border-radius: 5rem;
    color: var(--text-color);
}

/* Process Section */
.process {
    padding: 8rem 0;
    background-color: var(--light-bg);
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    position: relative;
}

.process-steps::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--border-color);
    z-index: 1;
}

.process-card {
    background-color: #fff;
    padding: 3rem 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow);
    position: relative;
    z-index: 2;
    transition: var(--transition);
    text-align: center;
}

.process-card:hover {
    transform: translateY(-10px);
}

.step-number {
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 auto 2rem;
    position: relative;
}

.process-card h3 {
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
}

.process-card p {
    font-size: 1.4rem;
}

/* Testimonials Section */
.testimonials {
    padding: 8rem 0;
}

.testimonial-slider {
    padding: 3rem;
}

.testimonial-card {
    background-color: #fff;
    border-radius: 1rem;
    padding: 3rem;
    box-shadow: var(--shadow);
    margin: 1rem;
}

.testimonial-content {
    position: relative;
}

.rating {
    color: var(--primary-color);
    margin-bottom: 2rem;
}

.testimonial-content p {
    font-style: italic;
    margin-bottom: 2rem;
    font-size: 1.6rem;
    position: relative;
    padding-left: 3rem;
}

.testimonial-content p::before {
    content: '\201C';
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 5rem;
    color: rgba(212, 175, 55, 0.2);
    font-family: Georgia, serif;
}

.client-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.client-info img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.client-info h4 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.client-info span {
    font-size: 1.4rem;
    color: var(--light-text);
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: var(--border-color);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: var(--primary-color);
}

/* Contact Section */
.contact {
    padding: 8rem 0;
    background-color: var(--dark-bg);
    color: #fff;
}

.contact .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
}

.contact .section-title, 
.contact .section-subtitle,
.contact p {
    color: #fff;
}

.contact-form {
    display: grid;
    gap: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border: none;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.6rem;
    transition: var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    background-color: rgba(255, 255, 255, 0.2);
}

.form-group textarea {
    resize: vertical;
}

.form-group select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1.5rem center;
    background-size: 1.5rem;
}

.contact-info {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.info-card {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 2.5rem;
    border-radius: 1rem;
    transition: var(--transition);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.info-card:hover {
    background-color: rgba(212, 175, 55, 0.1);
    transform: translateY(-5px);
}

.info-card i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
}

.info-card h3 {
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

.info-card p {
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

/* Footer */
.footer {
    background-color: #111;
    color: #fff;
    padding: 6rem 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    margin-bottom: 4rem;
}

.footer-col h3 {
    font-size: 2rem;
    margin-bottom: 2rem;
    position: relative;
    padding-bottom: 1rem;
}

.footer-col h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background-color: var(--primary-color);
}

.footer-col p {
    color: #aaa;
    margin-bottom: 2rem;
    font-size: 1.4rem;
}

.social-links {
    display: flex;
    gap: 1.5rem;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    transition: var(--transition);
}

.social-links a:hover {
    background-color: var(--primary-color);
    color: #fff;
    transform: translateY(-3px);
}

.footer-col ul li {
    margin-bottom: 1rem;
}

.footer-col ul li a {
    color: #aaa;
    font-size: 1.4rem;
    transition: var(--transition);
}

.footer-col ul li a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.newsletter-form {
    display: flex;
    margin-top: 2rem;
}

.newsletter-form input {
    flex: 1;
    padding: 1rem 1.5rem;
    border-radius: 5rem 0 0 5rem;
    border: none;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.4rem;
}

.newsletter-form button {
    width: 50px;
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 0 5rem 5rem 0;
    cursor: pointer;
    transition: var(--transition);
}

.newsletter-form button:hover {
    background-color: #c59b2b;
}

.footer-bottom {
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.footer-bottom p {
    color: #aaa;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.footer-links a {
    color: #aaa;
    font-size: 1.2rem;
    transition: var(--transition);
}

.footer-links a:hover {
    color: var(--primary-color);
}

/* Back to Top */
.back-to-top {
    position: fixed;
    bottom: 3rem;
    right: 3rem;
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    box-shadow: var(--shadow);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}

.back-to-top.active {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: #c59b2b;
    transform: translateY(-5px);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Responsive Styles */
@media (max-width: 992px) {
    html {
        font-size: 58%;
    }

.hero .container {
        grid-template-columns: 1fr;
        text-align: center;
    }

.hero-content {
        margin-bottom: 5rem;
    }

.hero-btns {
        justify-content: center;
    }

.about .container,
    .contact .container {
        grid-template-columns: 1fr;
    }

.about-image {
        margin-bottom: 5rem;
    }
}

@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
    }

.navbar {
        position: fixed;
        top: 8rem;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        padding: 2rem;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        transition: var(--transition);
    }

.navbar.active {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }

.navbar ul {
        flex-direction: column;
    }

.navbar ul li {
        margin: 1rem 0;
    }

.header.scrolled .navbar {
        top: 7rem;
    }

.process-steps {
        grid-template-columns: 1fr;
    }

.process-steps::before {
        display: none;
    }
}

@media (max-width: 576px) {
    html {
        font-size: 55%;
    }

.hero-btns {
        flex-direction: column;
        gap: 1.5rem;
    }

.about-features {
        grid-template-columns: 1fr;
    }

.scroller-content {
        flex-direction: column;
        white-space: normal;
        animation: none;
    }

.logos {
        flex-wrap: wrap;
        justify-content: center;
    }
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
    // Preloader
    const preloader = document.querySelector('.preloader');
    window.addEventListener('load', function() {
        preloader.classList.add('fade-out');
        setTimeout(() => {
            preloader.style.display = 'none';
        }, 500);
    });

// Mobile Menu Toggle
    const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
    const navbar = document.querySelector('.navbar');
    
    mobileMenuBtn.addEventListener('click', function() {
        navbar.classList.toggle('active');
        this.querySelector('i').classList.toggle('fa-times');
    });

// Close mobile menu when clicking on a link
    const navLinks = document.querySelectorAll('.navbar ul li a');
    navLinks.forEach(link => {
        link.addEventListener('click', function() {
            navbar.classList.remove('active');
            mobileMenuBtn.querySelector('i').classList.remove('fa-times');
        });
    });

// Sticky Header
    const header = document.querySelector('.header');
    window.addEventListener('scroll', function() {
        if (window.scrollY > 100) {
            header.classList.add('scrolled');
        } else {
            header.classList.remove('scrolled');
        }
    });

// Back to Top Button
    const backToTopBtn = document.querySelector('.back-to-top');
    window.addEventListener('scroll', function() {
        if (window.scrollY > 300) {
            backToTopBtn.classList.add('active');
        } else {
            backToTopBtn.classList.remove('active');
        }
    });

// Smooth Scrolling for all 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'
                });
            }
        });
    });

// Product Filter
    const categoryBtns = document.querySelectorAll('.category-btn');
    const productGrid = document.querySelector('.product-grid');
    
    // Sample product data
    const products = [
        {
            id: 1,
            title: 'Golden Bridal Set',
            category: 'bridal',
            price: '₹2,499',
            image: 'https://images.unsplash.com/photo-1605100804763-247f67b3557e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
            rating: 5,
            badge: 'Bestseller'
        },
        {
            id: 2,
            title: 'Silver Traditional',
            category: 'traditional',
            price: '₹1,299',
            image: 'https://images.unsplash.com/photo-1611591437281-4608be122683?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
            rating: 4,
            badge: ''
        },
        {
            id: 3,
            title: 'Lac Bangles',
            category: 'traditional',
            price: '₹799',
            image: 'https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80',
            rating: 4,
            badge: 'Popular'
        },
        {
            id: 4,
            title: 'Minimalist Gold',
            category: 'contemporary',
            price: '₹1,599',
            image: 'https://images.unsplash.com/photo-1605106702734-205df224ecce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
            rating: 5,
            badge: 'New'
        },
        {
            id: 5,
            title: 'Kids Colorful Set',
            category: 'kids',
            price: '₹499',
            image: 'https://images.unsplash.com/photo-1596704017255-ee7b0a715651?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80',
            rating: 4,
            badge: ''
        },
        {
            id: 6,
            title: 'Polki Diamond',
            category: 'bridal',
            price: '₹3,999',
            image: 'https://images.unsplash.com/photo-1611594606051-df7a8a6b5c3a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80',
            rating: 5,
            badge: 'Luxury'
        },
        {
            id: 7,
            title: 'Geometric Silver',
            category: 'contemporary',
            price: '₹1,899',
            image: 'https://images.unsplash.com/photo-1611591437281-4608be122683?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80',
            rating: 4,
            badge: ''
        },
        {
            id: 8,
            title: 'Tiny Twinkle',
            category: 'kids',
            price: '₹399',
            image: 'https://images.unsplash.com/photo-1596704017255-ee7b0a715651?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80',
            rating: 4,
            badge: ''
        }
    ];

// Function to display products
    function displayProducts(filter = 'all') {
        productGrid.innerHTML = '';
        
        const filteredProducts = filter === 'all' 
            ? products 
            : products.filter(product => product.category === filter);
        
        filteredProducts.forEach(product => {
            const ratingStars = '★'.repeat(product.rating) + '☆'.repeat(5 - product.rating);
            
            const productCard = document.createElement('div');
            productCard.className = 'product-card';
            productCard.innerHTML = `
                <div class="product-image">
                    <img src="${product.image}" alt="${product.title}">
                    ${product.badge ? `<span class="product-badge">${product.badge}</span>` : ''}
                </div>
                <div class="product-content">
                    <h3 class="product-title">${product.title}</h3>
                    <span class="product-category">${product.category}</span>
                    <div class="product-price">${product.price}</div>
                    <div class="product-rating">${ratingStars}</div>
                    <div class="product-cta">
                        <a href="#" class="btn-primary">View Details</a>
                    </div>
                </div>
            `;
            
            productGrid.appendChild(productCard);
        });
    }

// Initialize with all products
    displayProducts();

// Filter products
    categoryBtns.forEach(btn => {
        btn.addEventListener('click', function() {
            categoryBtns.forEach(b => b.classList.remove('active'));
            this.classList.add('active');
            const category = this.dataset.category;
            displayProducts(category);
        });
    });

// Initialize Testimonial Slider
    const testimonialSwiper = new Swiper('.testimonial-slider', {
        loop: true,
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        breakpoints: {
            768: {
                slidesPerView: 2,
                spaceBetween: 30,
            },
            992: {
                slidesPerView: 3,
                spaceBetween: 30,
            }
        }
    });

// Animate elements on scroll
    const animateOnScroll = function() {
        const elements = document.querySelectorAll('.section-title, .section-subtitle, .process-card, .material-card, .feature, .product-card');
        
        elements.forEach(element => {
            const elementPosition = element.getBoundingClientRect().top;
            const screenPosition = window.innerHeight / 1.3;
            
            if (elementPosition < screenPosition) {
                element.style.opacity = '1';
                element.style.transform = 'translateY(0)';
            }
        });
    };

// Set initial state for animated elements
    document.querySelectorAll('.process-card, .material-card, .feature, .product-card').forEach(element => {
        element.style.opacity = '0';
        element.style.transform = 'translateY(30px)';
        element.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
    });

window.addEventListener('scroll', animateOnScroll);
    animateOnScroll(); // Run once on load
});

Bangal Chudi Template Preview

Download Options