The Litae

“The Litae” Documentation by “IG_design” v1.0


“The Litae”

Created: 2017
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

  1. CSS Files
  2. Image Files
  3. Contact Form
  4. Google Map
  5. Sources and Credits

 


A) CSS Files and Structure - top

This theme uses css files contained in the css folder

Css files:

base
layout
font-awesome
skeleton

Css file layout:

.section {
	position:relative;
	width:100%;
}
.full-height {
	height: 100vh;
}
.half-height {
	height: 80vh;
}
.over-hidden {
	overflow: hidden;
}
.white-back {
	background-color:#fff;
}
.grey-back {
	background-color:#f9f9f9;
}
.black-back {
	background-color:#000;
}
.light-over{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:4;
	background-color:rgba(255,255,255,.7);
}
.light-over-2{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:4;
	background-color:rgba(255,255,255,.3);
}
.light-over-2{
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:4;
}
.padding-top-bottom{
	padding-top:120px;
	padding-bottom:120px;
}
.padding-top{
	padding-top:120px;
}
.padding-bottom{
	padding-bottom:120px;
}
.padding-top-bottom-small{
	padding-top:60px;
	padding-bottom:60px;
}
.section-shadow {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
}
.section-shadow-biger {
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
}
.ver-line-bottom-1{
	position:absolute;
	width:1px;
	height:50px;
	bottom:0;
	left:50%;
	z-index:6;
	background-color:#000;
}
.ver-line-top-1{
	position:absolute;
	width:1px;
	height:100px;
	top:0;
	left:50%;
	z-index:2;
	background-color:#000;
}
.ver-line-bottom-2{
	position:absolute;
	width:1px;
	height:50px;
	bottom:0;
	left:50%;
	z-index:2;
	background-color:rgba(255,255,255,.3);
}
.scroll-down{
	position:absolute;
	width:50px;
	height:50px;
	bottom:70px;
	left:50%;
	margin-left:-25px;
	z-index:5;
	background-image:url('../images/scrollhover.gif');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 50px 50px;
}

.background-image-1{
	background-image:url('../images/home1.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.background-image-2{
	background-image:url('../images/home2.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.background-image-3{
	background-image:url('../images/home3.jpg');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}
.background-image-4{
	background-image:url('../images/home5.gif');
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.home-text-sec{
	position:absolute;
	width:100%;
	top:50%;
	left:0;
	z-index:10;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.home-text-sec h1{
	text-align:center;
	font-size: 80px;
	line-height:140px;
	letter-spacing:-3px;
	font-weight:700;
}
.home-text-sec h3{
	text-align:center;
	font-size: 50px;
	line-height:120px;
	font-weight:700;
}
.home-text-sec p{
	text-align:center;
	font-size: 11px;
	line-height:18px;
	font-weight:400;
	color:#fff;
	text-transform:uppercase;
	letter-spacing:1px;
}
.home-text-sec p span{
	padding:6px 15px;
}



.title-wrap{
	position:relative;
	width:100%;
}
.title-wrap h3{
	text-align:center;
	font-weight:700;
	padding-bottom:10px;
}
.title-wrap p{
	text-align:center;
	font-size:11px;
	font-weight:400;
	letter-spacing:2px;
	color:#727272;
	text-transform:uppercase;
	padding-bottom:10px;
}


/* #About page
================================================== */

.about-text{
	position:relative;
	width:100%;
	margin:0 auto;
	max-width:900px;
}
.about-text p{
	text-align:center;
}


.about-mission{
	position:relative;
	margin:0 auto;
	width:100%;
	overflow:hidden;
}
.about-mission:after {
  content: '';
  display: block;
  clear: both;
}
.about-half{
	width:50%;
	background:#181818;
}
.about-quarter-1{
	width:25%;
	background:#050505;
}
.about-quarter-2{
	width:25%;
}
.about-half,
.about-quarter-1,
.about-quarter-2{
	position:relative;
	float:left;
	display:inline-block;
	margin:0 auto;
	min-height:400px;
}
.about-text-in{
	position:absolute;
	top:50%;
	width:100%;
	left:0;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.about-half h4,
.about-quarter-1 h4{
	text-align:left;
	padding-bottom:15px;
	color:#fff;
	max-width:80%;
	margin:0 auto;
}
.about-half p,
.about-quarter-1 p,
.about-quarter-2 p{
	text-align:left;
	color:#f9f9f9;
	font-style: italic; 
	max-width:80%;
	margin:0 auto;
}
.about-quarter-2 h4{
	text-align:center;
	padding-bottom:25px;
	color:#fff;
	letter-spacing:3px;
	line-height: 34px;
	max-width:80%;
	margin:0 auto;
}
.about-link{
	position:relative;
	display:block;
	width:180px;
	margin:0 auto;
	text-align:center;
	padding:12px 30px;
	border:1px solid #fff;
	border-radius:40px;
	letter-spacing:2px;
	text-transform: uppercase;
	font-size:11px;
	color:#fff;
	font-weight:600;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.about-link:hover{
	background:#fff;
}

.team-box-1{
	position:relative;
	width:100%;
	margin:0 auto;
	text-align:center;
	overflow:hidden;
}
.team-box-1 img{
	width:100%;
	display:block;
}
.team-box-1 .mask-team{
	position:absolute;
	z-index:2;
	top:0;
	width:100%;
	left:0;
	height:calc(100% - 74px);
	opacity:0;
	background:rgba(0,0,0,.7);
	-webkit-transition : all 0.3s ease-out;
	-moz-transition : all 0.3s ease-out;
	-o-transition :all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.team-box-1:hover .mask-team{
	opacity:1;
}
.team-box-1 ul{
	position:absolute;
	z-index:3;
	top:-30px;
	margin-top:-46px;
	width:100%;
	left:0;
	text-align:center;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition : all 0.3s ease-out;
	-moz-transition : all 0.3s ease-out;
	-o-transition :all 0.3s ease-out;
	transition : all 0.3s ease-out;
}
.team-box-1 ul li{
	display:inline-block;
	text-align:center;
	margin-left:8px;
	margin-right:8px;
}
.team-box-1:hover ul{
	top:50%;
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
.team-box-1 ul li a.social-icon .icons{
	font-family: 'FontAwesome';
	width:20px;
	height:20px;
	line-height:20px;
	font-size:16px;
	text-align:center;
	color:#fff;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear; 
}
.team-box-1 ul li a.social-icon:hover .icons.twitter{
	color:#55acef;
}
.team-box-1 ul li a.social-icon:hover .icons.dribbble{
	color:#fe0084;
}
.team-box-1 ul li a.social-icon:hover .icons.facebook{
	color:#3b5998;
}
.team-box-1 ul li a.social-icon:hover .icons.linkedin{
	color:#007bb5;
}
.team-box-1 ul li a.social-icon:hover .icons.vimeo{
	color:#aad450;
}
.team-box-1 h6{
	margin-top:30px;
	text-align:center;
	padding-bottom:5px;
}
.team-box-1 .subtext{
	text-align:center;
	color:#747474;
	font-style: italic;
	font-family: 'Open Sans', sans-serif;
	font-size: 13px;
	line-height:17px;
	letter-spacing:2px;
	font-weight:400;
}

#owl-about {
	position:relative;
	width:100%;
	margin:0 auto;
}
#owl-about .item{
	position:relative;
	width:100%;
	z-index:2;
}
#owl-about .item img{
	width:100%;
	display:block;
}
#owl-about.owl-theme .owl-controls .owl-buttons .owl-prev{
	background-image:url('../images/arrow-left-light.png');
	left:0;
	margin-top:-35px;
}
#owl-about.owl-theme .owl-controls .owl-buttons .owl-next{
	background-image:url('../images/arrow-right-light.png');
	right:0;
	margin-top:-35px;
}
#owl-about.owl-theme .owl-controls .owl-buttons .owl-next,
#owl-about.owl-theme .owl-controls .owl-buttons .owl-prev{
	position:absolute;
	top:50%;
	width:35px;
	height:70px;
	z-index:100;
	text-indent: 100%;
	background-size:8px 16px;
	background-repeat: no-repeat;
	background-position:center center;
	background-color:rgba(0,0,0,.7);
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
#owl-about.owl-theme .owl-controls .owl-buttons .owl-next:hover,
#owl-about.owl-theme .owl-controls .owl-buttons .owl-prev:hover{
	background-color:rgba(0,0,0,1);
}

#owl-logos{
	position:relative;
	width:calc(100% - 30px);
	overflow:hidden;
	margin:0 auto;
	text-align:center;
}
#owl-logos .item{
	position:relative;
	margin-left:15px;
	margin-right:15px;
	overflow:hidden;
	text-align:center;
}
#owl-logos .item img{
	width:80px;
	display:block;
	margin:0 auto;
	text-align:center;
}


 

B) Image Files - top

All the graphic elements for the entire theme are contained at the "images" 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 "custom.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.

 


 

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

Go To Table of Contents

The Litae