Friday, 1 August 2014

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;

No comments:

Post a Comment

Twitter Bird Gadget