The CybeRoxtar ™

Friday, 1 August 2014

index.css

.wrapper {
max-width: 2000px;
height: auto;

}
body {
margin: 0;
padding: 0;
margin-left:20px;
}

.box {
display: inline-block;
position: relative;
width: 300px;
height: 250px;
background: #003399;
z-index: 0;
margin: 2px 2px 2px -2px;
transition: all .15s ease-in-out;
text-align: center;
margin-top: 0px;
margin-left: 0px;
line-height: 200px;
color: #FFFFFF;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);

}

.box:hover {
background: #FFFFFF;
z-index: 100;
transform: scale(1.2,1.2);
box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box2 {
display: inline-block;
position: relative;
width: 300px;
height: 250px;
background: #1E90FF;
z-index: 0;
margin: 2px 2px 2px -2px;
transition: all .15s ease-in-out;
text-align: center;
margin-top: 20px;
margin-left: 0px;
line-height: 200px;
color: #FFFFFF;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);
}

.box2:hover {
background: #1E90FG;
z-index: 100;
transform: scale(1.2,1.2);
box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box3 {
display: inline-block;
position: relative;
width: 300px;
height: 250px;
background: #FF3300;
z-index: 0;
margin: 2px 2px 2px -2px;
transition: all .15s ease-in-out;
text-align: center;
margin-top: 20px;
margin-left: 0px;
line-height: 200px;
color: #FFFFFF;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);
}

.box3:hover {
background: #FFFFFF;
z-index: 100;
transform: scale(1.2,1.2);
box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box4 {
display: inline-block;
position: relative;
width: 300px;
height: 250px;
background: #33CC66;
z-index: 0;
margin: 2px 2px 2px -2px;
transition: all .15s ease-in-out;
text-align: center;
margin-top: 20px;
margin-left: 0px;
color: #FFFFFF;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);
line-height: 200px;

}

.box4:hover {
background: #FFFFFF;
z-index: 100;
transform: scale(1.2,1.2);
box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box5 {
display: inline-block;
position: relative;
width: 300px;
height: 250px;
background: #336666;
z-index: 0;
margin: 2px 2px 2px -2px;
transition: all .15s ease-in-out;
line-height: 200px;
text-align: center;
color: #FFFFFF;box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);
}

.box5:hover {
background: #FFFFFF;
z-index: 100;
transform: scale(1.2,1.2);
box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box6 {
display: inline-block;
position: relative;
width: 300px;
height: 250px;
background: #0099FF ;
z-index: 0;
margin: 2px 2px 2px -2px;
transition: all .15s ease-in-out;
line-height: 200px;
color: #FFFFFF;
text-align: center;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);
}

.box6:hover {
background: #FFFFFF;
z-index: 100;
transform: scale(1.2,1.2);
box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box7 {
display: inline-block;
position: relative;
width: 300px;
height: 250px;
background:#FF3333 ;
z-index: 0;
margin: 2px 2px 2px -2px;
transition: all .15s ease-in-out;
text-align: center;
line-height: 200px;
color: #FFFFFF;
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);
}

.box7:hover {
background: #FFFFFF;
z-index: 100;
transform: scale(1.2,1.2);
box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box8 {
display: inline-block;
position: relative;
width: 300px;
height: 250px;
background: #FFFF66;
z-index: 0;
text-align: center;
margin: 2px 2px 2px -2px;
transition: all .15s ease-in-out;
color: #FFFFFF;
line-height: 200px
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);

}

.box8:hover {
background: #FFFFFF;
z-index: 100;
transform: scale(1.2,1.2);
box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

.box9 {
display: inline-block;
position: relative;
width: 300px;
height: 250px;
background: #FFFF66;
z-index: 0;
text-align: center;
margin: 2px 2px 2px -2px;
transition: all .15s ease-in-out;
color: #FFFFFF;
line-height: 200px
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);

}

.box9:hover {
background: #FFFFFF;
z-index: 100;
transform: scale(1.2,1.2);
box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
}

demo

/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
html,body {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
input{
border:1px solid #b0b0b0;
padding:3px 5px 4px;
color:#979797;
width:190px;
}
address,caption,cite,code,dfn,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:0;
}
/* General Demo Style */
body{
font-family: amery, Arial, sans-serif;
font-weight: 400;
font-size: 15px;
color: #fff;
}
a{
text-decoration: none;
}
.clr{
clear: both;
}
/* Top Bar Style */
.codrops-top{
line-height: 24px;
font-size: 11px;
background: rgba(255, 255, 255, 1);
text-transform: uppercase;
z-index: 9999;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 24px;
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
-webkit-animation: slideOut 0.5s ease-in-out 0.3s backwards;
-moz-animation: slideOut 0.5s ease-in-out 0.3s backwards;
-o-animation: slideOut 0.5s ease-in-out 0.3s backwards;
-ms-animation: slideOut 0.5s ease-in-out 0.3s backwards;
animation: slideOut 0.5s ease-in-out 0.3s backwards;
}
.codrops-top a{
padding: 0px 10px;
letter-spacing: 1px;
color: #333;
text-shadow: 0px 1px 1px #fff;
display: block;
float: left;
}
.codrops-top a:hover{
background: #fff;
}
.codrops-top span.right{
float: right;
}
.codrops-top span.right a{
float: left;
display: block;
}
/* Demo Buttons */
#codrops-demos{
position: fixed;
z-index: 2000;
top: 50px;
right: 50px;
}
#codrops-demos a{
display: inline-block;
font-size: 12px;
width: 60px;
height: 24px;
color: #000;
line-height: 24px;
text-align: center;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
background: rgba(255,255,255,0.9);
text-transform: uppercase;
}
#codrops-demos a:hover{
background: #ddd;
color: #000;
}
#codrops-demos a.current-demo,
#codrops-demos a.current-demo:hover{
background: #000;
color: #fff;
cursor: default;
}
@-webkit-keyframes slideOut{
0%{top:-30px; opacity: 0;}
100%{top:0px; opacity: 1;}
}
@-moz-keyframes slideOut{
0%{top:-30px; opacity: 0;}
100%{top:0px; opacity: 1;}
}
@-o-keyframes slideOut{
0%{top:-30px; opacity: 0;}
100%{top:0px; opacity: 1;}
}
@-ms-keyframes slideOut{
0%{top:-30px; opacity: 0;}
100%{top:0px; opacity: 1;}
}
@keyframes slideOut{
0%{top:-30px; opacity: 0;}
100%{top:0px; opacity: 1;}
}

style

html, body {
height:100%;
}
body {
width: 100%;
background: #b1e583;
overflow-x: hidden;
overflow-y: auto;
}
#header{
position: absolute;
z-index: 2000;
width: 235px;
height: 250px;
top: 60px;
}
#header h1{
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
padding: 20px;
background: #000;
}
#navigation {
margin-top: 20px;
width: 215px;
display:block;
list-style:none;
z-index:3;
}
#navigation a{
color: #444;
display: block;
background: #fff;
background: rgba(255,255,255,0.9);
line-height: 50px;
padding: 0px 20px;
text-transform: uppercase;
margin-bottom: 6px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
font-size: 15px;
}
#navigation a:hover {
background: #ddd;
}
.content{
right: 80px;
left: 240px;
top: 0px;
position: absolute;
padding-bottom: 30px;
}
.content h2{
font-size: 110px;
padding: 10px 0px 20px 0px;
margin-top: 52px;
color: #fff;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
font-size: 18px;
padding: 10px;
line-height: 24px;
color: #fff;
display: inline-block;
background: black;
padding: 10px;
margin: 3px 0px;
}
.panel{
width: 98%;
min-height: 100%;
position: absolute;
background-color: #b1e583;
margin-left: -110%;
z-index:2;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
.panel:target{
margin-left: 0%;
background-color: #b1e583;
}
#home:target ~ #header #navigation #link-home,
#gallery:target ~ #header #navigation #link-gallery,
#about:target ~ #header #navigation #link-about,
#taklamakan:target ~ #header #navigation #link-taklamakan,
#contact:target ~ #header #navigation #link-contact{
background: #000;
color: #fff;
}
#works {
padding: 15px 0px;
}
#works li{
display: inline;
}
#works li a{
padding-right: 10px;
}
#works img {
box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
padding: 12px;
background: rgba(255,255,255,0.9);
}
#form p{
background: #fff;
color: #000;
}
#form input, #form textarea{
background: #000;
color: #fff;
border: none;
}
#form textarea{
width: 493px;
height: 100px;
}
#form label{
padding-right: 10px;
float: left;

Index

<!DOCTYPE html>

<head>
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style3.css" />
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>


<div id="home" class="panel">
<div class="content">
<h2>Silk Route</h2>
<font face="electrolize" size="5" color="blue">
The silk road was a network of trade routes, formally established during the Han Dynasty of China, which linked the regions of the ancient world in commerce.
The Silk route were important part of cultural, commercial and technological exchange between traders, merchants, pilgrims, missionaries, soldiers, nomads and urban dwellers from
Ancient China, Ancient India, Ancient Tibet, Persia and Mediterranean countries for almost 3000 years.
</font>
<ul class="wrapper">
<li class="box"><img src="images/lg_map_silkroad_2011_09.gif" width="300px" height="250px"></li>
<li class="box2"><img src="images/silkroad8.jpg" width="300px" height="250px"></li>
<li class="box3"><img src="images/2928.jpg" width="300px" height="250px"></li>

</ul>

</div>
</div>



<div id="gallery" class="panel">
<div class="content">
<h2>Gallery</h2>

<ul class="wrapper">
<li class="box"><img src="gallery/1.jpg" width="300px" height="250px"></li>
<li class="box2"><img src="gallery/2.jpg" width="300px" height="250px"></li>
<li class="box3"><img src="gallery/3.jpg" width="300px" height="250px"></li>
<li class="box4"><img src="gallery/4.jpg" width="300px" height="250px"></li>
<li class="box5"><img src="gallery/5.jpg" width="300px" height="250px"></li>
<li class="box6"><img src="gallery/6.jpg" width="300px" height="250px"></li>
<li class="box7"><img src="gallery/7.jpg" width="300px" height="250px"></li>
<li class="box8"><img src="gallery/8.jpg" width="300px" height="250px"></li>
<li class="box9"><img src="gallery/9.jpg" width="300px" height="250px"></li>
</ul>

</div>
</div>


<div id="about" class="panel">
<div class="content">
<h2>Gobi Desert</h2>
<font face="electrolize" size="5" color="blue">
It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.
The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.
She packed her seven versalia, put her initial into the belt and made herself on the way.</font>
<ul class="wrapper">
<li class="box"><img src="images/gobidesertmap.gif" width="300px" height="250px"></li>
<li class="box4"><img src="images/gobi.jpg" width="300px" height="250px"></li>
<li class="box5"><img src="images/gobi4.jpg" width="300px" height="250px"></li>
</ul>
</div>
</div>


<div id="taklamakan" class="panel">
<div class="content">
<h2>Taklamakan</h2>
<font face="electrolize" size="5" color="blue">
Taklamakan Desert Tourist Scenic Region is home to numerous moving sand dunes that range from 100 meters (328 feet) to 300 meters (984 feet) tall, and it has a typical continental climate, featuring strong winds, low precipitation and a great difference in temperature between the daytime and night-time.
Among the deserts, Taklamakan is the most mysterious and the most attractive one. Under the boundless sky is the endless Taklamakan Desert, which makes you feel a kind of fantastic power that is able to shock your heart in the mistiness.
</font>
<ul class="wrapper">
<li class="box"><img src="images/taklamakan_map.jpg" width="300px" height="250px"></li>
<li class="box4"><img src="images/taklamakan3.jpg" width="300px" height="250px"></li>
<li class="box5"><img src="images/taklamakan.jpg" width="300px" height="250px"></li>

</ul>
</div>
</div>



<div id="contact" class="panel">
<div class="content">
<h2>Contact</h2>
<font face="electrolize" size="5" color="blue">
</font>
<form id="form">

<p><label>Your Name</label><input type="text" /></p>
<p><label>Your Email</label><input type="text" /></p>
<p><label>Your Message</label><textarea></textarea></p>
</form>
<br>
<font face="electrolize" size="5" color="blue"> For more information contact us at - +91-9999997654 , +91-9986553674
</font>
</div>
</div>



<div id="header">
<center><h1>Adventure Tourism</h1></center>
<ul id="navigation">
<li><a id="link-home" href="#home">Silk Route Tourism</a></li>
<li><a id="link-taklamakan" href="#taklamakan">Taklamakan</a></li>
<li><a id="link-about" href="#about">Gobi Desert</a></li>
<li><a id="link-gallery" href="#gallery">Gallery</a></li>
<li><a id="link-contact" href="#contact">Contact</a></li>

</ul>

</div>

</body>
</html>

HTML (1)

HTML

-------------------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>

<head>

</head>

<body>

<h2>Silk Route</h2>

The silk road was a network of trade routes, formally established during the Han Dynasty of China, which linked the regions of the ancient world in commerce.

The Silk route were important part of cultural, commercial and technological exchange between traders, merchants, pilgrims, missionaries, soldiers, nomads and urban dwellers from

Ancient China, Ancient India, Ancient Tibet, Persia and Mediterranean countries for almost 3000 years.

</font>

</ul>

</div>

<h2>Gallery</h2>

</ul>

</div>

<h2>Gobi Desert</h2>

It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.

The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.

She packed her seven versalia, put her initial into the belt and made herself on the way.</font>

</ul>

</div>

<h2>Taklamakan</h2>

Taklamakan Desert Tourist Scenic Region is home to numerous moving sand dunes that range from 100 meters (328 feet) to 300 meters (984 feet) tall, and it has a typical continental climate, featuring strong winds, low precipitation and a great difference in temperature between the daytime and night-time.

Among the deserts, Taklamakan is the most mysterious and the most attractive one. Under the boundless sky is the endless Taklamakan Desert, which makes you feel a kind of fantastic power that is able to shock your heart in the mistiness.

</font>

</ul>

</div>

<h2>Contact</h2>

</font>

<p><label>Your Email</label><input type="text" /></p>

<p><label>Your Message</label><textarea></textarea></p>

</form>

<br>

<font face="electrolize" size="5" color="blue"> For more information contact us at - +91-9999997654 , +91-9986553674

</font>

</div>

<center><h1>Adventure Tourism</h1></center>

<li><a id="link-home" href="#home">Silk Route Tourism</a></li>

<li><a id="link-taklamakan" href="#taklamakan">Taklamakan</a></li>

<li><a id="link-about" href="#about">Gobi Desert</a></li>

<li><a id="link-gallery" href="#gallery">Gallery</a></li>

<li><a id="link-contact" href="#contact">Contact</a></li>

</ul>

</div>

</body>

</html>

-------------------------------------------------------------------------------------------------------------------------

DEMO

/* CSS reset */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {

margin:0;

padding:0;

}

html,body {

margin:0;

padding:0;

}

table {

border-collapse:collapse;

border-spacing:0;

}

input{

border:1px solid #b0b0b0;

padding:3px 5px 4px;

color:#979797;

width:190px;

}

/* General Demo Style */

body{

font-family:https://www.google.com/fonts/specimen/Electrolize

font-weight: 400;

font-size: 15px;

color: #fff;

}

text-decoration: none;

}

.clr{

clear: both;

}

#codrops-demos a.current-demo,

#codrops-demos a.current-demo:hover{

background: #000;

color: #fff;

cursor: default;

}

@-webkit-keyframes slideOut{

0%{top:-30px; opacity: 0;}

100%{top:0px; opacity: 1;}

}

@-moz-keyframes slideOut{

0%{top:-30px; opacity: 0;}

100%{top:0px; opacity: 1;}

}

@-o-keyframes slideOut{

0%{top:-30px; opacity: 0;}

100%{top:0px; opacity: 1;}

}

@-ms-keyframes slideOut{

0%{top:-30px; opacity: 0;}

100%{top:0px; opacity: 1;}

}

@keyframes slideOut{

0%{top:-30px; opacity: 0;}

100%{top:0px; opacity: 1;}

}

-------------------------------------------------------------------------------------------------------------------------

INDEX

.wrapper {

max-width: 2000px;

height: auto;

}

body {

margin: 0;

padding: 0;

margin-left:20px;

}

.box {

display: inline-block;

position: relative;

width: 300px;

height: 250px;

background: #003399;

z-index: 0;

margin: 2px 2px 2px -2px;

transition: all .15s ease-in-out;

text-align: center;

margin-top: 0px;

margin-left: 0px;

line-height: 200px;

color: #FFFFFF;

box-shadow: 1px 1px 2px rgba(0,0,0,0.3);

padding: 12px;

background: rgba(255,255,255,0.9);

}

.box:hover {

background: #FFFFFF;

z-index: 100;

transform: scale(1.2,1.2);

box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);

}

.box2 {

display: inline-block;

position: relative;

width: 300px;

height: 250px;

background: #1E90FF;

z-index: 0;

margin: 2px 2px 2px -2px;

transition: all .15s ease-in-out;

text-align: center;

margin-top: 20px;

margin-left: 0px;

line-height: 200px;

color: #FFFFFF;

box-shadow: 1px 1px 2px rgba(0,0,0,0.3);

padding: 12px;

background: rgba(255,255,255,0.9);

}

.box2:hover {

background: #1E90FG;

z-index: 100;

transform: scale(1.2,1.2);

box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);

}

.box3 {

display: inline-block;

position: relative;

width: 300px;

height: 250px;

background: #FF3300;

z-index: 0;

margin: 2px 2px 2px -2px;

transition: all .15s ease-in-out;

text-align: center;

margin-top: 20px;

margin-left: 0px;

line-height: 200px;

color: #FFFFFF;

box-shadow: 1px 1px 2px rgba(0,0,0,0.3);

padding: 12px;

background: rgba(255,255,255,0.9);

}

.box3:hover {

background: #FFFFFF;

z-index: 100;

transform: scale(1.2,1.2);

box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);

}

.box4 {

display: inline-block;

position: relative;

width: 300px;

height: 250px;

background: #33CC66;

z-index: 0;

margin: 2px 2px 2px -2px;

transition: all .15s ease-in-out;

text-align: center;

margin-top: 20px;

margin-left: 0px;

color: #FFFFFF;

box-shadow: 1px 1px 2px rgba(0,0,0,0.3);

padding: 12px;

background: rgba(255,255,255,0.9);

line-height: 200px;

}

.box4:hover {

background: #FFFFFF;

z-index: 100;

transform: scale(1.2,1.2);

box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);

}

.box5 {

display: inline-block;

position: relative;

width: 300px;

height: 250px;

background: #336666;

z-index: 0;

margin: 2px 2px 2px -2px;

transition: all .15s ease-in-out;

line-height: 200px;

text-align: center;

color: #FFFFFF;box-shadow: 1px 1px 2px rgba(0,0,0,0.3);

padding: 12px;

background: rgba(255,255,255,0.9);

}

.box5:hover {

background: #FFFFFF;

z-index: 100;

transform: scale(1.2,1.2);

box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);

}

.box6 {

display: inline-block;

position: relative;

width: 300px;

height: 250px;

background: #0099FF ;

z-index: 0;

margin: 2px 2px 2px -2px;

transition: all .15s ease-in-out;

line-height: 200px;

color: #FFFFFF;

text-align: center;

box-shadow: 1px 1px 2px rgba(0,0,0,0.3);

padding: 12px;

background: rgba(255,255,255,0.9);

}

.box6:hover {

background: #FFFFFF;

z-index: 100;

transform: scale(1.2,1.2);

box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);

}

.box7 {

display: inline-block;

position: relative;

width: 300px;

height: 250px;

background:#FF3333 ;

z-index: 0;

margin: 2px 2px 2px -2px;

transition: all .15s ease-in-out;

text-align: center;

line-height: 200px;

color: #FFFFFF;

box-shadow: 1px 1px 2px rgba(0,0,0,0.3);

padding: 12px;

background: rgba(255,255,255,0.9);

}

.box7:hover {

background: #FFFFFF;

z-index: 100;

transform: scale(1.2,1.2);

box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);

}

.box8 {

display: inline-block;

position: relative;

width: 300px;

height: 250px;

background: #FFFF66;

z-index: 0;

text-align: center;

margin: 2px 2px 2px -2px;

transition: all .15s ease-in-out;

color: #FFFFFF;

line-height: 200px

box-shadow: 1px 1px 2px rgba(0,0,0,0.3);

padding: 12px;

background: rgba(255,255,255,0.9);

}

.box8:hover {

background: #FFFFFF;

z-index: 100;

transform: scale(1.2,1.2);

box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);

}

.box9 {

display: inline-block;

position: relative;

width: 300px;

height: 250px;

background: #FFFF66;

z-index: 0;

text-align: center;

margin: 2px 2px 2px -2px;

transition: all .15s ease-in-out;

color: #FFFFFF;

line-height: 200px

box-shadow: 1px 1px 2px rgba(0,0,0,0.3);

padding: 12px;

background: rgba(255,255,255,0.9);

}

.box9:hover {

background: #FFFFFF;

z-index: 100;

transform: scale(1.2,1.2);

box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);

}

-------------------------------------------------------------------------------------------------------------------------

STYLE3

html, body {

height:100%;

}

body {

width: 100%;

background: #b1e583;

overflow-x: hidden;

overflow-y: auto;

}

#header{

position: absolute;

z-index: 2000;

width: 235px;

height: 250px;

top: 60px;

}

#header h1{

font-size: 30px;

font-weight: 400;

text-transform: uppercase;

color: rgba(255,255,255,0.9);

text-shadow: 0px 1px 1px rgba(0,0,0,0.3);

padding: 20px;

background: #000;

}

#navigation {

margin-top: 20px;

width: 215px;

display:block;

list-style:none;

z-index:3;

}

#navigation a{

color: #444;

display: block;

background: #fff;

background: rgba(255,255,255,0.9);

line-height: 50px;

padding: 0px 20px;

text-transform: uppercase;

margin-bottom: 6px;

box-shadow: 1px 1px 2px rgba(0,0,0,0.2);

font-size: 15px;

}

#navigation a:hover {

background: #ddd;

}

.content{

right: 80px;

left: 240px;

top: 0px;

position: absolute;

padding-bottom: 30px;

}

.content h2{

font-size: 110px;

padding: 10px 0px 20px 0px;

margin-top: 52px;

color: #fff;

color: rgba(255,255,255,0.9);

text-shadow: 0px 1px 1px rgba(0,0,0,0.3);

}

.content p{

font-size: 18px;

padding: 10px;

line-height: 24px;

color: #fff;

display: inline-block;

background: black;

padding: 10px;

margin: 3px 0px;

}

.panel{

width: 98%;

min-height: 100%;

position: absolute;

background-color: #b1e583;

margin-left: -110%;

z-index:2;

-webkit-transition: all .6s ease-in-out;

-moz-transition: all .6s ease-in-out;

-o-transition: all .6s ease-in-out;

-ms-transition: all .6s ease-in-out;

transition: all .6s ease-in-out;

}

.panel:target{

margin-left: 0%;

background-color: #b1e583;

}

#home:target ~ #header #navigation #link-home,

#gallery:target ~ #header #navigation #link-gallery,

#about:target ~ #header #navigation #link-about,

#taklamakan:target ~ #header #navigation #link-taklamakan,

#contact:target ~ #header #navigation #link-contact{

background: #000;

color: #fff;

}

#works {

padding: 15px 0px;

}

#works li{

display: inline;

}

#works li a{

padding-right: 10px;

}

#works img {

box-shadow: 1px 1px 2px rgba(0,0,0,0.3);

padding: 12px;

background: rgba(255,255,255,0.9);

}

#form p{

background: #fff;

color: #000;

}

#form input, #form textarea{

background: #000;

color: #fff;

border: none;

}

#form textarea{

width: 493px;

height: 100px;

}

#form label{

padding-right: 10px;

float: left;