If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/thewebmax ).
This documentation is May 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
- index-3.html — Homepage Three
- about-us.html — About Page
- blog.html — Blog Page
- blog-detail.html — Blog Detail Page
- blog-left-sidebar.html — Blog Left Siderbar Page
- blog-standard.html — Blog Standard Page
- case-detail.html — Case Detail Page
- case-study.html — Case Study Page
- client.html — Client Page
- contact-us.html — Contact Us Page
- faq.html — Faq Page
- pricing-page.html — Pricing Plan Page
- sevice.html — Services Page
- services-detail.html — Services Detail Page
- team.html — Team 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>Avertium 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/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/audio-player.js"></script><!-- Audio Player-->
<script src="js/custom.js"></script><!-- CUSTOM FUCTIONS -->
HTML Structure
<!-- About US SECTION START -->
<div class="section-full p-t120 p-b90 site-bg-white av-about-section-wrap wow fadeInDown" data-wow-offset="100" data-wow-delay="0.2">
<div class="section-content">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12 m-b30">
<div class="av-about-media-section">
<div class="av-ver-text">
<span>20 Years</span>
</div>
<div class="av-large-image">
<img src="images/ab-1.jpg" alt="#">
<div class="av-about-chart">
<img src="images/ab-2.png" alt="#">
</div>
</div>
<div class="av-ab-dot-left">
<img src="images/ab-dotts.png" alt="#">
</div>
<div class="av-ab-dot-right">
<img src="images/ab-dotts.png" alt="#">
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 m-b30">
<div class="av-about-content-section">
<div class="av-content-title">
<h2 class="av-large-title">We Are About Our Company Engineering IT Services.</h2>
<p class="p-text">Nulla et neque id nibh pretium vestibulum vitae euismod nisi. Inside tomopi condimentum dictum odio, sed faucibus enim ornare a. Nunc feugiat extem usto, vestibulum imperdiet ligula mollis vel.</p>
<p class="p-text">Praesent euismod imperdiet dignissim. Quisque eu quam at libero ullamcorper porttitor. In nec condimentum ante, sed vestibulum odio. Aliquam justo diam, euismod vel mauris in, mattis viverra.</p>
</div>
<div class="av-icon-box-wrap p-t30 p-b30">
<div class="row">
<div class="col-lg-6 col-md-6">
<div class="av-icon-style-left">
<div class="av-media">
<img src="images/icon/ic-1.png" alt="icon">
</div>
<div class="av-content">
<h3 class="av-title">Our Mission</h3>
<p>Donec faucibus erat neque, in mortalma consectetu.</p>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6">
<div class="av-icon-style-left">
<div class="av-media">
<img src="images/icon/ic-2.png" alt="icon">
</div>
<div class="av-content">
<h3 class="av-title">Our Vision</h3>
<p>Donec faucibus erat neque, in mortalma consectetu.</p>
</div>
</div>
</div>
</div>
</div>
<div class="av-about-content-ftr">
<a href="case-detail.html" class="site-button">
Discover More
<i class="fa fa-plus"></i>
</a>
<a href="https://www.youtube.com/watch?v=c1XNqw2gSbU" class="mfp-video ac-text-circle-btn">
<i class="fa fa-play"></i>
<img class="spinner-object" src="images/icon/ic-3.png" alt="text">
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- About 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="cons-contact-form-wrap">
<div class="comments-area">
<h3 class="av-large-title mb-4">Contact Us
</h3>
<form class="comment-form cons-contact-form" method="post" action="phpmailer/mail.php">
<div class="row">
<div class="comment-form-author col-md-6 mb-3">
<label><span>Your Name</span></label>
<input class="form-control" type="text" value="" name="username" placeholder="Your Name*" id="author">
</div>
<div class="comment-form-email col-md-6 mb-3">
<label><span>Your Email</span></label>
<input class="form-control" type="text" value="" name="email" placeholder="Your Email*">
</div>
<div class="comment-form-comment col-md-12 mb-4">
<label><span>Message</span></label>
<textarea class="form-control" rows="8" name="message" placeholder="Message*" id="comment"></textarea>
</div>
<div class="comment-form-cookies-consent mb-4">
<p>
<span>*</span> Call us 24/7 or fill out the form below to receive a free.
</p>
</div>
<div class="form-submit">
<button type="submit" class="site-button">Post Comment <i class="fa fa-plus"></i></button>
</div>
</div>
</form>
</div>
</div>
Owl Carousel Edit Option
File path: js/custome.js
// Job Categories Carousel function by = owl.carousel.js ========================== //
function job_categories_carousel(){
jQuery('.job-categories-carousel').owlCarousel({
loop:true,
nav:true,
dots: false,
center:false,
margin:30,
autoplay:true,
navText: ['<i class="feather-chevron-left"></i>', '<i class="feather-chevron-right"></i>'],
responsive:{
0:{
items:1,
},
480:{
items:1,
},
767:{
items:2,
margin:0,
},
991:{
items:2,
},
1024:{
items:3
}
}
});
}
More Info please browser the link: Owl Carousel Docs Options
Swiper Slider Edit Option
File path: js/custome.js
// Grid slider function by = swiper-bundle.min.js ________//
function av_grid_slider(){
var swiper = new Swiper(".av-grid-slider", {
slidesPerView: 3,
grid: {
rows: 2,
fill: "row",
},
spaceBetween: 30,
loop: true,
freeMode: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
autoplay: {
delay: 2000,
disableOnInteraction: true,
},
breakpoints: {
0: {
slidesPerView: 1,
grid: {
rows: 1,
fill: "row",
},
},
768: {
slidesPerView: 2,
grid: {
rows: 1,
fill: "row",
},
},
1024: {
slidesPerView: 3,
}
}
});
}
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">
<span class="loader"></span>
</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/