LuxurySpa - Landing Page Template for SaaS

1.Introduction

This documentation will give you an understanding of how the LuxurySpa template is structured and guide you in performing common functions.

Notes:

We will not respond to any support questions in the Item comment section or through e-mail. If this document doesn’t answer your questions feel free to open up a private ticket in our support forum
For questions on basic HTML, Javascript, or CSS editing – please give your question a quick Google or visit W3Schools as template issues get top priority.
You will need some basic knowledge of HTML/CSS to edit the template.
For customization service contact us at our support forum

1.1.Installation

Follow the steps below to get started with your Site Template:

Open the ... /template Folder to find all the Templates Files
You will need to Upload these files to your Web Server using FTP (We suggest Filezilla) to use it on your Website.
Make sure you upload the required files/folders listed below:
- template/css – Stylesheets Folder
- template/fonts – Fonts Folder
- template/images – Images Folder
- template/js – Java Scripts Folder
- template/scss – All SCSS Files
- template/index.html – Main home file
- template/..... – All HTML files
The other files can be used according to your preferences.
You’re now good to go..! Start editing your site and show off your Brand New Website with proud.

Note: For correct operation of all functions of the template, including Contact forms, you must upload the template to the web-server.

1.2.Basic template Structure

The template has a responsive layout and is based on the Bootstrap V5 Framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. Click Here to know more about Bootstrap.

HTML Structure

Here is the general HTML structure of the template:

<!DOCTYPE html>
<html lang="en">
<head>
[Page meta, page css, page title etc...]
</head>
<body>
<!--header -->
<header class="header header-sticky default">
<nav class="navbar navbar-static-top navbar-expand-lg">
[MENU CONTENT]
</nav>
</header>
<!--header -->

<!-- Banner -->
<section class="slider-01 banner-01 space-pb">
[BANNER CONTENT]
</section>
<!-- Banner -->

<!--About us -->
<section class="about space-pt">
[SECTION 1 CONTENT]
</section>
<!--About us -->

<!--Category -->
<section class="category-section space-ptb position-relative px-md-5">
[SECTION 2 CONTENT]
</section>
<!--Category -->

<!--Features -->
<section class="bg-dark">
[SECTION 3 CONTENT]
</section>
<!--Features -->

<!--Menu list -->
<section class="space-ptb position-relative">
[SECTION 4 CONTENT]
</section>
<!--Menu list -->

<!--Video banner -->
<section class="space-ptb video-section bg-holder">
[SECTION 5 CONTENT]
</section>
<!--Video banner -->

<!--Team -->
<section class="space-ptb position-relative">
[SECTION 6 CONTENT]
</section>
<!--Team -->

<!--Testimonial -->
<section class="bg-primary">
[SECTION 7 CONTENT]
</section>
<!--Testimonial -->

<!--blog post -->
<section class="space-ptb position-relative">
[SECTION 8 CONTENT]
</section>
<!--blog post -->

<!--footer -->
<footer class="footer">
[FOOTER_CONTENT]
</footer>
<!--footer -->

<!--Javascript -->
[PAGE JAVASCRIPTS HERE]
</body>
</html>

CSS Structure

Here is the general CSS structure of the template:

<!-- CSS Global Compulsory (Do not remove)-->
<link rel="stylesheet" href="css/font-awesome/all.min.css" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<!-- Page CSS Implementing Plugins (Remove the plugin CSS here if site does not use that feature)-->
<link rel="stylesheet" href="css/owl-carousel/owl.carousel.min.css" />
<link rel="stylesheet" href="css/select2/select2.css" />
<link rel="stylesheet" href="css/datetimepicker/datetimepicker.min.css" />
<link rel="stylesheet" href="css/swiper/swiper.min.css" />
<link rel="stylesheet" href="css/animate/animate.min.css"/>
<!-- Template Style -->
<link rel="stylesheet" href="css/style.css"/>

all.min.css: This is a Font-awesome CSS.
bootstrap.min.css: This is a Bootstrap V5 CSS file. You must need this file. Do not remove this.
owl.carousel.min.css: This is an owl carousel plugins CSS.
select2.css: This is a select2 dropdown CSS.
datetimepicker.min: This is a date time picker CSS.
swiper.min.css: This is a swiper slider plugins CSS.
animate.min.css: This is a animate animation plugins CSS.
style.css: This is a main stylesheet of the template, This file contains the styling for the actual Template.

Javascript Structure

Here is the general Javascript structure of the template:

<!-- JS Global Compulsory (Do not remove)-->
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/popper/popper.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<!-- Page JS Implementing Plugins (Remove the plugin script here if site does not use that feature)-->
<script src="js/jquery.appear.js"></script>
<script src="js/counter/jquery.countTo.js"></script>
<script src="js/owl-carousel/owl.carousel.min.js"></script>
<script src="js/swiper/swiper.min.js"></script>
<script src="js/swiperanimation/SwiperAnimation.min.js"></script>
<script src="js/select2/select2.full.js"></script>
<script src="js/datetimepicker/moment.min.js"></script>
<script src="js/datetimepicker/datetimepicker.min.js"></script>
<!-- Template Scripts (Do not remove)-->
<script src="js/custom.js"></script>

jquery.js: This is a JavaScript library file. You must need this file to run any javascript. Do not change or edit this file.
popper.min.js: This is a popper plugins file. Use to Tooltip. Do not change or edit this file.
bootstrap.min.js: This is a bootstrap plugins file. Use to Bootstrap Library JavaScript. Do not change or edit this file.
owl-carousel.min.js: This is the owl-carousel plugins file. Use for slider. Do not change or edit this file.
jquery.appear.js: This is appear plugins file. Do not change or edit this file.
jquery.countTo.js: This is the countTo plugins file. Usef for Count Number. Do not change or edit this file.
swiper.min.js: This is the swiper slider plugins file. Used for Banner Slider. Do not change or edit this file
SwiperAnimation.min.js: This is the wiper slider animation plugin file. Used for Banner Slider animation. Do not change or edit this file
js/datetimepicker/moment.min.js: This is a moment plugins file. Use to time picker. Do not change or edit this file.
js/datetimepicker/datetimepicker.min.js: This is a date time picker plugins file. Use to the date picker. Do not change or edit this file.
js/select2/select2.full.js: This is a select2 plugins file. Use to convert select tag to ul tag. Do not change or edit this file.
custom.js: This File includes all small scripts from the template. All script has commented code so you can easily remove unnecessary code from this file. Make sure you remove/add proper files before you remove or add anything in this file.

1.3.Compiling SCSS

Overview

SCSS is perhaps the most popular of the CSS pre-processors; for years it’s helped us write clean, reusable and modular CSS. In this quick tutorial, I’ll cut straight to the stuff that matters and explain how to compile Sass into CSS using the command line.

Install Node.js

To compile Sass via the command line, first, we need to install node.js. Download it from the official website nodejs.org, open the package and follow the wizard.

Gulp

Gulp is the task manager that is used to automate the task for easy development. Template is divided into different parts for which different gulp task is created.

1. If you have not installed gulp globally then please it using the below command.

npm install gulp-cli -g

2. Now install all the dependencies required for the project go inside the folder where /gulpfile.js is located and run the below command.

npm install

This will install all the dependencies from the package manager.

3. Run the project using the below command this will process all the scss files and js files and will auto start the browser.

gulp

1.4.Favicon icon

Favicon is an icon associated with the URL that is displayed at various places, such as in a browser’s address bar or next to the site name in a bookmark list. There are many online favicon icon generators to generate .ico file. You can also use .png file

You can add a Favicon to your Website using the following code:

<link rel="shortcut icon" href="images/favicon.ico" />

1.5.Logo Settings

The Logo can be found in the Header – .header. Replace "logo.png" with your own logo image.

<a class="navbar-brand" href="index.html">
  <img class="img-fluid" src="images/logo.svg" alt="logo">
</a>

How to change logo height?

You can set the height according to your logo type and your requirement.

CSS

To set logo height open css/style.css file and change height value in .navbar-brand img class, default value of logo height is 70px.
For responsive logo height open css/style.css file and change height value in .navbar-brand img class in the 991 media query, the default value of logo height in responsive is 50px.

SCSS

To set logo height open scss/header.scss file and change height value in .navbar-brand img class, default value of logo height is 70px.
For responsive logo height open scss/responsive.scss file and change height value in .navbar-brand img class in the 991 media query, the default value of logo height in responsive is 50px.

If you change logo height then header height will automatically increase and the menu will set vertically center.

1.6.Color Schemes

You can change your Website’s Color Scheme in an instant. There are 2 super easy options to change your website color.

1. CSS method: If you want to change the color go to (css/style.css) and Replace the primary color HEX code with your color HEX code. Default color HEX code is #f2a68d

2. SCSS method: If you want to change the color go to (scss/variables.scss) and change color HEX codes as per your needs.

$body-color: #666666; (ex: change color code #f5f5f5 )
$primary:#f2a68d;
$white:#ffffff;

1.7.Changing Fonts

You can add/change the site font, from all fonts used from Google Web Font Services, with the one that suits you the best. You can find the font code in the head a tag of all HTML files:

<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">

Or add an | separator and paste Playfair+Display:400,500,600,700,800,800 after default website fonts link.

CSS

Now open css/style.css and change your font family with the current.

To change the fonts, you will need to edit the above links with your custom font, if you plan to use a Google Font or remove it completely. If you plan to use a self-hosted font, here is an example of using Self Hosted Fonts

SCSS

Now open scss/variables.scss and change your font family with the current.

// Font Variables
$font-base: 	'Montserrat', sans-serif;
$font-hedding:	'Cormorant Garamond', serif;

// Styles
body {
  font-family: $font-base;
  font-weight: normal;
}

2.2.Sticky header

When you scroll down, the Sticky Header “sticks” to the top of the window.

To enable the sticky header, you need to add is-sticky class in the nav tag of all html files. Please see below code example:

<header class="header header-sticky default is-sticky">
</header>

3.1.Page section padding

You can add this helper class to set section padding top 100px and padding bottom 100px.
Add space-ptb class in section tag. See example below:

<section class="... space-ptb">
  [YOUR CONTENT]
</section>

Note Use this helper class to maintain all page section spacing. You can also use space-pt for only padding top and space-pb for only padding bottom.

3.2.Text color

You can use color in the Text. simply add text-primary class where you want to apply Red (theme color) color. See example below:

<div class="text-primary">
  [YOUR TEXT CONTENT]
</div>

Note We followed the bootstrap helper class in our template. So you can use any bootstrap helper classes in our template as per your need. For text color, you can use bootstrap color helper classes

3.3.Background color

To use background color simply add bg-primary class where you want to apply green (theme bg color) color. See example below:

<div class="bg-primary">
  [YOUR TEXT CONTENT]
</div>

Note We followed the bootstrap helper class in our template. So you can use any bootstrap helper classes in our template as per your need. For the background color, you can use bootstrap Background color helper classes

3.4.Background Images

You can use an image in the background with parallax effect with simply add InlineStyle in any tag and by use of this you can create your own bg. See example below:

<div style="background-image:url(Path); ">[YOUR CONTENT]</div>

If you want to use your background like cover or cointainer so, you just add styling property background-size and set the value cover or cointainer. see the example below:

<div style="background-image:url(Path); background-size:cover;">[YOUR CONTENT]</div>

3.5.Background parallax

You can use an image in the background with parallax effect with simply add Inline Data See example below:

<section class="bg-holder" data-jarallax='{"speed": 0.6}' style="background-image:url(Path)"></section>

Note You must need bg-holder class to set background parallax. With data-jarallax='{"speed": 0.6} you can set parallax speed.

3.6.Background overlay

You can add bg-overlay-theme-10 class to any element in your HTML code to apply overlay color on any image or any section. See example below:

<div class="bg-overlay-theme-10">
	[YOUR CONTENT]
</div>

Here are some predefined overlay classes you can use:

Class	Description	Class	Description
`bg-overlay-theme-10`	Apply primary color overlay with 0.10 overlay	`bg-overlay-theme-20`	Apply primary color overlay with 0.20 overlay
`bg-overlay-theme-30`	Apply primary color overlay with 0.30 overlay	`bg-overlay-theme-40`	Apply primary color overlay with 0.40 overlay
`bg-overlay-theme-50`	Apply primary color overlay with 0.50 overlay	`bg-overlay-theme-60`	Apply primary color overlay with 0.60 overlay
`bg-overlay-theme-70`	Apply primary color overlay with 0.70 overlay	`bg-overlay-theme-80`	Apply primary color overlay with 0.80 overlay
`bg-overlay-theme-90`	Apply primary color overlay with 0.90 overlay
`bg-overlay-secondary-10`	Apply black color overlay with 0.10 overlay	`bg-overlay-secondary-20`	Apply black color overlay with 0.20 overlay
`bg-overlay-secondary-30`	Apply black color overlay with 0.30 overlay	`bg-overlay-secondary-40`	Apply black color overlay with 0.40 overlay
`bg-overlay-secondary-50`	Apply black color overlay with 0.50 overlay	`bg-overlay-secondary-60`	Apply black color overlay with 0.60 overlay
`bg-overlay-secondary-70`	Apply black color overlay with 0.70 overlay	`bg-overlay-secondary-80`	Apply black color overlay with 0.80 overlay
`bg-overlay-secondary-90`	Apply black color overlay with 0.90 overlay
`bg-overlay-white-10`	Apply white color overlay with 0.10 overlay	`bg-overlay-white-20`	Apply white color overlay with 0.20 overlay
`bg-overlay-white-30`	Apply white color overlay with 0.30 overlay	`bg-overlay-white-40`	Apply white color overlay with 0.40 overlay
`bg-overlay-white-50`	Apply white color overlay with 0.50 overlay	`bg-overlay-white-60`	Apply white color overlay with 0.60 overlay
`bg-overlay-white-70`	Apply white color overlay with 0.70 overlay	`bg-overlay-white-80`	Apply white color overlay with 0.80 overlay
`bg-overlay-white-90`	Apply white color overlay with 0.90 overlay

Note You can create your own helper classes by creating the class in the stylesheet as per your requirement. This helper class only supports RGBA color values.

3.7.Text align

You can add this helper class to any element in your HTML code to set text-align

Class	Description
`text-start`	text-align: left;
`text-end`	text-align: right;
`text-center`	text-align: center;

3.8.Label

You can add this helper class to any element in your HTML code to make a badge(label). Simply add badge and bg-danger (or any class given below) class where you want to add a badge. See the example below:

<span class="badge bg-danger">badge name</span>

Here are some default badges you can use or you can make your own badge as per your requirement.

Class	Description
`badge bg-primary`	primary badge
`badge bg-secondary`	secondary badge
`badge bg-success`	Success badge
`badge bg-danger`	danger badge
`badge bg-warning`	Warning badge
`badge bg-info`	info badge
`badge bg-light`	light badge
`badge bg-dark`	dark badge

5.1.Accordion

Use the below code to display accordion:

Accordion

<div class="accordion" id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="accordion-title mb-0">
      <button class="btn btn-link d-flex align-items-center me-auto" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">[ Accordation Name ]</button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show accordion-content" aria-labelledby="headingOne" data-bs-parent="#accordion">
      <div class="card-body">
        <p class="mb-2">[ Accordation Description ]</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingthree">
      <h5 class="accordion-title mb-0">
      <button class="btn btn-link d-flex align-items-center me-auto collapsed" data-bs-toggle="collapse" data-bs-target="#collapsethree" aria-expanded="false" aria-controls="collapsethree">[ Accordation Name ]</button>
      </h5>
    </div>
    <div id="collapsethree" class="collapse accordion-content" aria-labelledby="headingthree" data-bs-parent="#accordion">
      <div class="card-body">
        <p class="mb-2">[ Accordation Description ]</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingfour">
      <h5 class="accordion-title mb-0">
      <button class="btn btn-link d-flex align-items-center me-auto collapsed" data-bs-toggle="collapse" data-bs-target="#collapsefour" aria-expanded="false" aria-controls="collapsefour">[ Accordation Name ]</button>
      </h5>
    </div>
    <div id="collapsefour" class="collapse accordion-content" aria-labelledby="headingfour" data-bs-parent="#accordion">
      <div class="card-body">
        <p class="mb-2">[ Accordation Description ]</p>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingfive">
      <h5 class="accordion-title mb-0">
      <button class="btn btn-link d-flex align-items-center me-auto collapsed" data-bs-toggle="collapse" data-bs-target="#collapsefive" aria-expanded="false" aria-controls="collapsefive">[ Accordation Name ]</button>
      </h5>
    </div>
    <div id="collapsefive" class="collapse accordion-content" aria-labelledby="headingfive" data-bs-parent="#accordion">
      <div class="card-body">
        <p class="mb-0">[ Accordation Description ]</p>
    </div>
    </div>
  </div>
</div>

Note Make sure you use unique IDs for each accordion Item and accordion content.

5.8.Counter

Use the below code to display Counter:

Counter

<div class="row">
  <div class="col-lg-3 col-sm-6">
    <div class="counter">
      <div class="counter-content">
        <span class="timer" data-to="150" data-speed="10000">[ Your Counter Number ]</span>
        <label class="text-white">[ YOUR TITLE ]</label>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-sm-6">
    <div class="counter">
      <div class="counter-content">
        <span class="timer" data-to="100" data-speed="10000">[ Your Counter Number ]</span>
        <label class="text-white">[ YOUR TITLE ]</label>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-sm-6 ">
    <div class="counter">
      <div class="counter-content">
        <span class="timer" data-to="30" data-speed="10000">[ Your Counter Number ]</span>
        <label class="text-white">[ YOUR TITLE ]</label>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-sm-6">
    <div class="counter">
      <div class="counter-content">
        <span class="timer" data-to="50" data-speed="10000">[ Your Counter Number ]</span>
        <label class="text-white">[ YOUR TITLE ]</label>
      </div>
    </div>
  </div>
</div>

5.9.Countdown

You can add Countdown Timer to any Page. You can prefer to use Countdown Timer for “Coming Soon Page” or “Product Countdown Page”. Use the below code to display the countdown Timer:

Countdown

<div class="row">
  <div class="col-lg-12">
    <div class="countdown">
      <span class="days">00</span>
      <p class="days_ref">Days</p>
    </div>
    <div class="countdown">
      <span class="hours">00</span>
      <p class="hours_ref">Hours</p>
    </div>
    <div class="countdown">
      <span class="minutes">00</span>
      <p class="minutes_ref">Minutes</p>
    </div>
    <div class="countdown">
      <span class="seconds">00</span>
      <p class="seconds_ref">Seconds</p>
    </div>
  </div>
</div>

Also, update date in custom.js file as per your requirement:

POTENZA.countdownTimer = function () {
if ($countdownTimer.exists()) {
$countdownTimer.downCount({
date: '12/31/2024 12:00:00', // Month/Date/Year HH:MM:SS
offset: -4
});
}
}

Note date: '12/31/2024 12:00:00' is the default date and time, you can change it as per your requirement

5.20.Testimonials

Use the below code to display testimonials:

Testimonial

<div class="owl-carousel owl-nav-bottom-center" data-nav-dots="false" data-nav-arrow="false" data-items="1" data-lg-items="1" data-md-items="1" data-sm-items="1"  data-space="30" data-autoheight="true">
  <div class="item">
    <div class="testimonial text-center mt-0">
      <div class="testimonial-quote-icon">
        <img class="img-fluid" src="images/testimonial/quote.svg" alt="">
      </div>
      <div class="testimonial-info">
        <div class="testimonial-content">[ YOUR CONTENT ]</div>
      </div>
      <div class="testimonial-details">
        <div class="testimonial-name">
          <h6 class="author-name">[ Author Name ]</h6>
          <span class="text-primary">[ Author Designation ]</span>
        </div>
        <div class="avatar">
          <img class="img-fluid" src="images/testimonial/01.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="testimonial text-center mt-0">
      <div class="testimonial-quote-icon">
        <img class="img-fluid" src="images/testimonial/quote.svg" alt="">
      </div>
      <div class="testimonial-info">
        <div class="testimonial-content">[ YOUR CONTENT ]</div>
      </div>
      <div class="testimonial-details">
        <div class="testimonial-name">
          <h6 class="author-name">[ Author Name ]</h6>
          <span class="text-primary">[ Author Designation ]</span>
        </div>
        <div class="avatar">
          <img class="img-fluid" src="images/testimonial/02.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="item">
    <div class="testimonial text-center mt-0">
      <div class="testimonial-quote-icon">
        <img class="img-fluid" src="images/testimonial/quote.svg" alt="">
      </div>
      <div class="testimonial-info">
        <div class="testimonial-content">[ YOUR CONTENT ]</div>
      </div>
      <div class="testimonial-details">
        <div class="testimonial-name">
          <h6 class="author-name">[ Author Name ]</h6>
          <span class="text-primary">[ Author Designation ]</span>
        </div>
        <div class="avatar">
          <img class="img-fluid" src="images/testimonial/04.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

5.21. Team

Use the below code to display Team:

Team

<div class="row">
  <div class="col-lg-3 col-sm-6 mb-4 mb-lg-0">
    <div class="team">
      <div class="team-img">
        <img class="img-fluid" src="images/team/01.jpg" alt="">
      </div>
      <div class="team-content">
        <p class="team-description">[ Team Member Designation ]</p>
        <h5 class="team-name"><a href="#">[ Team Member Name ]</a></h5>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-sm-6 mb-4 mb-lg-0">
    <div class="team">
      <div class="team-img">
        <img class="img-fluid" src="images/team/02.jpg" alt="">
      </div>
      <div class="team-content">
        <p class="team-description">[ Team Member Designation ]</p>
        <h5 class="team-name"><a href="#">[ Team Member Name ]</a></h5>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-sm-6 mb-4 mb-sm-0">
    <div class="team">
      <div class="team-img">
        <img class="img-fluid" src="images/team/03.jpg" alt="">
      </div>
      <div class="team-content">
        <p class="team-description">[ Team Member Designation ]</p>
        <h5 class="team-name"><a href="#">[ Team Member Name ]</a></h5>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-sm-6">
    <div class="team">
      <div class="team-img">
        <img class="img-fluid" src="images/team/04.jpg" alt="">
      </div>
      <div class="team-content">
        <p class="team-description">[ Team Member Designation ]</p>
        <h5 class="team-name"><a href="#">[ Team Member Name ]</a></h5>
      </div>
    </div>
  </div>
</div>

5.21. List

Use the below code to display the list:

List

<ul class="list">
  <li><i class="fa fa-check"></i>[ YOUR CONTENT ]</li>
  <li><i class="fa fa-check"></i>[ YOUR CONTENT ]</li>
  <li><i class="fa fa-check"></i>[ YOUR CONTENT ]</li>
</ul>

5.21.Menu List

Use the below code to display the list:

Menu List

<div class="row">
<div class="col-md-12 col-lg-6 mt-4">
  <div class="menu-list menu-list-default">
    <div class="menu-icon">
      <img class="img-fluid" src="images/menu/body-massage.png" alt="">
    </div>
    <div class="menu-details">
      <div class="menu-title">
        <a href="#">[ MENU TITLE ]</a>
        <p>[ YOUR CONTENT ]</p>
      </div>
      <div class="menu-border"></div>
      <div class="menu-price">
        <span class="price-min">[ MENU PRICE MAIN ]</span>
        <span>[ MENU PRICE ]</span>
      </div>
    </div>
  </div>
  <div class="menu-list menu-list-default">
    <div class="menu-icon">
      <img class="img-fluid" src="images/menu/face-masks.png" alt="">
    </div>
    <div class="menu-details">
      <div class="menu-title">
        <a href="#">[ MENU TITLE ]</a>
        <p>[ YOUR CONTENT ]</p>
      </div>
      <div class="menu-border"></div>
      <div class="menu-price">
        <span class="price-min">[ MENU PRICE MAIN ]</span>
        <span>[ MENU PRICE ]</span>
      </div>
    </div>
  </div>
  <div class="menu-list menu-list-default">
    <div class="menu-icon">
      <img class="img-fluid" src="images/menu/nail-treatments.png" alt="">
    </div>
    <div class="menu-details">
      <div class="menu-title">
        <a href="#">[ MENU TITLE ]</a>
        <p>[ YOUR CONTENT ]</p>
      </div>
      <div class="menu-border"></div>
      <div class="menu-price">
        <span class="price-min">[ MENU PRICE MAIN ]</span>
        <span>[ MENU PRICE ]</span>
      </div>
    </div>
  </div>
  <div class="menu-list menu-list-default">
    <div class="menu-icon">
      <img class="img-fluid" src="images/menu/aroma-therapy.png" alt="">
    </div>
    <div class="menu-details">
      <div class="menu-title">
        <a href="#">[ MENU TITLE ]</a>
        <p>[ YOUR CONTENT ]</p>
      </div>
      <div class="menu-border"></div>
      <div class="menu-price">
        <span class="price-min">[ MENU PRICE MAIN ]</span>
        <span>[ MENU PRICE ]</span>
      </div>
    </div>
  </div>
</div>
<div class="col-md-12 col-lg-6 mt-5 mt-lg-4">
  <div class="menu-list menu-list-default">
    <div class="menu-icon">
      <img class="img-fluid" src="images/menu/skincare.png" alt="">
    </div>
    <div class="menu-details">
      <div class="menu-title">
        <a href="#">[ MENU TITLE ]</a>
        <p>[ YOUR CONTENT ]</p>
      </div>
      <div class="menu-border"></div>
      <div class="menu-price">
        <span class="price-min">[ MENU PRICE MAIN ]</span>
        <span>[ MENU PRICE ]</span>
      </div>
    </div>
  </div>
  <div class="menu-list menu-list-default">
    <div class="menu-icon">
      <img class="img-fluid" src="images/menu/relaxation.png" alt="">
    </div>
    <div class="menu-details">
      <div class="menu-title">
        <a href="#">[ MENU TITLE ]</a>
        <p>[ YOUR CONTENT ]</p>
      </div>
      <div class="menu-border"></div>
      <div class="menu-price">
        <span class="price-min">[ MENU PRICE MAIN ]</span>
        <span>[ MENU PRICE ]</span>
      </div>
    </div>
  </div>
  <div class="menu-list menu-list-default">
    <div class="menu-icon">
      <img class="img-fluid" src="images/menu/medical-treatments.png" alt="">
    </div>
    <div class="menu-details">
      <div class="menu-title">
        <a href="#">[ MENU TITLE ]</a>
        <p>[ YOUR CONTENT ]</p>
      </div>
      <div class="menu-border"></div>
      <div class="menu-price">
        <span class="price-min">[ MENU PRICE MAIN ]</span>
        <span>[ MENU PRICE ]</span>
      </div>
    </div>
  </div>
  <div class="menu-list menu-list-default">
    <div class="menu-icon">
      <img class="img-fluid" src="images/menu/face-treatments.png" alt="">
    </div>
    <div class="menu-details">
      <div class="menu-title">
        <a href="#">[ MENU TITLE ]</a>
        <p>[ YOUR CONTENT ]</p>
      </div>
      <div class="menu-border"></div>
      <div class="menu-price">
        <span class="price-min">[ MENU PRICE MAIN ]</span>
        <span>[ MENU PRICE ]</span>
      </div>
    </div>
  </div>
</div>
</div>

5.21.Pricing

Use the below code to display pricing:

Pricing

<div class="row">
<div class="col-md-4 pb-4 pb-md-0">
  <div class="pricing-plan text-center">
    <div class="pricing-price">
      <span class="pricing-title">[ PRICING PLAN ]</span>
      <h3 class="price"><strong>[ PRICING PRICE ]</strong><sub> /mo</sub></h3>
    </div>
    <div class="pricing-icon">
      <img class="img-fluid" src="images/pricing-plan/01.jpg" alt="">
    </div>
    <div class="pricing-list">
      <p>We also know those epic stories, those modern-day legends surrounding the early.</p>
      <a href="#" class="btn mt-4"><span>Purchase Now</span></a>
    </div>
  </div>
</div>
<div class="col-md-4 pb-4 pb-md-0">
  <div class="pricing-plan text-center">
    <div class="pricing-price">
      <span class="pricing-title">[ PRICING PLAN ]</span>
      <h3 class="price"><strong>[ PRICING PRICE ]</strong><sub> /mo</sub></h3>
    </div>
    <div class="pricing-icon">
      <img class="img-fluid" src="images/pricing-plan/02.jpg" alt="">
    </div>
    <div class="pricing-list">
      <p>We also know those epic stories, those modern-day legends surrounding the early.</p>
      <a href="#" class="btn mt-4">
        <span>Purchase Now</span>
      </a>
    </div>
  </div>
</div>
<div class="col-md-4">
  <div class="pricing-plan text-center">
    <div class="pricing-price">
      <span class="pricing-title">[ PRICING PLAN ]</span>
      <h3 class="price"><strong>[ PRICING PRICE ]</strong><sub> /mo</sub></h3>
    </div>
    <div class="pricing-icon">
      <img class="img-fluid" src="images/pricing-plan/03.jpg" alt="">
    </div>
    <div class="pricing-list">
      <p>We also know those epic stories, those modern-day legends surrounding the early.</p>
      <a href="#" class="btn mt-4"><span>Purchase Now</span></a>
    </div>
  </div>
</div>
</div>

5.21.Nav Tabs

Use the below code to display nav tabs:

Nav Tabs

<div class="row mt-5">
<div class="col-lg-12">
    <!-- tabs-nav -->
    <ul class="shop-tabs nav nav-tabs nav-tabs-02" id="myTab" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="description-tab" data-bs-toggle="tab" href="#description" role="tab" aria-controls="description" aria-selected="true">Description</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="tab-reviews" data-bs-toggle="tab" href="#reviews" role="tab" aria-controls="reviews" aria-selected="false">Reviews (4)</a>
      </li>
      <li class="nav-item">
        <a class="nav-link mb-0" id="custom-tab" data-bs-toggle="tab" href="#custom" role="tab" aria-controls="custom" aria-selected="false">Custom Tab</a>
      </li>
    </ul>
    <!-- tabs-nav -->
    <!-- tab-content -->
    <div class="tab-content mt-5" id="myTabContent">
      <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
        <div class="row">
          <div class="col-sm-12">
            [ Tab content ]
          </div>
        </div>
      </div>

      <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="tab-reviews">
        <div class="row">
          <div class="col-12">
            [ Tab content ]
          </div>
        </div>
      </div>

      <div class="tab-pane fade" id="custom" role="tabpanel" aria-labelledby="custom-tab">
        <div class="row">
          <div class="col-12">
            [ Tab content ]
          </div>
        </div>
      </div>
    </div>
    <!-- tab-content -->
  </div>
</div>

2.#Extra

2.1.Browser Support

LuxurySpa supports all major browsers like Google Chrome, Mozilla Firefox, Safari, Opera, Microsoft Edge.

2.2.How to rate this item

If you like our theme and support, Please do not forget to rate it with 5 stars in your Downloads section and write a review in Comments as it will add more value to our services!

Kindly visit here: http://themeforest.net/downloads and find “Rate this item” below the download button and rate out the theme.

Advance Thanks in Anticipation!

3.Source & Credits

All images and videos are for preview purposes only and are not included in the download files. Images are of copyrights under Creative Commons CC0.

Images

Shutterstock Shutterstock
Pexels Pexels
Freepik Freepik
Unsplash Unsplash

JavaScripts

CSS & Fonts

Bootstrap
Font Awesome
Google Fonts
— Libre Baskerville
and more…