Єʋ-яɛʋ-яσиɢ



Bias Page
Friday, 4 October 2013 - 21:33 - 0 exostans

Assalamualaikum , Hai Earthlings !

Harini Mrym nak kasi korang FREEBIES Bias Page . Cantik ! Mrym pun suka . kekeke LOL.
ni MUNGKIN post last sbb 17/10 ni mrym ada final exam . Wish Me THE BEST ! ThankYou <3
Kalau amik DROP THE COMMENT okay ? DILARANG RE-FREEBIES ! 

Preview :

Okay ? heuheuheu . kalau okay jom teruskan ~!



<html>
<title>bias 1</title>
<head>
<style type="text/css">
#navbar-iframe {display: none;}

body {
background:url(http://i.imgur.com/tDtge.png);
font-family: trebuchet, sans-serif;
font-size: 7px;
}


a:link,a:active,a:visited{
color:#d8d8d8;
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:#d8d8d8;
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: 4px solid #D8D8D8;
-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:#d8d8d8;
font-family:kittyspoon;
font-size: 20px;
padding:10px;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
background:#FDE7ED;
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: #444;  }
.luhan1:hover { box-shadow: inset  0px -5px #2a2a2a, -5px 0px #444;}
.luhan2 { background-color: #999; }
.luhan2:hover { box-shadow: inset 0px -5px #2a2a2a, -5px 0px #999;}
.luhan3 { background-color: #222; }
.luhan3:hover { box-shadow: inset 0px -5px #2a2a2a, -5px 0px #222;}
.luhan4 { background-color: #ccc; }
.luhan4:hover { box-shadow: inset 0px -5px #2a2a2a, -5px 0px #ccc;}

/* HEADER */
#xoxo {
font-family: thingswesaid;
font-size: 100px;
color: #CECEF6;
text-align:center;
height: 10px;
width: 300px;
margin:auto;
margin-top:10px;
z-index:999;
background-color:transparent;
border-bottom: 0px solid #2a2a2a;
}

@font-face{font-family:thingswesaid;src:url('http://static.tumblr.com/eq1rpir/Qvgm54b1g/things_we_said.ttf')}
<style type="text/css">
.boxer {
width: 250px;
height: 110px;
margin-top: -130px;
position: fixed;
left: 50px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
z-index: 100;
top: 0px;
}

.boxer:hover   {
margin-top: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

.box           {
width: 250px;
background: #fff;
color: #5E5E5E;
padding: 0px;
overflow: hidden;
height: 130px;
}

.close         {
text-transform: lowercase;
top: 130px;
font-size:15px;
position: absolute;
background: #FFAEBC;
color: #777;
padding: 5px;
width:150px;
font-family:arial;
text-align:center;
border-radius: 0px 0px 10px 10px;
-moz-border-radius: 0px 0px 10px 10px;
-webkit-border-radius: 0px 0px 10px 10px;
left: 50px;
}

.close  e, .boxer:hover f   {
display: inline;
opacity:.8;
}

.close  f, .boxer:hover e   {
display: none;
opacity:.8;
}

</style>



</head>

<body>

<div id="xoxo">
BIAs
</div><br>
<br>
</br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<style>
.icon2 {
margin-left:50px;
margin: px;
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
border: 3px solid #CECEF6;
float: left;
}
@font-face{font-family:thelastomethingthatmeantanything;
src:url('http://static.tumblr.com/eq1rpir/4Hhm54b0q/thelastsomethingthatmeantanything.ttf')}

#bias {
position: absolute;
display: block;
width: 300px;
height: 30px;
top: 0px;
margin-left: -20px;
opacity: 0;
text-align: center;
color: #000;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwfjTJHmHj_94pL6pprZa7-4Ee8KH9Uj240-LzgHD7Nu7BHTYr87WywhINueD0gykJfrx8mDJigu_zdYHBfAwIMA8I_nAjtRdMlCkuYE6rtpKc7i3Vy5Ze0TUrZdHmBTgGZMO8qTJEbAw/s1600/blue.png);
-webkit-transition-duration: 0.8s;
border-top: 3px solid #CECEF6;
border-bottom: 3px solid #CECEF6;
line-height: 4px; text-transform: uppercase ;
-webkit-transform: rotate(-30deg);
font-size: 16px;
font-family:thelastomethingthatmeantanything;

}
.icon2:hover #bias{left: 20px; top: 120px;
bottom: 5px; opacity: 1;
width: 200px; height: 30px;
line-height: 30px;
-webkit-transform: rotate(0deg)
}
</style>
<table border="0" bordercolor="" cellpadding="3" cellspacing="0" style="text-align: center; width: 520px;">
<tbody>
<tr>
  <td><div class="icon2">
<img src="http://koreanindo.files.wordpress.com/2013/06/exo_ot12.jpg" width="200px"height="200px" /><br />
<div id="bias">
Name</div>
</div>
</td>
   <td><div class="icon2">
<img src="http://koreanindo.files.wordpress.com/2013/06/exo_ot12.jpg" width="200px"height="200px" /><br />
<div id="bias">
Name</div>
</div>
</td>
    <td><div class="icon2">
<img src="http://koreanindo.files.wordpress.com/2013/06/exo_ot12.jpg" width="200px"height="200px" /><br />
<div id="bias">
Name</div>
</div>
</td>
   <td><div class="icon2">
<img src="http://koreanindo.files.wordpress.com/2013/06/exo_ot12.jpg" width="200px"height="200px" /><br />
<div id="bias">
Name</div>
</div>
</td>
  <td><div class="icon2">
<img src="http://koreanindo.files.wordpress.com/2013/06/exo_ot12.jpg" width="200px"height="200px" /><br />
<div id="bias">
Name</div>
</div>
</td></tr>

  <td><div class="icon2">
<img src="http://superjuniorshop.com/wp-content/uploads/2013/05/EXO1.jpg" width="200px"height="200px" /><br />
<div id="bias">
Name</div>
</div>
</td>
  <td><div class="icon2">
<img src="http://superjuniorshop.com/wp-content/uploads/2013/05/EXO1.jpg" width="200px"height="200px" /><br />
<div id="bias">
Name</div>
</div>
</td>
  <td><div class="icon2">
<img src="http://superjuniorshop.com/wp-content/uploads/2013/05/EXO1.jpg" width="200px"height="200px" /><br />
<div id="bias">
Name</div>
</div>
</td>
  <td><div class="icon2">
<img src="http://superjuniorshop.com/wp-content/uploads/2013/05/EXO1.jpg" width="200px"height="200px" /><br />
<div id="bias">
Name</div>
</div>
</td>
  <td><div class="icon2">
<img src="http://superjuniorshop.com/wp-content/uploads/2013/05/EXO1.jpg" width="200px"height="200px" /><br />
<div id="bias">
Name</div>
</div>
</td>
 </tr>

 <td><div class="icon2">
<img src="http://www.callmepatricia.com/wp-content/uploads/2013/06/20130606_cmpatricia_exo1.jpg" width="200px"height="200px" /><br />
<div id="bias">
Name</div>
</div>
</td>
 <td><div class="icon2">
<img src="http://www.callmepatricia.com/wp-content/uploads/2013/06/20130606_cmpatricia_exo1.jpg" width="200px"height="200px" /><br />
<div id="bias">
Name</div>
</div>
</td>
 <td><div class="icon2">
<img src="http://www.callmepatricia.com/wp-content/uploads/2013/06/20130606_cmpatricia_exo1.jpg" width="200px"height="200px" /><br />
<div id="bias">
Name</div>
</div>
</td>
 <td><div class="icon2">
<img src="http://www.callmepatricia.com/wp-content/uploads/2013/06/20130606_cmpatricia_exo1.jpg" width="200px"height="200px" /><br />
<div id="bias">
Name</div>
</div>
</td>
 <td><div class="icon2">
<img src="http://www.callmepatricia.com/wp-content/uploads/2013/06/20130606_cmpatricia_exo1.jpg" width="200px"height="200px" /><br />
<div id="bias">
Name</div>
</div>
</td>
 </tr>
<tr>
 </tr>
</div>
<!-- DO NOT REMOVE THIS! -->
<div id="credit"><a href="http://maryamshafiqah.blogspot.com/" target="_blank">©</a>
</div><!-- END credit div-->

</tbody></table>


Okay ? Sekarang COPY CODE DI ATAS .
1. New Blog > Template Designer > Paste CODE > Edit Code > Preview > SAVE !

cr : MaryamShafiqah (Me)

Past - Future
we are one


안녕하세요




full edit by maryam