Thanks for purchasing our template :)
It is our great pleasure that you purchased our template. And we want to tell you that you don't need to write any codes for this template. Just follow some instructions for customizing the template.
If you have any questions, feel free to contact us to support center.
Unzip the archive and find out the folder "buyer-file". There are all the template files in this folder. You can open the following files for viewing in browser.
<!--Google Fonts-->
@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,400;0,500;1,300;1,400&display=swap");
<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
<link rel="stylesheet" href="./assets/css/all.min.css">
<link rel="stylesheet" href="./assets/css/animate.css">
<link rel="stylesheet" href="./assets/css/odometer.css">
<link rel="stylesheet" href="./assets/css/nice-select.css">
<link rel="stylesheet" href="./assets/css/owl.min.css">
<link rel="stylesheet" href="./assets/css/magnific-popup.css">
<link rel="stylesheet" href="./assets/css/flaticon.css">
<link rel="stylesheet" href="./assets/css/main.css">
<script src="./assets/js/jquery-3.6.0.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/isotope.pkgd.min.js"></script>
<script src="./assets/js/magnific-popup.min.js"></script>
<script src="./assets/js/odometer.min.js"></script>
<script src="./assets/js/viewport.jquery.js"></script>
<script src="./assets/js/nice-select.js"></script>
<script src="./assets/js/owl.min.js"></script>
<script src="./assets/js/main.js"></script>
To change logotype in the navigation panel, find image images/logo/logo.png and replace it with your logo.
This is logo and navigation codes.
<div class="header-area">
<div class="logo">
<a href="./index.html">
<img src="./assets/images/logo/logo.png" alt="logo">
</a>
</div>
<ul class="menu d-none d-lg-flex flex-wrap">
<li>
<a href="#0">Home</a>
<ul class="submenu">
<li>
<a href="#0">Home 1</a>
</li>
<li>
<a href="#0">Home 2</a>
</li>
</ul>
</li>
<li>
<a href="#0">About Us</a>
</li>
<li>
<a href="#0">Courses</a>
<ul class="submenu">
<li>
<a href="#0">Courses</a>
</li>
<li>
<a href="#0">Course Details</a>
</li>
</ul>
</li>
<li>
<a href="#0">Pages</a>
<ul class="submenu">
<li>
<a href="#0">Instructor</a>
</li>
<li>
<a href="#0">Gallery</a>
</li>
<li>
<a href="#0">Event</a>
</li>
<li>
<a href="#0">Upcoming Events</a>
</li>
</ul>
</li>
<li>
<a href="#0">Blog</a>
<ul class="submenu">
<li>
<a href="#0">Blogs</a>
</li>
<li>
<a href="#0">Blog Details</a>
</li>
</ul>
</li>
<li>
<a href="#0">Contact</a>
</li>
</ul>
<div class="header-bar ml-4">
<span></span>
<span></span>
<span></span>
</div>
<form class="course-search-form ml-auto mr-4">
<select class="select-bar rounded">
<option value="01">Category</option>
<option value="02">Physics</option>
<option value="03">Chemistry</option>
<option value="04">History</option>
<option value="05">Geometry</option>
<option value="06">LoremIp</option>
<option value="07">UI/UX</option>
<option value="08">Laravel</option>
</select>
<input type="text" name="name" placeholder="Search Courses" class="rounded">
<button type="submit" class="rounded"><i class="flaticon-loupe"></i></button>
</form>
<a href="#0" class="custom-button"><i class="fas fa-user"></i><span>Sign Up</span></a>
</div>
Here is your main logo code. To add your logo, replace logo.png from images/logo/ directory with your logo in PNG format.
<img src="./assets/images/logo/logo.png" alt="logo">
This is your default slider structure.
<ul class="nav nav-tabs">
<li>
<a href="#linked-id-1" class="active">Tab1</a>
</li>
<li>
<a href="#linked-id-2">Tab2</a>
</li>
<li>
<a href="#linked-id-3">Tab2</a>
</li>
<li>
<a href="#linked-id-4">Tab2</a>
</li>
</ul>
<div class="tab-area">
<div class="tab-pane show active" id="linked-id-1">
--------
<div/>
<div class="tab-pane" id="linked-id-2">
--------
<div/>
<div class="tab-pane" id="linked-id-3">
--------
<div/>
<div class="tab-pane" id="linked-id-4">
--------
<div/>
</div>
</div>
To change the tab heading you will need to edit in the tag <li>Here is your heading</li> and add your text in the middle of the tag.
To change the tab tagline you will need to edit in the tag <p>Here is your tagline</p> and add your text in the middle of the tag.
Which tab item you want to take as active you have to add "active show" class to that "tab-pane" class and li tag.
Here is your section structure.
<div class="section-header mb-0">
<h2 class="title"><span class="d-lg-block">Section Title Light & Color </span>Section Title</h2>
<p>Section Header Content Here</p>
</div>
If you need another style of section header - just you add "left style"class
to section-headerIn the class="section-class" you can replace with your desired class.
the class padding-top and padding-bottom is the space between each sections.
And in the section-header div you can add your heading of sections and tagline of sections.
You can add your content on the 2nd row div.
<section class="section-class pt-130 pb-130 section-bg">
<div class="container">
...
</div>
</section>
you can select background color between light and dark color. To add cloud color, just simply add the class body-bg, bg-1, bg-2, bg-3, bg-4, bg-theme to the section class.
You can use next modification classes to set block margins and paddings:
mt-10 mt-20 ... mt-50
margin-bottommb-10 mb-20 ... mb-50
padding-toppt-10 pt-20 ... pt-50
padding-bottompb-10 pb-20 ... pb-50
Edit contact information in contact.php — folder.
$to = 'support-demo@gmail.com';
<div class="footer-bottom-left">
<p>Copyright © 2023 <a href="#0">eduac</a> All Rights reserved</p>
</div>
If you have any questions, feel free to contact us at support center.