Template Features
- Unique Home Pages
- Easy to customize
- HTML5 & CSS3
- Clean & Simple Design
- Fully Responsive Layout
- Crossbrowser Compatible
- W3 Valid
- FlatIcons and Fontawesome icons
- Powered with Bootstrap Version
- 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.
HTML Files:
- about-us.html — About 1 page
- blog-detail.html — Blog detail page
- blog-detail-sidebar.html — Blog detail sidebar page
- blog-grid.html — Blog grid page
- blog-single-grid.html — Blog single grid page
- contact.html — Contact page
- gallery.html — Gallery Page
- faq-page.html — FAQ Page
- icon-font.html — Icons page
- index.html — Home page 1
- index-2.html — Home page 2
- index-3.html — Home page 3
- mission-vision.html — Mission vision page
- our-service.html — Home page 3
- our-services-detail.html — Our service page
- our-team.html — Our team page
- portfolio.html — Home portfolio page
- portfolio-2.html — Home portfolio 2
- portfolio-detail.html — Home portfolio detail
- price-table.html — Home price table page
- testimonial.html — Home testimonial page
- why-choose-us.html — Home why choose us
- There are many other html pages...
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>itodo Template | Gallery Page</title>
<!-- MOBILE SPECIFIC -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css"><!-- BOOTSTRAP STYLE SHEET -->
<link rel="stylesheet" href="css/fontawesome/css/font-awesome.min.css"><!-- FONTAWESOME STYLE SHEET -->
<link rel="stylesheet" href="css/owl.carousel.min.css"><!-- OWL CAROUSEL STYLE SHEET -->
<link rel="stylesheet" href="css/magnific-popup.min.css"><!-- MAGNIFIC POPUP STYLE SHEET -->
<link rel="stylesheet" href="css/loader.min.css"><!-- LOADER STYLE SHEET -->
<link rel="stylesheet" href="css/flaticon.min.css"><!-- FLATICON STYLE SHEET -->
<link rel="stylesheet" href="css/animate.css" ><!-- WOW ANIMATE STYLE SHEET -->
<link rel="stylesheet" href="css/feather.css" ><!-- Feather STYLE SHEET -->
<link rel="stylesheet" href="css/lc_lightbox.css"><!-- IMAGE POPUP -->
<link rel="stylesheet" href="css/swiper-bundle.min.css"><!-- SWIPER SLIDER CSS -->
<link rel="stylesheet" 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.6.1.min.js.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/counterup.min.js"></script><!-- COUNTERUP JS -->
<script src="js/waypoints-sticky.min.js"></script><!-- sticky header 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 content-->
<script src="js/wow.js"></script><!-- WOW JS -->
<script src="js/lc_lightbox.lite.js" ></script><!-- IMAGE POPUP -->
<script src="js/swiper-bundle.min.js"></script><!-- Swiper js -->
<script src="js/custom.js"></script><!-- CUSTOM FUCTIONS -->
HTML Structure
<!-- OUR SERVICES SECTION START -->
<div class="section-full p-t110 p-b80 sx-our-services-outer sx-bg-light" >
<div class="container">
<!-- TITLE START -->
<div class="section-head center">
<div class="sx-head-s-title">Our Services</div>
<div class="sx-head-l-title">
<h2 class="sx-title">Sophisticated Knowledge For Rapidly Emerging Legal service of Our IT Solution!</h2>
</div>
</div>
<!-- TITLE END -->
<div class="section-content">
<div class="sx-our-services-bx">
<div class="row">
<!-- Block one -->
<div class="col-lg-4 col-md-6 wow fadeInDown" data-wow-duration="1000ms">
<div class="sx-service-bx-1">
<div class="sx-icon-box-wraper">
<div class="sx-service-bx-icon scale-in-center">
<span class="sx-text-primary"><i class="flaticon-security"></i></span>
</div>
<div class="icon-content">
<h4 class="sx-tilte">Product Engineering</h4>
<p>Orem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget cursus massa. Aliquam erat volutpat Morbi ligula magna.</p>
<div class="sx-center-btn">
<a href="our-services-detail.html" class="site-button-circle">
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Block Two -->
<div class="col-lg-4 col-md-6 wow fadeInDown" data-wow-duration="1000ms">
<div class="sx-service-bx-1">
<div class="sx-icon-box-wraper">
<div class="sx-service-bx-icon scale-in-center">
<span class="sx-text-primary"><i class="flaticon-coding"></i></span>
</div>
<div class="icon-content">
<h4 class="sx-tilte">Big Data & Analytics</h4>
<p>Orem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget cursus massa. Aliquam erat volutpat Morbi ligula magna.</p>
<div class="sx-center-btn">
<a href="our-services-detail.html" class="site-button-circle active">
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- Block Three -->
<div class="col-lg-4 col-md-6 wow fadeInDown" data-wow-duration="1000ms">
<div class="sx-service-bx-1">
<div class="sx-icon-box-wraper">
<div class="sx-service-bx-icon scale-in-center">
<span class="sx-text-primary"><i class="flaticon-smart-contracts"></i></span>
</div>
<div class="icon-content">
<h4 class="sx-tilte">Creative Solutions</h4>
<p>Orem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget cursus massa. Aliquam erat volutpat Morbi ligula magna.</p>
<div class="sx-center-btn">
<a href="our-services-detail.html" class="site-button-circle">
<i class="fa fa-long-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- OUR SERVICES SECTION END -->
Features
Click this button
For Contact form
1.You have to put smtp detail inside mail.php file for contact form to run
2.You will also need to make some changes inside the custom.js file
Owl Carousel Edit Option
File path: js/custome.js
//________Home page latest blog function by = owl.carousel.js________//
function sx_latest_blog_1_carousel(){
jQuery('.sx-latest-blog-1-carousel').owlCarousel({
loop:true,
autoplay:false,
margin:30,
autoplayTimeout:6000,
nav:false,
dots: true,
navText: ['<i class="flaticon-left-chevron"></i>', '<i class="flaticon-chevron"></i>'],
responsive:{
0:{
items:1
},
991:{
items:2,
},
1200:{
items:3
}
}
});
}
More Info please browser the link: Owl Carousel Docs Options
Swiper Carousel Edit Option
File path: js/custome.js
//________ Home 1 banner slider function by = swiper-bundle.min.js ________//
function sx_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 Carousel 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="loading">
<h2><img src="images/footer-logo.png" alt="#"></h2>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</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:
Manrope
Jost
Poppins
IconFont
FlatIcon
If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/7xtheme ).
This documentation is March 2023
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!