Network #3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}

<!-- Network theme #3 by Sofi (castiiel.tumblr.com). DO NOT ERASE THE CREDIT, CLAIM THE CODE AS YOURS OR TAKE PARTS FROM IT -->

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Lato:300,400:latin'] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

<style type="text/css">

body {
    background: #222222;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

body, a, a:hover {cursor: url(http://www.totallylayouts.com/cursors/random/tiny_cursor.png), auto;}

::selection {color:#fff;background:#222222;}
::-moz-selection {color:#fff;background:#222222;}

::-webkit-scrollbar-thumb{
    background-color: #fff;
    height:auto;}

::-webkit-scrollbar {
    height:auto;width:3px;
    background-color:#222222;}

a {
    text-decoration:none;
    color: #fff;
}

#header {
    width:616px;
    margin: auto;
    margin-top: 50px;
}

#title {
    font-family: consolas, sans-serif;
    font-size: 30px;
    letter-spacing: 5px;
    margin-bottom: 20px;
    text-transform: uppercase;
    text-align: center;
    color: #fff;
}

#pics {
    border-bottom: 3px solid #fff;
    text-align:center;
    margin-bottom: 55px;
}

#pics img {
    width:50px;
    height:50px;
    border: 3px solid #fff;
    background: #222222;
    padding: 6px;
    margin:0px 20px -40px;
    position:relative;
    block:inline
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}

#links {
    font-family: consolas, sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 7px;
}

#links a {
    color: #fff;
    margin: 10px;
}

#con {
    width: 656px;
    margin: auto;
    margin-top: 50px;
}

#pannel {
    margin: 18px;
    display:inline-block;
    border: solid #fff 5px;
    background: rgba(255, 255, 255,.1);
    padding: 10px;
    width: 150px;
    height: 220px;
    overflow: hidden;
}

#pannel:hover .inside {
    margin-left: -170px;
    -moz-transition-duration:1s;
    -webkit-transition-duration:1s;
    -o-transition-duration:1s;
}

.inside {
    width: 310px;
    height: 220px;
    margin-top: 0px;
    margin-left: 0px;
    display:inline-block;
    -moz-transition-duration:1s;
    -webkit-transition-duration:1s;
    -o-transition-duration:1s;
}

.about1 {
    width: 150px;
    height: 220px;
    position: relative;
    top: 0px;
    color: #fff;
    font-family: 'Lato', sans-serif;
}

.about2 {
    width: 150px;
    padding:10px;
    height: 220px;
    position: relative;
    margin-left: 160px;
    top: -230px;
    overflow-y: auto;
    overflow-x: hidden;
}

.pic img {
    width: 110px;
    height: 110px;
    border: 3px solid #fff;
    padding: 6px;
    -webkit-border-radius: 110px;
    -moz-border-radius: 110px;
    border-radius: 110px;
    margin-top: 10px;
    margin-left: 11px;
    position: relative;
}

.url {
    width:135px;
    margin-top: 18px;
    text-align: center;
    color: #fff;
    border: solid 3px #fff;
    font-family: consolas, sans-serif;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bolder;
    padding: 5px;
    word-wrap:break-word;
    position: absolute;
    bottom: 0px;
}

.gotoblog {
    text-align: center;
    color: #fff;
    border: solid 3px #fff;
    font-family: consolas, sans-serif;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: bolder;
    padding: 5px;
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -ms-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;
 transition-duration: 0.5s;
}

.gotoblog a {
    color: #fff;
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -ms-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;
 transition-duration: 0.5s;
}

.gotoblog:hover {
    background-color: #fff;
    color:#222222;
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -ms-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;
 transition-duration: 0.5s;
}

.gotoblog a:hover{
    color:#222222;
 -webkit-transition-duration: 0.5s;
 -moz-transition-duration: 0.5s;
 -ms-transition-duration: 0.5s;
 -o-transition-duration: 0.5s;
 transition-duration: 0.5s;
}

.name {
    padding-top: 13px;
    text-align: center;
    width: 150px;
    color: #fff;
    font-family: 'Lato', sans-serif;
    letter-spacing: 2px;
}

#description {
    padding-top: 11px;
    text-align: center;
    width: 150px;
    color: #fff;
    font-family: 'Lato', sans-serif;
    letter-spacing: 1px;
    font-size: 10px;
    overflow: auto;
    line-height: 160%;
    overflow-y: auto;
    overflow-x: hidden;
    word-wrap:break-word;
}

</style></head>

<body>

<div id="header">

<div id="title">Name of the network</div>

<div id="pics">
<img src="http://static.tumblr.com/bfthosw/kXLn9c4gq/tumblr_mvinzgsdjm1qfaioqo1_500.jpg">
<img src="http://static.tumblr.com/bfthosw/kXLn9c4gq/tumblr_mvinzgsdjm1qfaioqo1_500.jpg">
<img src="http://static.tumblr.com/bfthosw/kXLn9c4gq/tumblr_mvinzgsdjm1qfaioqo1_500.jpg">
</div>

<div id="links">
<a href="/">dash</a>
<a href="/">chat</a>
<a href="/">admin</a>
<a href="/">#tag</a>
</div>

</div>

<div id="con">

<div id="pannel">
<div class="inside">
<div class="about1">
<div class="pic"><img src="http://static.tumblr.com/bfthosw/kXLn9c4gq/tumblr_mvinzgsdjm1qfaioqo1_500.jpg"></div>
<div class="url">your url</div>
</div>
<div class="about2">
<div class="gotoblog"><a href="/">go to my blog</a></div>
<div class="name">Your name</div>
<div id="description">
In the description you can write whatever you want, and use <b>bold</b>, <u>underline</u>, <i>italics</i> and <s>strike</s>.<br> You can also add links, pixels, icons and dividers, and make it as long as you want because it scrolls.
</div>
</div>
</div>
</div>



<div id="pannel">
<div class="inside">
<div class="about1">
<div class="pic"><img src="http://static.tumblr.com/bfthosw/kXLn9c4gq/tumblr_mvinzgsdjm1qfaioqo1_500.jpg"></div>
<div class="url">your url</div>
</div>
<div class="about2">
<div class="gotoblog"><a href="/">go to my blog</a></div>
<div class="name">Your name</div>
<div id="description">
In the description you can write whatever you want, and use <b>bold</b>, <u>underline</u>, <i>italics</i> and <s>strike</s>.<br> You can also add links, pixels, icons and dividers, and make it as long as you want because it scrolls.
</div>
</div>
</div>
</div>



<div id="pannel">
<div class="inside">
<div class="about1">
<div class="pic"><img src="http://static.tumblr.com/bfthosw/kXLn9c4gq/tumblr_mvinzgsdjm1qfaioqo1_500.jpg"></div>
<div class="url">your url</div>
</div>
<div class="about2">
<div class="gotoblog"><a href="/">go to my blog</a></div>
<div class="name">Your name</div>
<div id="description">
In the description you can write whatever you want, and use <b>bold</b>, <u>underline</u>, <i>italics</i> and <s>strike</s>.<br> You can also add links, pixels, icons and dividers, and make it as long as you want because it scrolls.
</div>
</div>
</div>
</div>



<div id="pannel">
<div class="inside">
<div class="about1">
<div class="pic"><img src="http://static.tumblr.com/bfthosw/kXLn9c4gq/tumblr_mvinzgsdjm1qfaioqo1_500.jpg"></div>
<div class="url">your url</div>
</div>
<div class="about2">
<div class="gotoblog"><a href="/">go to my blog</a></div>
<div class="name">Your name</div>
<div id="description">
In the description you can write whatever you want, and use <b>bold</b>, <u>underline</u>, <i>italics</i> and <s>strike</s>.<br> You can also add links, pixels, icons and dividers, and make it as long as you want because it scrolls.
</div>
</div>
</div>
</div>



<div id="pannel">
<div class="inside">
<div class="about1">
<div class="pic"><img src="http://static.tumblr.com/bfthosw/kXLn9c4gq/tumblr_mvinzgsdjm1qfaioqo1_500.jpg"></div>
<div class="url">your url</div>
</div>
<div class="about2">
<div class="gotoblog"><a href="/">go to my blog</a></div>
<div class="name">Your name</div>
<div id="description">
In the description you can write whatever you want, and use <b>bold</b>, <u>underline</u>, <i>italics</i> and <s>strike</s>.<br> You can also add links, pixels, icons and dividers, and make it as long as you want because it scrolls.
</div>
</div>
</div>
</div>



<div id="pannel">
<div class="inside">
<div class="about1">
<div class="pic"><img src="http://static.tumblr.com/bfthosw/kXLn9c4gq/tumblr_mvinzgsdjm1qfaioqo1_500.jpg"></div>
<div class="url">your url</div>
</div>
<div class="about2">
<div class="gotoblog"><a href="/">go to my blog</a></div>
<div class="name">Your name</div>
<div id="description">
In the description you can write whatever you want, and use <b>bold</b>, <u>underline</u>, <i>italics</i> and <s>strike</s>.<br> You can also add links, pixels, icons and dividers, and make it as long as you want because it scrolls.
</div>
</div>
</div>
</div>



<div id="pannel">
<div class="inside">
<div class="about1">
<div class="pic"><img src="http://static.tumblr.com/bfthosw/kXLn9c4gq/tumblr_mvinzgsdjm1qfaioqo1_500.jpg"></div>
<div class="url">your url</div>
</div>
<div class="about2">
<div class="gotoblog"><a href="/">go to my blog</a></div>
<div class="name">Your name</div>
<div id="description">
In the description you can write whatever you want, and use <b>bold</b>, <u>underline</u>, <i>italics</i> and <s>strike</s>.<br> You can also add links, pixels, icons and dividers, and make it as long as you want because it scrolls.
</div>
</div>
</div>
</div>



<div id="pannel">
<div class="inside">
<div class="about1">
<div class="pic"><img src="http://static.tumblr.com/bfthosw/kXLn9c4gq/tumblr_mvinzgsdjm1qfaioqo1_500.jpg"></div>
<div class="url">your url</div>
</div>
<div class="about2">
<div class="gotoblog"><a href="/">go to my blog</a></div>
<div class="name">Your name</div>
<div id="description">
In the description you can write whatever you want, and use <b>bold</b>, <u>underline</u>, <i>italics</i> and <s>strike</s>.<br> You can also add links, pixels, icons and dividers, and make it as long as you want because it scrolls.
</div>
</div>
</div>
</div>



<div id="pannel">
<div class="inside">
<div class="about1">
<div class="pic"><img src="http://static.tumblr.com/bfthosw/kXLn9c4gq/tumblr_mvinzgsdjm1qfaioqo1_500.jpg"></div>
<div class="url">your url</div>
</div>
<div class="about2">
<div class="gotoblog"><a href="/">go to my blog</a></div>
<div class="name">Your name</div>
<div id="description">
In the description you can write whatever you want, and use <b>bold</b>, <u>underline</u>, <i>italics</i> and <s>strike</s>.<br> You can also add links, pixels, icons and dividers, and make it as long as you want because it scrolls.
</div>
</div>
</div>
</div>

</div>

<!-- YOU ERASE THIS AND YOUR PET WILL DIE -->
<div style="position: fixed; bottom: 10px; right: 10px; font-size: 14px; color: #fff;"><a href="http://castiiel.tumblr.com">©</a></div>

</body></html>