If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/thewebmax ).
This documentation is September 2024
Thank you for purchasing this HTML template.
If you like this template, Please support us by rating this template with 5 stars
We hope you found this document helpful. Thank you!
Template Features
- Unique Home Pages
- Easy to customize
- HTML5 & CSS3
- Clean & Simple Design
- Fully Responsive Layout
- Crossbrowser Compatible
- W3 Valid
- Fontawesome Icons & Feather Icons
- Powered with Bootstrap
- Working Contact Form
Folders in Zip File
- css — folder with CSS and SCSS files.
- fonts — folder with fonts files.
- images — folder with images files.
- js — folder with Javascript files.
- phpmailer — folder with php files.
HTML Files:
- index.html — Homepage One
- index-2.html — Homepage Two
- about-us.html — About Page
- blog.html — Blog Page
- blog-detail.html — Blog Detail Page
- contact-us.html — Contact Us Page
- portfolio.html — Portfolio Page
- portfolio-detail.html — Portfolio Detail Page
- sevice.html — Services Page
- services-detail.html — Services Detail Page
- team.html — Team Page
- team-detail.html — Team Detail Page
HEAD CSS Structure
Followings are the css files which loaded inside the Head Section:
<head>
<!-- META -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="robots" content="" />
<meta name="description" content="" />
<!-- FAVICONS ICON -->
<link rel="icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.png" />
<!-- PAGE TITLE HERE -->
<title>Kvieera Template | Home Page 1</title>
<!-- MOBILE SPECIFIC -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"><!-- BOOTSTRAP STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/animate.min.css"><!-- WOW ANIMATION STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"><!-- FONTAWESOME STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/feather.css"><!-- FEATHER ICON SHEET -->
<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css"><!-- OWL CAROUSEL STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.min.css"><!-- MAGNIFIC POPUP STYLE SHEET -->
<link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css"><!-- Swiper Slider -->
<link rel="stylesheet" type="text/css" href="css/style.css"><!-- MAIN STYLE SHEET -->
</head>
Javascript Structure
Followings are the JS files which loaded before the end of HEAD or BODY Section:.
<!-- JAVASCRIPT FILES ========================================= -->
<script src="js/jquery-3.7.1.min.js"></script><!-- JQUERY.MIN JS -->
<script src="js/popper.min.js"></script><!-- POPPER.MIN JS -->
<script src="js/bootstrap.min.js"></script><!-- BOOTSTRAP.MIN JS -->
<script src="js/magnific-popup.min.js"></script><!-- MAGNIFIC-POPUP JS -->
<script src="js/waypoints.min.js"></script><!-- WAYPOINTS JS -->
<script src="js/waypoints-sticky.min.js"></script><!-- STICKY HEADER -->
<script src="js/counterup.min.js"></script><!-- COUNTERUP JS -->
<script src="js/isotope.pkgd.min.js"></script><!-- MASONRY -->
<script src="js/imagesloaded.pkgd.min.js"></script><!-- MASONRY -->
<script src="js/owl.carousel.min.js"></script><!-- OWL SLIDER -->
<script src="js/theia-sticky-sidebar.js"></script><!-- STICKY SIDEBAR -->
<script src="js/swiper-bundle.min.js"></script><!-- Swiper JS -->
<script src="js/wow.min.js"></script><!--WoW animation JS-->
<script src="js/custom.js"></script><!-- CUSTOM FUCTIONS -->
<script src="js/tickerNews.min.js"></script><!-- TICKERNEWS-->
HTML Structure
<!-- About Company SECTION START -->
<div class="section-full p-t150 p-b120 site-bg-dark kv-about-section-wrap wow fadeInDown" data-wow-offset="100" data-wow-delay="0.2">
<div class="container">
<div class="section-content">
<div class="row kv-whychoose-section">
<!--Left Section-->
<div class="col-xl-6 col-lg-12 col-md-12 m-b30">
<div class="kv-whychoose-Media">
<div class="media">
<div class="media-pic">
<img class="grayscale" src="images/ab-company.jpg" alt="#">
</div>
</div>
<div class="dot-pic">
<img src="images/dotted-image-dark.png" alt="Image">
</div>
</div>
</div>
<!--Right Section-->
<div class="col-xl-6 col-lg-12 col-md-12">
<div class="kv-about-com-content">
<!-- TITLE START-->
<div class="section-head left">
<div class="kv-sm-title left">About Company</div>
<h2 class="kv-large-title site-text-white">IT Solutions Partner Digital Is
the Reliable Path To Success.</h2>
<p class="p-text">Internet tend to repeat predefined chunks as necessary, making this the first true generator
on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of
model sentence structures, to generate Lorem Ipsum which looks reasonable..</p>
</div>
<!-- TITLE END-->
<div class="kv-about-com-info">
<div class="kv-solution-bx-wrap">
<div class="kv-solution-bx">
<span>95<i>%</i></span>
<p>Solutions</p>
</div>
</div>
<div class="our-skills-item-wrap wow">
<div class="our-skills-item">
<span class="progressText"><i class="fa-solid fa-circle"></i> Marketing</span>
<div class="progress-box">
<div class="progress">
<div class="progress-bar wow progress-bar-anim site-bg-primary" data-wow-delay="0ms" data-wow-duration="2000ms" role="progressbar" style="--progress-bar-count: 90%">
<span>90%</span>
</div>
</div>
</div>
</div>
<div class="our-skills-item">
<span class="progressText"><i class="fa-solid fa-circle"></i> Financial</span>
<div class="progress-box">
<div class="progress">
<div class="progress-bar wow progress-bar-anim site-bg-primary" data-wow-delay="0ms" data-wow-duration="2000ms" role="progressbar" style="--progress-bar-count: 75%">
<span>75%</span>
</div>
</div>
</div>
</div>
<div class="our-skills-item">
<span class="progressText"><i class="fa-solid fa-circle"></i> Management</span>
<div class="progress-box">
<div class="progress">
<div class="progress-bar wow progress-bar-anim site-bg-primary" data-wow-delay="0ms" data-wow-duration="2000ms" role="progressbar" style="--progress-bar-count: 80%">
<span>80%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 m-b30">
<div class="kv-icon-style-left large-set icon-no-bg">
<div class="kv-media">
<img src="images/icons/1.png" alt="image">
</div>
<div class="kv-content">
<h3 class="kv-title">Business Growth</h3>
<p>Quickly prtoductivate just in
time strategic lacus mirina.</p>
</div>
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 m-b30">
<div class="kv-icon-style-left large-set icon-no-bg">
<div class="kv-media">
<img src="images/icons/2.png" alt="image">
</div>
<div class="kv-content">
<h3 class="kv-title">IT Consultancy</h3>
<p>Quickly productivate just in
time strategic lacus mirina.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- About Company Us SECTION END -->
How to Run SCSS File
And following the video tutorial.
Here the Link: https://www.youtube.com/watch?v=0MWmv1Gvv5w
Features
Click this button
Contact Form
You will need these 2 files to make contact form working 1 — (mail.php) , 2 — (custom.js)
<div class="kv-contact-page-form site-bg-primary">
<!-- TITLE START-->
<div class="section-head left ">
<div class="kv-sm-title left">Quick Contact</div>
<h2 class="kv-large-title site-text-white">Get a Quote</h2>
</div>
<!-- TITLE END-->
<div class="contact-form-outer">
<form class="cons-contact-form" method="post" action="form-handler2.php">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="form-group mb-4">
<input name="username" type="text" required="" class="form-control" placeholder="Name">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group mb-4">
<input name="email" type="text" class="form-control" required="" placeholder="Email">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group mb-4">
<input name="phone" type="text" class="form-control" required="" placeholder="Phone">
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="form-group mb-4">
<input name="subject" type="text" class="form-control" required="" placeholder="Subject">
</div>
</div>
<div class="col-lg-12">
<div class="form-group mb-5">
<textarea name="message" class="form-control" rows="3" placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="site-button dark-bg"><em>Submit Now</em></button>
</div>
</div>
</form>
</div>
</div>
Owl Carousel Edit Option
File path: js/custome.js
// Featured Project carousel function by = owl.carousel.js________//
function av_featured_carousel(){
jQuery('.kv-featured-carousel').owlCarousel({
loop:true,
autoplay:true,
margin:30,
autoplayTimeout:3000,
nav:true,
dots: false,
navText: ['<i class="feather feather-arrow-left"></i>', '<i class="feather feather-arrow-right"></i>'],
responsive:{
0:{
items:1
},
768:{
items:2,
},
1200:{
items:3
}
}
});
}
More Info please browser the link: Owl Carousel Docs Options
Swiper Slider Edit Option
File path: js/custome.js
// Home 1 banner slider function by = swiper-bundle.min.js ________//
function av_home_bnr_1(){
var swiper = new Swiper('.home-1-slider', {
loop: true,
spaceBetween: 30,
effect: "fade",
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 7000,
disableOnInteraction: true,
}
});
}
More Info please browser the link: Swiper Slider Docs Options
How to edit/off Preloader
Please remove or comment the below code file path: js/custome.js
// > page loader function by = custom.js ========================= //
function page_loader() {
$('.loading-area').fadeOut(1000);
}
Also, please remove or comment the below code all HTML files
<!-- LOADING AREA START ===== -->
<div class="loading-area">
<div class="loading-box"></div>
<div class="loading-pic">
<div class="center-body">
<div class="loader-circle-9">
Loading
<span></span>
</div>
</div>
</div>
</div>
<!-- LOADING AREA END ====== -->
Credits
Note: All images are used for preview purpose only and not included in the final purchase files.
Images from:
——— https://www.freepik.com/
——— https://unsplash.com/
Google Fonts:
——— Teachers