Created: 02/24/2022
By: Amentotech Pvt ltd
Support: Create ticket
Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to create a ticket on our help desk here. Thanks so much!
Follow the steps below to get started with your Site Template:
Main-files/HTML Folder to find all the Templates FilesHTML/css - Extra Stylesheets FolderHTML/scss - SASS FolderHTML/js - Javacripts FolderHTML/images- Images FolderHTML/index.html - Index File/HomepageJournal Follows A Simple Coding Structure. Here Is The Sample:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="zxx">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>BootStrap HTML5 CSS3 Theme</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<link rel="icon" href="images/favicon.svg" type="image/x-icon">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/feather-icons.css">
<link rel="stylesheet" href="css/splide.min.css">
<link rel="stylesheet" href="css/venobox.min.css">
<link rel="stylesheet" href="css/jquery.mCustomScrollbar.min.css">
<link rel="stylesheet" href="css/select2.min.css">
<link rel="stylesheet" href="css/fontawesome/all.min.css">
<link rel="stylesheet" href="css/nouislider.min.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!-- preloader start -->
<div class="preloader-outer">
<div class="sv-loader">
<img class="fa-spin" src="images/circle-loader.png" alt="">
</div>
</div>
<!-- preloader end -->
<!-- HEADER START -->
<header>
</header>
<!-- HEADER END -->
<!-- BANNER START -->
<div class="sv-banner">
<span class="sv-shade"></span>
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-10">
</div>
</div>
</div>
<div class="sv-author-name">
</div>
</div>
<!-- BANNER END -->
<!-- MAIN START -->
<main class="sv-main">
<!-- CLIENTS START -->
<div class="sv-main-section">
<div class="container">
</div>
</div>
<!-- CLIENTS END -->
<!-- SERVICES START -->
<section class="sv-main-section">
</div>
</section>
<!-- SERVICES END -->
<!-- MobileApp START -->
<section class="sv-main-section">
<div class="sv-sectionappdark">
</div>
</section>
<!-- MobileApp END -->
<!-- Our core motivation -->
<section class="sv-main-section overflow-hidden">
</section>
<!-- Our core motivation -->
</main>
<!-- MAIN END -->
<!-- FOOTER START -->
<footer class="sv-mainfooter">
</footer>
<!-- FOOTER END -->
<!-- Custom Tooltip Render Here -->
<div class="sv-tippysm">
<span id="sv-verifed" class="d-none">
<span class="sv-tippytooltip">
</span>
</span>
</div>
<div class="sv-tippysm">
<span id="sv-trending" class="d-none">
<span class="sv-tippytooltip">
</span>
</span>
</div>
<div id="sv-industrypro" class="sv-tippytooltip d-none">
<div class="sv-selecttagtippy">
<ul class="sv-posttag sv-posttagv2">
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
</div>
<!--Custom Tooltip Render Here -->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/popper-core.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/vendor/splide.min.js"></script>
<script src="js/vendor/venobox.min.js"></script>
<script src="js/vendor/select2.min.js"></script>
<script src="js/vendor/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="js/vendor/readmore.js"></script>
<script src="js/vendor/tippy.js"></script>
<script src="js/vendor/sortable.min.js"></script>
<script src="js/vendor/nouislider.min.js"></script>
<script src="js/vendor/tinymce/tinymce.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS / SASS and JS are important part of the website. We've included all the styling in main.css for frontend, All the styling are inside the SASS files, which are compiled in main.css. In order to compile sass files into css file you need to install node.js then install this command npm install -g sass and then for the frontend run this command sass --watch scss/main.scss:css/main.css And we done main.js file code with proper commenting to avoid more http request to server and to make website faster. Inside HTML > CSS you can find main.css which contains all the css.
<link rel="stylesheet" href="css/main.css">
Bootstrap.css Inside HTML > CSS you can find bootstrap.css which is the main part of the website as Servento based on Bootstrap v5.1.3 it is recommended to include bootstrap..min.css and file right before main.css file.
<link rel="stylesheet" href="css/bootstrap.min.css">
main.js Inside HTML > JS you can find main.js which contains all the custom and plugins code used in website.
<script src="js/main.js"></script>
The Logo Container can be found in the navbar Container - logo
<a class="navbar-brand" href="index.html"><strong><img src="images/logo.png" alt="image description" ></strong></a>
NOTE The Logo Image's maximum width can be 170px and maximum height can be 42px
You can change your Website's Color Scheme in an instant. You simply need to change the Color Code in the scss/abstracts/_variables.scss file & you are good to go.
Colors are defined by different variables in which primary colors are defined as $primary_color_01_base and $primary_color_base which has dark and light version too in scss/abstracts/_variables.scss you can change the variable value. in variable.scss file there are also other colors we can change the font , links, and buttons colors
Now simply change the Codes according to your requirements
Change your Fonts on the Fly as we have included fonts in scss/abstracts/_variables.scss file. Servento uses 3 Fonts namely: 'Outfit', sans-serif; Playfair and 'opne sans', sans-serif from the Google Fonts Library. You can find the Linking to the Font Files in the scss/base/_base.scss file
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Outfit:wght@
400;500;600;700&family=Playfair+Display:wght@600&display=swap');
Servento includes One slider.Splide slider for you to be used on any Page with hundreds of Options.
Splide Slider
// Service detail sync slider
var sv_splide = document.getElementById("sv_splide");
if (sv_splide != null) {
var secondarySlider = new Splide("#sv_splidev2", {
direction: "ttb",
gap: 10,
type: "loop",
arrows: true,
height: "100%",
rewind: false,
focus: "center",
fixedWidth: 100,
fixedHeight: 100,
isNavigation: true,
pagination: false,
updateOnMove: true,
}).mount();
var primarySlider = new Splide("#sv_splide", {
type: "fade",
pagination: false,
cover: true,
arrows: false,
breakpoints: {
1199: {
pagination: true,
autoplay: true,
},
},
});
primarySlider.sync(secondarySlider).mount();
}
<nav class="collapse navbar-collapse sv-navbar-collapse" id="navbarNav">
<ul class="navbar-nav sv-navbar-nav">
<li>
<a href="how-it-work.html">How it Work</a>
</li>
<li>
<a href="contact.html"> Latest news </a>
</li>
<li>
<a href="signin.html">Sign in</a>
</li>
</ul>
<div class="sv-navbarbtn">
<a href="signup.html" class="sv-sb-lg sv-sb-transparent">Get started</a>
</div>
</nav>
Servento boasts of a huge number of handy Pages which are quite powerful, flexible, functional & easy to use. Setting up pages is very easy & Self Explanatory. Here is the List of Pages included with Servento
index.htmlfreelancerlist.htmlfreelancerlist-v2.htmlfreelancerlist-v3.htmlfreelancerlist-v4.htmlfreelancerlist-empty.htmlfreelancer-detail-a.htmlfreelancer-detail-a-editview.htmlfreelancer-detail-a-guestview.htmlfreelancer-detail-a-userview.htmlfreelancer-detail-stepb.htmlfreelancer-detail-stepc.htmlfreelancer-detail-stepd.htmlblog.htmlblog-detail.htmlcontact.htmlhow-it-work.htmlsignin.htmlsignup.htmllost-password.htmlreset-password.htmldb-index.htmldb-index-empty.htmldb-invoice-detail.htmldb-invoices.htmldb-mybooking.htmldb-mybookings-empty.htmldb-notifications.htmldb-pricing-plan.htmldb-saved-items.htmldb-transaction-invoices.htmldb-notifications.htmldb-account-deactive.htmldb-deactive-overlayhtml.htmldb-identity-verification.htmldb-help_support.htmlEach of the above mentioned Pages are easily extendable, flexible & easy to use. You can find the sample codes in their respective files. We are explaining a few of them for your Reference.
Setup your Sections outside the .container element. sections padding-boottom is 80px by default but you can change it by adding handy classes like p-0, pt-4 etc.
Light Section:
<section class="sv-main-section">
</section>
We've used Font Awesome icons and Feather-icons.
Released on 24 February 2022
- Released Servento - Service Provider and Business Listing HTML Template