Вы находитесь на странице: 1из 7

<html>

<title>bias 1</title>
<head>
<style type="text/css">
#navbar-iframe {display: none;}
body {
background:#fff;
font-family: tahoma, sans-serif;
font-size: 10px;
}
a:link,a:active,a:visited{
color:#888;
text-decoration:none;
-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;}
a:hover {
-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;
}
::-webkit-scrollbar {width: 5px; height:5px; background:#2a2a2a;}
::-webkit-scrollbar-corner {background:#fff;}
::-webkit-scrollbar-thumb:vertical {background:#fff;}
::-webkit-scrollbar-thumb:horizontal {background:#fff;}
::-moz-selection {
background:#FFFFFF;
color:#ccc;
}
::selection {
background:#FFFFFF;
color:#ccc;
}

/* credit */
#credit {
position: fixed;
background-color: transparent;
bottom: 10px;
right: 10px;
text-transform: lowercase;
font-family: calibri;
margin-top:5px;
text-align:center;
border: 1px dashed #fff;
padding: 5px;
font-size: 15px;

-webkit-transition: all 0.3s linear;


-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
}
#credit:hover {
margin-top:-5px;
border: 5px dashed #2a2a2a;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
}
#box {
width:1000px;
margin: auto;
margin-top:100px;
padding:25px;
}
#inbox {
margin-left:20px;
width:200px;
height:300px;
margin-top: 10px;
display: inline-block;
border:5px double #fafafa;
padding:7px;
background:#ffffff;
}
#inbox img {
width:100px;
height:100px;
-webkit-border-radius:100px 90px 100px 0px;
-moz-border-radius:100px 90px 100px 0px;
border-radius:100px 90px 100px 0px;
padding:5px;
margin-top:10px;
margin-left:auto;
margin-bottom:10px;
border:1px solid #eee;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
}
#inbox img:hover{
-webkit-border-radius:100px 0px 100px 90px;
-moz-border-radius:100px 90px 100px 0px;
border-radius:100px 0px 100px 90px;}
#name{
color:#fafafa;
font-family: metropolis 1997;
font-size: 20px;
padding:10px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;

background:#2a2a2a;
text-shadow:15px 0px transparent, -15px 0px transparent;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;}
#name:hover {
background:#fff;
color: #2a2a2a;
text-shadow: 0px 0px #333, -0px 0px #333;
}
#description {
position:absolute;
font-family: calibri;
font-size: 8px;
width: 180px;
height: 100px;
color: #000;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom:5px;
background:#fff;
padding:10px;
margin-top: 10px;
text-align:justify;
overflow: auto;
}
/*link navigation*/
.luhan1, .luhan2, .luhan3, .luhan4{
overflow: hidden;
display: inline-block;
width: 30px;
height: 30px;
margin-bottom: 30px;
-webkit-border-radius:100px 90px 100px 0px;
-moz-border-radius:100px 90px 100px 0px;
border-radius:100px 90px 100px 2px;
-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;
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
-o-transform: rotate(-225deg);
-ms-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.luhan1:hover, .luhan2:hover, .luhan3:hover, .luhan4:hover{
background-color: white;
-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;
}
#nav {

position: fixed;
top: 30px;
right: 10px;
}
/*link color*/
.luhan1 { background-color:
.luhan1:hover { box-shadow:
.luhan2 { background-color:
.luhan2:hover { box-shadow:
.luhan3 { background-color:
.luhan3:hover { box-shadow:
.luhan4 { background-color:
.luhan4:hover { box-shadow:

#444;
inset
#999;
inset
#222;
inset
#ccc;
inset

}
0px -5px #2a2a2a, -5px 0px #444;}
}
0px -5px #2a2a2a, -5px 0px #999;}
}
0px -5px #2a2a2a, -5px 0px #222;}
}
0px -5px #2a2a2a, -5px 0px #ccc;}

/* HEADER */
#xoxo {
font-family: voor;
font-size: 100px;
color: #000;
text-align:center;
height: 10px;
width: 300px;
margin:auto;
margin-top:10px;
z-index:999;
background-color:transparent;
border-bottom: 2px solid #2a2a2a;
}
</style>
</head>
<body>
<div id="xoxo">
BIAS
</div>
<div id="nav">
<a class="luhan1"
<a class="luhan2"
<a class="luhan3"
></a>
<a class="luhan4"
</div>

href="https://twitter.com/kaiwufvn" title="twitter"></a>
href="http://kaiwufvn.tumblr.com/" title="tumblr"></a>
href="http://www.blogskins.com/me/kaiwufvn" title="blogskins"
href="http://ayunipororo.blogspot.com/" title="back"></a>

<div id="box">

<div id="inbox">
<div id="name">ONE</div>
<center>

<img src="http://i.imgur.com/gOI7wuY.png"/>
</center>
<div id="description">
Lorem ipsum dolor sit amet, jongin adipiscing elit. Vestibulum taemin felis at t
incidunt vestibulum. Phasellus sunggyu tincidunt sapien eget euismod. Phasellus
iu neque et purus tincidunt placerat. Vestibulum exo ut sapien eget faucibus. sm
town ligula mauris, suscipit non ante id, tempor volutpat ante.
</div>
</div>
<div id="inbox">
<div id="name">TWO</div>
<center>
<img src="http://i.imgur.com/gOI7wuY.png"/>
</center>
<div id="description">
love . touch . dance
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum adipiscing f
elis at tincidunt vestibulum. Phasellus mollis tincidunt sapien eget euismod. Ph
asellus iaculis neque et purus tincidunt placerat. Vestibulum dignissim ut sapie
n eget faucibus. Phasellus ligula mauris, suscipit non ante id, tempor volutpat
ante.
</div>
</div>
<div id="inbox">
<div id="name">THREE</div>
<center>
<img src="http://i.imgur.com/gOI7wuY.png"/>
</center>
<div id="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum adipiscing f
elis at tincidunt vestibulum. Phasellus mollis tincidunt sapien eget euismod. Ph
asellus iaculis neque et purus tincidunt placerat. Vestibulum dignissim ut sapie
n eget faucibus. Phasellus ligula mauris, suscipit non ante id, tempor volutpat
ante.
</div>
</div>
<div id="inbox">
<div id="name">FOUR</div>
<center>
<img src="http://i.imgur.com/gOI7wuY.png"/>
</center>
<div id="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum adipiscing f
elis at tincidunt vestibulum. Phasellus mollis tincidunt sapien eget euismod. Ph
asellus iaculis neque et purus tincidunt placerat. Vestibulum dignissim ut sapie
n eget faucibus. Phasellus ligula mauris, suscipit non ante id, tempor volutpat
ante.
</div>
</div>
<table><td>
<div id="inbox">
<div id="name">FIVE</div>
<center>

<img src="http://i.imgur.com/gOI7wuY.png"/>
</center>
<div id="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum adipiscing f
elis at tincidunt vestibulum. Phasellus mollis tincidunt sapien eget euismod. Ph
asellus iaculis neque et purus tincidunt placerat. Vestibulum dignissim ut sapie
n eget faucibus. Phasellus ligula mauris, suscipit non ante id, tempor volutpat
ante.
</div>
</div>
<div id="inbox">
<div id="name">SIX</div>
<center>
<img src="http://i.imgur.com/gOI7wuY.png"/>
</center>
<div id="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum adipiscing f
elis at tincidunt vestibulum. Phasellus mollis tincidunt sapien eget euismod. Ph
asellus iaculis neque et purus tincidunt placerat. Vestibulum dignissim ut sapie
n eget faucibus. Phasellus ligula mauris, suscipit non ante id, tempor volutpat
ante.
</div>
</div>
<div id="inbox">
<div id="name">SEVEN</div>
<center>
<img src="http://i.imgur.com/gOI7wuY.png"/>
</center>
<div id="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum adipiscing f
elis at tincidunt vestibulum. Phasellus mollis tincidunt sapien eget euismod. Ph
asellus iaculis neque et purus tincidunt placerat. Vestibulum dignissim ut sapie
n eget faucibus. Phasellus ligula mauris, suscipit non ante id, tempor volutpat
ante.
</div>
</div>
<div id="inbox">
<div id="name">EIGHT</div>
<center>
<img src="http://i.imgur.com/gOI7wuY.png"/>
</center>
<div id="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum adipiscing f
elis at tincidunt vestibulum. Phasellus mollis tincidunt sapien eget euismod. Ph
asellus iaculis neque et purus tincidunt placerat. Vestibulum dignissim ut sapie
n eget faucibus. Phasellus ligula mauris, suscipit non ante id, tempor volutpat
ante.
</div>
</div>
<table><td>
</div>
<!-- DO NOT REMOVE THIS! -->

<div id="credit"><a href="http://ayunipororo.blogspot.com/" target="_blank"></a>


</div><!-- END credit div-->
</body>
</html>