blogroll page #1

<!DOCTYPE html>
<html>
<!------------------------------------------

(◍•ᴗ•◍)♡ ✧*。

Blogroll Page #1 by ThemeKid Chloë | @redivide | @themekid

> Do not delete/alter any credit.
> Do not claim as your own.
> Do not copy any code.
> Do not redistribute.

------------------------------------------->
<meta charset="UTF-8" />
<title>Blogroll</title>
<link rel="shortcut icon" href="{Favicon}">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </script>
<script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
<script>
(function($){ $(document).ready(function(){ $("[title],a[title],img[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:100, tip_fade_speed:300, attribute:"title" }); }); })(jQuery);
</script>
<script language="JavaScript">var fhs = document.createElement('script');var fhs_id = "5335817";var ref = (''+document.referrer+'');var pn =  window.location;var w_h = window.screen.width + " x " + window.screen.height;fhs.src = "//s1.freehostedscripts.net/ocounter.php?site="+fhs_id+"&e1=&e2=&r="+ref+"&wh="+w_h+"&a=1&pn="+pn+"";document.head.appendChild(fhs);document.write("<span style='display:none' id='o_"+fhs_id+"'></span>");</script>
<link rel="stylesheet" href="http://static.tumblr.com/8pnyeus/29To2og0o/styles.css">
<script src="https://dl.dropboxusercontent.com/s/7ke33tjjl8rty02/scripts.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic|Roboto+Condensed|Nixie+One' rel='stylesheet' type='text/css'>
<style type="text/css">
#tumblr_controls, .tmblr-iframe {top:10px!important;right:10px!important;-webkit-filter: invert(90%);filter: invert(90%);position:fixed!important;-webkit-transform:scale(.8, .8);-moz-transform:scale(.8, .8);transform:scale(.8, .8);-webkit-transform-origin: right top;-moz-transform-origin: right top;-ms-transform-origin: right top;-o-transform-origin: right top;transform-origin: right top;z-index:999999999999999999!important}
::-webkit-scrollbar {background-color:#ddd;height: 11px;width: 11px;border:5px solid #fff;}
::-webkit-scrollbar-thumb {background-color:#000;border:5px solid #fff;}
* {margin:0;padding:0;}
#s-m-t-tooltip {max-width:300px;padding:3px 6px;margin:20px 10px;background: #000;color:#fff;z-index:999999999999999!important;font-size:9px;text-transform:uppercase;font-family:'Roboto Condensed',sans-serif;}
img {max-width:100%;height:auto;vertical-align:middle;}
a {color:#000;}
body:before {width:100%;height:5px;position:fixed;top:0;left:0;content:'';z-index:999999;}
body:after {width:100%;height:5px;position:fixed;bottom:0;left:0;content:'';z-index:999999;}
html:before {height:100%;width:5px;position:fixed;top:0;left:0;content:'';z-index:999999;}
html:after {height:100%;width:5px;position:fixed;top:0;right:0;content:'';z-index:999999;}
a {text-decoration:none;}
#title {font-weight:normal;text-align:center;margin:60px 0 20px;font-size:1.8em;}
#content {text-align:center;width:calc(100% - 460px);max-width:1140px;margin:40px auto;}
article {width:96px;height:96px;margin:20px;display:inline-block;position:relative;overflow:hidden;}
article .spin {overflow:hidden;position:relative;-webkit-transform:rotate(15deg);-moz-transform:rotate(15deg);-ms-transform:rotate(15deg);-o-transform:rotate(15deg);transform:rotate(15deg);}
.info {text-transform:uppercase;background:#ceb3af;padding:5px;position:absolute;top:calc(50% + 10px);width:calc(100% - 10px);left:-100%;height:16px;line-height:16px;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;-webkit-transform:rotate(-15deg);-moz-transform:rotate(-15deg);-ms-transform:rotate(-15deg);-o-transform:rotate(-15deg);transform:rotate(-15deg);white-space: nowrap;overflow: hidden;text-overflow: ellipsis;color: #fff;}
article:hover .info {top: calc(50% - 13px);left:0;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.info a {color:#fff;}
hr {border:none;height:3px;width:150px;margin:30px auto;background:#ceb3af;}


/******AVOID EDITING ABOVE HERE UNLESS YOU'RE EXPERIENCED******/

/* change the font of the page! */
body {
    font-size:11px;
    font-family:'Lora', serif;
}

/* change the accent! */
body:before, body:after, html:before, html:after, hr, .info {
    background:#afcec2;
}

/* change the page title font */
#title {
    font-family:'Nixie One', serif;
}

/* change the blog name font! */
.info {
    font-family:'Roboto Condensed', sans-serif;
}


</style>
</head>
<body>
<a style="position:fixed; top:13px; left:13px;" title="home" href="/"><i class="fa fa-arrow-left fa-2x"></i></a>


<div id="title">

    <!--change the title here!-->
    <h2>I'm Following...</h2>

    <hr>

</div>

{block:Following}<div id="content">
    {block:Followed}<article>
        <div class="spin">
            <img src="{FollowedPortraitURL-96}">
            <div class="info">
                <a href="{FollowedURL}" target="_blank">{FollowedName}</a>
            </div>
        </div>
    </article>{/block:Followed}
</div>{/block:Following}

</body>
</html>