Samantha - Personal Trainer & Fitness HTML5 Template
by: bslthemes
Thank you for your purchase. If you have any questions, mail me to - beshleyua@gmail.com
File structure
After unpacking archive, you'll see this structure:
html/
│
├──doc/
├──template/
│──│──css/
│──│──img/
│──│──js/
│──│──│──aos.js
│──│──│──beforeafter.js
│──│──│──custom.js
│──│──│──jquery-3.6.0.min.js
│──│──│──jquery-weekdays.min.js
│──│──│──jquery.fancybox.min.js
│──│──│──jquery.nice-select.min.js
│──│──│──jquery.quinn.min.js
│──│──│──jquery.slim.min.js
│──│──│──owl.carousel.min.js
│──│──│──range-slider.js
│──│──│──underscore-1.3.1.js
│──│──404.html
│──│──about.html
│──│──apointment-1.html
│──│──apointment-2.html
│──│──blog-details.html
│──│──blog-style-1.html
│──│──blog-style-2.html
│──│──contact.html
│──│──index.html
│──│──online-schedule.html
│──│──portfolio-details.html
│──│──portfolio.html
│──│──pricing-table.html
│──│──schedule.html
-
css/ - all CSS styles for template
-
css/style.css - main CSS styles for template
-
js/ - all JS library for template
- js/custom.js - main JS for template
Settings
Include of fonts
To use fonts, you must add @import in '/css/style.css' file:
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
Next step is to replace "font-family: '...';" to your fonts names.
Edit Icons
In this template are defined some of classes for icons, see all icons here - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free, use search and select icons.
Copy icon class (for example "fas fa-code") and add to tag in html file like this:
<i class="fas fa-pencil-ruler"></i>
HTML structure
<!DOCTYPE html>
<html lang="zxx">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Samantha - index</title>
<link rel="icon" href="img/logo-icon.png">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- owl carousel -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- fancybox -->
<link rel="stylesheet" href="css/jquery.fancybox.min.css">
<!-- aos -->
<link rel="stylesheet" href="css/aos.css">
<!-- nice-select -->
<link rel="stylesheet" href="css/nice-select.css">
<!-- style -->
<link rel="stylesheet" href="css/style.css">
<!-- responsive -->
<link rel="stylesheet" href="css/responsive.css">
<!-- color -->
<link rel="stylesheet" href="css/color.css">
<!-- Font Awesome 5 -->
<script src="https://kit.fontawesome.com/27a041baf1.js" crossorigin="anonymous"></script>
</head>
<body class="menu-layer">
<div class="page-loader">
<div class="spinner"></div>
<div class="txt">Samantha</div>
</div>
<header>
...
</header>
<section class="featured-one" style="background-image: url(./img/blur.png)">
...
</section>
<section class="about-section gap">
...
</section>
<section class="benefits-section gap no-top">
...
</section>
<section class="my-program" style="background-image: url(./img/blur-1.png)">
...
</section>
<section class="calculator-section gap no-bottom">
...
</section>
<section class="blog-section gap no-bottom" style="background-image: url(./img/blur-3.png)">
...
</section>
<section class="testimonials-section gap ">
...
</section>
<section class="ready-to">
...
</section>
<footer class="one">
...
</footer>
<!-- scroll top -->
<button class="scroll-top-btn hidden">⬆</button>
<!-- bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="js/jquery-3.6.0.min.js"></script>
<!-- nice-select -->
<script src="js/jquery.nice-select.min.js"></script>
<!-- owl.carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- fancybox -->
<script src="js/jquery.fancybox.min.js"></script>
<!-- aos -->
<script src="js/aos.js"></script>
<!-- beforeafter -->
<script src="js/beforeafter.js"></script>
<!-- custom -->
<script src="js/custom.js"></script>
</body>
HTML structure of "Home" pages
<section class="featured-one" style="background-image: url(./img/blur.png)">
<div class="container">
...
</div>
</section>
<section class="about-section gap">
<div class="container">
...
</div>
</section>
<section class="benefits-section gap no-top">
<div class="container">
...
</div>
</section>
<section class="my-program" style="background-image: url(./img/blur-1.png)">
<div class="container">
...
</div>
</section>
<section class="calculator-section gap no-bottom">
<div class="container">
...
</div>
</section>
<section class="blog-section gap no-bottom" style="background-image: url(./img/blur-3.png)">
<div class="container">
...
</div>
</section>
<section class="testimonials-section gap ">
<div class="container-fluid">
...
</div>
</section>
<section class="ready-to">
<div class="container">
...
</div>
</section>
HTML structure of "Inner" pages
<section class="hero-section">
<div class="container">
...
</div>
</section>
<section class="about-section gap no-bottom" style="background-image: url(./img/blur.png)">
<div class="container">
...
</div>
</section>
<section class="story-section" style="background-image: url(./img/blur-4.png)">
<div class="container-fluid">
...
</div>
</section>
<section class="call-to-action gap no-bottom">
<div class="container">
...
</div>
</section>
<section class="certificates-Section gap no-top">
<div class="container">
...
</div>
</section>
Icons
In this template are defined some of classes for icons, your can see all icons here - https://fontawesome.com/icons?d=gallery&s=brands,solid&m=free
Sourse & Credits
Scripts
Fonts
Images
Any Images or logos used in previews are not included in this item or final purchase.