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.
Unzip the archive and find out the folder "demo-file". There are all the template files in this folder. You can open the following files for viewing in browser.
To change logotype in the navigation panel, find image images/logo.png and replace it with your logo.
This is logo and navigation codes.
<header class="header-section"> <div class="header-bottom"> <div class="container"> <div class="header-area"> <div class="logo"> <a href="index.html"> <img src="assets/images/logo.png"/> <a/> </div> <ul class="main-menu"> <li> <a href="#0">Home<a/> </li> <li> <a href="about.html">About Us<a/> </li> <li> <a href="service.html">Services<a/> </li> <li> <a href="faq.html">Faq<a/> </li> <li> <a href="#0">Pages<a/> <ul class="submenu"> <li> <a href="app.html">Download App<a/> </li> <li> <a href="privacy.html">Privacy Policy<a/> </li> <li> <a href="register.html">Register<a/> </li> <li> <a href="login.html">Login<a/> </li> <li> <a href="404.html">Error page<a/> </li> </ul> </li> </ul> </li> <li> </ul> </li> <li> <a href="contact.html">Contact<a/> </li> </ul> </div> </div> </div> </header>
Here is your main logo code. To add your logo, replace logo.png from images/logo/ directory with your logo in PNG format.
<img class="site-logo" src="assets/images/logo.png" alt="logo">
This is your default slider structure.
<div class="tab"> <ul class="tab-menu"> <li class="active">Tab1</li> <li>Tab2</li> <li>Tab3</li> <li>Tab4</li> <li>Tab5</li> </ul> <div class="tab-area"> <div class="tab-item active"> -------- <div/> <div class="tab-item"> -------- <div/> <div class="tab-item"> -------- <div/> <div class="tab-item"> -------- <div/> <div class="tab-item"> -------- <div/> </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.
Here is your section structure.
<section class="section-class ptb-120"> <div class="container"> <div class="row"> <div class="section-header"> <h2 class="section-title">Your section heading</h2> </div> </div> <div class="row"> ... </div> </div> </section>
In the class="section-class" you can replace with your desired class.
the class pt and pb 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 ptb-120 bg-img"> <div class="container"> ... </div> </section>
you can select background color between white and cloud color. To add cloud color, just simply add the class bg-img in 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
Data-filter attribute is the name of the category of the works, on the basis of which the dynamic filtering is made.
Edit contact information in assets/contact.html — folder.
If you want to use appear animation for some element, you need to add class wow fadeIn to this element and set data attribute like this:
<div class="wow fadeIn" data-wow-delay="0.1s" data-wow-duration="2s"> ... </div>
The full list of appear animation effects you can find here - http://daneden.github.io/animate.css/
<!--Google Fonts-->
hhttps://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Josefin+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet
<link rel="stylesheet" href="assets/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/animate.css"> <link rel="stylesheet" href="assets/css/fontawesome.css"> <link rel="stylesheet" href="assets/css/lineawesome.css"> <link rel="stylesheet" href="assets/css/swiper.min.css"> <link rel="stylesheet" href="assets/css/main.css">
<script src="assets/js/jquery-3.6.0.min.js"> <script src="assets/js/bootstrap.min.js"> <script src="assets/js/lightcase.js"> <script src="assets/js/swiper.min.js"> <script src="assets/js/pace.js"> <script src="assets/js/main.js">
<div class="footer-bottom">
<div class="container">
<p>
Copyright ©2022 <a href="#">XPay</a>
All Rights
reserved
</p>
</div>
</div>