BIAS PAGE #4

<!--


    ʙɪᴀs ᴘᴀɢᴇ #4;
    © ᴍᴀᴅᴇ ʙʏ ᴄʜʟᴏᴇ
    [ ʏ-ᴏɴɢɪɴ.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ] & [ sᴏᴏɴᴊᴜɴs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ]

    ᴛʜᴇᴍᴇs ᴄᴀɴ ʙᴇ ғᴏᴜɴᴅ ᴀᴛ:
    [ sᴏᴏɴ-co.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ ]


    - ᴅᴏɴ'ᴛ sᴛᴇᴀʟ ɪᴛ.
    - ᴘʟᴇᴀsᴇ ʟᴇᴀᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ ᴏɴ ᴛʜᴇ ᴘᴀɢᴇ.


                                                                   -->


<html>
<head>
<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">


<script src="http://static.tumblr.com/whx9ghv/lq0m3ktlh/modernizr.custom.34978.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
<script>
    (function($){
        $(document).ready(function(){
            $("[title]").style_my_tooltips();
        });
    })(jQuery);
</script>


<link href='http://fonts.googleapis.com/css?family=Six+Caps' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>

<!---------------------------------------------------------------------------


         ɴᴏᴛᴇ: ғᴏʀ sᴏᴍᴇ ʀᴇᴀsᴏɴ ᴡʜᴀᴛ ᴅɪsᴘʟᴀʏs ᴏɴ ᴛʜᴇ ᴘʀᴇᴠɪᴇᴡ
         ᴏɴ ᴛʜᴇ ʀɪɢʜᴛ ɪs ᴍᴏsᴛ ʟɪᴋᴇʟʏ ɴᴏᴛ ᴛʜᴇ ᴇxᴀᴄᴛ sᴀᴍᴇ ᴀs
         ᴛʜᴇ ʟᴀʏᴏᴜᴛ ʙᴜɪʟᴛ (ғᴏʀ ᴇxᴀᴍᴘʟᴇ ғᴏɴᴛs). sᴀᴠᴇ ᴀɴᴅ sᴇᴇ
         ᴀʟᴛᴇʀᴀᴛɪᴏɴs ᴏɴ ᴛʜᴇ ᴀᴄᴛᴜᴀʟ ʙʟᴏɢ.


 ---------------------------------------------------------------------------->

<style type="text/css">


#s-m-t-tooltip {
    display: block;
    background: #c0d4d2;
    font-size: 8px;
    font-family: calibri;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    margin-left: 20px;
    padding: 5px;
    min-width: 40px;
    z-index: 99;}


::-webkit-scrollbar-track {background-color:#c0d4d2;border:2px solid #fff;}
::-webkit-scrollbar-thumb {background-color:#c0d4d2;}
::-webkit-scrollbar {width:5px;height:5px;}


body {background:white;text-align: center;line-height: 100%;}


a:link, a:active, a:visited {text-decoration:none;}


#title{
    font: 92px 'Six Caps';
    text-transform:uppercase;
    background:#fff;
    letter-spacing:6px;
    line-height:100%;
    padding:20px 25px 25px 25px;
    border:4px solid #c0d4d2;
    color: #c0d4d2;
    text-shadow: 0px 1px 1px #eee;
    text-align:center;
    margin:auto;
    margin-top:175px;
    width:430px;
    box-shadow: 0px 0px 1px #eee;}


#titles {border-bottom:2px solid #c0d4d2; font:15px 'Lato';text-align:left;font-weight:300; color:#c0d4d2; padding:5px; letter-spacing:2px;margin-bottom:25px;margin-top:55px;text-transform:uppercase;margin-left:3px;width:698px;}


.box {
    width: 760px;
    margin: auto;
    margin-top:86px;
    margin-bottom: 50px;
    background:#fff;
    padding:25px 40px 25px 25px;}


*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }


.caption {
        -webkit-backface-visibility: hidden;
        display: inline-block;
        position: relative;
        margin: 0px;
        overflow: hidden;
        background: #f7f7f7;
        border:25px solid #f7f7f7;
        z-index: 6;}


.caption img {
        display: block;
        width: 180px;
        height:180px;
        border-radius:50%;
        -webkit-transition: opacity 0.7s ease-in-out;
        -moz-transition: opacity 0.7s ease-in-out;
        transition: opacity 0.7s ease-in-out;}


.caption:hover img {opacity: 0.5;}


.caption::after,
.caption::before {
        position: absolute;
        left:0px;
        opacity: 1;
        width: 100%;
        height: 50%;
        z-index:1;
        -webkit-transition: -webkit-transform 0.7s ease-in-out;
        -moz-transition: -moz-transform 0.7s ease-in-out;
        transition: transform 0.7s ease-in-out; }


.caption::after {
        content: attr(data-title);
        top: 0;
        line-height:90%;
        text-transform:uppercase;
        font-family:'Lato';
        background: #fff;
        color: #aaa;
        border-bottom:1px solid #eee;
        font-size: 25px;
        font-weight: 400;
        padding-top: 40px;
        text-align:center;
        -webkit-transform: translateY(-100%);
        -moz-transform: translateY(-100%);
        transform: translateY(-100%);}


.caption::before {
        content: attr(data-description);
        top: 50%;
        line-height:90%;
        text-transform:uppercase;
        background: #fff;
        color: #bbb;
        font-family:calibri;
        letter-spacing:1px;
        font-size: 9px;
        padding: 20px;
        -webkit-transform: translateY(100%);
        -moz-transform: translateY(100%);
        transform: translateY(100%);}


.caption:hover::after,
.caption:hover::before {
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        transform: translateY(0%);}


.links{
        position:fixed;
        letter-spacing:1px;
        right:10px;
        bottom:10px;}


.links a{
        background:#c0d4d2;
        text-transform:uppercase;
        color:#fff;
        display:block;
        width:60px;
        font: 8px calibri;
        margin-bottom:5px;
        padding:2px;
        text-align:center;}


</style>
</head>
<body>


<div class="links">
<a href="/">home</a>
<a href="/ask">message</a>
<a href="http://chcodes.tumblr.com/" title="coded by chloe">soonco</a>
</div>


<!-------------    TITLE     ------------>

<div id="title">
    TITLE
</div>


<div class="box">


<table>


<td style="vertical-align:top;">


<!-------------    HEADER TITLE     ------------>


<div id="titles">
    TITLE
</div>


<!-------------    ONE     ------------>


<a class="caption" href="LINK/TAG" data-title="NAME" data-description="DESCRIPTION">

<img src="PICTURE'S URL"/>

</a>


<!-------------    TWO     ------------>


<a class="caption" href="LINK/TAG" data-title="NAME" data-description="DESCRIPTION">

<img src="PICTURE'S URL"/>

</a>


<!-------------    THREE     ------------>


<a class="caption" href="LINK/TAG" data-title="NAME" data-description="DESCRIPTION">

<img src="PICTURE'S URL"/>

</a>


<!-------------    HEADER TITLE     ------------>


<div id="titles">
    TITLE
</div>


<!-------------    FOUR     ------------>


<a class="caption" href="LINK/TAG" data-title="NAME" data-description="DESCRIPTION">

<img src="PICTURE'S URL"/>

</a>


<!-------------    FIVE     ------------>


<a class="caption" href="LINK/TAG" data-title="NAME" data-description="DESCRIPTION">

<img src="PICTURE'S URL"/>

</a>


<!-------------    SIX     ------------>


<a class="caption" href="LINK/TAG" data-title="NAME" data-description="DESCRIPTION">

<img src="PICTURE'S URL"/>

</a>


</td>


</table>


</div>


</body>
</html>