About Our Barber Shop 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>The Golden Shear | About Us</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
  
</head>
<body>
    
    <header id="header">
        <div class="container header-container">
            <a href="#" class="logo">Golden<span>Shear</span></a>
            <nav class="nav-links">
                <a href="#">Home</a>
                <a href="#" class="active">About</a>
                <a href="#">Services</a>
                <a href="#">Gallery</a>
                <a href="#">Team</a>
                <a href="#">Contact</a>
            </nav>
            <button class="mobile-menu-btn">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </header>

<section class="hero">
        <video autoplay muted loop class="hero-video">
            <source src="https://assets.mixkit.co/videos/preview/mixkit-barber-cutting-a-man-s-hair-3982-large.mp4" type="video/mp4">
        </video>
        <div class="hero-content">
            <h1 class="hero-title velvet-caption">About Our Barber Shop</h1>
            <p class="hero-subtitle">Where tradition meets modern grooming techniques to give you the perfect look that defines your personality.</p>
            <a href="#contact" class="hero-btn">Book Appointment</a>
        </div>
    </section>

<section class="about" id="about">
        <div class="container">
            <h2 class="section-title">Our Story</h2>
            <div class="about-content">
                <div class="about-img">
                    <img src="https://images.unsplash.com/photo-1585747860715-2ba37e788b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1474&q=80" alt="Barber Shop Interior">
                </div>
                <div class="about-text">
                    <h3>Established in 2005</h3>
                    <p>Golden Shear Barber Shop was founded with a vision to bring back the classic barbering experience with a modern twist. Our founder, Michael Golden, started with a single chair in a small shop downtown, driven by passion and craftsmanship.</p>
                    <p>Today, we've grown into one of the most prestigious barber shops in the city, known for our attention to detail and personalized service. We believe that a great haircut is more than just a service - it's an experience that boosts confidence and leaves you feeling your best.</p>
                    <p>Our team of master barbers undergoes continuous training to stay at the forefront of men's grooming trends while maintaining the timeless techniques that define true barbering artistry.</p>
                    <div class="signature">Michael Golden</div>
                </div>
            </div>
        </div>
    </section>

<section class="services" id="services">
        <div class="container">
            <h2 class="section-title">Our Services</h2>
            <div class="services-container">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-cut"></i>
                    </div>
                    <h3>Classic Haircut</h3>
                    <p>Precision haircut using traditional and modern techniques tailored to your style and facial structure.</p>
                    <div class="service-price">$40</div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-fire"></i>
                    </div>
                    <h3>Hot Towel Shave</h3>
                    <p>Traditional straight razor shave with hot towels and premium products for the closest, smoothest shave.</p>
                    <div class="service-price">$35</div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-magic"></i>
                    </div>
                    <h3>Beard Trim & Shape</h3>
                    <p>Expert beard grooming with detailed shaping to enhance your facial features and maintain your style.</p>
                    <div class="service-price">$25</div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-spa"></i>
                    </div>
                    <h3>Royal Treatment</h3>
                    <p>Full grooming experience including haircut, hot towel shave, facial massage, and scalp treatment.</p>
                    <div class="service-price">$80</div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-air-freshener"></i>
                    </div>
                    <h3>Hair Coloring</h3>
                    <p>Professional hair coloring services using premium products to cover grays or create a new look.</p>
                    <div class="service-price">$60</div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-child"></i>
                    </div>
                    <h3>Kids Cut</h3>
                    <p>Specialized haircuts for young gentlemen in a fun, comfortable environment.</p>
                    <div class="service-price">$30</div>
                </div>
            </div>
        </div>
    </section>

<section class="team" id="team">
        <div class="container">
            <h2 class="section-title">Meet Our Barbers</h2>
            <div class="team-container">
                <div class="team-member">
                    <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=761&q=80" alt="Barber" class="team-img">
                    <div class="team-overlay">
                        <h3>James Wilson</h3>
                        <p>Master Barber / Founder</p>
                        <div class="team-social">
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <img src="https://images.unsplash.com/photo-1552374196-c4e7ffc6e126?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Barber" class="team-img">
                    <div class="team-overlay">
                        <h3>Marcus Johnson</h3>
                        <p>Senior Barber</p>
                        <div class="team-social">
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <img src="https://images.unsplash.com/photo-1583864697784-a0efc8379f70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Barber" class="team-img">
                    <div class="team-overlay">
                        <h3>Carlos Mendez</h3>
                        <p>Beard Specialist</p>
                        <div class="team-social">
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                        </div>
                    </div>
                </div>
                <div class="team-member">
                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Barber" class="team-img">
                    <div class="team-overlay">
                        <h3>Ryan Smith</h3>
                        <p>Stylist</p>
                        <div class="team-social">
                            <a href="#"><i class="fab fa-instagram"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-facebook-f"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="testimonials" id="testimonials">
        <div class="container">
            <h2 class="section-title">Client Testimonials</h2>
            <div class="testimonial-slider">
                <div class="testimonial-slide active">
                    <p class="testimonial-text">Golden Shear is hands down the best barber shop in town. I've been coming here for years and never had a bad experience. The attention to detail is unmatched, and the atmosphere is always welcoming.</p>
                    <div class="testimonial-author">
                        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client">
                        <div class="author-info">
                            <h4>David Thompson</h4>
                            <p>Regular Client</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial-slide">
                    <p class="testimonial-text">As someone who's very particular about my beard, I can confidently say Carlos is a true artist. He understands exactly what I want and executes it perfectly every time. Worth every penny!</p>
                    <div class="testimonial-author">
                        <img src="https://randomuser.me/api/portraits/men/44.jpg" alt="Client">
                        <div class="author-info">
                            <h4>Michael Rodriguez</h4>
                            <p>Beard Enthusiast</p>
                        </div>
                    </div>
                </div>
                <div class="testimonial-slide">
                    <p class="testimonial-text">I started coming to Golden Shear after my usual barber retired, and I wish I had discovered this place sooner. The royal treatment is my monthly indulgence - nothing relaxes me more than that hot towel shave.</p>
                    <div class="testimonial-author">
                        <img src="https://randomuser.me/api/portraits/men/68.jpg" alt="Client">
                        <div class="author-info">
                            <h4>Robert Chen</h4>
                            <p>Business Executive</p>
                        </div>
                    </div>
                </div>
                <div class="slider-nav">
                    <div class="slider-dot active"></div>
                    <div class="slider-dot"></div>
                    <div class="slider-dot"></div>
                </div>
            </div>
        </div>
    </section>

<section class="gallery" id="gallery">
        <div class="container">
            <h2 class="section-title">Our Work</h2>
            <div class="gallery-container">
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" alt="Haircut">
                    <div class="gallery-overlay">
                        <h3>Classic Fade</h3>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1605497788044-5a32c7078486?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Beard Trim">
                    <div class="gallery-overlay">
                        <h3>Beard Sculpting</h3>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1621607511131-08d55e3544d0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Shave">
                    <div class="gallery-overlay">
                        <h3>Hot Towel Shave</h3>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1595475884562-073c30d45670?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80" alt="Styling">
                    <div class="gallery-overlay">
                        <h3>Modern Pompadour</h3>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Kids Cut">
                    <div class="gallery-overlay">
                        <h3>Kids Style</h3>
                    </div>
                </div>
                <div class="gallery-item">
                    <img src="https://images.unsplash.com/photo-1585747860715-2ba37e788b70?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1474&q=80" alt="Shop Interior">
                    <div class="gallery-overlay">
                        <h3>Our Space</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

<section class="contact" id="contact">
        <div class="container">
            <h2 class="section-title">Visit Us</h2>
            <div class="contact-container">
                <div class="contact-info">
                    <div class="contact-card">
                        <h3>Location</h3>
                        <div class="contact-detail">
                            <div class="contact-icon">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="contact-text">
                                <h4>Address</h4>
                                <p>123 Barber Street, Downtown<br>New York, NY 10001</p>
                            </div>
                        </div>
                    </div>
                    <div class="contact-card">
                        <h3>Hours</h3>
                        <div class="contact-detail">
                            <div class="contact-icon">
                                <i class="far fa-clock"></i>
                            </div>
                            <div class="contact-text">
                                <h4>Opening Times</h4>
                                <p>Monday - Friday: 9am - 7pm<br>Saturday: 9am - 5pm<br>Sunday: 10am - 4pm</p>
                            </div>
                        </div>
                    </div>
                    <div class="contact-card">
                        <h3>Contact</h3>
                        <div class="contact-detail">
                            <div class="contact-icon">
                                <i class="fas fa-phone-alt"></i>
                            </div>
                            <div class="contact-text">
                                <h4>Phone</h4>
                                <a href="tel:+12125551234">(212) 555-1234</a>
                            </div>
                        </div>
                        <div class="contact-detail">
                            <div class="contact-icon">
                                <i class="far fa-envelope"></i>
                            </div>
                            <div class="contact-text">
                                <h4>Email</h4>
                                <a href="mailto:info@goldenshear.com">info@goldenshear.com</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="contact-form">
                    <h3>Book an Appointment</h3>
                    <form>
                        <div class="form-group">
                            <label for="name">Your Name</label>
                            <input type="text" id="name" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="email">Email Address</label>
                            <input type="email" id="email" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="phone">Phone Number</label>
                            <input type="tel" id="phone" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="service">Service</label>
                            <select id="service" class="form-control" required>
                                <option value="">Select a service</option>
                                <option value="haircut">Classic Haircut</option>
                                <option value="shave">Hot Towel Shave</option>
                                <option value="beard">Beard Trim & Shape</option>
                                <option value="royal">Royal Treatment</option>
                                <option value="coloring">Hair Coloring</option>
                                <option value="kids">Kids Cut</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="date">Preferred Date</label>
                            <input type="date" id="date" class="form-control" required>
                        </div>
                        <div class="form-group">
                            <label for="message">Special Requests</label>
                            <textarea id="message" class="form-control"></textarea>
                        </div>
                        <button type="submit" class="submit-btn">Book Now</button>
                    </form>
                </div>
            </div>
        </div>
    </section>

<footer>
        <div class="container">
            <div class="footer-container">
                <div class="footer-col">
                    <h3>Golden Shear</h3>
                    <p>Where tradition meets modern grooming techniques to give you the perfect look that defines your personality.</p>
                    <div class="footer-social">
                        <a href="#"><i class="fab fa-instagram"></i></a>
                        <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-tiktok"></i></a>
                    </div>
                </div>
                <div class="footer-col">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Gallery</a></li>
                        <li><a href="#">Team</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Services</h3>
                    <ul class="footer-links">
                        <li><a href="#">Classic Haircut</a></li>
                        <li><a href="#">Hot Towel Shave</a></li>
                        <li><a href="#">Beard Trim</a></li>
                        <li><a href="#">Royal Treatment</a></li>
                        <li><a href="#">Hair Coloring</a></li>
                        <li><a href="#">Kids Cut</a></li>
                    </ul>
                </div>
                <div class="footer-col">
                    <h3>Newsletter</h3>
                    <p>Subscribe to our newsletter for special offers and grooming tips.</p>
                    <form class="newsletter-form">
                        <input type="email" placeholder="Your Email" class="form-control">
                        <button type="submit" class="submit-btn">Subscribe</button>
                    </form>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 Golden Shear Barber Shop. All Rights Reserved.</p>
            </div>
        </div>
    </footer>

</body>
</html>

CSS

:root {
            --primary: #FFD700;
            --primary-dark: #FFC000;
            --primary-light: #FFF2CC;
            --dark: #1A1A1A;
            --light: #FFFFFF;
            --gray: #F5F5F5;
            --glass: rgba(255, 255, 255, 0.15);
            --glass-border: rgba(255, 255, 255, 0.2);
        }

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

body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--dark);
            color: var(--light);
            overflow-x: hidden;
        }

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

.container {
            width: 100%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 20px;
        }

/* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 20px 0;
            transition: all 0.3s ease;
        }

header.scrolled {
            background-color: rgba(26, 26, 26, 0.9);
            backdrop-filter: blur(10px);
            padding: 10px 0;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        }

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

.logo {
            font-size: 28px;
            font-weight: 700;
            color: var(--primary);
            text-decoration: none;
            font-family: 'Playfair Display', serif;
        }

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

.nav-links {
            display: flex;
            gap: 30px;
        }

.nav-links a {
            color: var(--light);
            text-decoration: none;
            font-weight: 500;
            font-size: 16px;
            position: relative;
            transition: all 0.3s ease;
        }

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

.nav-links a::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary);
            transition: width 0.3s ease;
        }

.nav-links a:hover::after {
            width: 100%;
        }

.mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            color: var(--light);
            font-size: 24px;
            cursor: pointer;
        }

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

.hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
            z-index: 1;
        }

.hero-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

.hero-content {
            position: relative;
            z-index: 2;
            width: 100%;
            padding: 0 40px;
        }

.hero-title {
            font-size: 72px;
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 20px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1s ease forwards 0.3s;
        }

.hero-subtitle {
            font-size: 24px;
            color: var(--light);
            max-width: 600px;
            margin-bottom: 40px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1s ease forwards 0.6s;
        }

.hero-btn {
            display: inline-block;
            padding: 15px 30px;
            background-color: var(--primary);
            color: var(--dark);
            font-weight: 600;
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 1s ease forwards 0.9s;
        }

.hero-btn:hover {
            background-color: var(--primary-dark);
            transform: translateY(-3px);
            /* box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3); */
        }

/* About Section */
        .about {
            padding: 120px 0;
            position: relative;
            overflow: hidden;
        }

.section-title {
            text-align: center;
            font-size: 48px;
            margin-bottom: 80px;
            color: var(--primary);
            position: relative;
        }

.section-title::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 3px;
            background-color: var(--primary);
        }

.about-content {
            display: flex;
            align-items: center;
            gap: 60px;
        }

.about-img {
            flex: 1;
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            transform: translateX(-50px);
            opacity: 0;
            transition: all 1s ease;
        }

.about-img.in-view {
            transform: translateX(0);
            opacity: 1;
        }

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

.about-text {
            flex: 1;
            transform: translateX(50px);
            opacity: 0;
            transition: all 1s ease;
        }

.about-text.in-view {
            transform: translateX(0);
            opacity: 1;
        }

.about-text h3 {
            font-size: 36px;
            margin-bottom: 20px;
            color: var(--primary);
        }

.about-text p {
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 20px;
            color: rgba(255, 255, 255, 0.8);
        }

.signature {
            margin-top: 30px;
            font-family: 'Playfair Display', serif;
            font-size: 24px;
            color: var(--primary);
        }

/* Services Section */
        .services {
            padding: 120px 0;
            background-color: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
        }

.services-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 60px;
        }

.service-card {
            background: var(--glass);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 40px 30px;
            backdrop-filter: blur(10px);
            transition: all 0.5s ease;
            transform: translateY(50px);
            opacity: 0;
        }

.service-card.in-view {
            transform: translateY(0);
            opacity: 1;
        }

.service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(255, 215, 0, 0.1);
            background: rgba(255, 215, 0, 0.1);
        }

.service-icon {
            font-size: 50px;
            color: var(--primary);
            margin-bottom: 20px;
        }

.service-card h3 {
            font-size: 24px;
            margin-bottom: 15px;
            color: var(--light);
        }

.service-card p {
            font-size: 16px;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 20px;
        }

.service-price {
            font-size: 20px;
            font-weight: 700;
            color: var(--primary);
        }

/* Team Section */
        .team {
            padding: 120px 0;
        }

.team-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-top: 60px;
        }

.team-member {
            position: relative;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
            transform: scale(0.95);
            opacity: 0;
            transition: all 0.5s ease;
        }

.team-member.in-view {
            transform: scale(1);
            opacity: 1;
        }

.team-member:hover {
            transform: scale(1.05);
        }

.team-img {
            width: 100%;
            height: 350px;
            object-fit: cover;
            display: block;
        }

.team-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 30px;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
            color: var(--light);
            transform: translateY(100%);
            opacity: 0;
            transition: all 0.5s ease;
        }

.team-member:hover .team-overlay {
            transform: translateY(0);
            opacity: 1;
        }

.team-overlay h3 {
            font-size: 24px;
            margin-bottom: 5px;
            color: var(--primary);
        }

.team-overlay p {
            font-size: 16px;
            margin-bottom: 15px;
            opacity: 0.8;
        }

.team-social {
            display: flex;
            gap: 15px;
        }

.team-social a {
            color: var(--light);
            font-size: 18px;
            transition: all 0.3s ease;
        }

.team-social a:hover {
            color: var(--primary);
            transform: translateY(-3px);
        }

/* Testimonials Section */
        .testimonials {
            padding: 120px 0;
            background-color: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
        }

.testimonial-slider {
            max-width: 1000px;
            margin: 60px auto 0;
            position: relative;
            overflow: hidden;
        }

.testimonial-slide {
            background: var(--glass);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 40px;
            backdrop-filter: blur(10px);
            margin: 0 20px;
            text-align: center;
            transform: scale(0.9);
            opacity: 0;
            transition: all 0.5s ease;
        }

.testimonial-slide.active {
            transform: scale(1);
            opacity: 1;
        }

.testimonial-text {
            font-size: 18px;
            font-style: italic;
            line-height: 1.8;
            margin-bottom: 30px;
            color: rgba(255, 255, 255, 0.9);
            position: relative;
        }

.testimonial-text::before,
        .testimonial-text::after {
            content: '"';
            font-size: 50px;
            color: var(--primary);
            opacity: 0.3;
            position: absolute;
        }

.testimonial-text::before {
            top: -20px;
            left: -10px;
        }

.testimonial-text::after {
            bottom: -40px;
            right: -10px;
        }

.testimonial-author {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
        }

.testimonial-author img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            object-fit: cover;
            border: 3px solid var(--primary);
        }

.author-info h4 {
            font-size: 18px;
            color: var(--light);
            margin-bottom: 5px;
        }

.author-info p {
            font-size: 14px;
            color: var(--primary);
            opacity: 0.8;
        }

.slider-nav {
            display: flex;
            justify-content: center;
            margin-top: 40px;
            gap: 10px;
        }

.slider-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }

.slider-dot.active {
            background-color: var(--primary);
            transform: scale(1.2);
        }

/* Gallery Section */
        .gallery {
            padding: 120px 0;
        }

.gallery-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 60px;
        }

.gallery-item {
            position: relative;
            border-radius: 15px;
            overflow: hidden;
            height: 250px;
            transition: all 0.5s ease;
            transform: translateY(50px);
            opacity: 0;
        }

.gallery-item.in-view {
            transform: translateY(0);
            opacity: 1;
        }

.gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.5s ease;
        }

.gallery-item:hover img {
            transform: scale(1.1);
        }

.gallery-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(255, 215, 0, 0.1), rgba(26, 26, 26, 0.7));
            display: flex;
            align-items: flex-end;
            padding: 20px;
            opacity: 0;
            transition: all 0.3s ease;
        }

.gallery-item:hover .gallery-overlay {
            opacity: 1;
        }

.gallery-overlay h3 {
            color: var(--light);
            font-size: 18px;
            transform: translateY(20px);
            transition: all 0.3s ease;
        }

.gallery-item:hover .gallery-overlay h3 {
            transform: translateY(0);
        }

/* Contact Section */
        .contact {
            padding: 120px 0;
            background-color: rgba(0, 0, 0, 0.3);
            backdrop-filter: blur(10px);
        }

.contact-container {
            display: flex;
            gap: 60px;
            margin-top: 60px;
        }

.contact-info {
            flex: 1;
        }

.contact-card {
            background: var(--glass);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 30px;
            backdrop-filter: blur(10px);
            margin-bottom: 30px;
            transition: all 0.3s ease;
        }

.contact-card:hover {
            background: rgba(255, 215, 0, 0.1);
            transform: translateY(-5px);
        }

.contact-card h3 {
            font-size: 24px;
            color: var(--primary);
            margin-bottom: 20px;
        }

.contact-detail {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 15px;
        }

.contact-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 215, 0, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 18px;
        }

.contact-text h4 {
            font-size: 16px;
            color: var(--light);
            margin-bottom: 5px;
        }

.contact-text p, .contact-text a {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: all 0.3s ease;
        }

.contact-text a:hover {
            color: var(--primary);
        }

.contact-form {
            flex: 1;
            background: var(--glass);
            border: 1px solid var(--glass-border);
            border-radius: 20px;
            padding: 40px;
            backdrop-filter: blur(10px);
        }

.form-group {
            margin-bottom: 25px;
        }

.form-group label {
            display: block;
            font-size: 16px;
            margin-bottom: 10px;
            color: var(--light);
        }

.form-control {
            width: 100%;
            padding: 15px;
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            color: var(--light);
            font-size: 16px;
            transition: all 0.3s ease;
        }

.form-control:focus {
            outline: none;
            border-color: var(--primary);
            background-color: rgba(255, 215, 0, 0.1);
        }

textarea.form-control {
            min-height: 150px;
            resize: vertical;
        }

.submit-btn {
            background-color: var(--primary);
            color: var(--dark);
            border: none;
            padding: 15px 30px;
            font-size: 16px;
            font-weight: 600;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

.submit-btn:hover {
            background-color: var(--primary-dark);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(255, 215, 0, 0.3);
        }

/* Footer */
        footer {
            background-color: #0D0D0D;
            padding: 80px 0 30px;
        }

.footer-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
            margin-bottom: 60px;
        }

.footer-col h3 {
            font-size: 20px;
            color: var(--primary);
            margin-bottom: 25px;
            position: relative;
        }

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

.footer-col p {
            font-size: 14px;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 20px;
        }

.footer-links {
            list-style: none;
        }

.footer-links li {
            margin-bottom: 15px;
        }

.footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            font-size: 14px;
            transition: all 0.3s ease;
            display: block;
        }

.footer-links a:hover {
            color: var(--primary);
            transform: translateX(5px);
        }

.footer-social {
            display: flex;
            gap: 15px;
        }

.footer-social a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--light);
            font-size: 18px;
            transition: all 0.3s ease;
        }

.footer-social a:hover {
            background-color: var(--primary);
            color: var(--dark);
            transform: translateY(-5px);
        }

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

.footer-bottom p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.5);
        }

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

@keyframes slideInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

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

/* Velvet Caption Reveal */
        .velvet-caption {
            position: relative;
            display: inline-block;
            overflow: hidden;
        }

.velvet-caption::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--primary);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.5s ease;
            z-index: -1;
            mix-blend-mode: multiply;
        }

.velvet-caption:hover::after {
            transform: scaleX(1);
        }

/* Responsive Styles */
        @media (max-width: 1200px) {
            .hero-title {
                font-size: 60px;
            }
            
            .hero-subtitle {
                font-size: 20px;
            }
        }

@media (max-width: 992px) {
            .hero-title {
                font-size: 48px;
            }
            
            .about-content {
                flex-direction: column;
            }
            
            .contact-container {
                flex-direction: column;
            }
            
            .section-title {
                font-size: 36px;
            }
        }

@media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .hero-title {
                font-size: 36px;
            }
            
            .hero-subtitle {
                font-size: 18px;
            }
            
            .hero-content {
                padding: 0 20px;
            }
            
            .about-img, .about-text {
                transform: none !important;
            }
        }

@media (max-width: 576px) {
            .hero-title {
                font-size: 32px;
            }
            
            .hero-btn {
                padding: 12px 24px;
            }
            
            .service-card, .team-member, .gallery-item {
                transform: none !important;
            }
        }

JavaScript

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

// Intersection Observer for animations
        const observerOptions = {
            threshold: 0.1
        };

document.querySelectorAll('.about-img, .about-text, .service-card, .team-member, .gallery-item').forEach(el => {
            observer.observe(el);
        });

// Testimonial slider
        let currentSlide = 0;
        const slides = document.querySelectorAll('.testimonial-slide');
        const dots = document.querySelectorAll('.slider-dot');

function showSlide(n) {
            slides.forEach(slide => slide.classList.remove('active'));
            dots.forEach(dot => dot.classList.remove('active'));
            
            currentSlide = (n + slides.length) % slides.length;
            
            slides[currentSlide].classList.add('active');
            dots[currentSlide].classList.add('active');
        }

dots.forEach((dot, index) => {
            dot.addEventListener('click', () => {
                showSlide(index);
            });
        });

// Auto slide change
        setInterval(() => {
            showSlide(currentSlide + 1);
        }, 5000);

// Mobile menu toggle
        const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
        const navLinks = document.querySelector('.nav-links');

mobileMenuBtn.addEventListener('click', () => {
            navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
        });

// Responsive adjustment for mobile menu
        window.addEventListener('resize', () => {
            if (window.innerWidth > 768) {
                navLinks.style.display = 'flex';
            } else {
                navLinks.style.display = 'none';
            }
        });

About Our Barber Shop Template Preview

Download Options