page: white noise

<!DOCTYPE html>
<head>

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

BLOGROLL BASE CODE by salazhar

CHARACTERS PAGE THEME by lenaofrp

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

<title>white noise</title>
<link rel="shortcut icon" href="{Favicon}">

<!-- TOOLTIP SCRIPTS -->
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
<script>
   (function($){
       $(document).ready(function(){
           $("[title]").style_my_tooltips({
               tip_follows_cursor:true,
               tip_delay_time:200,
               tip_fade_speed:300
           }
               );
       });
   })(jQuery);
</script>

<style type="text/css">

::-webkit-scrollbar-thumb:vertical {background-color:#e4c7bf;height:100px;}

::-webkit-scrollbar-thumb:horizontal {background-color:#e4c7bf;height:10px !important;}

::-webkit-scrollbar { height:2px;width:2px; background-color:#947797;}

/** BODY **/
body{
background:#e4c7bf;
background-attachment:fixed;
font-family:arial;
font-size:9px;
}

/** LINKS **/
a{
text-decoration:none;
-webkit-transition-duration:.6s;
-moz-transition-duration:.6s;
-o-transition-duration:.6s;
-ms-transition-duration:.6s;
}

a:hover{
-webkit-transition-duration:.6s;
-moz-transition-duration:.6s;
-o-transition-duration:.6s;
-ms-transition-duration:.6s;
}


/** CONTAINER **/
#content {
background-color:#cbabb1;
margin:0 auto;
width:900px;
height:600px;
overflow:auto;
}


#stuff {
width:210px;
padding:20px;
margin-left:30px;
display:inline-block;
float:center;
}

#box {
height:200px;
}

.icon {
margin-left:140px;
margin-top:-56px;
width:64px;
height:64px;
border-radius:100px;
overflow:hidden;
}

.name {
margin-top:-10px;
background-color:#947797;
border-bottom:2px solid #000;
padding:5px;
width:210px;
height:11px;
font-size:12px;
font-style:italic;
font-weight:bold;
}

.info {
background-color:#e4c7bf;
padding:3px;
letter-spacing:1px;
width:214px;
text-align:center;
text-transform:uppercase;
font-weight:bold;
font-size:7px;
}

.desc {
background-color:#7ab9d3;
padding:10px;
width:200px;
height:30px;
overflow:auto;
}

/** TITLE **/
#title{
text-align: right;
font-size:15px;
background-color:;
color:#947797; /** title color **/
font-weight:bold;
width:900px;
font-style:italic;
margin:0 auto;
margin-top:30px;
margin-bottom:0px;
border-bottom:2px solid #947797;
}

#title a {
    color:#947797;
    text-align: right;
}

/** CREDIT **/
.credit a{
font-size:7px;
bottom:7px;
right:10px;
position:fixed;
letter-spacing:1px;
font-weight:bold;
text-transform:uppercase;
color:#000;
text-decoration:none;
}

.credit a:hover{
color:#eee;
}


</style>
</head>
<body>

<div id="title">
    <a href="/">main blog.</a>
    <a href="/">navigation.</a>
    <a href="/">application.</a>
</div>


<div id="content">


<!-- for a new box copy from here -->

<div id="stuff">
<div id="box">
    <!-- header img --> <img src="http://i.imgur.com/AwEvzpx.png">
    <div class="icon">
        <!-- icon --> <img src="http://i.imgur.com/xsaFh5N.png">
    </div>
    <div class="name">ariana grande-butera</div>
    <div class="info">21. world famous popstar.</div>
    <div class="desc">Ariana Grande-Butera, known professionally as Ariana Grande, is an American singer and actress.</div>
</div>
</div>

<!-- to here -->


<div id="stuff">
<div id="box">
    <img src="http://i.imgur.com/hNAHQ9E.png">
    <div class="icon">
        <img src="http://i.imgur.com/HxAl2hf.png">
    </div>
    <div class="name">ariana grande-butera</div>
    <div class="info">21. world famous popstar.</div>
    <div class="desc">This should be three lines at the most for it to look its best, but if you put any more, a scrollbar will show up! Awesome.</div>
</div>
</div>


<div id="stuff">
<div id="box">
    <img src="http://i.imgur.com/EBIW0Z8.png">
    <div class="icon">
        <img src="http://i.imgur.com/axu3biE.png">
    </div>
    <div class="name">ariana grande-butera</div>
    <div class="info">21. world famous popstar.</div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>


<div id="stuff">
<div id="box">
    <img src="http://i.imgur.com/FxkcYct.png">
    <div class="icon">
        <img src="http://i.imgur.com/X7sbJFF.png">
    </div>
    <div class="name">harry edward styles</div>
    <div class="info">20. popstar slash hipster.</div>
    <div class="desc">Harry Edward Styles is an English pop singer-songwriter, known as a member of the boy band One Direction.</div>
</div>
</div>


<div id="stuff">
<div id="box">
    <img src="http://i.imgur.com/dfXdxBi.png">
    <div class="icon">
        <img src="http://i.imgur.com/CplitW4.png">
    </div>
    <div class="name">first middle last</div>
    <div class="info">74. super old idk.</div>
    <div class="desc">more info such as a label or something here.<br>
        + positive, positive, positive, positive<br>
        - negative, negative, negative, negative
    </div>
</div>
</div>


<div id="stuff">
<div id="box">
    <img src="http://i.imgur.com/3FPl01g.png">
    <div class="icon">
        <img src="http://i.imgur.com/Ej58JA1.png">
    </div>
    <div class="name">first middle last</div>
    <div class="info">21. world famous popstar.</div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>


<div id="stuff">
<div id="box">
    <img src="http://i.imgur.com/AwEvzpx.png">
    <div class="icon">
        <img src="http://i.imgur.com/xsaFh5N.png">
    </div>
    <div class="name">ariana grande-butera</div>
    <div class="info">21. world famous popstar.</div>
    <div class="desc">Ariana Grande-Butera, known professionally as Ariana Grande, is an American singer and actress.</div>
</div>
</div>


<div id="stuff">
<div id="box">
    <img src="http://i.imgur.com/hNAHQ9E.png">
    <div class="icon">
        <img src="http://i.imgur.com/HxAl2hf.png">
    </div>
    <div class="name">ariana grande-butera</div>
    <div class="info">21. world famous popstar.</div>
    <div class="desc">This should be three lines at the most for it to look its best, but if you put any more, a scrollbar will show up! Awesome.</div>
</div>
</div>


<div id="stuff">
<div id="box">
    <img src="http://i.imgur.com/EBIW0Z8.png">
    <div class="icon">
        <img src="http://i.imgur.com/axu3biE.png">
    </div>
    <div class="name">ariana grande-butera</div>
    <div class="info">21. world famous popstar.</div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>


<div id="stuff">
<div id="box">
    <img src="http://i.imgur.com/FxkcYct.png">
    <div class="icon">
        <img src="http://i.imgur.com/X7sbJFF.png">
    </div>
    <div class="name">harry edward styles</div>
    <div class="info">20. popstar slash hipster.</div>
    <div class="desc">Harry Edward Styles is an English pop singer-songwriter, known as a member of the boy band One Direction.</div>
</div>
</div>


<div id="stuff">
<div id="box">
    <img src="http://i.imgur.com/dfXdxBi.png">
    <div class="icon">
        <img src="http://i.imgur.com/CplitW4.png">
    </div>
    <div class="name">first middle last</div>
    <div class="info">74. super old idk.</div>
    <div class="desc">more info such as a label or something here.<br>
        + positive, positive, positive, positive<br>
        - negative, negative, negative, negative
    </div>
</div>
</div>


<div id="stuff">
<div id="box">
    <img src="http://i.imgur.com/3FPl01g.png">
    <div class="icon">
        <img src="http://i.imgur.com/Ej58JA1.png">
    </div>
    <div class="name">first middle last</div>
    <div class="info">21. world famous popstar.</div>
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>
</div>

<br><br><br><br>

</div>

<div class="credit"><a href="http://lenaofrp.tumblr.com">lenaofrp</a></div>

</body>
</html>