Barber Shop Landing Page
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Classic Cuts - Premium Barber Shop</title> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> </head> <body> <!-- Header/Navigation --> <header class="header"> <div class="container"> <div class="logo"> <h1>Classic<span>Cuts</span></h1> </div> <nav class="navbar"> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#services">Services</a></li> <li><a href="#barbers">Barbers</a></li> <li><a href="#gallery">Gallery</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#products">Products</a></li> <li><a href="#blog">Blog</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> <div class="menu-toggle"> <i class="fas fa-bars"></i> </div> </div> </header> <!-- Hero Section --> <section id="home" class="hero"> <div class="container"> <div class="hero-content"> <h2>Precision Cuts & Classic Styles</h2> <h1>Experience The Art of Barbering</h1> <p>Traditional barbering techniques meet modern style at Classic Cuts.</p> <a href="#contact" class="btn">Book Now</a> </div> </div> </section> <!-- About Section --> <section id="about" class="about section-padding"> <div class="container"> <div class="section-title"> <h2>About Us</h2> <p>Our story and what makes us different</p> </div> <div class="about-content"> <div class="about-img"> <img src="https://images.unsplash.com/photo-1587909209111-5097ee578ec3" alt="Barber Shop Interior"> </div> <div class="about-text"> <h3>Traditional Barbering Since 1995</h3> <p>Founded by master barber John Smith, Classic Cuts has been serving the community with premium grooming services for over 25 years. We pride ourselves on preserving the traditional art of barbering while staying current with modern styles and techniques.</p> <p>Our shop is more than just a place to get a haircut - it's a gathering place where clients become friends and leave looking and feeling their best.</p> <div class="about-features"> <div class="feature"> <i class="fas fa-scissors"></i> <h4>Expert Barbers</h4> </div> <div class="feature"> <i class="fas fa-spa"></i> <h4>Relaxing Atmosphere</h4> </div> <div class="feature"> <i class="fas fa-award"></i> <h4>Award Winning</h4> </div> </div> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services section-padding"> <div class="container"> <div class="section-title"> <h2>Our Services</h2> <p>Premium grooming services tailored for you</p> </div> <div class="services-grid"> <div class="service-card"> <div class="service-icon"> <i class="fas fa-cut"></i> </div> <h3>Haircut</h3> <p>Precision haircut using traditional and modern techniques to achieve your desired look.</p> </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 shaving products.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-magic"></i> </div> <h3>Beard Trim</h3> <p>Expert beard shaping and trimming to maintain your facial hair in perfect condition.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-spa"></i> </div> <h3>Facial Treatment</h3> <p>Revitalizing facial treatment to cleanse, exfoliate and moisturize your skin.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-child"></i> </div> <h3>Kids Cut</h3> <p>Specialized haircuts for children in a fun and comfortable environment.</p> </div> <div class="service-card"> <div class="service-icon"> <i class="fas fa-paint-brush"></i> </div> <h3>Hair Coloring</h3> <p>Professional hair coloring services using premium products for natural-looking results.</p> </div> </div> </div> </section> <!-- Barbers Section --> <section id="barbers" class="barbers section-padding"> <div class="container"> <div class="section-title"> <h2>Our Barbers</h2> <p>Meet our talented team of professionals</p> </div> <div class="barbers-grid"> <div class="barber-card"> <div class="barber-img"> <img src="https://images.unsplash.com/photo-1562788869-4ed32648eb72" alt="Barber John"> <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-twitter"></i></a> </div> </div> <h3>John Smith</h3> <p>Master Barber / Owner</p> </div> <div class="barber-card"> <div class="barber-img"> <img src="https://images.unsplash.com/photo-1583864697784-a0efc8379f70" alt="Barber Mike"> <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-twitter"></i></a> </div> </div> <h3>Mike Johnson</h3> <p>Senior Barber</p> </div> <div class="barber-card"> <div class="barber-img"> <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956" alt="Barber David"> <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-twitter"></i></a> </div> </div> <h3>David Wilson</h3> <p>Barber</p> </div> <div class="barber-card"> <div class="barber-img"> <img src="https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1" alt="Barber Carlos"> <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-twitter"></i></a> </div> </div> <h3>Carlos Rodriguez</h3> <p>Junior Barber</p> </div> </div> </div> </section> <!-- Gallery Section --> <section id="gallery" class="gallery section-padding"> <div class="container"> <div class="section-title"> <h2>Our Gallery</h2> <p>See our work and shop atmosphere</p> </div> <div class="gallery-grid"> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e" alt="Gallery Image 1"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1595475884562-073c30d45670" alt="Gallery Image 2"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1605497788044-5a32c7078486" alt="Gallery Image 3"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e" alt="Gallery Image 4"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1585747860715-ebba7e41e039" alt="Gallery Image 5"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> <div class="gallery-item"> <img src="https://images.unsplash.com/photo-1519500528352-2d1460418d41" alt="Gallery Image 6"> <div class="overlay"> <i class="fas fa-search-plus"></i> </div> </div> </div> </div> </section> <!-- Pricing Section --> <section id="pricing" class="pricing section-padding"> <div class="container"> <div class="section-title"> <h2>Our Pricing</h2> <p>Affordable rates for premium services</p> </div> <div class="pricing-grid"> <div class="pricing-card"> <h3>Basic Haircut</h3> <div class="price">$30</div> <ul> <li>Precision haircut</li> <li>Neck shave</li> <li>Hot towel treatment</li> <li>Basic styling</li> </ul> <a href="#contact" class="btn">Book Now</a> </div> <div class="pricing-card featured"> <div class="popular-tag">Most Popular</div> <h3>Executive Cut</h3> <div class="price">$45</div> <ul> <li>Precision haircut</li> <li>Beard trim & shaping</li> <li>Hot towel treatment</li> <li>Premium styling products</li> <li>Scalp massage</li> </ul> <a href="#contact" class="btn">Book Now</a> </div> <div class="pricing-card"> <h3>Royal Treatment</h3> <div class="price">$60</div> <ul> <li>Precision haircut</li> <li>Traditional hot towel shave</li> <li>Facial treatment</li> <li>Scalp massage</li> <li>Premium styling</li> <li>Relaxing atmosphere</li> </ul> <a href="#contact" class="btn">Book Now</a> </div> </div> </div> </section> <!-- Testimonials Section --> <section id="testimonials" class="testimonials section-padding"> <div class="container"> <div class="section-title"> <h2>Client Testimonials</h2> <p>What our clients say about us</p> </div> <div class="testimonials-slider"> <div class="testimonial-card active"> <div class="client-img"> <img src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79" alt="Client 1"> </div> <div class="client-review"> <p>"Best barber shop in town! John gave me the perfect haircut that exactly matched what I wanted. The atmosphere is great and the service is top-notch."</p> <h4>Michael Brown</h4> <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> </div> </div> <div class="testimonial-card"> <div class="client-img"> <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d" alt="Client 2"> </div> <div class="client-review"> <p>"I've been coming to Classic Cuts for years. The consistency in quality is amazing. My barber Mike knows exactly how I like my hair and beard done."</p> <h4>James Wilson</h4> <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> </div> </div> <div class="testimonial-card"> <div class="client-img"> <img src="https://images.unsplash.com/photo-1519085360753-af0119f7cbe7" alt="Client 3"> </div> <div class="client-review"> <p>"The hot towel shave is an experience everyone should try at least once. I felt like a new man after my visit. Highly recommend this place!"</p> <h4>Robert Johnson</h4> <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> </div> </div> <div class="slider-controls"> <button class="prev-btn"><i class="fas fa-chevron-left"></i></button> <button class="next-btn"><i class="fas fa-chevron-right"></i></button> </div> </div> </div> </section> <!-- Products Section --> <section id="products" class="products section-padding"> <div class="container"> <div class="section-title"> <h2>Our Products</h2> <p>Premium grooming products for your home care</p> </div> <div class="products-grid"> <div class="product-card"> <div class="product-img"> <img src="https://images.unsplash.com/photo-1600956054489-a23507c64a36" alt="Product 1"> </div> <h3>Classic Pomade</h3> <p>Premium hold with natural shine</p> <div class="price">$18.99</div> <a href="#" class="btn">Add to Cart</a> </div> <div class="product-card"> <div class="product-img"> <img src="https://images.unsplash.com/photo-1596755094514-f87e34085b2c" alt="Product 2"> </div> <h3>Beard Oil</h3> <p>Nourishing blend for healthy beard</p> <div class="price">$22.99</div> <a href="#" class="btn">Add to Cart</a> </div> <div class="product-card"> <div class="product-img"> <img src="https://images.unsplash.com/photo-1600334129128-685c5582fd35" alt="Product 3"> </div> <h3>Shaving Cream</h3> <p>Luxurious lather for smooth shave</p> <div class="price">$15.99</div> <a href="#" class="btn">Add to Cart</a> </div> <div class="product-card"> <div class="product-img"> <img src="https://images.unsplash.com/photo-1607619056574-7b8d3ee536b2" alt="Product 4"> </div> <h3>Hair & Body Wash</h3> <p>All-in-one natural cleanser</p> <div class="price">$24.99</div> <a href="#" class="btn">Add to Cart</a> </div> </div> </div> </section> <!-- Blog Section --> <section id="blog" class="blog section-padding"> <div class="container"> <div class="section-title"> <h2>Latest Blog Posts</h2> <p>Tips and trends from our barbers</p> </div> <div class="blog-grid"> <div class="blog-card"> <div class="blog-img"> <img src="https://images.unsplash.com/photo-1595475884562-073c30d45670" alt="Blog Post 1"> <div class="date">15 Jun</div> </div> <div class="blog-content"> <h3>Summer Hair Trends for 2023</h3> <p>Discover the hottest men's hairstyles for this summer season that combine style and practicality.</p> <a href="#" class="read-more">Read More</a> </div> </div> <div class="blog-card"> <div class="blog-img"> <img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e" alt="Blog Post 2"> <div class="date">02 Jun</div> </div> <div class="blog-content"> <h3>Beard Care Routine Essentials</h3> <p>Learn the essential steps to maintain a healthy, great-looking beard with our expert tips.</p> <a href="#" class="read-more">Read More</a> </div> </div> <div class="blog-card"> <div class="blog-img"> <img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e" alt="Blog Post 3"> <div class="date">25 May</div> </div> <div class="blog-content"> <h3>The History of Barbering</h3> <p>Explore the rich history of barbering from ancient times to the modern barber shop culture.</p> <a href="#" class="read-more">Read More</a> </div> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact section-padding"> <div class="container"> <div class="section-title"> <h2>Contact Us</h2> <p>Book an appointment or ask a question</p> </div> <div class="contact-content"> <div class="contact-info"> <div class="info-box"> <div class="icon"> <i class="fas fa-map-marker-alt"></i> </div> <h4>Address</h4> <p>123 Barber Street, Downtown, City</p> </div> <div class="info-box"> <div class="icon"> <i class="fas fa-phone-alt"></i> </div> <h4>Phone</h4> <p>(123) 456-7890</p> </div> <div class="info-box"> <div class="icon"> <i class="fas fa-envelope"></i> </div> <h4>Email</h4> <p>info@classiccuts.com</p> </div> <div class="info-box"> <div class="icon"> <i class="fas fa-clock"></i> </div> <h4>Working Hours</h4> <p>Mon-Fri: 9AM - 7PM<br>Sat: 9AM - 5PM<br>Sun: 10AM - 4PM</p> </div> </div> <div class="contact-form"> <form> <div class="form-group"> <input type="text" placeholder="Your Name" required> </div> <div class="form-group"> <input type="email" placeholder="Your Email" required> </div> <div class="form-group"> <input type="text" placeholder="Subject"> </div> <div class="form-group"> <textarea placeholder="Your Message" required></textarea> </div> <button type="submit" class="btn">Send Message</button> </form> </div> </div> </div> </section> <!-- Footer --> <footer class="footer"> <div class="container"> <div class="footer-content"> <div class="footer-col"> <h3>Classic Cuts</h3> <p>Traditional barbering techniques meet modern style at Classic Cuts. We provide premium grooming services in a relaxing atmosphere.</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-twitter"></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="#services">Services</a></li> <li><a href="#barbers">Our Barbers</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> <div class="footer-col"> <h3>Services</h3> <ul> <li><a href="#services">Haircut</a></li> <li><a href="#services">Hot Towel Shave</a></li> <li><a href="#services">Beard Trim</a></li> <li><a href="#services">Facial Treatment</a></li> <li><a href="#services">Hair Coloring</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" required> <button type="submit"><i class="fas fa-paper-plane"></i></button> </form> </div> </div> <div class="footer-bottom"> <p>© 2023 Classic Cuts Barber Shop. All Rights Reserved.</p> </div> </div> </footer> <script src="script.js"></script> </body> </html>
CSS
/* Global Styles */ :root { --primary-color: #d4af37; --secondary-color: #1a1a1a; --text-color: #333; --light-color: #f8f9fa; --dark-color: #212529; --gray-color: #6c757d; --white-color: #ffffff; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', sans-serif; color: var(--text-color); line-height: 1.6; overflow-x: hidden; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } section { padding: 80px 0; } .section-padding { padding: 100px 0; } .section-title { text-align: center; margin-bottom: 60px; } .section-title h2 { font-size: 36px; font-weight: 700; color: var(--secondary-color); margin-bottom: 15px; text-transform: uppercase; position: relative; display: inline-block; } .section-title h2::after { content: ''; position: absolute; width: 50px; height: 3px; background: var(--primary-color); bottom: -10px; left: 50%; transform: translateX(-50%); } .section-title p { font-size: 18px; color: var(--gray-color); } .btn { display: inline-block; background: var(--primary-color); color: var(--white-color); padding: 12px 30px; border: none; border-radius: 5px; font-size: 16px; font-weight: 600; text-transform: uppercase; cursor: pointer; transition: var(--transition); text-decoration: none; } .btn:hover { background: #c19b2c; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } /* Header Styles */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: var(--white-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: var(--transition); } .header .container { display: flex; justify-content: space-between; align-items: center; padding: 20px; } .logo h1 { font-size: 28px; font-weight: 700; color: var(--secondary-color); } .logo h1 span { color: var(--primary-color); } .navbar ul { display: flex; list-style: none; } .navbar ul li { margin-left: 30px; } .navbar ul li a { color: var(--secondary-color); font-size: 16px; font-weight: 600; text-decoration: none; transition: var(--transition); position: relative; } .navbar ul li a::after { content: ''; position: absolute; width: 0; height: 2px; background: var(--primary-color); bottom: -5px; left: 0; transition: var(--transition); } .navbar ul li a:hover::after { width: 100%; } .navbar ul li a:hover { color: var(--primary-color); } .menu-toggle { display: none; cursor: pointer; font-size: 24px; color: var(--secondary-color); } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1587909209111-5097ee578ec3') no-repeat center center/cover; display: flex; align-items: center; text-align: center; color: var(--white-color); padding-top: 80px; } .hero-content h2 { font-size: 28px; font-weight: 400; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; } .hero-content h1 { font-size: 60px; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 3px; } .hero-content p { font-size: 18px; margin-bottom: 30px; max-width: 700px; margin-left: auto; margin-right: auto; } /* About Section */ .about-content { display: flex; align-items: center; gap: 50px; } .about-img { flex: 1; } .about-img img { width: 100%; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .about-text { flex: 1; } .about-text h3 { font-size: 28px; font-weight: 700; margin-bottom: 20px; color: var(--secondary-color); } .about-text p { margin-bottom: 20px; color: var(--gray-color); } .about-features { display: flex; justify-content: space-between; margin-top: 30px; } .feature { text-align: center; padding: 20px; border-radius: 5px; transition: var(--transition); } .feature:hover { transform: translateY(-10px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .feature i { font-size: 40px; color: var(--primary-color); margin-bottom: 15px; } .feature h4 { font-size: 18px; font-weight: 600; } /* Services Section */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .service-card { background: var(--white-color); padding: 30px; border-radius: 10px; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .service-icon { width: 80px; height: 80px; background: rgba(212, 175, 55, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; transition: var(--transition); } .service-card:hover .service-icon { background: var(--primary-color); color: var(--white-color); } .service-icon i { font-size: 30px; color: var(--primary-color); transition: var(--transition); } .service-card:hover .service-icon i { color: var(--white-color); } .service-card h3 { font-size: 22px; margin-bottom: 15px; color: var(--secondary-color); } .service-card p { color: var(--gray-color); } /* Barbers Section */ .barbers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .barber-card { background: var(--white-color); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); text-align: center; padding-bottom: 30px; } .barber-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .barber-img { position: relative; overflow: hidden; height: 300px; } .barber-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .barber-card:hover .barber-img img { transform: scale(1.1); } .social-links { position: absolute; bottom: -50px; left: 0; width: 100%; display: flex; justify-content: center; background: rgba(212, 175, 55, 0.8); padding: 10px; transition: var(--transition); } .barber-card:hover .social-links { bottom: 0; } .social-links a { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; background: var(--white-color); color: var(--primary-color); border-radius: 50%; margin: 0 5px; transition: var(--transition); } .social-links a:hover { background: var(--primary-color); color: var(--white-color); } .barber-card h3 { font-size: 22px; margin-top: 20px; margin-bottom: 5px; color: var(--secondary-color); } .barber-card p { color: var(--gray-color); font-style: italic; } /* Gallery Section */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .gallery-item { position: relative; border-radius: 10px; overflow: hidden; height: 250px; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .gallery-item:hover img { transform: scale(1.1); } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); } .gallery-item:hover .overlay { opacity: 1; } .overlay i { color: var(--white-color); font-size: 40px; } /* Pricing Section */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .pricing-card { background: var(--white-color); border-radius: 10px; padding: 40px 30px; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); position: relative; } .pricing-card.featured { transform: scale(1.05); border: 2px solid var(--primary-color); } .popular-tag { position: absolute; top: -15px; right: 30px; background: var(--primary-color); color: var(--white-color); padding: 5px 15px; border-radius: 30px; font-size: 14px; font-weight: 600; } .pricing-card h3 { font-size: 22px; margin-bottom: 20px; color: var(--secondary-color); } .price { font-size: 40px; font-weight: 700; color: var(--primary-color); margin-bottom: 20px; } .pricing-card ul { list-style: none; margin-bottom: 30px; } .pricing-card ul li { padding: 10px 0; border-bottom: 1px solid #eee; color: var(--gray-color); } .pricing-card ul li:last-child { border-bottom: none; } /* Testimonials Section */ .testimonials-slider { position: relative; max-width: 800px; margin: 0 auto; } .testimonial-card { background: var(--white-color); padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); display: none; } .testimonial-card.active { display: flex; align-items: center; gap: 30px; } .client-img { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 5px solid var(--primary-color); } .client-img img { width: 100%; height: 100%; object-fit: cover; } .client-review p { font-style: italic; margin-bottom: 15px; color: var(--gray-color); } .client-review h4 { font-size: 18px; margin-bottom: 5px; color: var(--secondary-color); } .rating { color: var(--primary-color); } .slider-controls { position: absolute; top: 50%; left: 0; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); padding: 0 20px; } .slider-controls button { background: var(--primary-color); color: var(--white-color); width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; font-size: 16px; transition: var(--transition); } .slider-controls button:hover { background: var(--secondary-color); } /* Products Section */ .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .product-card { background: var(--white-color); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); text-align: center; } .product-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .product-img { height: 250px; overflow: hidden; } .product-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .product-card:hover .product-img img { transform: scale(1.1); } .product-card h3 { font-size: 18px; margin: 20px 0 5px; color: var(--secondary-color); } .product-card p { color: var(--gray-color); font-size: 14px; margin-bottom: 10px; } .price { font-size: 20px; font-weight: 700; color: var(--primary-color); margin-bottom: 20px; } .product-card .btn { padding: 10px 25px; margin-bottom: 20px; } /* Blog Section */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .blog-card { background: var(--white-color); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .blog-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .blog-img { position: relative; height: 250px; overflow: hidden; } .blog-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .blog-card:hover .blog-img img { transform: scale(1.1); } .date { position: absolute; top: 20px; right: 20px; background: var(--primary-color); color: var(--white-color); padding: 10px 15px; border-radius: 5px; font-weight: 600; } .blog-content { padding: 25px; } .blog-content h3 { font-size: 20px; margin-bottom: 15px; color: var(--secondary-color); } .blog-content p { color: var(--gray-color); margin-bottom: 15px; } .read-more { color: var(--primary-color); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; } .read-more::after { content: '\f061'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-left: 5px; transition: var(--transition); } .read-more:hover::after { transform: translateX(5px); } /* Contact Section */ .contact-content { display: flex; gap: 50px; } .contact-info { flex: 1; } .info-box { display: flex; align-items: flex-start; margin-bottom: 30px; } .icon { width: 60px; height: 60px; background: rgba(212, 175, 55, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px; flex-shrink: 0; } .icon i { font-size: 24px; color: var(--primary-color); } .info-box h4 { font-size: 18px; margin-bottom: 5px; color: var(--secondary-color); } .info-box p { color: var(--gray-color); } .contact-form { flex: 1; } .form-group { margin-bottom: 20px; } .form-group input, .form-group textarea { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 5px; font-family: 'Poppins', sans-serif; transition: var(--transition); } .form-group input:focus, .form-group textarea:focus { border-color: var(--primary-color); outline: none; } .form-group textarea { height: 150px; resize: none; } /* Footer */ .footer { background: var(--secondary-color); color: var(--white-color); padding: 80px 0 0; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 50px; } .footer-col h3 { font-size: 20px; margin-bottom: 25px; position: relative; } .footer-col h3::after { content: ''; position: absolute; width: 50px; height: 2px; background: var(--primary-color); bottom: -10px; left: 0; } .footer-col p { margin-bottom: 20px; color: #b3b3b3; } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--white-color); margin-right: 10px; transition: var(--transition); } .social-links a:hover { background: var(--primary-color); transform: translateY(-5px); } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 15px; } .footer-col ul li a { color: #b3b3b3; text-decoration: none; transition: var(--transition); display: inline-block; } .footer-col ul li a:hover { color: var(--primary-color); transform: translateX(5px); } .newsletter-form { display: flex; } .newsletter-form input { width: 100%; padding: 15px; border: none; border-radius: 5px 0 0 5px; font-family: 'Poppins', sans-serif; } .newsletter-form button { background: var(--primary-color); color: var(--white-color); border: none; padding: 0 20px; border-radius: 0 5px 5px 0; cursor: pointer; transition: var(--transition); } .newsletter-form button:hover { background: #c19b2c; } .footer-bottom { text-align: center; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #b3b3b3; font-size: 14px; } /* Responsive Styles */ @media (max-width: 992px) { .about-content { flex-direction: column; } .contact-content { flex-direction: column; } .testimonial-card.active { flex-direction: column; text-align: center; } .client-img { margin-bottom: 20px; } } @media (max-width: 768px) { .navbar { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background: var(--white-color); transition: var(--transition); z-index: 999; } .navbar.active { left: 0; } .navbar ul { flex-direction: column; align-items: center; justify-content: center; height: 100%; } .navbar ul li { margin: 15px 0; } .menu-toggle { display: block; } .hero-content h1 { font-size: 40px; } .hero-content h2 { font-size: 20px; } .section-title h2 { font-size: 30px; } .slider-controls { position: static; transform: none; justify-content: center; margin-top: 30px; } .slider-controls button { margin: 0 10px; } } @media (max-width: 576px) { .hero-content h1 { font-size: 32px; } .section-title h2 { font-size: 26px; } .about-features { flex-direction: column; } .feature { margin-bottom: 20px; } .feature:last-child { margin-bottom: 0; } }
JavaScript
/* Global Styles */ :root { --primary-color: #d4af37; --secondary-color: #1a1a1a; --text-color: #333; --light-color: #f8f9fa; --dark-color: #212529; --gray-color: #6c757d; --white-color: #ffffff; --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Poppins', sans-serif; color: var(--text-color); line-height: 1.6; overflow-x: hidden; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } section { padding: 80px 0; } .section-padding { padding: 100px 0; } .section-title { text-align: center; margin-bottom: 60px; } .section-title h2 { font-size: 36px; font-weight: 700; color: var(--secondary-color); margin-bottom: 15px; text-transform: uppercase; position: relative; display: inline-block; } .section-title h2::after { content: ''; position: absolute; width: 50px; height: 3px; background: var(--primary-color); bottom: -10px; left: 50%; transform: translateX(-50%); } .section-title p { font-size: 18px; color: var(--gray-color); } .btn { display: inline-block; background: var(--primary-color); color: var(--white-color); padding: 12px 30px; border: none; border-radius: 5px; font-size: 16px; font-weight: 600; text-transform: uppercase; cursor: pointer; transition: var(--transition); text-decoration: none; } .btn:hover { background: #c19b2c; transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } /* Header Styles */ .header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: var(--white-color); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: var(--transition); } .header .container { display: flex; justify-content: space-between; align-items: center; padding: 20px; } .logo h1 { font-size: 28px; font-weight: 700; color: var(--secondary-color); } .logo h1 span { color: var(--primary-color); } .navbar ul { display: flex; list-style: none; } .navbar ul li { margin-left: 30px; } .navbar ul li a { color: var(--secondary-color); font-size: 16px; font-weight: 600; text-decoration: none; transition: var(--transition); position: relative; } .navbar ul li a::after { content: ''; position: absolute; width: 0; height: 2px; background: var(--primary-color); bottom: -5px; left: 0; transition: var(--transition); } .navbar ul li a:hover::after { width: 100%; } .navbar ul li a:hover { color: var(--primary-color); } .menu-toggle { display: none; cursor: pointer; font-size: 24px; color: var(--secondary-color); } /* Hero Section */ .hero { height: 100vh; background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1587909209111-5097ee578ec3') no-repeat center center/cover; display: flex; align-items: center; text-align: center; color: var(--white-color); padding-top: 80px; } .hero-content h2 { font-size: 28px; font-weight: 400; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; } .hero-content h1 { font-size: 60px; font-weight: 700; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 3px; } .hero-content p { font-size: 18px; margin-bottom: 30px; max-width: 700px; margin-left: auto; margin-right: auto; } /* About Section */ .about-content { display: flex; align-items: center; gap: 50px; } .about-img { flex: 1; } .about-img img { width: 100%; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .about-text { flex: 1; } .about-text h3 { font-size: 28px; font-weight: 700; margin-bottom: 20px; color: var(--secondary-color); } .about-text p { margin-bottom: 20px; color: var(--gray-color); } .about-features { display: flex; justify-content: space-between; margin-top: 30px; } .feature { text-align: center; padding: 20px; border-radius: 5px; transition: var(--transition); } .feature:hover { transform: translateY(-10px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .feature i { font-size: 40px; color: var(--primary-color); margin-bottom: 15px; } .feature h4 { font-size: 18px; font-weight: 600; } /* Services Section */ .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .service-card { background: var(--white-color); padding: 30px; border-radius: 10px; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .service-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .service-icon { width: 80px; height: 80px; background: rgba(212, 175, 55, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; transition: var(--transition); } .service-card:hover .service-icon { background: var(--primary-color); color: var(--white-color); } .service-icon i { font-size: 30px; color: var(--primary-color); transition: var(--transition); } .service-card:hover .service-icon i { color: var(--white-color); } .service-card h3 { font-size: 22px; margin-bottom: 15px; color: var(--secondary-color); } .service-card p { color: var(--gray-color); } /* Barbers Section */ .barbers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .barber-card { background: var(--white-color); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); text-align: center; padding-bottom: 30px; } .barber-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .barber-img { position: relative; overflow: hidden; height: 300px; } .barber-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .barber-card:hover .barber-img img { transform: scale(1.1); } .social-links { position: absolute; bottom: -50px; left: 0; width: 100%; display: flex; justify-content: center; background: rgba(212, 175, 55, 0.8); padding: 10px; transition: var(--transition); } .barber-card:hover .social-links { bottom: 0; } .social-links a { display: flex; align-items: center; justify-content: center; width: 35px; height: 35px; background: var(--white-color); color: var(--primary-color); border-radius: 50%; margin: 0 5px; transition: var(--transition); } .social-links a:hover { background: var(--primary-color); color: var(--white-color); } .barber-card h3 { font-size: 22px; margin-top: 20px; margin-bottom: 5px; color: var(--secondary-color); } .barber-card p { color: var(--gray-color); font-style: italic; } /* Gallery Section */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; } .gallery-item { position: relative; border-radius: 10px; overflow: hidden; height: 250px; } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .gallery-item:hover img { transform: scale(1.1); } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; opacity: 0; transition: var(--transition); } .gallery-item:hover .overlay { opacity: 1; } .overlay i { color: var(--white-color); font-size: 40px; } /* Pricing Section */ .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; } .pricing-card { background: var(--white-color); border-radius: 10px; padding: 40px 30px; text-align: center; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); position: relative; } .pricing-card.featured { transform: scale(1.05); border: 2px solid var(--primary-color); } .popular-tag { position: absolute; top: -15px; right: 30px; background: var(--primary-color); color: var(--white-color); padding: 5px 15px; border-radius: 30px; font-size: 14px; font-weight: 600; } .pricing-card h3 { font-size: 22px; margin-bottom: 20px; color: var(--secondary-color); } .price { font-size: 40px; font-weight: 700; color: var(--primary-color); margin-bottom: 20px; } .pricing-card ul { list-style: none; margin-bottom: 30px; } .pricing-card ul li { padding: 10px 0; border-bottom: 1px solid #eee; color: var(--gray-color); } .pricing-card ul li:last-child { border-bottom: none; } /* Testimonials Section */ .testimonials-slider { position: relative; max-width: 800px; margin: 0 auto; } .testimonial-card { background: var(--white-color); padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); display: none; } .testimonial-card.active { display: flex; align-items: center; gap: 30px; } .client-img { width: 150px; height: 150px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 5px solid var(--primary-color); } .client-img img { width: 100%; height: 100%; object-fit: cover; } .client-review p { font-style: italic; margin-bottom: 15px; color: var(--gray-color); } .client-review h4 { font-size: 18px; margin-bottom: 5px; color: var(--secondary-color); } .rating { color: var(--primary-color); } .slider-controls { position: absolute; top: 50%; left: 0; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); padding: 0 20px; } .slider-controls button { background: var(--primary-color); color: var(--white-color); width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; font-size: 16px; transition: var(--transition); } .slider-controls button:hover { background: var(--secondary-color); } /* Products Section */ .products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; } .product-card { background: var(--white-color); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); text-align: center; } .product-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .product-img { height: 250px; overflow: hidden; } .product-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .product-card:hover .product-img img { transform: scale(1.1); } .product-card h3 { font-size: 18px; margin: 20px 0 5px; color: var(--secondary-color); } .product-card p { color: var(--gray-color); font-size: 14px; margin-bottom: 10px; } .price { font-size: 20px; font-weight: 700; color: var(--primary-color); margin-bottom: 20px; } .product-card .btn { padding: 10px 25px; margin-bottom: 20px; } /* Blog Section */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; } .blog-card { background: var(--white-color); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); transition: var(--transition); } .blog-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); } .blog-img { position: relative; height: 250px; overflow: hidden; } .blog-img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition); } .blog-card:hover .blog-img img { transform: scale(1.1); } .date { position: absolute; top: 20px; right: 20px; background: var(--primary-color); color: var(--white-color); padding: 10px 15px; border-radius: 5px; font-weight: 600; } .blog-content { padding: 25px; } .blog-content h3 { font-size: 20px; margin-bottom: 15px; color: var(--secondary-color); } .blog-content p { color: var(--gray-color); margin-bottom: 15px; } .read-more { color: var(--primary-color); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; } .read-more::after { content: '\f061'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-left: 5px; transition: var(--transition); } .read-more:hover::after { transform: translateX(5px); } /* Contact Section */ .contact-content { display: flex; gap: 50px; } .contact-info { flex: 1; } .info-box { display: flex; align-items: flex-start; margin-bottom: 30px; } .icon { width: 60px; height: 60px; background: rgba(212, 175, 55, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 20px; flex-shrink: 0; } .icon i { font-size: 24px; color: var(--primary-color); } .info-box h4 { font-size: 18px; margin-bottom: 5px; color: var(--secondary-color); } .info-box p { color: var(--gray-color); } .contact-form { flex: 1; } .form-group { margin-bottom: 20px; } .form-group input, .form-group textarea { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 5px; font-family: 'Poppins', sans-serif; transition: var(--transition); } .form-group input:focus, .form-group textarea:focus { border-color: var(--primary-color); outline: none; } .form-group textarea { height: 150px; resize: none; } /* Footer */ .footer { background: var(--secondary-color); color: var(--white-color); padding: 80px 0 0; } .footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 50px; } .footer-col h3 { font-size: 20px; margin-bottom: 25px; position: relative; } .footer-col h3::after { content: ''; position: absolute; width: 50px; height: 2px; background: var(--primary-color); bottom: -10px; left: 0; } .footer-col p { margin-bottom: 20px; color: #b3b3b3; } .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--white-color); margin-right: 10px; transition: var(--transition); } .social-links a:hover { background: var(--primary-color); transform: translateY(-5px); } .footer-col ul { list-style: none; } .footer-col ul li { margin-bottom: 15px; } .footer-col ul li a { color: #b3b3b3; text-decoration: none; transition: var(--transition); display: inline-block; } .footer-col ul li a:hover { color: var(--primary-color); transform: translateX(5px); } .newsletter-form { display: flex; } .newsletter-form input { width: 100%; padding: 15px; border: none; border-radius: 5px 0 0 5px; font-family: 'Poppins', sans-serif; } .newsletter-form button { background: var(--primary-color); color: var(--white-color); border: none; padding: 0 20px; border-radius: 0 5px 5px 0; cursor: pointer; transition: var(--transition); } .newsletter-form button:hover { background: #c19b2c; } .footer-bottom { text-align: center; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); color: #b3b3b3; font-size: 14px; } /* Responsive Styles */ @media (max-width: 992px) { .about-content { flex-direction: column; } .contact-content { flex-direction: column; } .testimonial-card.active { flex-direction: column; text-align: center; } .client-img { margin-bottom: 20px; } } @media (max-width: 768px) { .navbar { position: fixed; top: 80px; left: -100%; width: 100%; height: calc(100vh - 80px); background: var(--white-color); transition: var(--transition); z-index: 999; } .navbar.active { left: 0; } .navbar ul { flex-direction: column; align-items: center; justify-content: center; height: 100%; } .navbar ul li { margin: 15px 0; } .menu-toggle { display: block; } .hero-content h1 { font-size: 40px; } .hero-content h2 { font-size: 20px; } .section-title h2 { font-size: 30px; } .slider-controls { position: static; transform: none; justify-content: center; margin-top: 30px; } .slider-controls button { margin: 0 10px; } } @media (max-width: 576px) { .hero-content h1 { font-size: 32px; } .section-title h2 { font-size: 26px; } .about-features { flex-direction: column; } .feature { margin-bottom: 20px; } .feature:last-child { margin-bottom: 0; } }
Output Preview
Desktop
Mobile
Fullscreen
