Hyion Documentation
- Getting Started
- Welcome
- Features
- Folder Arrange
- Instalation
- Upload
- Fonts
- CSS File
- JS File
- Customization
- Logo Type
- Menu Bar
- Tabs Customization
- Section Styles
- Hyion Utility
- Contact Email
- Custom Appear Animation
- Change Copyright
Getting Started
Welcome
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 at viserlab@gmail.com.
Features
- One Home Page
- 19 Inner Pages
- Fully responsive
- Clear & Neat design
- Bootstrap Based
- Font Awesome Icon
- Line Awesome Icon
- Nice portfolio and Blog
- Counter Odometer
- Nice Select
- Smooth animation
- Browser compatibility (IE10+, Chrome, Safari, Firefox, Opera)
- Well documented
Folder Arrange
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.
- assets/css — folder with css files.
- assets/fonts — folder with icon fonts.
- assets/images — folder with image files.
- assets/js — folder with Javascript files.
- index.html is Home Page of template
- about.html is For About Page
- user-panel.html is For User Panel Page
- investment-plan.html is For Investment Plan 1 Page
- investment-plan-2.html is For Investment Plan 2 Page
- investment-plan-3.html is For Investment Plan 3 Page
- investor.html is For Investor Page
- mission-vission.html is For Mision Vision Page
- blog-page.html is For Blog Page
- blog-details-page.html is For Blog Single Page
- affiliate.html is For Affiliate Page
- faqs.html is For Faqs Page
- refund-policy.html is For Refund Policy Page
- privacy-policy.html is For Privacy Policy Page
- terms-of-use.html is For Terms of Use Page
- sign-in.html is For Login Page
- sign-up.html is For Registration Page
- contact.html is For Contact Page
- error.html is For 404 Error Page
Installation
01. FTP Upload
- Open Your FTP manager and connect to your hosting
- Browse to required directory(Normally index.html)
- Upload the files inside buyer-file folder
02. Fonts
( Fonts are linked in the top of the css file )
<!--Google Fonts-->
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&family=Roboto:wght@100;300;400;500;700&display=swap");
03. Source File (CSS)
( Css are linked in the top of the every Html file )
<!-- BootStrap Link -->
<link rel="stylesheet" href="./assets/css/bootstrap.min.css">
<!-- Icon Link -->
<link rel="stylesheet" href="./assets/css/all.min.css">
<link rel="stylesheet" href="./assets/css/line-awesome.min.css">
<!-- Plugings Link -->
<link rel="stylesheet" href="./assets/css/animate.css">
<link rel="stylesheet" href="./assets/css/magnific-popup.css">
<link rel="stylesheet" href="./assets/css/nice-select.css">
<link rel="stylesheet" href="./assets/css/odometer.css">
<link rel="stylesheet" href="./assets/css/slick.css">
<!-- Custom Link -->
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="shortcut icon" href="./assets/images/favicon.png" type="image/x-icon">
04. Source File (JS)
( Js are linked in the bottom of the every Html file )
<script src="./assets/js/jquery-3.3.1.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/jquery.ui.js"></script>
<script src="./assets/js/slick.min.js"></script>
<script src="./assets/js//wow.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/paroller.min.js"></script>
<script src="./assets/js/main.js"></script>
Logo Type
To change logotype in the navigation panel, find image images/logo/logo.png and replace it with your logo.
Note: Keep your logo inside the ./assets/imaegs/logo folder. The logo size should be minimum 120x66 pixel.
Menu Bar with logo
This is logo and navigation codes.
<div class="header-area">
<div class="logo">
<a href="./index.html">
<img src="./assets/images/logo.png" alt="logo">
</a>
</div>
<div class="header-trigger d-block d-lg-none">
<span></span>
</div>
<ul class="menu">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">About</a>
</li>
<li>
<a href="#0">Plan</a>
<ul class="sub-menu">
<li>
<a href="investment-plan-01.html">Investment Plan 01</a>
</li>
<li>
<a href="investment-plan-02.html">Investment Plan 02</a>
</li>
<li>
<a href="investment-plan-03.html">Investment Plan 03</a>
</li>
</ul>
</li>
<li>
<a href="#0">Pages</a>
<ul class="sub-menu">
<li>
<a href="investor.html">Investor</a>
</li>
<li>
<a href="affiliate.html">Affiliate</a>
</li>
<li>
<a href="mission-vision.html">Mission & Vision</a>
</li>
<li>
<a href="privacy-policy.html">Privacy & Policy</a>
</li>
<li>
<a href="terms-of-service.html">Terms Of Service</a>
</li>
<li>
<a href="refund-policy.html">Refund Policy</a>
</li>
<li>
<a href="faq.html">Faq</a>
</li>
<li>
<a href="404.html">404</a>
</li>
<li>
<a href="#0">Account</a>
<ul class="sub-menu">
<li>
<a href="login.html">Log In</a>
</li>
<li>
<a href="sign-up.html">Sign Up</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="#0">Blog</a>
<ul class="sub-menu">
<li>
<a href="blog.html">Blog</a>
</li>
<li>
<a href="blog-details.html">Blog Details</a>
</li>
</ul>
</li>
<li>
<a href="contact.html">Contact</a>
</li>
<li>
<a href="#0" class="cmn--btn">Invest Now</a>
</li>
</ul>
</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">
Tab Customization
This is your default tab structure.
<ul class="nav nav-tabs">
<li>
<a href="#targeted-id-here" data-bs-toggle="tab" class="active">Your Tab Menu</a>
</li>
<li>
<a href="#targeted-id-here" data-bs-toggle="tab">Your Tab Menu</a>
</li>
<li>
<a href="#targeted-id-here" data-bs-toggle="tab">Your Tab Menu</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane fade show active" id="id">
--------
<div/>
<div class="tab-pane fade" id="id">
--------
<div/>
<div class="tab-pane fade" id="id">
--------
<div/>
<div class="tab-pane fade" id="id">
--------
<div/>
<div class="tab-pane fade" id="id">
--------
<div/>
</div>
To change the tab heading you will need to edit in the tag <li><a href="#targeted-id-here" data-bs-toggle="tab">Here is your heading</a></li> and add your text in the middle of the tag.
And The content you will set for every tab should keep inside tab-pane class. The tab item what you want to keep active , you should add class "active show" to that "tab-pane" class.
Section Styles
Here is your section structure.
<section class="section-class padding-top padding-bottom">
<div class="container">
<div class="section-header">
<span class="cate">section category</span>
<h2 class="title">Your Section Title</h2>
<p>Section Intro para Text</p>
</div>
<div class="row">
...
</div>
</div>
</section>
the class padding-top and padding-bottom is the space between each sections.
Section With Background
<section class="section-class padding-top padding-bottom section-bg">
<div class="container">
...
</div>
</section>
Hyion Utility
You can use next modification classes to set block margins and paddings:
margin-top
mt-1 mt-2 ... mt-5
margin-bottommb-1 mb-2 ... mb-5
padding-toppt-1 pt-2 ... pt-5
padding-bottompb-1 pb-2 ... pb-5
Custom Appear Animation
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/
08. Change Copyright
<div class="footer-bottom pt-70 light-color text-center">
<p>Your Copyright</p>
</div>
Support
If you have any questions, feel free to contact us at viserlab@gmail.com.