“Elpis” Documentation by “IG_design” v1.0
“Elpis”
Created: 2018
By: Ivan Grozdic aka IG_design
Email: ivang.design@yahoo.com
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!
Table of Contents
A) CSS Files and Structure - top
This theme uses css files contained in the css folder
Css files:
style - all elements style
bootstrap - css library
font-awesome - font icons
colors/color - color css code
Css file style:
from line 2 - primary style:
body{
font-family: 'Poppins', sans-serif;
font-weight:400;
font-size: 0.9rem;
letter-spacing: 1;
line-height: 1.55;
color: #646464;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6{
font-family: 'AvenirNextRegular';
margin-bottom: 0.6rem;
line-height: 1.25;
color: #212121;
}
...
from line 57 - preloader:
.loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: 9999;
}
.loader__figure {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
from line 161 - Background Animated Lines:
.decolines {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
}
.decolines--fixed {
position: fixed;
width: 100vw;
max-width: 1110px;
height: 100vh;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
}
.decoline {
position: absolute;
}
from line 188 - Navigation and logo:
.header{
position: fixed;
width:100%;
top:0;
left:0;
z-index:100;
}
.logo-wrap {
position: absolute;
display:block;
left:0;
top:30px;
z-index:100;
}
from line 522 - Scroll to top button:
.scroll-to-top {
position: fixed;
cursor: pointer;
bottom: 30px;
right: 30px;
display: none;
z-index: 95;
-webkit-writing-mode: vertical-lr;
writing-mode: vertical-lr;
text-align: right;
font-family: 'AvenirNextDemiBold';
font-size: 14px;
letter-spacing: 1px;
color: #000;
-webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-o-transition: all 300ms linear;
-ms-transition: all 300ms linear;
transition: all 300ms linear;
}
...
from line 568 - Social icons:
.social-fixed-left,
.social-fixed-left-no-change {
position: fixed;
bottom: 30px;
left: 30px;
display: none;
z-index: 94;
-webkit-writing-mode: vertical-lr;
writing-mode: vertical-lr;
}
from line 651 - Primary style:
.section {
position: relative;
width: 100%;
display: block;
}
.relative {
position: relative;
}
.over-hide{
overflow: hidden;
}
.full-height {
height: 100vh;
}
from line 869 - Work Slice Reveal
from line 1027 - Scrolling Letters Animation
from line 1178 - Slider Hero
from line 1706 - video showcase
from line 1904 - Portfolio
from line 2116 - Parallax portfolio
from line 2153 - Project page
from line 2281 - Studio page
from line 2538 - Blog page
from line 2643 - Post page
from line 2941 - Contact page
from line 3289 - Footer
from line 3337 - Media
B) Image Files - top
All the graphic elements for the entire theme are contained at the "img" folder.
C) Contact Form - top
For addressing contact form too your mail edit "mail-it.php" file and change mail address on line 5.
D) Google Maps Configuration - top
Go to this link: https://developers.google.com/maps/documentation/javascript/tutorial#api_key to activated your google map API KEY. Your key replace in script link for google map after .../maps/api/js?key=HERE_YOUR_API_KEY Coordinates for map you can change in "google-map.js" file.
E) JavaScript - top
All the pages link the neccessary js files inside the "head" tag of the document. If you need to modify the behavior from a certain jquery element open the "js" folder where you can alter the parameters of some of the js elements. Changing efects and all elements you can do in custom.js file.
F) Sources and Credits - top
I've used the following images, icons or other files as listed.
JAVASCRIPT
FONTS
Once again, 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!
IG_design