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 latest Version
- Working Contact Form
Folders in Zip File
- css — folder with CSS files.
- fonts — folder with fonts files.
- images — folder with images files.
- js — folder with Javascript files.
- plugins — folder with Revolution slider files.
HTML Files:
- about-1.html — About 1 page
- blog-grid.html — Blog grid page
- blog-list.html — Blog list page
- blog-post.html — Blog Detail page
- blog-list.html — Blog post right sidebar page
- contact.html — Contact page
- error-404.html — Error Page
- faq-1.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
- 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="" />
<!-- Favicon -->
<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 -->
<title>Transport 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 Css-->
<link rel="stylesheet" type="text/css" href="css/fontawesome/css/font-awesome.min.css" /><!-- Fontawesome Css -->
<link rel="stylesheet" type="text/css" href="css/flaticon.min.css"><!-- Flaticon Css-->
<link rel="stylesheet" type="text/css" href="css/owl.carousel.min.css"><!-- Owl Carousel Css -->
<link rel="stylesheet" type="text/css" href="css/magnific-popup.min.css"><!-- Magnific Popup Css -->
<link rel="stylesheet" type="text/css" href="css/loader.min.css"><!-- Loader Css-->
<link rel="stylesheet" type="text/css" href="css/style.css"><!-- Main Style Css -->
<link rel="stylesheet" type="text/css" href="css/custom.css"><!-- Custom Css-->
<link rel="stylesheet" type="text/css" href="plugins/revolution/revolution/css/settings.css"><!-- Revolution Slider Css -->
<link rel="stylesheet" type="text/css" href="plugins/revolution/revolution/css/navigation.css"><!-- Revolution Slider Css -->
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
</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"></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/jquery.bootstrap-touchspin.min.js"></script><!-- FORM 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><!-- 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/jquery.owl-filter.js"></script><!-- OWL SLIDER -->
<script src="js/custom.js"></script><!-- CUSTOM FUCTIONS -->
<script src="js/jquery.bgscroll.js"></script><!-- BACKGROUND SCROLL -->
<!-- SLIDER REVOLUTION -->
<script src="plugins/revolution/revolution/js/jquery.themepunch.tools.min.js"></script>
<script src="plugins/revolution/revolution/js/jquery.themepunch.revolution.min.js"></script>
<script src="plugins/revolution/revolution/js/extensions/revolution-plugin.js"></script>
<!-- REVOLUTION SLIDER SCRIPT -->
<script src="js/rev-script-3.js"></script>
HTML Structure
<!-- How it Work -->
<div class="section-full p-t80 p-b50 bg-gray bg-no-repeat bg-cover bg-white" style="background-image:url(images/background/bg15.jpg);">
<div class="container">
<!-- TITLE START-->
<div class="section-head text-center">
<h2 data-title="Welcome">Transport Company </h2>
<div class="mt-separator-outer">
<div class="mt-separator site-bg-primary"></div>
</div>
</div>
<!-- TITLE END-->
<div class="section-content sx-how-it-work">
<div class="row">
<!-- block 1 -->
<div class="col-lg-4 col-md-6">
<div class="mt-box m-b30">
<div class="mt-icon-box-wraper p-a30 left bg-white hover-border-outer hover-border">
<div class="icon-md radius m-b15">
<span class="icon-cell site-text-primary"><i class="flaticon-transport-6"></i></span>
</div>
<div class="icon-content">
<h4 class="mt-tilte m-b15"><a href="#">Road Freight</a></h4>
<p>Go beyond logistics, make the world go round and business.</p>
</div>
</div>
</div>
<div class="mt-box m-b30">
<div class="mt-icon-box-wraper p-a30 left bg-white hover-border-outer hover-border">
<div class="icon-md radius m-b15">
<span class="icon-cell site-text-primary"><i class="flaticon-airplane"></i></span>
</div>
<div class="icon-content">
<h4 class="mt-tilte m-b15"><a href="#">Air Freight</a></h4>
<p>Go beyond logistics, make the world go round and business.</p>
</div>
</div>
</div>
</div>
<!-- block 2 -->
<div class="col-lg-4 col-md-6">
<div class="mt-box m-b30">
<div class="mt-media mid-img-verticle">
<a href="#"><img src="images/truck.png" alt=""></a>
</div>
</div>
</div>
<!-- block 3 -->
<div class="col-lg-4 col-md-12">
<div class="mt-box m-b30">
<div class="mt-icon-box-wraper p-a30 left bg-white hover-border-outer hover-border">
<div class="icon-md radius m-b15">
<span class="icon-cell site-text-primary"><i class="flaticon-ship-1"></i></span>
</div>
<div class="icon-content">
<h4 class="mt-tilte m-b15"><a href="#">Sea Freight</a></h4>
<p>Go beyond logistics, make the world go round and business.</p>
</div>
</div>
</div>
<div class="mt-box m-b30">
<div class="mt-icon-box-wraper p-a30 left bg-white hover-border-outer hover-border">
<div class="icon-md radius m-b15">
<span class="icon-cell site-text-primary"><i class="flaticon-forklift-1"></i></span>
</div>
<div class="icon-content">
<h4 class="mt-tilte m-b15"><a href="#">Warehouse</a></h4>
<p>Go beyond logistics, make the world go round and business.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
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
//________CLIENT LOGO CAROUSEL FUNCTION BY= owl.carousel.js________//
function client_logo_carousel(){
jQuery('.client-logo-carousel').owlCarousel({
loop:true,
margin:50,
nav:true,
dots: false,
navText: ['<i class="fa fa-chevron-left"></i>', '<i class="fa fa-chevron-right"></i>'],
responsive:{
0:{
items:2
},
480:{
items:3
},
767:{
items:4
},
1000:{
items:5
}
}
})
}
More Info please browser the link: Owl Carousel Docs Options
How to edit/off Preloader
Please remove or comment the below code file path: js/custome.js
//________PAGE LOADER________//
function page_loader() {
jQuery('.loading-area').fadeOut(1000)
};
Also, please remove or comment the below code all HTML files
<!-- Loading Div ===== -->
<div class="loading-area">
<div class="loading-box"></div>
<div class="loading-pic">
<div class="loading_progress-container">
<div class="loading_progress">
<div class="loading_progress-bar">
<div class="loading_progress-shadow"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Loading Div ====== -->
Credits
Note: All images are used for preview purpose only and not included in the final purchase files.
Images from:
https://www.shutterstock.com ———
https://www.freepik.com/ ———
https://pixabay.com/ ———
https://unsplash.com/
IconFont
FlatIcon
If you have any questions, please use our profile contact form on Envato ( https://themeforest.net/user/7xtheme ).
This documentation is Feb 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!