Hey, developer this is Project 1 of Series 50 Projects in 50 Days HTML CSS and JavasScript Free Download. And today in this challenge, we are going to design a fully Responsive Salon Website Templates using HTML, CSS, JavaScript & Tailwind CSS
To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given CSS code in your code's CSS file.
Preview
HTML Code
index.html
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AURUM | The Gold Standard of Hair</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link
href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Montserrat:wght@200;400;600&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="toast-container" class="fixed bottom-10 right-10 z-[200] flex flex-col gap-4"></div>
<nav class="fixed w-full z-[100] glass-nav">
<div class="max-w-7xl mx-auto px-6">
<div class="flex justify-between items-center h-24">
<a href="#" class="brand text-3xl font-bold tracking-[0.2em] gold-text">AURUM</a>
<div class="hidden md:flex space-x-12 items-center">
<a href="#home"
class="text-xs uppercase tracking-[0.3em] hover:text-[#D4AF37] transition-all">Home</a>
<a href="#services"
class="text-xs uppercase tracking-[0.3em] hover:text-[#D4AF37] transition-all">Services</a>
<a href="#about" class="text-xs uppercase tracking-[0.3em] hover:text-[#D4AF37] transition-all">The
Studio</a>
<a href="#appointment"
class="px-8 py-3 border border-[#D4AF37] text-[#D4AF37] text-xs uppercase tracking-[0.2em] hover:bg-[#D4AF37] hover:text-black transition-all duration-500">Book
Visit</a>
</div>
<button id="menu-btn" class="md:hidden text-[#D4AF37]">
<i class="fa-solid fa-bars-staggered text-2xl"></i>
</button>
</div>
</div>
<div id="mobile-menu"
class="hidden absolute top-24 left-0 w-full bg-[#0a0a0a] border-b border-[#D4AF37] p-10 flex flex-col space-y-6 text-center animate-fade-in">
<a href="#home" class="text-lg uppercase tracking-widest text-white hover:text-[#D4AF37]">Home</a>
<a href="#services" class="text-lg uppercase tracking-widest text-white hover:text-[#D4AF37]">Services</a>
<a href="#appointment" class="text-lg uppercase tracking-widest gold-text font-bold">Book Now</a>
</div>
</nav>
<section id="home" class="relative h-screen flex items-center justify-center overflow-hidden">
<img src="https://images.unsplash.com/photo-1521590832167-7bcbfaa6381f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80"
class="absolute inset-0 w-full h-full object-cover scale-105" alt="Luxury Salon">
<div class="absolute inset-0 hero-overlay"></div>
<div class="relative z-10 text-center px-6">
<h2 class="text-[#D4AF37] text-xs md:text-sm uppercase tracking-[0.5em] mb-4">Crafting Excellence Since 2012
</h2>
<h1 class="text-5xl md:text-8xl mb-8 leading-tight">Mastering The Art <br> <span class="gold-text italic">Of
Hair</span></h1>
<div class="flex flex-col md:flex-row gap-6 justify-center items-center">
<a href="#appointment"
class="gold-bg text-black px-12 py-5 text-xs font-bold uppercase tracking-[0.2em] hover:scale-105 transition-transform duration-300">
Schedule Appointment
</a>
<a href="#services"
class="text-white border-b border-[#D4AF37] pb-2 text-xs uppercase tracking-[0.2em] hover:text-[#D4AF37] transition-all">
Explore Services
</a>
</div>
</div>
</section>
<section id="about" class="py-32 px-6 bg-[#0d0d0d] relative overflow-hidden">
<div
class="absolute left-0 top-1/2 -translate-y-1/2 w-px h-64 bg-gradient-to-b from-transparent via-[#D4AF37] to-transparent opacity-30">
</div>
<div class="max-w-7xl mx-auto">
<div class="text-center mb-20">
<span class="gold-text text-sm tracking-[0.4em] uppercase block mb-4">The Hands Behind the Art</span>
<h2 class="text-4xl md:text-6xl italic">Meet Our Experts</h2>
</div>
<div class="grid md:grid-cols-3 gap-12 lg:gap-20">
<div class="group">
<div
class="relative mb-8 overflow-hidden aspect-[4/5] border border-stone-800 p-2 group-hover:border-[#D4AF37] transition-all duration-700">
<img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?auto=format&fit=crop&w=800&q=80"
alt="Lead Stylist"
class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-1000 scale-100 group-hover:scale-110">
<div
class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black to-transparent opacity-60">
</div>
</div>
<div class="text-center">
<span class="text-[#D4AF37] text-xs tracking-widest uppercase font-semibold">12 Years
Experience</span>
<h3 class="text-2xl mt-2 mb-1">Julian Thorne</h3>
<p class="gold-text text-xs uppercase tracking-[0.2em] mb-4">Creative Director</p>
<p class="text-stone-500 text-sm leading-relaxed px-4">Specializing in avant-garde cutting
techniques and editorial styling for New York Fashion Week.</p>
</div>
</div>
<div class="group">
<div
class="relative mb-8 overflow-hidden aspect-[4/5] border border-stone-800 p-2 group-hover:border-[#D4AF37] transition-all duration-700">
<img src="https://images.unsplash.com/photo-1580618672591-eb180b1a973f?auto=format&fit=crop&w=800&q=80"
alt="Color Expert"
class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-1000 scale-100 group-hover:scale-110">
<div
class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black to-transparent opacity-60">
</div>
</div>
<div class="text-center">
<span class="text-[#D4AF37] text-xs tracking-widest uppercase font-semibold">08 Years
Experience</span>
<h3 class="text-2xl mt-2 mb-1">Elena Vance</h3>
<p class="gold-text text-xs uppercase tracking-[0.2em] mb-4">Master Colorist</p>
<p class="text-stone-500 text-sm leading-relaxed px-4">A visionary in organic pigment blending
and the pioneer of the "Golden Hour" balayage technique.</p>
</div>
</div>
<div class="group">
<div
class="relative mb-8 overflow-hidden aspect-[4/5] border border-stone-800 p-2 group-hover:border-[#D4AF37] transition-all duration-700">
<img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=800&q=80"
alt="Treatment Specialist"
class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all duration-1000 scale-100 group-hover:scale-110">
<div
class="absolute bottom-0 left-0 w-full h-1/2 bg-gradient-to-t from-black to-transparent opacity-60">
</div>
</div>
<div class="text-center">
<span class="text-[#D4AF37] text-xs tracking-widest uppercase font-semibold">10 Years
Experience</span>
<h3 class="text-2xl mt-2 mb-1">Sofia Moretti</h3>
<p class="gold-text text-xs uppercase tracking-[0.2em] mb-4">Trichology Expert</p>
<p class="text-stone-500 text-sm leading-relaxed px-4">Dedicated to hair health rituals and
restorative treatments that transform hair from the inside out.</p>
</div>
</div>
</div>
</div>
</section>
<section id="services" class="py-32 px-6 bg-[#0a0a0a]">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row justify-between items-end mb-20 gap-8">
<div>
<span class="gold-text text-sm tracking-[0.4em] uppercase">Our Expertise</span>
<h2 class="text-4xl md:text-6xl mt-4 italic">The Aurum Rituals</h2>
</div>
<p class="text-stone-500 max-w-md text-sm leading-loose">
Every visit to Aurum is a personalized journey into bespoke hair artistry, meticulously crafted for
perfection.
</p>
</div>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-12">
<div
class="group relative overflow-hidden bg-[#0f0f0f] border border-stone-800 p-8 hover:border-[#D4AF37] transition-all duration-500">
<div class="overflow-hidden mb-6">
<img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?auto=format&fit=crop&q=80&w=400&h=300"
alt="Couture Cutting"
class="w-full h-auto object-cover group-hover:scale-110 transition-transform duration-700">
</div>
<span class="text-[#D4AF37] text-sm font-bold uppercase tracking-widest block mb-2">From $120</span>
<h3 class="text-2xl mb-4 gold-text">Couture Cutting</h3>
<p class="text-stone-400 text-sm leading-relaxed">Precision shaping tailored to your unique facial
structure and lifestyle for effortless elegance.</p>
</div>
<div
class="group relative overflow-hidden bg-[#0f0f0f] border border-stone-800 p-8 hover:border-[#D4AF37] transition-all duration-500">
<div class="overflow-hidden mb-6">
<img src="https://images.unsplash.com/photo-1580618672591-eb180b1a973f?auto=format&fit=crop&w=800&q=80"
alt="Golden Balayage"
class="w-full h-auto object-cover group-hover:scale-110 transition-transform duration-700">
</div>
<span class="text-[#D4AF37] text-sm font-bold uppercase tracking-widest block mb-2">From $250</span>
<h3 class="text-2xl mb-4 gold-text">Golden Balayage</h3>
<p class="text-stone-400 text-sm leading-relaxed">Hand-painted highlights that mimic the sun's
embrace, creating a luminous, natural glow.</p>
</div>
<div
class="group relative overflow-hidden bg-[#0f0f0f] border border-stone-800 p-8 hover:border-[#D4AF37] transition-all duration-500">
<div class="overflow-hidden mb-6">
<img src="https://images.unsplash.com/photo-1522337660859-02fbefca4702?auto=format&fit=crop&q=80&w=400&h=300"
alt="Velvet Treatment"
class="w-full h-auto object-cover group-hover:scale-110 transition-transform duration-700">
</div>
<span class="text-[#D4AF37] text-sm font-bold uppercase tracking-widest block mb-2">From $90</span>
<h3 class="text-2xl mb-4 gold-text">Velvet Treatment</h3>
<p class="text-stone-400 text-sm leading-relaxed">Deep conditioning and molecular repair to restore
unparalleled softness, strength, and shine.</p>
</div>
<div
class="group relative overflow-hidden bg-[#0f0f0f] border border-stone-800 p-8 hover:border-[#D4AF37] transition-all duration-500">
<div class="overflow-hidden mb-6">
<img src="https://images.unsplash.com/photo-1595152772835-219674b2a8a6?auto=format&fit=crop&q=80&w=400&h=300"
alt="Aurum Blowout"
class="w-full h-auto object-cover group-hover:scale-110 transition-transform duration-700">
</div>
<span class="text-[#D4AF37] text-sm font-bold uppercase tracking-widest block mb-2">From $75</span>
<h3 class="text-2xl mb-4 gold-text">The Aurum Blowout</h3>
<p class="text-stone-400 text-sm leading-relaxed">Experience volume, shine, and lasting elegance
with our signature high-fashion blow dry.</p>
</div>
<div
class="group relative overflow-hidden bg-[#0f0f0f] border border-stone-800 p-8 hover:border-[#D4AF37] transition-all duration-500">
<div class="overflow-hidden mb-6">
<img src="https://images.unsplash.com/photo-1580618672591-eb180b1a973f?auto=format&fit=crop&w=800&q=80"
alt="Corrective Color"
class="w-full h-auto object-cover group-hover:scale-110 transition-transform duration-700">
</div>
<span class="text-[#D4AF37] text-sm font-bold uppercase tracking-widest block mb-2">Consultation
Required</span>
<h3 class="text-2xl mb-4 gold-text">Corrective Color</h3>
<p class="text-stone-400 text-sm leading-relaxed">Expert intervention to restore perfect tone and
vibrancy, addressing all color challenges.</p>
</div>
<div
class="group relative overflow-hidden bg-[#0f0f0f] border border-stone-800 p-8 hover:border-[#D4AF37] transition-all duration-500">
<div class="overflow-hidden mb-6">
<img src="https://images.unsplash.com/photo-1522337660859-02fbefca4702?auto=format&fit=crop&q=80&w=400&h=300"
alt="Bridal & Event Styling"
class="w-full h-auto object-cover group-hover:scale-110 transition-transform duration-700">
</div>
<span class="text-[#D4AF37] text-sm font-bold uppercase tracking-widest block mb-2">By
Quotation</span>
<h3 class="text-2xl mb-4 gold-text">Bridal & Event Styling</h3>
<p class="text-stone-400 text-sm leading-relaxed">Exquisite, bespoke hairstyles designed for your
special day or momentous occasion.</p>
</div>
</div>
</div>
</section>
<section id="testimonials" class="py-32 bg-[#0f0f0f] border-y border-stone-900 overflow-hidden">
<div class="max-w-7xl mx-auto px-6 mb-16">
<div class="text-center">
<div class="flex justify-center gap-1 mb-6">
<i class="fa-solid fa-star text-[#D4AF37] text-xs"></i>
<i class="fa-solid fa-star text-[#D4AF37] text-xs"></i>
<i class="fa-solid fa-star text-[#D4AF37] text-xs"></i>
<i class="fa-solid fa-star text-[#D4AF37] text-xs"></i>
<i class="fa-solid fa-star text-[#D4AF37] text-xs"></i>
</div>
<h2 class="text-4xl italic">Client Chronicles</h2>
<p class="text-stone-500 text-[10px] tracking-[0.4em] uppercase mt-4">Voices of Excellence</p>
</div>
</div>
<div class="relative h-[600px] overflow-hidden">
<div class="absolute top-0 left-0 w-full h-32 bg-gradient-to-b from-[#0f0f0f] to-transparent z-10"></div>
<div class="absolute bottom-0 left-0 w-full h-32 bg-gradient-to-t from-[#0f0f0f] to-transparent z-10"></div>
<div class="scroll-track flex flex-col gap-6 items-center">
<div id="review-content" class="flex flex-col gap-6 w-full max-w-4xl px-6">
</div>
</div>
</div>
</section>
<section id="gallery" class="py-32 bg-[#0a0a0a]">
<div class="max-w-7xl mx-auto px-6">
<div class="flex flex-col md:flex-row justify-between items-center mb-16 gap-6">
<div>
<span class="gold-text text-sm tracking-[0.4em] uppercase block mb-2">The Lookbook</span>
<h2 class="text-4xl italic">Follow Our Journey</h2>
</div>
<a href="#"
class="group flex items-center gap-4 text-xs tracking-[0.3em] uppercase border border-stone-800 px-8 py-4 hover:border-[#D4AF37] transition-all">
<i class="fa-brands fa-instagram text-lg"></i>
<span>@Aurum_Studios</span>
</a>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="relative group overflow-hidden aspect-square border border-stone-900">
<img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?auto=format&fit=crop&w=600&q=80"
alt="Style 1"
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0">
<div
class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<i class="fa-regular fa-heart text-white text-2xl"></i>
</div>
</div>
<div class="relative group overflow-hidden aspect-square border border-stone-900">
<img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?auto=format&fit=crop&w=600&q=80"
alt="Style 2"
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0">
<div
class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<i class="fa-regular fa-heart text-white text-2xl"></i>
</div>
</div>
<div class="relative group overflow-hidden aspect-square border border-stone-900">
<img src="https://images.unsplash.com/photo-1562322140-8baeececf3df?auto=format&fit=crop&w=600&q=80"
alt="Style 3"
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0">
<div
class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<i class="fa-regular fa-heart text-white text-2xl"></i>
</div>
</div>
<div class="relative group overflow-hidden aspect-square border border-stone-900">
<img src="https://images.unsplash.com/photo-1562322140-8baeececf3df?auto=format&fit=crop&w=600&q=80"
alt="Style 4"
class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0">
<div
class="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
<i class="fa-regular fa-heart text-white text-2xl"></i>
</div>
</div>
</div>
</div>
</section>
<section id="appointment" class="py-32 px-6 bg-[#0f0f0f]">
<div class="max-w-4xl mx-auto border border-stone-800 p-8 md:p-16 relative overflow-hidden">
<div class="absolute top-0 right-0 w-24 h-24 border-t-2 border-r-2 border-[#D4AF37]/30"></div>
<div class="text-center mb-12">
<h2 class="text-4xl gold-text mb-4">Request a Visit</h2>
<p class="text-stone-500 text-xs uppercase tracking-[0.3em]">Direct Concierge Booking</p>
</div>
<form id="booking-form" class="grid md:grid-cols-2 gap-8">
<div class="space-y-1">
<label class="text-[10px] text-[#D4AF37] tracking-widest uppercase ml-1">Full Name</label>
<input type="text" id="form-name" placeholder="E.G. JULIANNE MOORE"
class="w-full bg-transparent border-b border-stone-700 py-4 outline-none focus:border-[#D4AF37] text-xs tracking-widest uppercase transition-all">
</div>
<div class="space-y-1">
<label class="text-[10px] text-[#D4AF37] tracking-widest uppercase ml-1">Contact Number</label>
<input type="tel" id="form-phone" placeholder="+1 234 567 890"
class="w-full bg-transparent border-b border-stone-700 py-4 outline-none focus:border-[#D4AF37] text-xs tracking-widest uppercase transition-all">
</div>
<div class="space-y-1">
<label class="text-[10px] text-[#D4AF37] tracking-widest uppercase ml-1">Select Ritual</label>
<select id="form-service"
class="w-full bg-transparent border-b border-stone-700 py-4 outline-none focus:border-[#D4AF37] text-xs tracking-widest uppercase text-stone-400 appearance-none">
<option class="bg-black" value="Not Specified">Select Service</option>
<option class="bg-black" value="Couture Cutting">Couture Cutting</option>
<option class="bg-black" value="Golden Balayage">Golden Balayage</option>
<option class="bg-black" value="Velvet Treatment">Velvet Treatment</option>
<option class="bg-black" value="Aurum Blowout">Aurum Blowout</option>
</select>
</div>
<div class="space-y-1">
<label class="text-[10px] text-[#D4AF37] tracking-widest uppercase ml-1">Preferred Date</label>
<input type="date" id="form-date"
class="w-full bg-transparent border-b border-stone-700 py-4 outline-none focus:border-[#D4AF37] text-xs tracking-widest uppercase text-stone-400 transition-all">
</div>
<div class="md:col-span-2 text-center mt-12">
<button type="submit" class="group relative px-16 py-6 overflow-hidden border border-[#D4AF37]">
<span
class="relative z-10 text-[#D4AF37] group-hover:text-black transition-colors duration-500 uppercase tracking-[0.3em] text-xs font-bold">
Book via WhatsApp <i class="fa-brands fa-whatsapp ml-2"></i>
</span>
<div
class="absolute inset-0 bg-[#D4AF37] translate-y-full group-hover:translate-y-0 transition-transform duration-500">
</div>
</button>
<p class="text-stone-600 text-[9px] mt-6 tracking-[0.2em]">OUR CONCIERGE WILL REPLY WITHIN 30
MINUTES</p>
</div>
</form>
</div>
</section>
<section id="location" class="py-32 bg-[#0a0a0a] border-t border-stone-900">
<div class="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-16 items-center">
<div>
<span class="gold-text text-sm tracking-[0.4em] uppercase block mb-4">Visit the Studio</span>
<h2 class="text-4xl md:text-5xl italic mb-8">Prime Location</h2>
<div class="space-y-6">
<div class="flex items-start gap-4">
<i class="fa-solid fa-location-dot text-[#D4AF37] mt-1"></i>
<p class="text-stone-400 text-sm leading-relaxed tracking-widest uppercase">
123 Luxury Avenue, <br>Suite 500, Manhattan, NY 10001
</p>
</div>
<div class="flex items-start gap-4">
<i class="fa-regular fa-clock text-[#D4AF37] mt-1"></i>
<p class="text-stone-400 text-sm tracking-widest uppercase">
Mon - Sat: 09:00 - 20:00 <br>Sun: Private Bookings Only
</p>
</div>
</div>
</div>
<div class="border border-[#D4AF37]">
<div
class="h-96 w-full p-6 grayscale contrast-125 opacity-80 hover:grayscale-0 hover:opacity-100 transition-all duration-1000">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d6952.515569965633!2d76.1674511!3d29.392014050000004!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x39121e7b57e2836b%3A0xa375d34621d25420!2sKoth%20Kalan%2C%20Haryana%20125039!5e0!3m2!1sen!2sin!4v1767862027244!5m2!1sen!2sin"
class="w-full h-full border-0" allowfullscreen="" loading="lazy">
</iframe>
</div>
</div>
</div>
</section>
<footer class="py-20 border-t border-stone-900 text-center">
<div class="brand text-2xl gold-text mb-8 tracking-[0.3em]">AURUM</div>
<div class="flex justify-center space-x-8 mb-10 text-stone-500">
<a href="#" class="hover:text-[#D4AF37] transition-colors"><i
class="fa-brands fa-instagram text-xl"></i></a>
<a href="#" class="hover:text-[#D4AF37] transition-colors"><i
class="fa-brands fa-facebook-f text-xl"></i></a>
<a href="#" class="hover:text-[#D4AF37] transition-colors"><i
class="fa-brands fa-pinterest text-xl"></i></a>
</div>
<p class="text-[10px] uppercase tracking-[0.4em] text-stone-600">© 2026 Aurum Studios Manhattan. All Rights
Reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
CSS Code
style.css
:root {
--gold: #D4AF37;
--dark-gold: #996515;
}
body {
font-family: 'Montserrat', sans-serif;
background-color: #0a0a0a;
color: #fff;
}
h1,
h2,
h3,
.brand {
font-family: 'Cinzel', serif;
}
.gold-text {
background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.gold-bg {
background: linear-gradient(45deg, #BF953F, #FCF6BA, #AA771C);
}
.gold-border {
border-image: linear-gradient(to right, #BF953F, #AA771C) 1;
}
.hero-overlay {
background: linear-gradient(to bottom, rgba(10, 10, 10, 0.4) 0%, rgba(10, 10, 10, 1) 100%);
}
.glass-nav {
background: rgba(10, 10, 10, 0.8);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
background: #D4AF37;
border-radius: 10px;
}
/* Smooth Vertical Scroll Animation */
@keyframes scroll {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
.scroll-track {
animation: scroll 120s linear infinite;
}
.scroll-track:hover {
animation-play-state: paused;
}
.review-card {
background: linear-gradient(145deg, #161616, #0d0d0d);
border-left: 2px solid #D4AF37;
padding: 2rem;
transition: transform 0.3s ease;
}
.review-card:hover {
transform: scale(1.02);
border-left-width: 4px;
}
.gold-toast {
background: #111;
border: 1px solid #D4AF37;
padding: 1rem 2rem;
color: #fff;
font-family: 'Cinzel', serif;
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
animation: toastSlide 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
@keyframes toastSlide {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
JavaScript Code
script.js
const btn = document.getElementById('menu-btn');
const menu = document.getElementById('mobile-menu');
btn.addEventListener('click', () => {
menu.classList.toggle('hidden')
const icon = btn.querySelector('i');
icon.classList.toggle('fa-bars-staggered');
icon.classList.toggle('fa-xmark');
});
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', () => {
menu.classList.add('hidden');
});
});
const reviews = [
{ name: "Vivianne West", rating: 2, msg: "The level of detail at Aurum is unmatched. A masterpiece." },
{ name: "Marcus Reed", rating: 5, msg: "Julian has an incredible eye for structure. Best cut in NYC." },
{ name: "Elena S.", rating: 5, msg: "The golden hour balayage changed my entire look. Highly recommend!" },
{ name: "James Sterling", rating: 5, msg: "Exceptional service from the moment you walk in the door." },
{ name: "Sophia L.", rating: 2, msg: "Finally found a stylist who understands texture and movement." },
{ name: "Catherine D.", rating: 4, msg: "Luxury at its finest. The ritual treatment is a must-try." },
{ name: "Robert Fox", rating: 5, msg: "Professional, clean, and masterfully skilled team." },
{ name: "Isabella Rossi", rating: 5, msg: "Sofia saved my hair. Her trichology knowledge is profound." },
{ name: "Liam Chen", rating: 5, msg: "The only place I trust for my signature style." },
{ name: "Ava Montgomery", rating: 5, msg: "Absolute gold standard. My hair has never been healthier." },
{ name: "David Miller", rating: 5, msg: "Precision cutting like I've never experienced before." },
{ name: "Emma Wilson", rating: 5, msg: "The atmosphere is so tranquil and the results are stunning." },
{ name: "Noah Williams", rating: 4, msg: "Top tier experts. Great attention to detail." },
{ name: "Olivia Brown", rating: 5, msg: "I travel 2 hours just to see Julian. Worth every mile." },
{ name: "Lucas Garcia", rating: 5, msg: "Best experience ever. The consultation was very thorough." },
{ name: "Mia Martinez", rating: 5, msg: "Elena is a magician with color. Simply perfect." },
{ name: "Ethan Hunt", rating: 5, msg: "Classy, elegant, and efficient. 10/10." },
{ name: "Charlotte Lee", rating: 5, msg: "My hair felt like silk after the velvet treatment." },
{ name: "Amelia Taylor", rating: 5, msg: "Truly a bespoke experience. They listen and deliver." },
{ name: "Benjamin Moore", rating: 5, msg: "The grooming here is top notch. Very professional." }
];
const reviewContainer = document.getElementById('review-content');
function createReviewHTML(review) {
let stars = '';
for (let i = 0; i < 5; i++) {
stars += `<i class="fa-solid fa-star ${i < review.rating ? 'text-[#D4AF37]' : 'text-stone-700'} text-[8px] mr-1"></i>`;
}
return `
<div class="review-card">
<div class="flex justify-between items-center mb-4">
<span class="brand text-xs tracking-[0.3em] gold-text">${review.name}</span>
<div>${stars}</div>
</div>
<p class="text-stone-400 italic text-sm leading-relaxed">"${review.msg}"</p>
</div>
`;
}
const allReviews = [...reviews, ...reviews];
reviewContainer.innerHTML = allReviews.map(r => createReviewHTML(r)).join('');
function showToast(message) {
const container = document.getElementById('toast-container');
const toast = document.createElement('div');
toast.className = 'gold-toast';
toast.innerHTML = `<i class="fa-solid fa-bell-concierge mr-2 text-[#D4AF37]"></i> ${message}`;
container.appendChild(toast);
setTimeout(() => {
toast.style.opacity = '0';
toast.style.transform = 'translateX(20px)';
toast.style.transition = 'all 0.5s ease';
setTimeout(() => toast.remove(), 500);
}, 4000);
}
document.getElementById('booking-form').addEventListener('submit', function (e) {
e.preventDefault();
const name = document.getElementById('form-name').value;
const phone = document.getElementById('form-phone').value;
const service = document.getElementById('form-service').value;
const date = document.getElementById('form-date').value;
console.log("name: ", name);
console.log("phone: ", phone);
console.log("service: ", service);
console.log("date: ", date);
// VALIDATION
if (!name || !phone || service === "Not Specified" || !date) {
showToast("Please complete all rituals for booking");
return;
}
const appointmentData = { name, phone, service, date };
const adminPhone = "8307782378"; // REPLACE WITH YOUR NUMBER
const message = `*OptimizeLabs.io BOOKING REQUEST*%0A` +
`*Client:* ${appointmentData.name}%0A` +
`*Ritual:* ${appointmentData.service}%0A` +
`*Date:* ${appointmentData.date}%0A` +
`*Phone:* ${appointmentData.phone}`;
showToast("Redirecting to Concierge...");
setTimeout(() => {
window.open(`https://wa.me/${adminPhone}?text=${message}`, '_blank');
}, 1000);
});
