Okay, I can help you set up the basic structure and styling for an attractive smart salon website with 8 essential pages, hover effects, and placeholders for background images. We'll use HTML for structure and CSS for styling, including hover effects and background images. Smart Salon - Home

Experience the Future of Beauty

Innovative styles meet cutting-edge technology at Smart Salon.

Book Now Explore Services

Welcome to Smart Salon

Discover a unique blend of artistry, expertise, and technology designed to bring out your best self. We offer personalized services in a modern, relaxing environment.

Why Choose Us?

Expert Stylists

Our team is trained in the latest techniques and trends.

Smart Technology

Utilizing advanced tools for consultation and service.

Premium Products

We use only high-quality, professional-grade products.

Smart Salon - Services

Hair Care

Precision Haircuts

Tailored cuts for men and women, starting from $50.

Advanced Coloring

Balayage, highlights, full color, using smart analysis. Starting from $120.

Styling & Updos

Blowouts, special occasion styling. Starting from $60.

Keratin Treatments

Smooth and revitalize your hair. Starting from $250.

Spa & Beauty

Manicures & Pedicures

Classic and gel options available. Starting from $40.

Facials

Customized skin treatments. Starting from $90.

Smart Salon - Our Team

Alex Chen

Master Stylist & Color Director

With over 15 years of experience, Alex specializes in transformative color and precision cuts.

Maria Garcia

Senior Stylist & Extension Specialist

Maria is passionate about creating volume and length with seamless extensions.

Sam Taylor

Stylist & Men's Grooming Expert

Sam excels in modern men's cuts and styles, offering tailored grooming experiences.

Chloe Dubois

Lead Esthetician

Chloe provides rejuvenating skin treatments and expert beauty advice.

Smart Salon - Gallery

Balayage Beauty

Sharp Bob Cut

Elegant Updo

Vibrant Color

Men's Fade

Long Layers

Salon Interior

Styling Station

Smart Salon - Booking

Online Booking Request

Fill out the form below to request an appointment. We will contact you to confirm availability.

Name:

Email:

Phone:

Desired Service:

Preferred Stylist (Optional):

Preferred Date:

Preferred Time:

Message (Optional):

Alternatively, you can call us at 123-456-7890 to book directly.

Smart Salon - About Us

Redefining the Salon Experience

Smart Salon was founded with a vision to merge the art of hairdressing and beauty with the advancements of modern technology. We believe that personalization is key to exceptional results, and we leverage smart tools to better understand your unique needs and preferences.

Our salon provides a luxurious and comfortable environment where you can relax, rejuvenate, and leave feeling confident and beautiful. From digital hair analysis to seamless online booking and consultations, every aspect of your visit is designed for convenience and excellence.

Our Mission

To empower our clients through personalized beauty services, expert craftsmanship, and innovative technology, fostering confidence and well-being.

Our Values

Innovation: Embracing technology to enhance the client experience.
Expertise: Continuous learning and mastery of our craft.
Personalization: Tailoring every service to the individual.
Quality: Using premium products and maintaining high standards.
Client Focus: Ensuring comfort, satisfaction, and trust.

Smart Salon - Blog

5 Tips for Maintaining Vibrant Hair Color

Posted on October 26, 2023 by Alex Chen

Keeping your salon color looking fresh requires the right care. Here are our top tips...

The Rise of Smart Skincare: What You Need to Know

Posted on October 20, 2023 by Chloe Dubois

Technology is changing skincare. Learn how smart devices and analysis can improve your routine...

Fall 2023 Hair Trends We Love

Posted on October 15, 2023 by Maria Garcia

From rich copper tones to layered bobs, discover the hottest looks for the season...

Smart Salon - Contact Us

Contact Information

Address:
123 Beauty Lane
Suite 100
Tech City, TX 75001

Phone: 123-456-7890

Email: hello@smartsalon.com

Hours of Operation

Tuesday - Friday: 9:00 AM - 7:00 PM

Saturday: 9:00 AM - 5:00 PM

Sunday & Monday: Closed

Send Us a Message

Find Us

(Map integration would go here - e.g., Google Maps Embed API)

/* General Styles */ :root { --primary-color: #6a0dad; /* Purple */ --secondary-color: #b19cd9; /* Light Purple */ --accent-color: #fada5e; /* Light Gold/Yellow */ --text-color: #333; --bg-color: #ffffff; --light-gray: #f4f4f4; --dark-gray: #555; --heading-font: 'Georgia', serif; --body-font: 'Arial', sans-serif; } body { margin: 0; font-family: var(--body-font); color: var(--text-color); background-color: var(--bg-color); line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--heading-font); color: var(--primary-color); margin-bottom: 0.8em; } p { margin-bottom: 1em; } a { color: var(--primary-color); text-decoration: none; transition: color 0.3s ease; } a:hover { color: var(--secondary-color); } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; padding: 0; margin: 0; } .content-section { padding: 40px 20px; max-width: 1200px; margin: 0 auto; } /* Header & Navigation */ header { background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 1000; width: 100%; } nav { display: flex; justify-content: space-between; align-items: center; max-width: 1200px; margin: 0 auto; padding: 10px 20px; } .logo { font-family: var(--heading-font); font-size: 1.8em; font-weight: bold; color: var(--primary-color); } nav ul { display: flex; } nav ul li { margin-left: 25px; } nav ul li a { font-weight: bold; padding: 8px 12px; border-radius: 4px; transition: background-color 0.3s ease, color 0.3s ease; } nav ul li a:hover, nav ul li a.active { background-color: var(--primary-color); color: var(--bg-color); } /* Hero Section (Home Page) */ .hero { background: url('https://via.placeholder.com/1500x700/b19cd9/ffffff?text=Stylish+Salon+Background') no-repeat center center/cover; height: 70vh; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--bg-color); position: relative; } .hero::before { /* Overlay */ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.4); } .hero-content { position: relative; /* Ensure content is above overlay */ z-index: 1; max-width: 800px; padding: 20px; background-color: rgba(0, 0, 0, 0.2); /* Slight background for readability */ border-radius: 8px; } .hero h1 { font-size: 3.5em; margin-bottom: 0.3em; color: var(--bg-color); text-shadow: 2px 2px 4px rgba(0,0,0,0.5); } .hero p { font-size: 1.4em; margin-bottom: 1.5em; color: var(--bg-color); } .cta-button { display: inline-block; background-color: var(--primary-color); color: var(--bg-color); padding: 12px 25px; border-radius: 5px; font-weight: bold; text-transform: uppercase; margin: 5px; border: 2px solid var(--primary-color); transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; } .cta-button:hover { background-color: var(--secondary-color); border-color: var(--secondary-color); color: var(--bg-color); transform: translateY(-2px); } .cta-button.secondary { background-color: transparent; color: var(--bg-color); border: 2px solid var(--bg-color); } .cta-button.secondary:hover { background-color: var(--bg-color); color: var(--primary-color); border-color: var(--bg-color); } /* General Page Headers */ .page-header { padding: 60px 20px; text-align: center; color: white; background-size: cover; background-position: center; margin-bottom: 30px; position: relative; } .page-header::before { /* Overlay */ content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .page-header h1 { font-size: 3em; color: white; position: relative; z-index: 1; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); } /* Specific Page Header Backgrounds */ .services-header { background-image: url('https://via.placeholder.com/1500x300/ddd/999?text=Services+BG'); } .team-header { background-image: url('https://via.placeholder.com/1500x300/eee/aaa?text=Team+BG'); } .gallery-header { background-image: url('https://via.placeholder.com/1500x300/ccc/888?text=Gallery+BG'); } .booking-header { background-image: url('https://via.placeholder.com/1500x300/bbb/777?text=Booking+BG'); } .about-header { background-image: url('https://via.placeholder.com/1500x300/aaa/666?text=About+BG'); } .blog-header { background-image: url('https://via.placeholder.com/1500x300/999/555?text=Blog+BG'); } .contact-header { background-image: url('https://via.placeholder.com/1500x300/888/444?text=Contact+BG'); } /* Home Page Highlights */ .highlights { background-color: var(--light-gray); } .highlight-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 20px; } .card { background-color: var(--bg-color); padding: 25px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.08); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 6px 12px rgba(0,0,0,0.12); } .card h3 { color: var(--secondary-color); margin-bottom: 10px; } /* Services Page */ .service-list h2 { border-bottom: 2px solid var(--secondary-color); padding-bottom: 10px; margin-bottom: 20px; margin-top: 30px; /* Spacing between categories */ } .service-item { background-color: var(--light-gray); padding: 15px 20px; margin-bottom: 15px; border-radius: 5px; border-left: 5px solid var(--primary-color); transition: background-color 0.3s ease; } .service-item:hover { background-color: #e8e8e8; } .service-item h3 { margin-bottom: 5px; color: var(--dark-gray); } /* Team Page */ .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } .team-member-card { background-color: var(--bg-color); border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); text-align: center; padding-bottom: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .team-member-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0,0,0,0.15); } .team-member-card img { width: 100%; height: 300px; /* Fixed height */ object-fit: cover; /* Crop image nicely */ margin-bottom: 15px; } .team-member-card h3 { margin-bottom: 5px; } .team-member-card p { margin-bottom: 5px; padding: 0 15px; font-size: 0.95em; } .team-member-card p.bio { color: var(--dark-gray); font-style: italic; } /* Gallery Page */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 15px; } .gallery-item { position: relative; overflow: hidden; border-radius: 8px; cursor: pointer; } .gallery-item img { transition: transform 0.4s ease; } .gallery-item:hover img { transform: scale(1.1); } .gallery-item .overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(106, 13, 173, 0.7); /* Primary color overlay */ color: white; padding: 10px; text-align: center; opacity: 0; transform: translateY(100%); transition: opacity 0.4s ease, transform 0.4s ease; font-weight: bold; } .gallery-item:hover .overlay { opacity: 1; transform: translateY(0); } /* Booking & Contact Forms */ .booking-form-section, .contact-form-section { max-width: 600px; margin: 20px auto; /* Center form */ padding: 30px; background-color: var(--light-gray); border-radius: 8px; } .booking-form .form-group, .contact-form .form-group { margin-bottom: 20px; } .booking-form label, .contact-form label { display: block; margin-bottom: 5px; font-weight: bold; color: var(--dark-gray); } .booking-form input[type="text"], .booking-form input[type="email"], .booking-form input[type="tel"], .booking-form input[type="date"], .booking-form input[type="time"], .booking-form select, .booking-form textarea, .contact-form input[type="text"], .contact-form input[type="email"], .contact-form textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; /* Include padding in width */ font-size: 1em; } .booking-form textarea, .contact-form textarea { resize: vertical; /* Allow vertical resize */ } .booking-form button, .contact-form button { width: 100%; padding: 15px; font-size: 1.1em; } .booking-alternative { margin-top: 20px; text-align: center; font-size: 0.9em; } /* About Page */ .about-content { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: center; } .about-image img { border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .about-text ul { list-style: disc; margin-left: 20px; } .about-text ul li { margin-bottom: 10px; } /* Blog Page */ .blog-posts article { display: grid; grid-template-columns: 1fr 2fr; /* Image | Content */ gap: 30px; margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid #eee; background-color: var(--bg-color); border-radius: 8px; overflow: hidden; box-shadow: 0 3px 7px rgba(0,0,0,0.07); transition: box-shadow 0.3s ease; } .blog-posts article:hover { box-shadow: 0 6px 14px rgba(0,0,0,0.1); } .blog-posts article img { width: 100%; height: 100%; object-fit: cover; } .blog-posts .post-content { padding: 20px 20px 20px 0; /* Padding except left */ } .blog-posts h2 { margin-top: 0; margin-bottom: 10px; } .post-meta { font-size: 0.85em; color: var(--dark-gray); margin-bottom: 15px; } .read-more { display: inline-block; margin-top: 15px; font-weight: bold; color: var(--primary-color); } .read-more:hover { text-decoration: underline; } /* Contact Page */ .contact-details { display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px; } .contact-info p { margin-bottom: 15px; } .contact-info strong { color: var(--primary-color); } .map-section { margin-top: 40px; } .map-placeholder { background-color: var(--light-gray); padding: 20px; text-align: center; border-radius: 8px; margin-top: 20px; } .map-placeholder p { margin-bottom: 10px; color: var(--dark-gray); } /* Footer */ footer { background-color: var(--dark-gray); color: var(--light-gray); text-align: center; padding: 20px; margin-top: 40px; /* Add space before footer */ } footer p { margin-bottom: 10px; } .social-links a { color: var(--light-gray); margin: 0 10px; transition: color 0.3s ease; } .social-links a:hover { color: var(--accent-color); } /* Responsive Design */ @media (max-width: 992px) { .about-content, .contact-details { grid-template-columns: 1fr; /* Stack columns */ } .about-image { order: -1; } /* Move image above text on small screens */ .blog-posts article { grid-template-columns: 1fr; /* Stack image and content */ } .blog-posts article img { max-height: 250px; /* Limit image height */ } .blog-posts .post-content { padding: 20px; /* Add padding all around */ } } @media (max-width: 768px) { nav { flex-direction: column; align-items: flex-start; } nav ul { flex-direction: column; width: 100%; margin-top: 10px; } nav ul li { margin: 5px 0; width: 100%; } nav ul li a { display: block; /* Make links take full width */ text-align: center; } .hero h1 { font-size: 2.5em; } .hero p { font-size: 1.1em; } .page-header h1 { font-size: 2.2em; } .highlight-cards, .team-grid, .gallery-grid { grid-template-columns: 1fr; /* Single column */ } } This sets up the HTML structure for all 8 pages and a CSS file (`style.css`) with styling, including: * A consistent header and footer. * Basic layout and typography. * Hover effects on navigation links, buttons, cards, and gallery items. * Placeholder background images for page headers and the home page hero section. * Responsive design adjustments for smaller screens. You can now view the `index.html` file. Navigate between the pages using the header links. Remember to replace the placeholder image URLs (like `https://via.placeholder.com/...`) with your actual salon images.