How to Make Responsive Beauty Salon Website Using HTML5, CSS3 & JavaScript

In this tutorial, i will show you How to Make Responsive Beauty Salon Website Using HTML5, CSS3 & JavaScript. You can see demo using click below button and free source code available here

Demo / Download

Step to Make How to Create Responsive Website

To create how to make responsive website using html5, css3 and javascript, we need to follow below all steps

  • Create index file
  • Create css file
  • Need some images

1: Create Index File

First of all, we create a index.html file and paste all below code in body section

<body class="home-two">
<!--    -------- Header Start ------------- -->
  <header class="header abs-header">
    <div class="container">
      <div class="row align-items-end">
        <div class="col-md-3">
          <a href="index.html" class="logo">
            <img src="images/logo.png" alt="">
          </a>
        </div>
        <div class="col-md-9">
          <nav class="primary-menu">
            <a href="javascript:void(0);" class="mobile-menu"><i class="ti-menu"></i></a>
            <ul>
              <li><a href="index.html">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Feature</a></li>
              <li><a href="#">Service</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </header>
<!--    -------- Header End ------------- -->

<!--    -------- Banner Section Start ------------- -->
  <section class="banner">
    <div class="spa-img">
      <img src="images/beauty.png" alt="">
    </div>
    <div class="container">
      <div class="row">
        <div class="col-lg-6 col-md-9">
          <div class="banner-content">
            <span>beauty center</span>
            <h2>Beauty and success starts here.</h2>
            <p>Together creeping heaven upon third dominion be upon won't darkness rule behold it created good saw after she'd Our set living.</p>
            <a href="#" class="btn">reserve now</a>
            <a class="video-btn" data-fancybox href="https://www.youtube.com/watch?v=JrxfKDGZc8E">
              <i class="ti-control-play"></i>
              Watch our story
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>
<!--    -------- Banner Section End ------------- -->

<!--    -------- About Section Start ------------- -->
  <section class="about">
    <img src="images/china-rose.png" alt="" class="flower-1">
    <img src="images/jasmine.png" alt="" class="flower-2">

    <div class="container">
      <div class="row">
        <div class="col-lg-10 col-md-12 m-auto">
          <div class="sec-heading">
            <img src="images/butterfly.png" alt="">
            <span class="tagline">ABOUT OUR BEAUTY CENTER</span>
            <h3 class="sec-title">Come and you will be Inspired!</h3>
            <p>It’s the end of summer the sweltering heat makes human sweat in the night and makes the plants and trees wilt even in the moonlit nights. The eastern wind breeze brings an eerie feeling, that the monsoon clouds are soon coming, there is a strange silence in the ears, the sky gets darker and darker</p>
          </div>
          <a href="index.html" class="btn btn-round">Read more</a>
        </div>
      </div>
    </div>
  </section>
<!--    -------- About Section End ------------- -->

<!--    -------- Service Section Start ------------- -->
  <section class="service">
    <div class="service-caro owl-carousel">
      <div class="single-service">
        <img src="images/service/1.jpg" alt="">
        <div class="service-hover">
          <img src="images/icons/1.png" alt="">
          <span>Body Treatment</span>
        </div>
      </div>

      <div class="single-service">
        <img src="images/service/2.jpg" alt="">
        <div class="service-hover">
          <img src="images/icons/1.png" alt="">
          <span>Body Treatment</span>
        </div>
      </div>

      <div class="single-service">
        <img src="images/service/3.jpg" alt="">
        <div class="service-hover">
          <img src="images/icons/1.png" alt="">
          <span>Body Treatment</span>
        </div>
      </div>

      <div class="single-service">
        <img src="images/service/4.jpg" alt="">
        <div class="service-hover">
          <img src="images/icons/1.png" alt="">
          <span>Body Treatment</span>
        </div>
      </div>
    </div>
  </section>
<!--    -------- Service Section End ------------- -->

<!--    -------- Procedures Section Start ------------- -->
  <section class="procedures">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 m-auto">
          <div class="sec-heading">
            <h3 class="sec-title">Popular Procedures</h3>
            <p>To doesn't his appear replenish together called he of mad place won't wherein blessed second every wherein were meat kind wherein and martcin</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <article class="post">
            <img src="images/post/1.jpg" alt="">
            <h4><a href="services.html">Message Therapy</a></h4>
            <p>Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmament place which.</p>
            <a href="services.html" class="btn btn-round">read more</a>
          </article>
        </div>
        <div class="col-md-4">
          <article class="post">
            <img src="images/post/2.jpg" alt="">
            <h4><a href="services.html">Message Therapy</a></h4>
            <p>Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmament place which.</p>
            <a href="services.html" class="btn btn-round">read more</a>
          </article>
        </div>
        <div class="col-md-4">
          <article class="post">
            <img src="images/post/3.jpg" alt="">
            <h4><a href="services.html">Message Therapy</a></h4>
            <p>Living winged said you darkness you're divide gathered and bring one seasons face great dr Waters firmament place which.</p>
            <a href="services.html" class="btn btn-round">read more</a>
          </article>
        </div>
      </div>
    </div>
  </section>
<!--    -------- Procedures Section End ------------- -->

<!--    -------- Testimonial Section Start ------------- -->
  <section class="testimonial bg-lightred">
    <div class="container">
      <div class="row">
        <div class="col-lg-10 col-md-12 m-auto">
          <div class="test-caro owl-carousel">
            <div class="single-tst">
              <img src="images/quote.png" alt="">
              <p>First i beast be fruitful open you tree all Won't can't likeness and you're have whales creature seed to two grass life blessed you meat shall you winged under from their there he That you're one called gather make much red wherein set fourth green bearing fifth replenish given she had.</p>

              <div class="client-info">
                <img src="images/client-1.png" alt="" class="thumb">
                <p>Jack Marsh, <span>Executive</span></p>
              </div>
            </div>
            <div class="single-tst">
              <img src="images/quote.png" alt="">
              <p>First i beast be fruitful open you tree all Won't can't likeness and you're have whales creature seed to two grass life blessed you meat shall you winged under from their there he That you're one called gather make much red wherein set fourth green bearing fifth replenish given she had.</p>

              <div class="client-info">
                <img src="images/client-1.png" alt="" class="thumb">
                <p>Jack Marsh, <span>Executive</span></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
<!--    -------- Testimonial Section End ------------- -->

<!--    -------- Team Section Start ------------- -->
  <section class="team">
    <div class="container">
      <div class="row">
        <div class="col-lg-8 col-md-10 m-auto">
          <div class="sec-heading">
            <h3 class="sec-title">Experiences Team</h3>
            <p>To doesn't his appear replenish together called he of mad place won't wherein blessed second every wherein were meat kind wherein and martcin</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-4">
          <div class="single-memb">
            <img src="images/team/1.jpg" alt="">
            <div class="memb-details">
              <h6>Joseph Austin</h6>
              <span>Thai Message</span>

              <div class="memb-social">
                <a href="#"><i class="ti-facebook"></i></a>
                <a href="#"><i class="ti-twitter-alt"></i></a>
                <a href="#"><i class="ti-google"></i></a>
                <a href="#"><i class="ti-instagram"></i></a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="single-memb">
            <img src="images/team/2.jpg" alt="">
            <div class="memb-details">
              <h6>David Hannan</h6>
              <span>Thai Message</span>

              <div class="memb-social">
                <a href="#"><i class="ti-facebook"></i></a>
                <a href="#"><i class="ti-twitter-alt"></i></a>
                <a href="#"><i class="ti-google"></i></a>
                <a href="#"><i class="ti-instagram"></i></a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="single-memb">
            <img src="images/team/3.jpg" alt="">
            <div class="memb-details">
              <h6>Cheryl Harris</h6>
              <span>Thai Message</span>

              <div class="memb-social">
                <a href="#"><i class="ti-facebook"></i></a>
                <a href="#"><i class="ti-twitter-alt"></i></a>
                <a href="#"><i class="ti-google"></i></a>
                <a href="#"><i class="ti-instagram"></i></a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
<!--    -------- Team Section End ------------- -->

<!--    -------- Appointment Section Start ------------- -->
  <section class="appointment v2">
    <div class="appointment-wrap">
      <div class="appointment-form">
        <form accept="#">
          <div class="form-field half-width">
            <input type="text" placeholder="Name" required>
            <input type="email" placeholder="Email address" required>
          </div>
          <div class="form-field half-width">
            <div class="select-field">
              <select>
                <option>Select serivice</option>
                <option>Select serivice 1</option>
              </select>
            </div>
            <input type="tel" placeholder="Phone number">
          </div>
          <div class="form-field half-width">
            <input type="date" placeholder="date" required>
            <input type="time" placeholder="time" required>
          </div>
          <div class="form-field">
            <textarea name="notes" placeholder="Your notes"></textarea>
          </div>
          <button class="btn btn-round">Make an Appointment</button>
        </form>
      </div>
    </div>
  </section>
<!--    -------- Appointment Section End ------------- -->

<!--    -------- Footer Section Start ------------- -->
  <footer class="footer">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center">
          <a href="index.html" class="logo foo-logo">
            <img src="images/logo.png" alt="">
          </a>
          <nav class="foo-nav">
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Feature</a></li>
              <li><a href="#">Service</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </nav>
          <div class="foo-social">
            <a href="#"><i class="ti-facebook"></i></a>
            <a href="#"><i class="ti-twitter-alt"></i></a>
            <a href="#"><i class="ti-vimeo-alt"></i></a>
            <a href="#"><i class="ti-instagram"></i></a>
          </div>
          <p class="copyright">&copy; COPYRIGHT 2019 <a href="hhtps:\\teswesm.com">teswesm.com</a> ALL RIGHTS RESERVED.</p>
        </div>
      </div>
    </div>
  </footer>
<!--    -------- Footer Section End ------------- -->


  <!-- JS -->
  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/jquery.fancybox.min.js"></script>
  <script src="js/scripts.js"></script>
</body>

In above code, we create a multiple section which already defined by comment line.

2: Create Css File

Now create a style.css file and you can get code of css from source code using click on Download button because code is too much long.

3: Need Some Images

You can also get all images from source code using click on Download button

Conclusion

Today we learnt how to make a responsive beauty salon website using html5, css3 and javascript. You can use this code to make own website.

If you found this tutorial helpful, share it with your friends and developers group.

Demo / Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

Related Tags:

  • blush-beauty-salon-responsive-website-template-free-download
  • how to create a website using html5 and css3
  • beauty parlour website templates free
  • beauty-spa – responsive website template free download
  • how to create a responsive website using html5 css3 and bootstrap
  • professional website templates free download html with css
  • free bootstrap templates for beauty salon

Leave a Reply

Your email address will not be published. Required fields are marked *