Copyright © 2022. Themeim All Rights Reserved.
Flynext- Flying Academy HTML-5 Template
Created: 27 December 2021
Latest Update: 27 December 2021
By: Themeim
Email: support@themeim.com
Thank you for purchasing our theme. Flynext - Flying Academy HTML-5 Template. If you have any question, please feel free to contact us.
Main File Structure
All the file are well organized, its so easy to work with the template.
1. Unzip the files.
2. Open "Flynext" folder.
You will see 4 directories, css, fonts, images and js.
In the first folder Content you will find style.css and other styling files the all the other files expect the htmls.
Js folder contain only the jquery library. Fonts folder contain essetial font files for fonts.
Flynext/
| |
| assets
| ├── css/
| | └── animate.css
| | └── bootstrap.css
| | └──fontawesome-all.min.css
| | └── icomoon.css
| | └── lightcase.css
| | └── line-awesome.min.css
| | └── odometer.css
| | └── swiper.min.css
| | └── style.css
| |
| ├── fonts
| | └── fa-brands-400.eot
| | └── fa-brands-400.svg
| | └── fa-brands-400.ttf
| | └── fa-brands-400.woff
| | └── fa-brands-400.woff2
| | └── fa-regular-400.eot
| | └── fa-regular-400.svg
| | └── fa-regular-400.ttf
| | └── fa-regular-400.woff
| | └── fa-regular-400.woff2
| | └── fa-solid-900.eot
| | └── fa-solid-900.svg
| | └── fa-solid-900.ttf
| | └── fa-solid-900.woff
| | └── fa-solid-900.woff2
| | └── FontAwesome.otf
| | └── fontawesome-webfont.eot
| | └── fontawesome-webfont.svg
| | └── fontawesome-webfont.ttf
| | └── fontawesome-webfont.woff
| | └── fontawesome-webfont.woff2
| |
| ├── js/
| └── bootstrap.min.js
| └── circle-progress.min.js
| └── jquery-3.5.0.min.js
| └── jquery.fancybox.js
| └── lightcase.js
| └── main.js
| └── odometer.min.js
| └── swiper.min.js
| └── viewport.jquery.js
| └── aos.js
│
├── about.html
├── blog.html
├── blog-classic.html
├── blog-details.html
├── contact.html
├── course.html
├── course-details.html
├── deals.html
├── deals-details.html
├── faq.html
├── index.html
├── index-dark.html
├── index-two.html
├── login.html
├── package.html
├── package-details.html
├── register.html
├── service.html
├── service-details.html
├── services.html
├── services-detail.html
├── team.html
├── team-details.html
Customization
How to Change Site Title And Favicon Icon
How to Change Logo
How to Change Your Menu Title
How to Change Slider Image and Text
How to Change Phone Number, E-Mail Address and Address
How to Change Copyright Text
HTML Structure
<!-- Banner Column Start--> <div class="col-xxl-5 col-xl-6 col-lg-12 mb-30"> <div class="banner-content"> <span class="sub-title"><span>Fly</span>next</span> <h1 class="title">Book a private jet instantly</h1> <p>Curly Airline proudly raises the bar and exceeds the standard for luxury and corporate private jet charter services. We pride ourselves on offering a professional service.</p> <div class="banner-btn"> <a href="#0" class="btn--base"><i class="fas fa-chevron-right mr-2"></i> Make Your Trip</a> <a href="#0" class="btn--base active">Request Quote <i class="icon-Group-2361 ml-2"></i></a> </div> </div> </div> <!-- Banner Column End-->
CSS Structure
/*---------------------
Banner Column
----------------------*/
position: relative;
z-index: 9;
}
.banner-section .banner-content .sub-title {
font-weight: 500;
font-size: 24px;
color: white;
font-family: "Kalam", cursive;
margin-bottom: 20px;
}
.banner-section .banner-content .sub-title span {
color: #dcbb87;
}
.banner-section .banner-content .title {
margin-bottom: 20px;
font-weight: 700;
color: white;
}
.banner-section .banner-content p {
color: white;
width: 80%;
font-size: 16px;
}
.banner-section .banner-content .banner-btn {
margin: -5px;
margin-top: 45px;
}
.banner-section .banner-content .banner-btn a {
background-color: transparent;
color: #dcbb87;
margin: 5px;
position: relative;
overflow: hidden;
}
.banner-section .banner-content .banner-btn a i {
transition: all 0.5s;
}
.banner-section .banner-content .banner-btn a i::before {
transition: all 0.5s;
}
.banner-section .banner-content .banner-btn a::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #dcbb87;
border-radius: 50%;
transform: translate(-10px, -70px) scale(0.1);
opacity: 0;
z-index: -1;
transition: transform 0.5s, opacity 0.5s, background-color 0.5s;
}
.banner-section .banner-content .banner-btn a:hover {
color: #19232d;
}
.banner-section .banner-content .banner-btn a:hover i::before {
color: #19232d;
}
.banner-section .banner-content .banner-btn a:hover::after {
opacity: 1;
transform-origin: 100px 100px;
border-radius: 999px;
transform: scale(1) translate(0, 0);
}
.banner-section .banner-content .banner-btn a.active {
color: white;
}
.banner-section .banner-content .banner-btn a.active::after {
display: none;
}
.banner-section .banner-content .banner-btn a.active i {
font-size: 12px;
}
.banner-section .banner-content .banner-btn a.active:hover {
color: #dcbb87;
}
.banner-section .banner-content .banner-btn a.active:hover i {
padding-left: 5px;
padding-right: 0;
}
.banner-section .banner-content .banner-btn a.active:hover i::before {
color: #dcbb87;
}
Sources & Credits
- Fonts
- Icons
- CSS
- JS
Supports
Thank you for reading the documentaion. If you still have any question or any problem, please contact with us. We will give you best support. Thanks.
Themeim