“Creatrix” Documentation by “IG_design” v1.0
“Creatrix - Flat Responsive Template”
Created: 04/08/2013
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
B) CSS Files and Structure - top
This theme uses 5 css files contained in the css folder
Css files:
base
layout
colorbox
skeleton
Css file layout:
Menu:
#navigation {
background: #5B6073;
position: absolute;
top:0;
left:0;
width: 100%;
height: 80px;
z-index: 2000;
}
.logo {
float:left;
margin-left:30px;
margin-top:15px;
width: 94px;
height:50px;
}
#navigation ul {
padding-top:30px;
float:right;
margin-right:20px;
}
#navigation ul li {
display: inline;
margin-right:30px;
font-family: 'OpenSans-Light-webfont';
}
#navigation a, #navigation a:active, #navigation a:visited {
color:#fff;
padding-top:25px;
height:70px;
text-transform:uppercase;
font-weight:bold;
font-size:14px;
padding-bottom:10px;
}
#navigation ul li:hover a {
color: #EB767E;
}
@media only screen and (max-width: 959px) {
#navigation a, #navigation a:active, #navigation a:visited {
color:#292929;
}
#navigation ul {
width: 250px;
padding: 5px 0;
position: relative;
top: 10px;
right: 50px;
border: solid 1px #efefef;
background: #fff url(../images/icon-menu.png) no-repeat 10px 11px;
border-radius: 3px;
}
.logo {
margin-top:10px;
}
ul#menu li {
display: none;
margin: 0;
}
#navigation .current {
display: block!important;
}
#navigation a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
color: #000;
}
#navigation ul:hover {
background-image: none;
}
#navigation ul:hover .current {
background: url(../images/icon-check.png) no-repeat 10px 7px;
}
#navigation ul li:hover a, #navigation ul li.current a {
color: #EB767E;
border-bottom:: 0px;
}
#navigation a, #navigation a:active, #navigation a:visited {
padding-top:5px;
height:auto;
padding-bottom:5px;
}
#navigation ul li.current a {
color: #EB767E;
border-bottom: 1px solid #EB767E;
background: url(../images/ar.png) no-repeat bottom center;
}
}
@media only screen and (max-width: 767px) {
.logo{
margin-left:10px;
margin-top:10px;
width: 94px;
height:50px;
}
#navigation ul {
width: 200px;
padding: 5px 0;
position: relative;
top: 10px;
right: 20px;
border: solid 1px #efefef;
background: #fff url(../images/icon-menu.png) no-repeat 10px 11px;
border-radius: 3px;
}
ul#menu li {
display: none;
margin: 0;
}
#navigation .current {
display: block!important;
}
#navigation a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
#navigation ul:hover {
background-image: none;
}
#navigation ul:hover .current {
background: url(../images/icon-check.png) no-repeat 10px 7px;
}
#navigation ul li:hover a, #navigation ul li.current a {
border-bottom:: 0px;
}
#navigation a, #navigation a:active, #navigation a:visited {
padding-top:5px;
height:auto;
padding-bottom:5px;
}
}
@media only screen and (max-width: 479px) {
.logo {
margin-left:-10px;
margin-top:15px;
width: 75px;
height:40px;
}
#navigation ul {
width: 120px;
padding: 5px 0;
position: relative;
top: 10px;
right: 10px;
border: solid 1px #efefef;
background: #fff url(../images/icon-menu.png) no-repeat 10px 11px;
border-radius: 3px;
}
ul#menu li {
display: none;
margin: 0;
}
#navigation .current {
display: block!important;
}
#navigation a {
display: block;
padding: 5px 5px 5px 32px;
text-align: left;
}
#navigation ul:hover {
background-image: none;
}
#navigation ul:hover .current {
background: url(../images/icon-check.png) no-repeat 10px 7px;
}
#navigation ul li:hover a, #navigation ul li.current a {
border-top: 0px;
}
#navigation a, #navigation a:active, #navigation a:visited {
padding-top:5px;
height:auto;
padding-bottom:5px;
}
}
Home:
#home{
position: relative;
background: url('../images/1.jpg') repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
margin: 0 auto;
text-align:center;
width: 100%;
overflow:hidden;
}
/* #Logo
================================================== */
.logo-big{
position:absolute;
z-index:301;
top:10px;
left:10px;
width:200px;
height:44px;
background:#2B2D3A url('../images/logo.png') no-repeat center center;
-webkit-background-size:160px 35px;
-moz-background-size:160px 35px;
background-size:160px 35px;
}
/* #Map Button
================================================== */
button.map{
position:absolute;
margin:0;
padding:0;
background:#2B2D3A;
top:10px;
left:212px;
z-index:99;
height:44px;
width:44px;
display:block;
font-family: 'FontAwesome';
font-size:26px;
line-height:44px;
color:#fff;
-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;
}
button.map:hover{
background:#fff;
color:#2B2D3A;
}
.md-perspective,
.md-perspective body {
height: 100%;
overflow: hidden;
}
.md-perspective body {
background: #222;
-webkit-perspective: 600px;
-moz-perspective: 600px;
perspective: 600px;
}
.container {
min-height: 100%;
}
.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 70%;
max-width: 1030px;
min-width: 220px;
height: auto;
z-index: 2000;
visibility: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.md-show {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(0,0,0,0.6);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}
/* Content styles */
.md-content {
color: #fff;
position: relative;
border-radius: 3px;
margin: 0 auto;
}
.md-content > div {
padding: 15px 40px 30px;
margin: 0;
}
.md-content > div p {
}
.md-content > div ul {
margin: 0;
padding: 0 0 30px 20px;
}
.md-content > div ul li {
padding: 5px 0;
}
.md-content button {
display: block;
margin: 0 auto;
background:#2B2D3A;
color:#fff;
}
.md-content button:hover {
background:#5B6073;
color:#fff;
}
#map{
position: relative;
display: block;
max-width: 1030px;
height: 320px;
margin: 0 auto;
}
.overlay{
display:block;
text-align:center;
height:60px;
padding-top:15px;
width:180px;
background:#EB767E;
border-radius:0 0 5px 5px;
-webkit-box-shadow: 0 9px 9px -7px rgba(0,0,0,.3);
-moz-box-shadow: 0 9px 9px -7px rgba(0,0,0,.3);
box-shadow: 0 9px 9px -7px rgba(0,0,0,.3);
}
.overlay p{
text-align:center;
color:#fff;
}
.overlay_arrow{
left:50%;
margin-left:-16px;
width:0;
height:0;
position:absolute;
}
.overlay_arrow.above{
bottom:-13px;
border-left:16px solid transparent;
border-right:16px solid transparent;
border-top:16px solid #EB767E;
}
.overlay_arrow.below{
top:-10px;
border-left:16px solid transparent;
border-right:16px solid transparent;
border-bottom:16px solid #EB767E;
}
.dot-up-overlay{
position:absolute;
content: '';
height:16px;
width:16px;
border-radius:50%;
border:5px double #EB767E;
top:-40px;
left:50%;
margin-left:-13px;
}
.no-touch.cssanimations .dot-up-overlay {
-webkit-animation: sonarEffect2 2s ease-out 75ms infinite;
-moz-animation: sonarEffect2 2s ease-out 75ms infinite;
animation: sonarEffect2 2s ease-out 75ms infinite;
}
About:
#about{
position:relative;
width:100%;
background:#fff;
padding-top:40px;
padding-bottom:100px;
}
#about h1{
padding-bottom:50px;
}
#about h1 span{
color: #EB767E;
}
#about h2{
padding-bottom:0px;
}
.about-info {
position:relative;
width:100%;
padding-bottom:30px;
}
.about-info h6{
padding-bottom:20px;
}
.facts {
position:relative;
width:100%;
padding-bottom:50px;
}
.facts h6{
padding-bottom:0;
}
#container-bar{ text-align: center;}
#container-bar p{ text-align: left;padding-top:20px;padding-bottom:10px;}
.bar-main-container {
margin: 0 auto;
width: 100%;
height: 30px;
font-weight: normal;
color: #FFF;
}
.bar-percentage {
float: left;
background: rgba(0,0,0,0.13);
width: 18%;
padding-top:4px;
height: 26px;
}
.bar-container {
float: right;
height: 2px;
background: rgba(0,0,0,0.13);
width: 78%;
margin: 14px 0px;
margin-right:2%;
overflow: hidden;
}
.bar {
float: left;
background: #FFF;
height: 100%;
-webkit-border-radius: 10px 0px 0px 10px;
-moz-border-radius: 10px 0px 0px 10px;
border-radius: 10px 0px 0px 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
}
/* COLORS */
.color1 { background: #EB767E; }
.color2 { background: #FFA979; }
.color3 { background: #B687E3; }
.color4 { background: #41C9A5; }
C) Image Files - top
All the graphic elements for the entire theme are contained at the "images" folder.
D) 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.
E) 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