Created:12/18/2023
By: RRDevs
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please contact our support. Thanks so much!
Below is the general HTML structure of the landing page.
The template page's layout consist of top that show the logo and main menu, hero section that show background image, beforecontent that show some amaizing content, about section contain about your some info & feature, service section contained all services, work section you can showcase your portfolio with awesome animation, skills section here you can add some skills, team section is for your team members, testimonial section here you can published your customer reviews, call to action this for call to action content, contact section here you can put your contact information & footer that show copyright information.
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<!-- Site Title -->
<title>Logistec - Transportation & Logistics HTML5 Template</title>
<!-- Place favicon.ico in the root directory -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.jpg">
<!-- CSS here -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<link rel="stylesheet" href="assets/css/venobox.min.css">
<link rel="stylesheet" href="assets/css/animate.min.css">
<link rel="stylesheet" href="assets/css/keyframe-animation.css">
<link rel="stylesheet" href="assets/css/odometer.min.css">
<link rel="stylesheet" href="assets/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="site-preloader">
<div class="spinner"></div>
</div><!--site preloader-->
<header class="header">
</header><!-- /.Main Header -->
<div id="popup-search-box">
</div><!-- /#popup-search-box -->
<section class="hero-section pt-120 pb-120">
</section><!-- ./ hero-section -->
<section class="sponsor-section">
</section><!-- ./ sponsor-section -->
<section class="outsports-section pt-120 pb-120">
</section><!-- ./ outsports-section -->
<section class="about-section pt-120 pb-120">
</section><!-- ./ about-section -->
<section class="process-section bg-grey pt-120 pb-120">
</section><!-- ./process-section -->
<section class="project-section bg-grey pt-120 pb-120">
</section><!-- ./project-section -->
<section class="faq-section bg-grey pt-120 pb-120">
</section><!-- ./faq-section -->
<section class="team-section bg-grey pt-120 pb-120">
</section><!-- ./team-section -->
<section class="testimonial-section bg-grey pt-120 pb-120">
</section><!-- ./testimonial-section -->
<section class="blog-section bg-grey pt-120 pb-120">
</section><!-- ./blog-section -->
<section class="cta-section bg-grey pt-120 pb-120">
</section><!-- ./cta-section -->
<section class="footer-section bg-grey pt-120 pb-120">
</section><!-- ./footer-section -->
<div id="scrollup">
<button id="scroll-top" class="scroll-to-top"><i class="fa-regular fa-arrow-up-long"></i></button>
</div>
<!--scrollup-->
<!-- JS here -->
<script src="assets/js/vendor/jquary-3.6.0.min.js"></script>
<script src="assets/js/vendor/bootstrap-bundle.js"></script>
<script src="assets/js/vendor/imagesloaded-pkgd.js"></script>
<script src="assets/js/vendor/waypoints.min.js"></script>
<script src="assets/js/vendor/venobox.min.js"></script>
<script src="assets/js/vendor/odometer.min.js"></script>
<script src="assets/js/vendor/meanmenu.js"></script>
<script src="assets/js/vendor/jquery.isotope.js"></script>
<script src="assets/js/vendor/wow.min.js"></script>
<script src="assets/js/vendor/swiper.min.js"></script>
<script src="assets/js/ajax-form.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
The site is made of many sections like header, slider, testimonials, services and more...
<header class="header sticky-active"> <div class="top-bar"> <div class="container"> <div class="top-bar-inner"> <div class="top-bar-left"> <ul class="top-bar-list"> <li><i class="fa-sharp fa-regular fa-clock"></i>Mon - Sat: 8 am - 5 pm, Sunday: CLOSED</li> </ul> </div> <div class="top-bar-right"> <ul class="top-social"> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> </ul> </div> </div> </div> </div> <div class="primary-header"> <div class="container"> <div class="primary-header-inner"> <div class="header-logo d-lg-block"> <a href="index.html"> <img src="assets/img/logo/logo-dark.png" alt="Logo"> </a> </div> <div class="header-menu-wrap"> <div class="mobile-menu-items"> <ul class="sub-menu"> <li class="active"> <a href="index.html">Home</a> <ul> <li><a href="index.html">Home One</a></li> </ul> </li> </ul> </div> </div> <!-- /.header-menu-wrap --> <div class="header-right"> <a href="contact.html" class="lt-primary-btn header-btn">Request A Quote</a> <div class="header-right-item"> <a href="javascript:void(0)" class="mobile-side-menu-toggle d-lg-none" ><i class="fa-sharp fa-solid fa-bars"></i ></a> </div> </div> <!-- /.header-right --> </div> <!-- /.primary-header-inner --> </div> </div> <!-- /.primary-header --> </header> <!-- /.Main Header -->
<section class="hero-section" data-background="assets/img/bg-img/hero-bg.jpg"> <div class="container"> <div class="row"> <div class="hero-content"> <h1 class="title wow fade-in-bottom" data-wow-delay="400ms">Fast & Trusted Transportation service.</h1> <p class="wow fade-in-bottom" data-wow-delay="500ms">We provide services in the field of road, sea, rail, air transport and a full range of warehousing services.</p> <a href="about.html" class="lt-primary-btn primary-2 wow fade-in-bottom" data-wow-delay="600ms">Explore More<i class="fa-regular fa-chevron-right"></i></a> </div> </div> </div> </section> <!-- ./ hero-section -->
<div class="sponsor-section pt-120"> <div class="container"> <div class="sponsor-carousel swiper"> <div class="swiper-wrapper swiper-container"> <div class="swiper-slide"> <div class="sponsor-item"> <a href="#"><img src="assets/img/sponsor/sponsor-1.png" alt="sponsor"></a> </div> </div> </div> </div> </div> </div> <!-- ./ sponsor-section -->
<section class="outports-section pt-120 pb-120"> <div class="bg-map" data-background="assets/img/bg-img/map-bg.png"></div> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="outports-content md-pb-30"> <div class="section-heading heading-2 wow fade-in-bottom" data-wow-delay="300ms"> <h4 class="sub-heading wow fade-in-bottom" data-wow-delay="400ms">Why Outports</h4> <h2 class="section-title wow fade-in-bottom" data-wow-delay="500ms">Why Should You Choose our Service, Here Are The Advantages Offer</h2> <p class="desc wow fade-in-bottom" data-wow-delay="600ms">Providing an independent advice and identifying the right fit for you. Services are sourced and procured based.</p> </div> <a href="contact.html" class="lt-primary-btn wow fade-in-bottom" data-wow-delay="700ms">Get a Free Quoite</a> </div> </div> <div class="col-lg-6"> <div class="outports-items"> <div class="outports-item wow fade-in-right" data-wow-delay="300ms"> <div class="outports-icon"> <i class="fa-light fa-boxes-stacked"></i> </div> <div class="outports-info"> <h3 class="title"><a href="service.html">Safe Packing</a><span>1</span></h3> <p>Wherever your cargo is going, we can arrange the shipment for you and remain.</p> </div> </div> </div> </div> </div> </div> </section> <!-- ./ outports-section -->
<section class="about-section bg-grey pt-120 pb-120"> <div class="truck"><img src="assets/img/shapes/truck.png" alt="truck"></div> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6"> <div class="about-thumb md-pb-30"> <img src="assets/img/images/about-img-1.jpg" alt="about"> <div class="video-btn-wrap"> <a class="video-popup video-btn" data-autoplay="true" data-vbtype="video" href="https://youtu.be/iyd7qUH3oH0"> <i class="fa-sharp fa-solid fa-play"></i> <div class="ripple"></div> </a> </div> </div> </div> <div class="col-lg-6"> <div class="about-content"> <div class="section-heading heading-2"> <h4 class="sub-heading wow fade-in-right" data-wow-delay="300ms">About Us</h4> <h2 class="section-title wow fade-in-right" data-wow-delay="400ms">Digital Trusted Transport Logistic Company</h2> <p class="desc wow fade-in-right" data-wow-delay="500ms">There are many variations of passages of but the majority have in some form, by injected humou or words which don’t look even slightly believable of but the majority have suffered</p> </div> <div class="about-items wow fade-in-right" data-wow-delay="600ms"> <div class="about-item text-center"> <div class="about-icon"> <img src="assets/img/icon/about-icon-1.png" alt="icon"> </div> <h3 class="title">Global Service</h3> </div> </div> </div> </div> </div> </div> </section> <!-- ./ about-section -->
<section class="process-section pt-120"> <div class="container"> <div class="section-heading text-center"> <h4 class="sub-heading wow fade-in-bottom" data-wow-delay="300ms">Our Work Process</h4> <h2 class="section-title wow fade-in-bottom" data-wow-delay="500ms">Way To Reach Success</h2> </div> <div class="row gy-lg-0 gy-4"> <div class="col-lg-3 col-md-6"> <div class="process-item text-center wow fade-in-bottom" data-wow-delay="300ms"> <div class="process-icon"> <img src="assets/img/icon/process-icon-1.png" alt="process"> <span class="number">1</span> </div> <h3 class="title">Enter your & product details</h3> </div> </div> </div> </div> </section> <!-- ./ process-section -->
<section class="project-section pt-120"> <div class="container"> <div class="project-top"> <div class="section-heading"> <h4 class="sub-heading">Portfolio</h4> <h2 class="section-title">Featured Project</h2> </div> <div class="swiper-arrow"> <div class="swiper-nav swiper-next"><i class="fa-regular fa-chevron-left"></i></div> </div> <!-- Carousel Arrows --> </div> </div> <div class="project-carousel-wrap"> <div class="project-carousel swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="project-item"> <div class="project-img"> <img src="assets/img/project/project-1.jpg" alt="img"> </div> <a class="img-popup project-btn" data-autoplay="true" data-vbtype="image" href="assets/img/project/project-1.jpg"> <i class="fa-regular fa-arrow-right"></i> </a> <div class="project-content"> <span>Distribution</span> <h3 class="title"><a href="portfolio-details.html">Shipping Transport</a></h3> </div> </div> </div> </div> </div> </div> </section> <!-- ./ project-section -->
<section class="faq-section bg-grey pt-120 pb-120"> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="faq-content md-pb-30"> <div class="section-heading heading-2"> <h4 class="sub-heading wow fade-in-bottom" data-wow-delay="400ms">Frequently Ask Questions</h4> <h2 class="section-title wow fade-in-bottom" data-wow-delay="600ms">What Mostly People Ask Us About</h2> </div> <div class="accordion" id="accordionExample"> <div class="accordion-item wow fade-in-bottom" data-wow-delay="400ms"> <h2 class="accordion-header" id="headingOne"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" > Can i specify a delivery date when ordering? </button> </h2> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="" > <div class="accordion-body"> <p> There are many variations of passages of is psum the majority have suffered alteration in some we by injected humour, </p> </div> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div class="faq-img"> <img src="assets/img/images/faq-img.jpg" alt="faq"> </div> </div> </div> </div> </section> <!-- ./ faq-section -->
<section class="team-section pt-120 pb-120"> <div class="container"> <div class="section-heading text-center"> <h4 class="sub-heading wow fade-in-bottom" data-wow-delay="300ms">Dedicated Team</h4> <h2 class="section-title wow fade-in-bottom" data-wow-delay="500ms">Our Transport Expert Team</h2> </div> <div class="row gy-lg-0 gy-4 justify-content-center"> <div class="col-lg-4 col-md-6"> <div class="team-item wow fade-in-bottom" data-wow-delay="300ms"> <div class="team-img"> <img src="assets/img/team/team-1.jpg" alt="team"> </div> <div class="team-content"> <h3 class="title"><a href="team-details.html">Jonathan Leon</a> <span>Creative Officer</span></h3> <ul class="team-social"> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> <li><a href="#"><i class="fab fa-twitter"></i></a></li> <li><a href="#"><i class="fab fa-pinterest"></i></a></li> </ul> </div> </div> </div> </div> </div> </section> <!-- ./ team-section -->
<section class="testimonial-section pt-120 pb-120" data-background="assets/img/bg-img/testi-bg.jpg"> <div class="container"> <div class="section-heading text-center white-content"> <h4 class="sub-heading">Dedicated Team</h4> <h2 class="section-title">Our Transport Expert Team</h2> </div> <div class="testimonial-carousel swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="testi-item"> <ul class="review"> <li><i class="fas fa-star"></i></li> </ul> <p>Through gaining experience in various economic ods, our team are able to identify the best opportunities we are in good times or bad.</p> <div class="testi-author"> <img src="assets/img/images/testi-author-1.png" alt="author"> <h3 class="author">Porter Victoria<span>CEO-Founder</span></h3> </div> </div> </div> </div> <div class="swiper-pagination"></div> </div> </div> </section> <!-- ./ testimonial-section -->
<section class="blog-section pt-120 pb-120"> <div class="container"> <div class="blog-top"> <div class="section-heading heading-2 wow fade-in-left" data-wow-delay="500ms"> <h4 class="sub-heading">News & Media</h4> <h2 class="section-title">News & Article</h2> <p class="desc">Family months lasted simple set nature of vulgar him. Picture for attempt.</p> </div> <a href="blog-grid.html" class="lt-primary-btn blog-btn wow fade-in-right" data-wow-delay="500ms">View All Post<i class="fa-regular fa-arrow-right"></i></a> </div> <div class="row gy-lg-0 gy-4 justify-content-center"> <div class="col-lg-4 col-md-6"> <div class="post-card wow fade-in-bottom" data-wow-delay="500ms"> <div class="post-thumb"> <img src="assets/img/blog/post-1.jpg" alt="post"> </div> <div class="post-content-wrap"> <div class="post-content"> <ul class="post-meta"> <li><i class="fa-regular fa-tag"></i>Air Freight</li> </ul> <h3 class="title"><a href="blog-details.html">How to Get Hired in the Logistic Industry.</a></h3> </div> <div class="post-bottom"> <a href="blog-details.html" class="read-more">Read More<i class="fa-regular fa-arrow-right"></i></a> <img class="post-author" src="assets/img/blog/post-author-1.png" alt="author"> </div> </div> </div> </div> </div> </div> </section> <!-- ./ blog-section -->
<section class="cta-section pt-120 pb-120"> <div class="cta-shape"><img src="assets/img/shapes/cta-shape.png" alt="cta"></div> <div class="container"> <div class="cta-wrap"> <h2 class="title wow fade-in-left" data-wow-delay="500ms">Fastest & Secure Way to Get Transport Your Freight.</h2> <a href="contact.html" class="lt-primary-btn cta-btn wow fade-in-right" data-wow-delay="300ms">Contact Us</a> </div> </div> </section> <!-- ./ cta-section -->
<footer class="footer-section"> <div class="container"> <div class="row footer-wrap pt-120 pb-70"> <div class="col-lg-3 col-md-6"> <div class="footer-widget"> <a href="index.html" class="footer-logo"><img src="assets/img/logo/logo-dark.png" alt="logo"></a> <p>Logistics solutions providers to the ecommerce industry in India have seen many-fold growth during the pandemic.</p> <ul class="footer-social"> <li><a href="#"><i class="fab fa-facebook-f"></i></a></li> </ul> </div> </div> </div> </div> <div class="copyright-area"> <div class="container"> <div class="copyright-content"> <p>Copyright © 2023 <span>Logistec </span>All Rights Reserved.</p> <ul class="copy-list"> <li><a href="contact.html">Support</a></li> </ul> </div> </div> </div> </footer> <!-- ./ footer-section -->
These are the css files:
This theme use these Javascript files:
modernizr-2.8.3-respond-1.4.2.min.js
jquary-3.6.0.min.js
jquery.ajaxchimp.min.js
bootstrap.min.js
popper.min.js
odometer.min.js
waypoints.min.js
venobox.min.js
spotlight.min.js
masonry-docs.min.js
swiper.min.js
imagesloaded.pkgd.min.js
jquery.isotope.v3.0.2.js
vendor/wow.min.js
contact.js
slider.js
main.js
You can edit the contact.js files. for setting contact form
There are only one php code for contact page which is contact.php, open this file and change the email and subject on line 24 and line 27. No need to edit other code unless you really want to.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.
Logistec