Magician

“Magician” Documentation by “IG_design” v1.0


“Magician - Responsive Parellax Template”

Created: 02/05/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

  1. HTML
  2. CSS Files
  3. Image Files
  4. JavaScript
  5. Sources and Credits

A) HTML - top

Navigation

<div class="nav-container">
	<ul>  
		<li>  
			<a href="#home" class="scroll"><span>Home</span></a>  
		</li>     
		<li> 
			<a href="#works" class="scroll"><span>Works</span></a>  
		</li>  
		<li>  
			<a href="#profile" class="scroll"><span>Profile Us</span></a>  
		</li> 
		<li>  
			<a href="#gallery" class="scroll"><span>Gallery Us</span></a>  
		</li> 
		<li>  
			<a href="#news" class="scroll"><span>News Us</span></a>  
		</li> 
		<li>  
			<a href="#contact" class="scroll"><span>Contact</span></a>    
		</li> 
	</ul> 
</div>

 


B) CSS Files and Structure - top

This theme uses 6 css files contained in the css folder

Css files:

base
layout
work
news
jquery.fancybox
skeleton

Css file layout:

Menu:


	#navigation {
		background:#292929;
		position: fixed;  
		width: 100%;
		height: 80px;
		top:0;
		z-index: 2000;
		box-shadow: 0 3px 6px rgba(0,0,0,.2);
	}
	
	.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: #EC572C;
		border-bottom: 1px solid #EC572C;
		background: url(../images/ar.png) no-repeat bottom center;
	}
	
@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;
	}

	#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: #000;
		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: #EC572C;
		border-bottom: 1px solid #EC572C;
		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 {
		color: #000;
		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 {
		color: #000;
		border-top: 0px;
	}
	
	#navigation a, #navigation a:active, #navigation a:visited {
		padding-top:5px;
		height:auto;		
		padding-bottom:5px;
	}	
}	
	

Works:




#works{
	position: relative; 
	background:  url(../images/12.png) repeat;
	width: 100%;
	padding-bottom:100px;
	margin: 0 auto;
}
#works h1{
	padding-bottom:100px;
	-webkit-transform: rotate(90deg) translateY(228px) translateX(50px);
	-moz-transform: rotate(90deg) translateY(228px) translateX(50px);
	-ms-transform: rotate(90deg) translateY(228px) translateX(50px);
	-o-transform: rotate(90deg) translateY(228px) translateX(50px);
	transform: rotate(90deg) translateY(228px) translateX(50px);
}
#works h5{
	font-family: 'Lato', sans-serif;
	color: #e0e0e0;
	font-size:46px;
	line-height:54px;
	font-weight:100;
	padding-top:30px;
	padding-bottom:30px;
	color:#000;
	text-align:left;
	margin-left:-390px;
	width:450px;
}
#work a{
	color:#000000;
}
#work a:hover{
	color:#00B4DA;
}
/* Custom elements style */
#wrap{
	width: 100%;
	max-width: 980px;
	margin: 0 auto;
	padding: 0 20px;
}
.wrapper {
	position: relative;
	padding: 0 0 50px 0;
	margin: 0 auto;
}

@media only screen and (max-width: 500px) {

.wrapper img{
	width:220px;
	height:147px;
}
}
.topbar {
	position: relative;
	padding: 20px 0;
	margin: 0 0 40px;
}

.back {
	width: 40px;
	height: 40px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -20px 0 0 -20px;
	border-radius: 50%;
	text-align: center;
	line-height: 38px;
	color: #999;
	background: #ddd;
	background: rgba(255,255,255,0.5);
	cursor: pointer;
	display: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.no-touch .back:hover {
	background: #fff;
	background: rgba(255,255,255,0.9);
}

/* Loader */

.loader {
	left: 50%;
	position: absolute;
	margin-left: -120px;
}

.loader i {
	display: inline-block;
	width: 40px;
	height: 40px;
	-webkit-animation: loading 1s linear infinite forwards;
	-moz-animation: loading 1s linear infinite forwards;
	-o-animation: loading 1s linear infinite forwards;
	-ms-animation: loading 1s linear infinite forwards;
	animation: loading 1s linear infinite forwards;
}

.cssanimations .loader span {
	display: none;
}

.no-cssanimations .loader i {
	display: none;
}

.loader i:nth-child(2){
	-webkit-animation-delay: 0.1s;
	-moz-animation-delay: 0.1s;
	-o-animation-delay: 0.1s;
	-ms-animation-delay: 0.1s;
	animation-delay: 0.1s;
}

.loader i:nth-child(3){
	-webkit-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
	-o-animation-delay: 0.2s;
	-ms-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.loader i:nth-child(4){
	-webkit-animation-delay: 0.3s;
	-moz-animation-delay: 0.3s;
	-o-animation-delay: 0.3s;
	-ms-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.loader i:nth-child(5){
	-webkit-animation-delay: 0.4s;
	-moz-animation-delay: 0.4s;
	-o-animation-delay: 0.4s;
	-ms-animation-delay: 0.4s;
	animation-delay: 0.4s;
}

.loader i:nth-child(6){
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-o-animation-delay: 0.5s;
	-ms-animation-delay: 0.5s;
	animation-delay: 0.5s;
}

@-webkit-keyframes loading{
	0%{
		opacity: 0;
		background-color: rgba(255,255,255,0.9);
	}

	100%{
		opacity: 1;
		-webkit-transform: scale(0.25) rotate(75deg);
		background-color: rgba(155,155,155,0.9);
	}
}

@-moz-keyframes loading{
	0%{
		opacity: 0;
		background-color: rgba(255,255,255,0.9);
	}

	100%{
		opacity: 1;
		-moz-transform: scale(0.25) rotate(75deg);
		background-color: rgba(155,155,155,0.9);
	}
}

@-o-keyframes loading{
	0%{
		opacity: 0;
		background-color: rgba(255,255,255,0.9);
	}

	100%{
		opacity: 1;
		-o-transform: scale(0.25) rotate(75deg);
		background-color: rgba(155,155,155,0.9);
	}
}

@-ms-keyframes loading{
	0%{
		opacity: 0;
		background-color: rgba(255,255,255,0.9);
	}

	100%{
		opacity: 1;
		-ms-transform: scale(0.25) rotate(75deg);
		background-color: rgba(155,155,155,0.9);
	}
}

@keyframes loading{
	0%{
		opacity: 0;
		background-color: rgba(255,255,255,0.9);
	}

	100%{
		opacity: 1;
		transform: scale(0.25) rotate(75deg);
		background-color: rgba(155,155,155,0.9);
	}
}

@media screen and (max-width: 680px){
	.back { left: auto; right: 50%; margin-left: 20px;}
}
.tp-grid {
	list-style-type: none;
	position: relative;
	display: block;
}
.tp-grid li {
	position: absolute;
	cursor: pointer;
	border: 5px solid #fff;
	box-shadow: 0 2px 3px rgba(0,0,0,0.2);
	display: none;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}

.no-js .tp-grid li {
	position: relative;
	display: inline-block;
}

.tp-grid li a {
	display: block;
	outline: none;
}

.tp-grid li img {
	display: block;
	border: none;
}

.tp-info,
.tp-title {
	position: absolute;
	background: #fff;
	line-height: 20px;
	color: #292929;
	font-size: 22px; 
	line-height: 26px;
	top: 40%;
	width: 75%;
	padding: 10px;
	font-weight: 100;
	text-align: right;
	left: -100%;
	box-shadow: 
		1px 1px 1px rgba(0,0,0,0.1),
		10px 0 10px -3px rgba(0,0,0,0.7),
		inset 0 0 5px rgba(0,0,0,0.04);
}

.touch .tp-info {
	left: 0px;
}

.no-touch .tp-info {
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.no-touch .tp-grid li:hover .tp-info {
	-webkit-transition-delay: 150ms;
	-moz-transition-delay: 150ms;
	-o-transition-delay: 150ms;
	-ms-transition-delay: 150ms;
	transition-delay: 150ms;
}

.no-touch .tp-open li:hover .tp-info {
	left: 0px;
}

.tp-title {
	padding: 10px 35px 10px 10px;
	left: 0px;
}

.tp-title span:nth-child(2){
	color: #aaa;
	font-family: 'Poiret One', cursive;
	padding: 0 5px;
	background: #F7F7F7;
	right: 0px;
	height: 100%;
	font-size: 34px; 
	line-height: 46px;
	top: 0px;
	position: absolute;
	display: block;
}



Profile:


#profile{
	position: relative; 
	background:  url(../images/123.png) repeat;
	width: 100%;
	padding-top:50px;
	padding-bottom:100px;
}
#profile h1{
	padding-top:20px;
	padding-bottom:100px;
	-webkit-transform: rotate(90deg) translateY(228px) translateX(70px);
	-moz-transform: rotate(90deg) translateY(228px) translateX(70px);
	-ms-transform: rotate(90deg) translateY(228px) translateX(70px);
	-o-transform: rotate(90deg) translateY(228px) translateX(70px);
	transform: rotate(90deg) translateY(228px) translateX(70px);
}
#profile h5{
	font-family: 'Lato', sans-serif;
	color: #e0e0e0;
	font-size:46px;
	line-height:54px;
	font-weight:100;
	padding-top:50px;
	padding-bottom:70px;
	color:#000;
	text-align:left;
	margin-left:-390px;
	width:450px;
}
#profile h6{
	color:#000;
}
#team1{
	position: relative;
	width: 220px;
	height: 220px;
	margin:0 auto;
}
#team11{
	padding-top:20px;
	text-align:left;
}
#team2{
	position: relative;
	width: 220px;
	height: 220px;
	margin:0 auto;
}
#team22{
	padding-top:20px;
	text-align:left;
}
#team3{
	position: relative;
	width: 220px;
	height: 220px;
	margin:0 auto;
}
#team33{
	padding-top:20px;
	text-align:left;
}
#team4{
	position: relative;
	width: 220px;
	height: 220px;
	margin:0 auto;
}
#team44{
	padding-top:20px;
	text-align:left;
}
.container1 {
	width: 220px;
	height: 220px;
	-webkit-perspective: 1000;
	-moz-perspective: 1000;
}

.card {
	width: 220px; 
	height: 220px;
	-webkit-transform-style: preserve-3d;	
	-moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
    -ms-transition:  0.5s;
    -o-transition:  0.5s;
	transition: 0.5s;
}
.container1:hover .card {
	-webkit-transform: rotateX(180deg);	
	-moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg); 			
}

.face {
	position: absolute;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden; 
}
.profile {
	position: absolute;margin:0 auto;
}
.profile  h6{
	padding-top:10px;
}
.profile  p{
	padding-bottom:10px;
}
.profile  .front {
		
}
.profile  .back1 {
	background:  url(../images/123.png) repeat;
	width: 220px; height: 220px;
	-webkit-transform: rotateX(180deg);
	-moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg); 
}
.profile  .back1 h6{
	padding-top:60px;
}
.profile  img {
	width: 220px;
	height: 220px;
}
/* #Progress Bar */

.pro-bar-wrap {
	position:relative;
	text-align:left;
}
.pro-bar {
	position:relative;
	height: 40px;
}
.caption{
	z-index:3;
	position:absolute;
	margin:0 auto;
	text-align:left;
}
.caption div{	
	font-size:18px;
	line-height:30px;
	font-family: 'OpenSans-Light-webfont';
	font-weight:normal;
	color:#000;
	text-shadow: 0 1px 1px #000 inset, 0 1px 0 #444;
}
.progress-bar {
	height: 6px;
	padding-top: 26px;
	width: 100%;
	margin: 8px 0;	
}
.progress-bar span {
	display: inline-block;
	height: 100%;	
        -webkit-transition: width .4s ease-in-out;
        -moz-transition: width .4s ease-in-out;
        -ms-transition: width .4s ease-in-out;
        -o-transition: width .4s ease-in-out;
        transition: width .4s ease-in-out;    
}
.orange span {
	background-color: #00B4DA;   
}
.stripes span {
	-webkit-background-size: 38px 38px;
	-moz-background-size: 38px 38px;
	background-size: 38px 38px;			
	background-image: -webkit-gradient(linear, left top, right bottom,
						color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
						color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
						color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
						to(transparent));
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);            
	
	-webkit-animation: animate-stripes 3s linear infinite;
	-moz-animation: animate-stripes 3s linear infinite;       		
}

@-webkit-keyframes animate-stripes { 
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

@-moz-keyframes animate-stripes {
	0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

.front {
	z-index: 10;
}
.container1:hover .front {
	z-index: 0;
}
.center{ 
	text-align:center; 
	padding-top:20px;
	height:40px;
}
.list-social-team li { 
	width: 38px;
	border:1px dotted #00B4DA; 
	border-radius:50%;
    list-style: none; 
    margin:0 auto; 
    text-align: center; 
    display: inline-block;
}

.list-social-team li.icon-soc-team a {
	font-family: 'FontAwesome';
	font-size: 22px;
	line-height: 40px;
	color: #00B4DA; 
	-webkit-transition : all 0.2s ease-out;
	-moz-transition : all 0.2s ease-out;
	-o-transition :all 0.2s ease-out;
	transition : all 0.2s ease-out; 
}
.list-social-team li.icon-soc-team a:hover {
	color: #000;
}

#twit {
	background:#d9d9d9 url("../images/twitter.png")no-repeat top center;
	margin-top:70px;
	padding-top:60px;
	padding-left:20px;
	padding-right:20px;
	padding-bottom:20px;
	font-family: 'OpenSans-Light-webfont';
	font-size: 18px;
	color: #000;
	font-weight: 100;
	line-height: 26px;
	font-style: italic;
	position: relative;
	text-align:center;
}
#twit a{
	color:#292929;
}
#twit a:hover{
	color:#00B4DA;
}
#services{	
}
#services h6{
	color: #000;
	padding-bottom:30px;	
}
.services1{
	position:relative;
	overflow:hidden;
	margin:0 auto;
	text-align:center;
	padding-top:20px;
	padding-bottom:20px; 
	color: #000;
   -moz-box-shadow:    inset 0 0 4px rgba(0,0,0,.4);
   -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.4);
   box-shadow:         inset 0 0 4px rgba(0,0,0,.4);
	-webkit-transition : all 0.4s ease-in;
	-moz-transition : all 0.4s ease-in;
	-o-transition :all 0.4s ease-in;
	transition : all 0.4s ease-in;
}
.services1 img{
	padding-top:10px;
	padding-bottom:10px; 
}
.services1:hover img{
    -webkit-animation: moveFromTop 600ms ease;
    -moz-animation: moveFromTop 600ms ease;
    -ms-animation: moveFromTop 600ms ease;
    -o-animation: moveFromTop 600ms ease;
    animation: moveFromTop 600ms ease;
}
.services1:hover h6{
    -webkit-animation: moveFromLeft 600ms ease;
    -moz-animation: moveFromLeft 600ms ease;
    -ms-animation: moveFromLeft 600ms ease;
    -o-animation: moveFromLeft 600ms ease;
    animation: moveFromLeft 600ms ease;
}
.button-ser{
	position:relative;
	padding-top:20px;
	padding-bottom:20px; 
	width:100%;
}
a.inner-button-services {
	font-family:'OpenSans-Light-webfont';
	font-style: normal;
	font-weight: 100;
	font-size: 16px;
	color: #fff;
	padding: 4px;
	-webkit-transition: all .35s ease-in-out;
	-moz-transition: all .35s ease-in-out;
	-ms-transition: all .35s ease-in-out;
	-o-transition: all .35s ease-in-out;
	transition: all .35s ease-in-out;	
	text-align: center;
	background: #292929;
	padding: 6px 12px;
}

a.inner-button-services:hover {
	background: #00B4DA;
	color:#000;
}

.services1:hover a.inner-button-services{
	padding: 10px 22px;
}



 

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

Go To Table of Contents

Magician