Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
The body part of the Html file is divided in four main sections: header, nav, main and footer.
Header HTML structure:
<!-- header start -->
<header class="fixed-header">
<!-- header-flex-box start -->
<div class="header-flex-box">
<!-- logo start -->
<a href="index.html" class="logo pointer-large animsition-link">
<div class="logo-img-box">
<img class="logo-white" src="assets/images/logo/logo-white.png" alt="logo">
<img class="logo-black" src="assets/images/logo/logo-black.png" alt="logo">
</div>
</a><!-- logo end -->
<!-- menu-open start -->
<div class="menu-open pointer-large">
<span class="hamburger"></span>
</div><!-- menu-open end -->
</div><!-- header-flex-box end -->
</header><!-- header end -->
Nav HTML structure:
<!-- nav-container start -->
<nav class="nav-container dark-bg-1">
<!-- nav-logo start -->
<div class="nav-logo">
<img src="assets/images/logo/logo-white.png" alt="logo">
</div><!-- nav-logo end -->
<!-- menu-close -->
<div class="menu-close pointer-large"></div>
<!-- nav-menu start -->
<ul class="nav-menu dark-bg-1">
<!-- nav-box start -->
<li class="nav-box active">
<a href="index.html" class="animsition-link pointer-large">
<span class="nav-btn active" data-text="Home">Home</span>
</a>
<div class="nav-bg" style="background-image: url(assets/images/backgrounds/pexels-photo-1806031.jpeg);"></div>
</li><!-- nav-box end -->
<!-- nav-box start -->
<li class="nav-box">
<a href="about.html" class="animsition-link pointer-large">
<span class="nav-btn" data-text="About">About</span>
</a>
<div class="nav-bg" style="background-image: url(assets/images/backgrounds/adolescent-adult-diversity-1034361.jpg);"></div>
</li><!-- nav-box end -->
<!-- nav-box start -->
<li class="nav-box">
<a href="services.html" class="animsition-link pointer-large">
<span class="nav-btn" data-text="Services">Services</span>
</a>
<div class="nav-bg" style="background-image: url(assets/images/backgrounds/bald-casual-facial-hair-1708528.jpg);"></div>
</li><!-- nav-box end -->
<!-- nav-box start -->
<li class="nav-box">
<a href="portfolio.html" class="animsition-link pointer-large">
<span class="nav-btn" data-text="Portfolio">Portfolio</span>
</a>
<div class="nav-bg" style="background-image: url(assets/images/backgrounds/art-artistic-artsy-1988681.jpg);"></div>
</li><!-- nav-box end -->
<!-- nav-box start -->
<li class="nav-box">
<a href="blog.html" class="animsition-link pointer-large">
<span class="nav-btn" data-text="Blog">Blog</span>
</a>
<div class="nav-bg" style="background-image: url(assets/images/backgrounds/beautiful-black-close-up-1689731.jpg);"></div>
</li><!-- nav-box end -->
<!-- nav-box start -->
<li class="nav-box">
<a href="contact.html" class="animsition-link pointer-large">
<span class="nav-btn" data-text="Contact">Contact</span>
</a>
<div class="nav-bg" style="background-image: url(assets/images/backgrounds/double-exposure-2390185_1920.jpg);"></div>
</li><!-- nav-box end -->
</ul><!-- nav-menu end -->
</nav><!-- nav-container end -->
Main HTML structure:
<!-- animsition-overlay start -->
<main class="animsition-overlay" data-animsition-overlay="true">
<!-- page-head start -->
<section id="up" class="page-head flex-min-height-box dark-bg-2">
<!-- page-head-bg -->
<div class="page-head-bg overlay-loading2" style="background-image: url(assets/images/backgrounds/adolescent-adult-diversity-1034361.jpg);"></div>
<!-- flex-min-height-inner start -->
<div class="flex-min-height-inner">
<!-- flex-container start -->
<div class="container top-bottom-padding-120 flex-container response-999">
<!-- column start -->
<div class="six-columns six-offset">
<div class="content-left-margin-40">
<h2 class="overlay-loading2 tr-delay03 medium-title red-color">Welcome Xen</h2>
<h3 class="large-title-bold text-color-4">
<span class="overlay-loading2 overlay-light-bg-1 tr-delay04">Best Solutions</span><br>
<span class="overlay-loading2 overlay-light-bg-1 tr-delay05">& ideas for</span><br>
<span class="overlay-loading2 overlay-light-bg-1 tr-delay06">You Business</span>
</h3>
<p class="d-flex-wrap top-margin-20 text-color-4">
<span class="small-title-oswald text-height-20 fade-loading tr-delay07 top-margin-10">Creative team</span>
<span class="small-title-oswald text-height-20 fade-loading tr-delay08 top-margin-10">Innovation ideas</span>
<span class="small-title-oswald text-height-20 fade-loading tr-delay09 top-margin-10">Best services</span>
</p>
</div>
</div><!-- column end -->
</div><!-- flex-container end -->
</div><!-- flex-min-height-inner end -->
<!-- scroll-btn start -->
<a href="#down" class="scroll-btn pointer-large">
<div class="scroll-arrow-box">
<span class="scroll-arrow"></span>
</div>
<div class="scroll-btn-flip-box">
<span class="scroll-btn-flip" data-text="Scroll">Scroll</span>
</div>
</a><!-- scroll-btn end -->
</section><!-- page-head end -->
...
</main><!-- animsition-overlay end -->
Footer HTML structure:
<!-- footer start -->
<footer class="footer dark-bg-1">
<!-- flex-container start -->
<div class="flex-container container top-bottom-padding-90">
<!-- column start -->
<div class="two-columns bottom-padding-60">
<div class="content-right-margin-10 footer-center-mobile">
<img class="footer-logo" src="assets/images/logo/logo-white.png" alt="logo">
</div>
</div><!-- column end -->
<!-- column start -->
<div class="three-columns bottom-padding-60">
<div class="content-left-right-margin-10">
<ul class="footer-menu text-color-4">
<li><a class="pointer-large animsition-link small-title-oswald hover-color active" href="index.html">Home</a></li>
<li><a class="pointer-large animsition-link small-title-oswald hover-color" href="about.html">About</a></li>
<li><a class="pointer-large animsition-link small-title-oswald hover-color" href="services.html">Services</a></li>
<li><a class="pointer-large animsition-link small-title-oswald hover-color" href="portfolio.html">Portfolio</a></li>
<li><a class="pointer-large animsition-link small-title-oswald hover-color" href="blog.html">Blog</a></li>
<li><a class="pointer-large animsition-link small-title-oswald hover-color" href="contact.html">Contact</a></li>
</ul>
</div>
</div><!-- column end -->
<!-- column start -->
<div class="four-columns bottom-padding-60">
<div class="content-left-right-margin-10 footer-center-mobile">
<ul class="footer-information text-color-4">
<li><i class="far fa-envelope"></i><a href="#" class="xsmall-title-oswald">email@xen_agency.com</a></li>
<li><i class="fas fa-mobile-alt"></i><a href="#" class="xsmall-title-oswald">+23 8 8532 7834</a></li>
<li><i class="fas fa-map-marker-alt"></i><a href="#" class="xsmall-title-oswald text-height-17">PO Box 223158 Oliver Street<br><span>East Victoria 2006 UK</span></a></li>
</ul>
</div>
</div><!-- column end -->
<!-- column start -->
<div class="three-columns bottom-padding-60">
<div class="content-left-margin-10">
<ul class="footer-social">
<li class="flip-btn-box"><a href="#" class="flip-btn pointer-small" data-text="Instagram">Instagram</a></li>
<li class="flip-btn-box"><a href="#" class="flip-btn pointer-small" data-text="Facebook">Facebook</a></li>
<li class="flip-btn-box"><a href="#" class="flip-btn pointer-small" data-text="Spotify">Spotify</a></li>
<li class="flip-btn-box"><a href="#" class="flip-btn pointer-small" data-text="Vimeo">Vimeo</a></li>
<li class="flip-btn-box"><a href="#" class="flip-btn pointer-small" data-text="Behance">Behance</a></li>
</ul>
</div>
</div><!-- column end -->
<!-- column start -->
<div class="twelve-columns">
<p class="p-letter-style text-color-4 footer-copyright">© Copyright 2019 XEN. Theme by <a href="#">Jinna Gik</a></p>
</div><!-- column end -->
</div><!-- flex-container end -->
</footer><!-- footer end -->
GRID structure:
<div class="flex-container">
<div class="two-columns">
Content
</div>
<div class="three-columns">
Content
</div>
<div class="four-columns">
Content
</div>
<div class="three-columns">
Content
</div>
</div>
Main css files like style.css are located in css folder.
assets/ ├── css │ ├── plugins.css │ ├── style.css ├── images ├── js ├── webfonts
File /assets/css/style.css contains all stylings for the theme. At the begining of the file is a table of contents. This is a place where you can edit styling. I suggest you overide default theme style at the end of this file.
/********************************************************
1. Basics
1.1. Helpers
1.2. Custom grid
1.3. Forms
2. Custom mouse cursor
3. Animsition preloader
3.1. Animsition-overlay
3.2. Loading animation
3.3. Add class after preloader
4. Header
4.1. Header logo
4.2. Header menu-open
4.3. MidnightHeader
4.4. Headroom
5. Navigation
5.1. Navigation logo
5.2. Navigation close icon
5.3. Navigation menu
5.4. Navigation links
5.5. Navigation backgrounds
5.6. Navigation backgrounds overlay
6. Colors
6.1. Bg colors
6.2. Text colors
7. Typography
8. Buttons
8.1. To top button
8.2. Border button
8.3. Flip button
8.4. Arrow button
8.5. Scroll button
8.6. Overlay Button
9. Animations
9.1. Loading animations
9.1.1. Loading overlay animation #1
9.1.2. Loading overlay animation #2
9.1.3. Loading fade animation
9.1.4. Loading title fill animation
9.2. Scroll animations
9.2.1. Scroll overlay animation #1
9.2.2. Scroll overlay animation #2
9.2.3. Scroll fade animation
9.2.4. Scroll title fill animation
10. Hovers
11. Footer
12. Magnific popup
12.1. Popup arrows
12.2. Popup counter
12.3. Popup close
13. Min-height flex center (IE11-fix)
14. Page-head
15. Swiper slider
15.1. Home slider
15.1.1. Home slider title fill effect
15.1.2. Home slider overlay effect
15.1.3. Home slider overlay #2 effect
15.1.4. Home slider fade effect
15.2. Testimonials slider
15.3. About slider
15.4. Swiper pagination
15.4.1. Home slider pagination
15.4.2. Testimonials slider pagination
15.5. Swiper arrows
15.5.1. Home slider arrows
15.5.2. About slider arrows
16. List dots
17. Services
18. Progress bar
19. Portfolio
20. Project
21. About
21.1. Team
22. Our clients
23. Video content
24. Blog
24.1. Sidebar
24.1.1. Search form
24.1.2. Categories
24.1.3. Recent-posts
24.1.4. Tegs
24.1.5. Widget-instagram
24.2. Single post
24.2.1. Post autor
24.2.2. Post comments
24.2.3. Comment form
25. Contact
25.1. Contact form
********************************************************/
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
/* 5.3. Navigation menu */
.nav-menu {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column;
flex-flow: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 50%;
height: 100%;
margin-left: 50%;
}
.nav-box {
margin: 8px 0;
padding: 0;
overflow: hidden;
}
This theme imports several Javascript files from plugins folder.
assets/ ├── css ├── images ├── js │ ├── plugins.js │ ├── main.js │ ├── typewriter.js │ ├── particles_init.js ├── webfonts
Not compressed versions of js files are located too in this folder.
assets/ ├── css ├── images ├── js │ ├── plugins.js │ ├── main.js │ ├── animsition.js │ ├── footer-reveal.js │ ├── jquery.magnific-popup.js │ ├── jquery.malihu.PageScroll2id.js │ ├── Headroom.js │ ├── jQuery2.2.0.js │ ├── ScrollAnimations.js │ ├── jQuery.headroom.js │ ├── swiper.js │ ├── midnight.jquery.js │ ├── isotope.js │ ├── core.js │ ├── particles.js ├── webfonts
Main.js scripts contain function, plugins initialize and handle javascript event. For example:
$(function() {
"use strict";
...
$(document).ready(function() {
/* 2. Animsition preloader */
$(".animsition-overlay").animsition({
inClass: "overlay-slide-in-right",
outClass: "overlay-slide-out-right",
inDuration: 1,
outDuration: 1500,
linkElement: ".animsition-link",
// e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
loading: false,
loadingParentElement: "body", //animsition wrapper element
loadingClass: "animsition-loading",
loadingInner: "", // e.g '<img src="loading.svg" />'
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ "animation-duration", "-webkit-animation-duration"],
// "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
// The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
overlay : true,
overlayClass : "animsition-overlay-slide",
overlayParentElement : "body",
transition: function(url){ window.location.href = url; }
});
...
});
...
});
| Plugin Name | Version | Documentation |
|---|---|---|
| Swiper | 4.0.7 | Swiper |
| Footer Reveal | - | Footer Reveal |
| jQuery ScrollAnimations | 1.0.1 | ScrollAnimations |
| jQuery | 2.2.0 | jQuery |
| Headroom | 0.9.4 | Headroom |
| Page scroll to id | 1.5.9 | Page scroll to id |
| Magnific Popup | 1.1.0 | Magnific Popup |
| Midnight | 1.1.1 | Midnight |
| Animsition | 4.0.2 | Animsition |
| Normalize.css | 8.0.1 | Normalize |
| Font Awesome | 5.5.0 | Font Awesome |
| Isotope | 3.0.6 | Isotope |
| Typewriter JS | 2 | Typewriter JS |
| Particles js | 2.0.0 | Particles js |
Theme used the following images and fonts as listed.
| Source Name | Source Url |
|---|---|
| Pexels | www.pexels.com |
| Google Fonts | fonts.google.com |
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. I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.