services.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <link rel="stylesheet" href="style.css" />

    <!-- //font families  -->
    <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=Catamaran:wght@100..900&family=Marcellus&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap"
      rel="stylesheet"
    />

    <!-- FONT AWESOME  -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
      integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
</head>
<body>
    <header>
      <nav class="navbar">
        <img src="./Fabuluxlogocoklat.webp" alt="" />
        <ul class="links">
          <li><a href="index.html">HOME </a></li>
          <li><a href="about.html">ABOUT</a></li>
          <li><a href="services.html">SERVICES</a></li>
          <li class="dropdown">
            <a href="">PAGES <i class="fa-solid fa-chevron-down"></i></a>
            <ul class="dropdown-container">
              <li><a href="pricingplan.html">PRICING PLAN </a></li>
              <li><a href="team.html">OUR TEAM</a></li>
              <li><a href="contact.html">CONTACT US</a></li>
              <li><a href="faqs.html">FAQS</a></li>
              <li><a href="error.html">ERROR 404</a></li>
            </ul>
          </li>

          <li class="dropdown">
            <a href="#">BLOG <i class="fa-solid fa-chevron-down"></i></a>
            <ul class="dropdown-container">
              <li><a href="archive.html">ARCHIVE</a></li>
              <li><a href="blog.html">BLOG DETAIL</a></li>
            </ul>
          </li>
        </ul>

        <a href="contact.html" class="contact-btn">CONTACT US </a>
        <div class="hamburger-menu">
          <div class="hamburger"></div>
          <div class="hamburger"></div>
          <div class="hamburger"></div>
        </div>
      </nav>
    </header>

  


     <!-- SERVICES SECTION -->
    <section class="services">
      <div class="services-container">
        <div class="services-subheading">
          <h6>GET BEAUTIFUL WITH US</h6>
        </div>
        <h2>Highlight Your Natural Beauty With Us</h2>
        <p>
          Lorem ipsum , ad deserunt ex nam praesentium qui. Aperiam quos in
          natus corporis sequi deleniti ex?
        </p>
        <div class="services-box services-images-container">
          <div class="services-box cinematic-makeup-section">
            <div class="services-content-spacer"></div>
            <div class="services-content">
              <h6>DISC 15%</h6>
              <h3>Cinematic Makeup</h3>
            </div>
          </div>
          <div class="services-box fashion-makeup-section">
            <div class="services-content-spacer"></div>
            <div class="services-content">
              <h6>DISC 15%</h6>
              <h3>Fashion Makeup</h3>
            </div>
          </div>
          <div class="services-box bridal-makeup-section">
            <div class="services-content-spacer"></div>
            <div class="services-content">
              <h6>DISC 15%</h6>
              <h3>Bridal Makeup</h3>
            </div>
          </div>
          <div class="services-box hair-style-section">
            <div class="services-content-spacer"></div>
            <div class="services-content">
              <h6>DISC 15%</h6>
              <h3>Hair Style</h3>
            </div>
          </div>
        </div>

      </div>
    </section>

      <!-- TESTIMONIAL SECTION  -->
    <section class="testimonial-section">
      <div class="testimonial-container">
        <div class="quote-icon">
          <i class="fa-solid fa-quote-left"></i>
        </div>
        <div class="quote-text">
          <p>
            Lorem elit. eos voluptatibus. Magnam maxime reprehenderit quaerat
            blanditiis numquam corporis modi provident? Optio!
          </p>
        </div>
        <div class="quote-arrow">
          <i class="fa-solid fa-arrow-left"></i>
          <i class="fa-solid fa-arrow-right"></i>
        </div>
        <div class="quote-name">
          <h3>jhon Doe</h3>
          <p>Designation</p>
        </div>
        <div class="quote-button">
          <div class="quote-dot active-dot"></div>
          <div class="quote-dot"></div>
          <div class="quote-dot"></div>
        </div>
      </div>
    </section>

     <!-- PRICE SECTION  -->
    <section class="price-section">
      <div class="price-container">
         <div class="price-left">
          <div class="empty"></div>
          <div class="filled">
            <img src="./pricetreatment123.webp" alt="" />
            
            <div class="price-left-box">
            <div class="price-left-age">
              <span>12+</span>
            </div>
            <div class="price-left-text">
              <h3>Years Experience</h3>
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Dolores.
              </p>
            </div>
          </div>
          </div>

          
        </div>
        <div class="price-right">
          <div class="price-right-subheading">
            <h6>TREATMENT & PRICES</h6>
          </div>

          <h2>Because being beautiful should never harm you</h2>

          <div class="treatment-box">
            <div class="treatment-name">
              <h3>Face Treatments</h3>
              <p>There are many variation of passages</p>
            </div>
            <div class="treatment-price">
              <div></div>
              <span>$50</span>
            </div>
          </div>

          <div class="treatment-box">
            <div class="treatment-name">
              <h3>Facial & Message</h3>
              <p>Are many variations of passages of available.</p>
            </div>
            <div class="treatment-price">
              <div></div>
              <span>$50</span>
            </div>
          </div>

          <div class="treatment-box">
            <div class="treatment-name">
              <h3>Hair Treatment</h3>
              <p>Variations of passages of available</p>
            </div>
            <div class="treatment-price">
              <div></div>
              <span>$50</span>
            </div>
          </div>

          <div class="treatment-box">
            <div class="treatment-name">
              <h3>Manicure & Padicure</h3>
              <p>Many variations of passages of available</p>
            </div>
            <div class="treatment-price">
              <div></div>
              <span>$50</span>
            </div>
          </div>

          <div class="treatment-box">
            <div class="treatment-name">
              <h3>Hand/nail Moisturizer</h3>
              <p>There are many variations of passages of available</p>
            </div>
            <div class="treatment-price">
              <div></div>
              <span>$50</span>
            </div>
          </div>
        </div>
      </div>
    </section>

     <!-- APPOINTMENT SECTION  -->
    <section class="appointment-section">
      <div class="appointment-header-container">
        <div class="appointment-subheading">
          <h6>BOOK APPOINTMENT</h6>
        </div>
        <h2>
          Bringing the joy of creativity! <br />
          Book An Appointment
        </h2>
      </div>
      <div class="appointment-body-container">
        <div class="appointment-left"></div>
        <div class="appointment-right">
          <h3>
            Bringing the joy of creativity! <br />
            Book An Appointment
          </h3>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. nobis
            cupiditate, eius beatae, eligendi hic quaerat minima! sed.
          </p>
          <form class="appointment-form">
            <div class="appointment-name">
              <div class="appointment-name-box">
                <label for="fname">FIRST NAME *</label>
                <input
                  type="text"
                  name="fname"
                  id="fname"
                  placeholder="First Name"
                />
              </div>
              <div class="appointment-name-box">
                <label for="lname">LAST NAME *</label>
                <input
                  type="text"
                  name="lname"
                  id="lname"
                  placeholder="Last Name"
                />
              </div>
            </div>
            <div class="appointment-telephone-treatment">
              <div class="appointment-telephone-treatment-box">
                <label for="telephone">TELEPHONE *</label>
                <input type="number" placeholder="Telephone" id="telephone" />
              </div>
              <div class="appointment-telephone-treatment-box">
                <label for="treatment">TREATMENT *</label>
                <select name="treatment" id="treatment">
                  <option value="#"></option>
                  <option value="#">Treatment 1</option>
                  <option value="#">Treatment 2</option>
                  <option value="#">Treatment 3</option>
                  <option value="#">Treatment 4</option>
                  <option value="#">Treatment 5</option>
                  <option value="#">Treatment 6</option>
                </select>
              </div>
            </div>
            <div class="appointment-message">
              <label for="message">MESSAGE *</label>
              <textarea
                name="message"
                id="message"
                 rows="8"
                cols="10" 
                placeholder="Note"
              ></textarea>
            </div>
            <a href="#">SUBMIT BUTTON</a>
          </form>
        </div>
      </div>
    </section>


    <!-- FOOTER  -->
    <footer>
      <div class="footer-container">
        <div class="footer-image">
          <img src="./Fabuluxlogowhite.webp" alt="">
        </div>
        
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. laboriosam excepturi, numquam enim unde optio ullam aliquam asperiores.</p>
        
        <nav class="footer-links">
          <a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="services.html">Services</a>
<a href="contact.html">Contact Us</a>
<a href="blog.html">Blog</a>
        </nav>
        <div class="footer-divider"></div>
        <div class="footer-socials">
          <a href="https://www.facebook.com" class="social-link">
            <i class="fa-brands fa-facebook"></i>
          </a>
          <a href="https://www.twitter.com" class="social-link">
            <i class="fa-brands fa-twitter"></i>
          </a>
          <a href="https://www.pinterest.com" class="social-link">
            <i class="fa-brands fa-pinterest"></i>
          </a>
          <a href="https://www.linkedin.com" class="social-link">
            <i class="fa-brands fa-linkedin"></i>
          </a>
          <a href="https://www.instagram.com" class="social-link">
            <i class="fa-brands fa-instagram"></i>
          </a>
        </div>
      </div>
    </footer>
    <div class="copyright">
      <p>Copyright &copy; 2025. All rights reserved</p>
      <p>Terms & Conditions - Privacy Policy</p>
    </div>
</body>
</html>