Created:03/02/2024
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.
<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>Optiboom - Digital Marketing & SEO Agency 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/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 class="preloader">
<img src="assets/img/logo/proloader.gif" alt="preloader-icon">
</div>
<!--/.site-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="service-section">
</section><!-- ./ service-section -->
<section class="sponsor-section">
</section><!-- ./ sponsor-section -->
<section class="about-section">
</section><!-- ./ about-section -->
<section class="skill-section">
</section><!-- ./skill-section -->
<section class="counter-section">
</section><!-- ./counter-section -->
<section class="project-section">
</section><!-- ./project-section -->
<section class="testimonial-section">
</section><!-- ./testimonial-section -->
<section class="pricing-section">
</section><!-- ./pricing-section -->
<section class="request-section">
</section><!-- ./request-section -->
<section class="blog-section">
</section><!-- ./blog-section -->
<section class="footer-section">
</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/nice-select.js"></script>
<script src="assets/js/vendor/easypiechart.min.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/smooth-scroll.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="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> <li class="menu-item-has-children active"> <a href="index.html">Home</a> <ul> <li><a href="index.html">Home One</a></li> <li><a href="index-2.html">Home Two</a></li> <li><a href="index-3.html">Home Three</a></li> </ul> </li> </ul> </div> </div> <!-- /.header-menu-wrap --> <div class="header-right"> <div class="search-icon dl-search-icon"> <i class="fa-solid fa-magnifying-glass"></i> </div> <a href="contact.html" class="pb-primary-btn header-btn">Get Started</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.png"> <div class="hero-shapes"> <div class="shape top-shape"></div> </div> <div class="container"> <div class="row align-items-center"> <div class="col-lg-6"> <div class="hero-content md-pb-20"> <h1 class="title tracking-in-expand wow fade-in-bottom" data-wow-delay="300ms"><span class="shape-text">Unlock Your <img class="shape" src="assets/img/shapes/hero-text-shape.png" alt="shape"></span> Online <span class="gradient-text">Marketing</span></h1> <p class="wow fade-in-bottom" data-wow-delay="500ms">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</p> <a href="about.html" class="pb-primary-btn primary-2 wow fade-in-bottom" data-wow-delay="600ms">Learn More</a> <div class="shapes"> <div class="round-shape"><img src="assets/img/shapes/hero-round.png" alt="shape"></div> <div class="star"><img src="assets/img/shapes/hero-star.png" alt="shape"></div> </div> </div> </div> <div class="col-lg-6"> <div class="hero-thumb text-center"> <div class="shapes"> <div class="shape hero-shape-1"><img src="assets/img/shapes/hero-shape-1.png" alt="shape"></div> </div> <div class="hero-counter"> <img src="assets/img/icon/hero-user.png" alt="icon"> <div class="counter-content"> <h3 class="title"><span class="odometer" data-count="5000">0</span>+</h3> <p>Satisfied Clients</p> </div> </div> <img src="assets/img/images/hero-img-1.png" alt="hero"> </div> </div> </div> </div> </section> <!-- ./ hero-section -->
<section class="service-section pt-120"> <div class="container"> <div class="row justify-content-center gy-lg-0 gy-4"> <div class="col-lg-4 col-md-6"> <div class="service-item text-center wow fade-in-bottom" data-wow-delay="400ms"> <div class="service-icon"> <img src="assets/img/icon/service-icon-1.png" alt="service"> </div> <div class="service-content"> <h3 class="title"><a href="service-details.html">Digital Advertising</a></h3> <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout</p> </div> <div class="service-btn"> <a href="service-details.html"><i class="fa-solid fa-arrow-right"></i></a> </div> </div> </div> </div> </div> </section> <!-- ./ service-section -->
<div class="sponsor-section pt-180 pb-180"> <div class="container"> <div class="sponsor-carousel swiper"> <div class="swiper-wrapper"> <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="about-section pb-120"> <div class="container"> <div class="row align-items-center gy-lg-0 gy-4"> <div class="col-lg-6"> <div class="about-img wow fade-in-left" data-wow-delay="400ms"> <div class="shape" data-background="assets/img/shapes/about-shape.png"></div> <img class="img" src="assets/img/images/about-img-1.png" alt="about"> <div class="about-counter"> <div class="counter-icon"> <div class="icon"> <img src="assets/img/icon/about-icon.png" alt="icon"> </div> <h3 class="title"><span class="odometer" data-count="10">0</span>+</h3> </div> <p>Years Of Experiences</p> </div> </div> </div> <div class="col-lg-6"> <div class="about-content"> <div class="shape wow fade-in-right" data-wow-delay="400ms"><img src="assets/img/shapes/about-shape-2.png" alt="shape"></div> <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">Dominate the <span>Digital</span> Landscape</h2> <p class="wow fade-in-right" data-wow-delay="500ms">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet rcus nunc. Duis egestas ac ante sed tincidunt.</p> </div> <ul class="about-list wow fade-in-right" data-wow-delay="600ms"> <li><i class="fa-regular fa-chevrons-right"></i>International Development Authority</li> <a href="about.html" class="pb-primary-btn wow fade-in-right" data-wow-delay="700ms">Read More</a> </div> </div> </div> </div> </section> <!-- ./ about-section -->
<section class="skill-section pb-120"> <div class="container"> <div class="row skill-wrap gy-lg-0 gy-4 align-items-center"> <div class="col-lg-6"> <div class="skill-content"> <div class="section-heading heading-2"> <h4 class="sub-heading wow fade-in-left" data-wow-delay="300ms">What We Do</h4> <h2 class="section-title wow fade-in-left" data-wow-delay="400ms">Drive More <span>Traffic</span> Get More Sales</h2> <p class="wow fade-in-left" data-wow-delay="500ms">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet rcus nunc. Duis egestas ac ante sed tincidunt.</p> </div> <div class="skills-items"> <div class="skills-item wow fade-in-left" data-wow-delay="600ms"> <div class="item-content"> <h4 class="title">International Authority</h4> <span>$4000</span> </div> <div class="progress"> <div class="progress-bar wow slideInLeft" data-wow-delay="0ms" data-wow-duration="2000ms" role="progressbar" style="width: 80%;"> <span data-background="assets/img/shapes/skill-shape.png">80%</span> <div class="dot"></div> </div> </div> </div> </div> </div> </div> <div class="col-lg-6"> <div class="skill-img wow slide-in-right" data-wow-delay="500ms"> <img src="assets/img/images/skill-img-1.png" alt="skill"> </div> </div> </div> </div> </section> <!-- ./ skill-section -->
<section class="counter-section"> <div class="bg-color"></div> <div class="container"> <div class="row counter-wrap gy-lg-0 gy-4"> <div class="col-lg-3 col-md-6"> <div class="counter-item"> <div class="counter-icon"> <img src="assets/img/icon/counter-1.png" alt="icon"> </div> <div class="counter-content"> <h3 class="title"><span class="odometer" data-count="200">0</span><span class="text">+</span></h3> <p>Team member</p> </div> </div> </div> </div> </div> </section> <!-- ./ counter-section -->
<section class="project-section pt-120 bg-grey"> <div class="bg-color"></div> <div class="shapes"> <div class="shape shape-1"><img src="assets/img/shapes/project-shape-1.png" alt="project"></div> </div> <div class="container"> <div class="section-heading text-center"> <h4 class="sub-heading wow fade-in-bottom" data-wow-delay="300ms">Our Projects</h4> <h2 class="section-title wow fade-in-bottom" data-wow-delay="400ms">Optimizing Brands for Online <span>Success</span></h2> </div> <div class="project-filter"> <div class="row"> <div class="col-lg-12"> <ul class="project-filter-list text-center"> <li class="active" data-filter="*">Search Engine</li> </ul> </div> </div> <div class="row filter-items justify-content-center gy-lg-0 gy-4"> <div class="col-lg-4 col-md-6 single-item authority content"> <div class="project-item"> <div class="project-thumb"> <a href="project-details.html"><img src="assets/img/project/project-1.jpg" alt="project"></a> <div class="project-content"> <h3 class="title"><a href="project-details.html">Brand design</a></h3> <p>Customer satisfaction is crucial for a des amohlodi business as it leads</p> </div> </div> </div> </div> </div> </div> </div> </section> <!-- ./ project-section -->
<section class="testimonial-section pt-120 pb-120"> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="testi-info md-pb-40"> <div class="section-heading heading-2"> <h4 class="sub-heading wow fade-in-bottom" data-wow-delay="300ms">Our Cients</h4> <h2 class="section-title wow fade-in-bottom" data-wow-delay="400ms">Grow Your Business with Strategic <span>SEO</span></h2> <p class="wow fade-in-bottom" data-wow-delay="500ms">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet rcus nunc. Duis egestas ac ante sed tincidunt.</p> </div> <img class="wow fade-in-bottom" data-wow-delay="600ms" src="assets/img/images/testi-img.png" alt="testi"> </div> </div> <div class="col-lg-6"> <div class="testi-items"> <div class="testi-item wow fade-in-bottom" data-wow-delay="400ms"> <div class="client-thumb"> <img src="assets/img/images/testi-client-1.png" alt="testi"> </div> <img class="quote" src="assets/img/shapes/quote.png" alt="quote"> <div class="testi-content"> <h3 class="name">Robert Fox <span>Nursing Assistant</span></h3> <ul class="review"> <li><i class="fas fa-star"></i></li> </ul> <p>Financial planners help people to knowledge in about how to invest and save their moneye the most efficient way in to eve.planners Financial planners help people to my destin knowledge in about how to invest</p> </div> </div> </div> </div> </div> </div> </section> <!-- ./ project-section -->
<section class="pricing-section pb-120 overflow-hidden"> <div class="container"> <div class="section-heading text-center"> <h4 class="sub-heading wow fade-in-bottom" data-wow-delay="300ms">Our Pricing</h4> <h2 class="section-title wow fade-in-bottom" data-wow-delay="400ms">Harness the Power of Digital <span>Marketing</span></h2> </div> <div class="pricing-tab wow fade-in-bottom" data-wow-delay="500ms"> <div class="shape"><img src="assets/img/shapes/pricing.png" alt="shape"></div> <nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Yearly</button> <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Monthly</button> </div> </nav> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> <div class="row gy-lg-0 gy-4 justify-content-center"> <div class="col-lg-4 col-md-6"> <div class="pricing-item"> <div class="pricing-icon"> <img src="assets/img/icon/pricing-1.png" alt="icon"> </div> <div class="pricing-content"> <span class="sub-title">Starter Plan</span> <h3 class="title">$19 <span>/mo</span></h3> <p>Lorem Ipsum is simply dummy.</p> <ul class="pricing-list"> <li><i class="fa-regular fa-chevrons-right"></i>Mistakes To Avoid</li> </ul> <a href="pricing.html" class="pricing-btn">Take My Plan</a> </div> </div> </div> </div> </div> </div> </div> </div> </section> <!-- ./ pricing-section -->
<section class="request-section bg-grey pt-120"> <div class="bg-color"></div> <div class="container"> <div class="row"> <div class="col-lg-6"> <div class="request-content wow fade-in-left" data-wow-delay="400ms"> <div class="shape"><img src="assets/img/shapes/request-shape.png" alt="shape"></div> <div class="section-heading heading-2"> <h4 class="sub-heading">Contact Us</h4> <h2 class="section-title">Stand Out in the <span>Digital</span> Crowd Presence</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet rcus nunc. Duis egestas ac ante sed tincidunt.</p> </div> <div class="request-form"> <form action="contact.php" method="post" id="ajax_contact" class="form-horizontal"> <div class="form-group row"> <div class="col-md-6"> <input type="text" id="fullname" name="fullname" class="form-control" placeholder="Your Name"> </div> <div class="col-md-6"> <input type="email" id="email" name="email" class="form-control" placeholder="Your Email"> </div> </div> <div class="submit-btn text-center"> <button id="submit" class="pb-primary-btn" type="submit">Send a messege</button> </div> </form> </div> </div> </div> <div class="col-lg-6"> <div class="request-img text-center wow slide-in-right" data-wow-delay="300ms"> <img src="assets/img/images/request-img.png" alt="img"> </div> </div> </div> </div> </section> <!-- ./ request-section -->
<section class="blog-section pt-120 pb-120"> <div class="container"> <div class="section-heading heading-2"> <h4 class="sub-heading wow fade-in-bottom" data-wow-delay="400ms">Our Blogs</h4> <h2 class="section-title wow fade-in-bottom" data-wow-delay="600ms">Drive Results with <span>Effective</span> Online Marketing</h2> </div> <div class="row gy-lg-0 gy-4 justify-content-center"> <div class="col-md-6"> <div class="post-card wow fade-in-bottom" data-wow-delay="400ms"> <div class="post-thumb"> <img src="assets/img/blog/post-1.jpg" alt="post"> </div> <div class="post-content-wrap"> <ul class="post-meta"> <li>By admin</li> </ul> <div class="post-content"> <h3 class="title"><a href="blog-details.html">Reach New Heights with Digital the Search Engine Results </a></h3> <p>Medical is a field that deals with the study, diagnosis, and treatment diseases Medical is a field that deals with the </p> </div> </div> </div> </div> </div> </div> </section> <!-- ./ blog-section -->
<section class="blog-section pt-120 pb-120"> <div class="container"> <div class="section-heading heading-2"> <h4 class="sub-heading wow fade-in-bottom" data-wow-delay="400ms">Our Blogs</h4> <h2 class="section-title wow fade-in-bottom" data-wow-delay="600ms">Drive Results with <span>Effective</span> Online Marketing</h2> </div> <div class="row gy-lg-0 gy-4 justify-content-center"> <div class="col-md-6"> <div class="post-card wow fade-in-bottom" data-wow-delay="400ms"> <div class="post-thumb"> <img src="assets/img/blog/post-1.jpg" alt="post"> </div> <div class="post-content-wrap"> <ul class="post-meta"> <li>By admin</li> </ul> <div class="post-content"> <h3 class="title"><a href="blog-details.html">Reach New Heights with Digital the Search Engine Results </a></h3> <p>Medical is a field that deals with the study, diagnosis, and treatment diseases Medical is a field that deals with the </p> </div> </div> </div> </div> </div> </div> </section> <!-- ./ blog-section -->
<footer class="footer-section bg-grey"> <div class="footer-bg" data-background="assets/img/bg-img/footer-bg.png"></div> <div class="container"> <div class="row footer-wrap pt-120 pb-120"> <div class="col-lg-5 col-md-6"> <div class="footer-widget"> <div class="site-logo"> <a href="index.html"><img src="assets/img/logo/logo-dark.png" alt="logo"></a> </div> <div class="section-heading heading-2"> <h2 class="section-title">Drive is with <span>Effective</span> Online Marketing</h2> </div> <ul class="footer-links"> <li><a href="about.html">About</a></li> </ul> </div> </div> </div> </div> <div class="copyright-area"> <div class="container"> <div class="copyright-content"> <p>Copyright © RRDevs 2024 <span>OptiBoom</span>, All Rights Reserved.</p> <ul class="copy-list"> <li><a href="contact.html">Trams & Condition</a></li> </ul> </div> </div> </div> </footer> <!-- ./ footer-section -->
These are the css files:
This theme use these Javascript files:
jquary-3.6.0.min.js
ajax-form..js
bootstrap.min.js
popper.min.js
odometer.min.js
waypoints.min.js
venobox.min.js
swiper.min.js
imagesloaded.pkgd.min.js
jquery.isotope.v3.0.2.js
wow.min.js
contact.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.
Optiboom