Created:15/06/2024
By: RRDevs
Thank you for purchasing our template. 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, before content that show some amaizing content, about section contain about your some info & feature, service section contained all services, 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.
<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>Bizan - Business & Finance HTML5 Template</title>
<!-- Place favicon.ico in the root directory -->
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.png">
<!-- 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/daterangepicker.css">
<link rel="stylesheet" href="assets/css/odometer.min.css">
<link rel="stylesheet" href="assets/css/nice-select.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 id="preloader">
<div class="loading" data-loading-text="Bizan"></div>
</div>
<!-- ./ preloader -->
<header class="header">
</header><!-- /.Main Header -->
<div id="popup-search-box">
</div><!-- /#popup-search-box -->
<section class="hero-section">
</section><!-- ./ hero-section -->
<section class="about-section">
</section><!-- ./ about-section -->
<section class="counter-section">
</section><!-- ./ counter-section -->
<section class="service-section">
</section><!-- ./ service-section -->
<section class="content-section">
</section><!-- ./ content-section -->
<section class="team-section">
</section><!-- ./team-section -->
<section class="project-section">
</section><!-- ./project-section -->
<section class="testimonial-section">
</section><!-- ./testimonial-section -->
<section class="blog-section">
</section><!-- ./blog-section -->
<section class="request-section">
</section><!-- ./request-section -->
<section class="sponsor-section">
</section><!-- ./sponsor-section -->
<section class="footer-section">
</section><!-- ./footer-section -->
<div id="scroll-percentage"><span id="scroll-percentage-value"></span></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/smooth-scroll.js"></script>
<script src="assets/js/vendor/jquery.isotope.js"></script>
<script src="assets/js/vendor/countdown.js"></script>
<script src="assets/js/vendor/wow.min.js"></script>
<script src="assets/js/vendor/swiper.min.js"></script>
<script src="assets/js/vendor/nice-select.js"></script>
<script src="assets/js/ajax-form.js"></script>
<script src="assets/js/contact.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 bar-2">
<div class="container">
<div class="top-bar-inner">
<div class="top-bar-left">
<span>Now Hiring: Are you looking for best consultancy service?</span>
</div>
<div class="top-bar-left">
<span><i class="fa-sharp fa-regular fa-clock"></i>Office Hours: 08:00am-6:00pm</span>
</div>
</div>
</div>
</div>
<div class="middle-header">
<div class="container">
<div class="middle-header-inner">
<div class="header-logo">
<div class="shape"></div>
<a href="index.html">
<img src="assets/img/logo/logo-1.png" alt="logo">
</a>
</div>
<div class="header-items-wrap">
<div class="header-item">
<div class="icon"><i class="fa-sharp fa-solid fa-phone"></i></div>
<div class="content">
<span>Call Us 24/7</span>
<a href="tel:+26921562148">(+269) 2156 2148</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="primary-header">
<div class="container">
<div class="primary-header-inner">
<div class="header-logo d-lg-none">
<a href="index.html">
<img src="assets/img/logo/logo-2.png" alt="logo">
</a>
</div>
<div class="header-menu-wrap">
<div class="mobile-menu-items">
<ul>
<li class="menu-item-has-children 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-wrap">
<div class="header-right">
<a href="contact.html" class="header-btn">Book Appointment</a>
<div class="search-icon dl-search-icon">
<i class="fa-regular fa-magnifying-glass"></i>
</div>
<div class="sidebar-icon">
<button class="sidebar-trigger open">
<span></span>
</button>
</div>
</div>
<!-- /.header-right -->
</div>
</div>
<!-- /.primary-header-inner -->
</div>
</div>
</header>
<!-- /.Main Header -->
<section class="hero-section">
<div class="hero-mask-img">
<div class="overlay"></div>
<div class="overlay-2"></div>
<img src="assets/img/images/hero-img.png" alt="hero">
</div>
<div class="shapes">
<div class="shape shape-1"><img src="assets/img/shapes/hero-shape-1.png" alt="shape"></div>
<div class="round-shape"></div>
</div>
<div class="container">
<div class="hero-wrap">
<div class="hero-content">
<div class="section-heading mb-40">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5"><span class="left-shape"></span>We’re building Awesome brands</h4>
<h2 class="section-title text-animation-effect">Building Smart <br>Business From <br>Scratch</h2>
<p>We specialize in providing comprehensive solutions to help
businesses tackle their most pressing issues.</p>
</div>
<div class="hero-btn-wrap">
<a href="contact.html" class="bz-primary-btn">Contact With Us <i class="fa-regular fa-arrow-right"></i></a>
<a href="service.html" class="bz-primary-btn hero-btn">Our Services</a>
</div>
</div>
</div>
</div>
</section>
<!-- ./ hero-section -->
<section class="about-section pt-120 pb-120">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-6 col-md-12">
<div class="about-img-wrap">
<div class="about-img img-reveal">
<div class="img-overlay"></div>
<img src="assets/img/images/about-img-1.png" alt="img">
</div>
<div class="shape"></div>
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="about-content fade-wrapper">
<div class="section-heading heading-2 mb-30">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5"><span class="left-shape"></span>About Our Company</h4>
<h2 class="section-title" data-text-animation data-split="word" data-duration="1">The Only Source of Knowledge is Experience</h2>
<p class="fade-top">Appropriately empower dynamic leadership skills after business portals. Globally myocardinate interactive supply chains with distinctive quality vectors.</p>
</div>
<div class="about-items">
<div class="about-item fade-top">
<div class="icon"><img src="assets/img/icon/about-icon-1.png" alt="img"></div>
<div class="content">
<h4 class="title">Provide Skills <br>Services</h4>
</div>
</div>
</div>
<div class="about-btn-wrap fade-top">
<a href="contact.html" class="bz-primary-btn">Contact With Us<i class="fa-regular fa-arrow-right"></i></a>
<a href="tel:+58658645869" class="bz-transparent-btn"><i class="fa-sharp fa-solid fa-phone-volume"></i>+ 586 5864 5869</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./ about-section -->
<section class="counter-section pt-120 pb-120" data-background="assets/img/bg-img/counter-bg.jpg">
<div class="overlay"></div>
<div class="shapes">
<div class="shape shape-1"><img src="assets/img/shapes/counter-shape-1.png" alt="shape"></div>
</div>
<div class="container">
<div class="row gy-lg-0 gy-4 fade-wrapper">
<div class="col-lg-3 col-md-6">
<div class="counter-item fade-top">
<div class="icon">
<div class="icon-inner">
<img src="assets/img/icon/counter-icon-1.png" alt="icon">
</div>
<div class="shape"></div>
</div>
<div class="counter-content">
<h3 class="title"><span class="odometer" data-count="858">0</span></h3>
<p>Projects Done</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./ Counter-section -->
<section class="service-section pt-120 pb-120" data-background="assets/img/bg-img/service-bg.png">
<div class="container">
<div class="section-heading text-center">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5"><span class="left-shape"></span>Our Services<span class="right-shape"></span></h4>
<h2 class="section-title" data-text-animation data-split="word" data-duration="1">Service We Provide</h2>
</div>
<div class="row fade-wrapper gy-lg-0 gy-4 justify-content-center">
<div class="col-lg-4 col-md-6 fade-top">
<div class="service-item">
<div class="icon"><img src="assets/img/icon/service-icon-1.png" alt="icon"></div>
<div class="service-content">
<h3 class="title"><a href="service-details.html">Operations Optimization</a></h3>
<p>Your operations and processes are fundamental to your company’s ability to deliver value to get you where you want to.</p>
<a href="service-details.html" class="bz-primary-btn">Read More <i class="fa-regular fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./ Service-section -->
<section class="content-section pt-120 pb-120">
<div class="content-container">
<div class="content-wrap pt-120 pb-120" data-background="assets/img/bg-img/content-bg.png">
<div class="shapes">
<div class="shape-1"></div>
</div>
<div class="content-box">
<div class="section-heading mb-30">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5"><span class="left-shape"></span>Determination of our core team</h4>
<h2 class="section-title" data-text-animation data-split="word" data-duration="1">We Are Qualified In Every
<br>Car Departments</h2>
</div>
<div class="content-tab">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">About Us</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="tab-info">
<p>Nostra habitasse inceptos placerat vivamus vestibulum blandit odio dignissim aliquet nunc taciti, cubilia aenean lobortis class sollicitudin conubia urna acter elementum mauris porttitor mus commodo tortor.</p>
<div class="tab-progress">
<div class="progress">
<div class="progress-bar wow slideInLeft" data-wow-delay="0ms" data-wow-duration="2000ms" role="progressbar" style="width: 90%; visibility: visible; animation-duration: 2000ms; animation-delay: 0ms; animation-name: slideInLeft;">
<span>90%</span>
</div>
</div>
<h4 class="title">Engine Solution</h4>
</div>
<a href="contact.html" class="bz-primary-btn">Get a Quote</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./ Content-section -->
<section class="team-section pt-120 pb-120 fade-wrapper">
<div class="bg-shape fade-right"><img src="assets/img/shapes/team-shape-1.png" alt="img"></div>
<div class="container">
<div class="team-top">
<div class="section-heading white-content">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5"><span class="left-shape"></span>Our Team Members</h4>
<h2 class="section-title" data-text-animation data-split="word" data-duration="1">Meet The Expert Team Members</h2>
</div>
</div>
</div>
<div class="team-wrap">
<div class="row gy-lg-0 gy-4 fade-wrapper">
<div class="col-lg-3 col-md-6 fade-top">
<div class="team-item">
<div class="team-thumb">
<img src="assets/img/team/team-1.png" alt="team">
<div class="shapes">
<div class="shape-1"></div>
<div class="shape-2"></div>
</div>
</div>
<div class="team-content-wrap">
<div class="team-content">
<h3 class="title"><a href="team-details.html">Markus Finland</a></h3>
<span>Business Coach</span>
</div>
<div class="team-social">
<div class="expand">
<i class="fa-solid fa-share-nodes"></i>
</div>
<ul class="social-list">
<li><a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" class="google"><i class="fab fa-behance"></i></a></li>
<li><a href="#" class="behance"><i class="fab fa-linkedin"></i></a></li>
<li><a href="#" class="pinterest"><i class="fab fa-pinterest-p"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./ team-section -->
<section class="project-section pt-120 pb-120">
<div class="bg-shape" data-background="assets/img/bg-img/project-bg.png"></div>
<div class="container">
<div class="project-top heading-space">
<div class="section-heading mb-0">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5"><span class="left-shape"></span>Our Projects</h4>
<h2 class="section-title mb-0" data-text-animation data-split="word" data-duration="1">Our Business Case Study</h2>
</div>
<div class="swiper-arrow">
<div class="swiper-nav swiper-next"><i class="fa-regular fa-arrow-left"></i></div>
</div>
</div>
<div class="project-carousel swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="project-item">
<div class="project-img">
<div class="overlay"></div>
<div class="overlay-2"></div>
<img src="assets/img/project/prooject-1.png" alt="project">
</div>
<div class="project-content">
<h3 class="title"><a href="project-details.html">Pro Business Solution</a></h3>
<span>Case Study, Growth</span>
<p>Ornare etiam laoreet dictumst nisl quisque scelerisque cras ut porta interdum purus mattis iaculis litora turpis torquent posuere sodales himenaeos</p>
<a href="project-details.html" class="bz-primary-btn">View Project</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./ project-section -->
<section class="testimonial-section pt-120 pb-120" data-background="assets/img/bg-img/testi-bg.png">
<div class="container">
<div class="section-heading text-center">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5"><span class="left-shape"></span>Client’s Feedbacks</h4>
<h2 class="section-title mb-0" data-text-animation data-split="word" data-duration="1">What Our Customers Have to Say</h2>
</div>
<div class="testi-carousel swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="testi-item">
<div class="testi-top">
<div class="testi-author">
<img src="assets/img/images/testi-author-1.png" alt="img">
<h4 class="name">Henry Oliver <span>IT Customer</span></h4>
</div>
<div class="quote"><img src="assets/img/icon/quote.png" alt="quote"></div>
</div>
<p>“Quickly formulate high yield web services before functional process improvements enable premier with e-business customer service.”</p>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
</section>
<!-- ./ testimonial-section -->
<section class="blog-section pt-120 pb-120 fade-wrapper">
<div class="container">
<div class="section-heading text-center">
<h4 class="sub-heading" data-text-animation="fade-in" data-duration="1.5"><span class="left-shape"></span>News Blog</h4>
<h2 class="section-title mb-0" data-text-animation data-split="word" data-duration="1">Latest News & Articles</h2>
</div>
<div class="row gy-4 justify-content-center">
<div class="col-lg-4 col-md-6">
<div class="post-card fade-top">
<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-calendar"></i>24 Feb, 2024</li>
<li><i class="fa-regular fa-user"></i>by admin</li>
</ul>
<h3 class="title"><a href="blog-details.html">Developer within team are
responsible for creating</a></h3>
</div>
<div class="post-bottom">
<a class="read-more" href="blog-details.html">Read More<i class="fa-solid fa-chevrons-right"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./ blog-section -->
<section class="request-section">
<div class="bg-color"></div>
<div class="shapes">
<div class="shape shape-1"><img src="assets/img/shapes/request-shape-1.png" alt="shape"></div>
</div>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="request-form-wrap">
<h3 class="form-header">Request A Callback</h3>
<form class="request-form" action="mail.php">
<div class="form-group row">
<div class="col-md-12">
<div class="form-item">
<input type="text" id="fullname" name="fullname" class="form-control" placeholder="Your Name">
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<div class="form-item">
<input type="text" id="subject" name="subject" class="form-control" placeholder="What you like to discuss?">
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<div class="form-item">
<input type="text" id="phone" name="phone" class="form-control" placeholder="Phone number*">
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<div class="form-item message-item">
<textarea id="message" name="message" cols="30" rows="5" class="form-control address" placeholder="How can we help you?"></textarea>
</div>
</div>
</div>
<div class="submit-btn">
<button id="submit" class="bz-primary-btn" type="submit">Send Request</button>
</div>
</form>
</div>
</div>
<div class="col-md-6">
<div class="request-img-wrap">
<img class="men" src="assets/img/images/request-men.png" alt="men">
<img class="bg-img" src="assets/img/images/request-img.png" alt="img">
</div>
</div>
</div>
</div>
</section>
<!-- ./ request-section -->
<section class="sponsor-section pt-120 pb-120">
<div class="container">
<h3 class="sponsor-text-wrap">
<span></span>
<span class="sponsor-text">We Have THe 200+ Trusted Companies Who are trusting Bizan</span>
<span></span>
</h3>
<div class="sponsor-carousel swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="sponsor-item text-center">
<a href="#"><img src="assets/img/sponsor/sponsor-1.png" alt="sponsor"></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ./ sponsor-section -->
<footer class="footer-section pt-120 overflow-hidden">
<div class="footer-shape">
<img src="assets/img/shapes/footer-shape.png" alt="shape">
</div>
<div class="footer-imgs">
<div class="footer-img img-1"><img src="assets/img/images/footer-img-1.png" alt="img"></div>
</div>
<div class="container">
<div class="footer-top">
<div class="section-heading white-content">
<h2 class="section-title">Learn How We Create Unmatched <br>Solutions For Businesses</h2>
<a href="contact.html" class="bz-primary-btn">Lets Get Started Now <i class="fa-regular fa-arrow-right"></i></a>
</div>
</div>
<div class="row footer-wrap">
<div class="col-lg-3 col-md-6">
<div class="footer-widget">
<div class="widget-header">
<div class="footer-logo">
<a href="index.html"><img src="assets/img/logo/logo-1.png" alt="img"></a>
</div>
</div>
<p>1234, Restaurant St, South City <br>New York 0124</p>
<ul class="footer-social">
<li><a href="#"><i class="fa-brands fa-facebook-f"></i></a></li>
</ul>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="footer-widget widget-space">
<div class="widget-header">
<h3 class="widget-title">Quick Links</h3>
</div>
<ul class="footer-list">
<li><a href="about.html">About Us</a></li>
</ul>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="footer-widget widget-space">
<div class="widget-header">
<h3 class="widget-title">Our Newsletter</h3>
</div>
<p>Sign up to Private's weekly newsletter to get the latest updates.</p>
<div class="footer-form mb-20">
<form action="#" class="rr-subscribe-form">
<input class="form-control" type="email" name="email" placeholder="Email address">
<input type="hidden" name="action" value="mailchimpsubscribe">
<button class="submit">Subscribe</button>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="copyright-area">
<div class="container">
<div class="row copyright-content">
<div class="col-md-6">
<p>© 2024 Bizan. All Rights Reserved.</p>
</div>
<div class="col-md-6">
<ul class="copy-list">
<li><a href="contact.html">Terms & Conditions</a></li>
<li><a href="contact.html">Privacy Policy</a></li>
</ul>
</div>
</div>
</div>
</div>
</footer>
<!-- ./ footer-section -->
These are the css files:
This template use these Javascript files:
jquary-3.6.0.min.js
bootstrap-bundle.js
imagesloaded-pkgd.js
waypoints.min.js
venobox.min.js
odometer.min.js
meanmenu.js
smooth-scroll.js
swiper.min.js
moment.min.js
daterangepicker.min.js
split-type.min.js
gsap.min.js
scroll-trigger.min.js
nice-select.js
ajax-form.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 mail.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 template. As I said at the beginning, I'd be glad to help you if you have any questions relating to this template. No guarantees, but I'll do my best to assist.
Bizan