SCFTLCVES PAGES | 03: PETRICHOR.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Abhaya Libre|ABeeZee" rel="stylesheet">

<head>

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>

<script>

(function($){

$(document).ready(function(){

$("a[title]").style_my_tooltips({

tip_follows_cursor:true,

tip_delay_time:90,

tip_fade_speed:600,

attribute:"title"

});

});

})(jQuery);

</script>

<style type="text/css">

#s-m-t-tooltip {
background-color:#e0bf1a;
font-size:10px;
font-weight:bold;
border-radius:5px 5px 5px 5px;
color:#f3f3f3;
letter-spacing:1px;
text-transform:lowercase;
padding:10px;
margin:20px 0px 0px 20px;
z-index:9999999999999999999999;

}

::-webkit-scrollbar-thumb {
   background-color:#e7e7e7;
}

::-webkit-scrollbar-track {
   background-color:#e0bf1a;
}

::-webkit-scrollbar {
   height:2px;
   width:2px;
}

ul {
    list-style-type: circle;
    padding-left:24px;
    line-height:13px;
}

li {
   padding-left: 0px;
   margin-bottom: 0px;
   list-style: none;
}

li:before {
  color: #e0bf1a;
  content: "\e3fc";
  font-family: 'honeybee';
  font-size:6px;
  display: inline-block;
  margin-left: -2.5em;
  width: 2.5em;
}

body {
    font-family: ABeeZee;
    font-size: 9px;
    line-height:15px;
    color:#707070;
}

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


b, strong {
    color:#e0bf1a;
    font-weight:300;
}

i,em {
    color:#6fb6e3;
}

h1,h2 {
    line-height:32px;
    font-size:12px;
    color:#e0bf1a;
    text-align:left;
    font-weight:300;
    text-transform:lowercase;
}

#contain {
    margin:50px auto;
    padding:20px;
    width:715px;
}

#full {
    margin-right:15px;
    margin-bottom:15px;
    display:inline-block;
    width:325px;
    height:345px;
    padding:5px;
    border-radius:3px;
    background-color:#f3f3f3;
    border:1px solid #e7e7e7;
}

.image {
    margin-top:0px;
    margin-left:1px;
    text-align:center;
    padding:10px;
    width:300px;
    height:150px;
    border-radius:3px;
    display:inline-block;
}

.image img {
    border-radius:3px;
    text-align:center;
    width:300px;
    height:150px;
    border:1px solid #e7e7e7;
}

.thm {
    padding:10px;
    font-size:9px;
    font-weight:300;
    margin-top:5px;
}

.initial {
    background-color:#e0bf1a;
    font-size:22px;
    font-weight:300;
    text-transform:uppercase;
    color:#f8f8f8;
    letter-spacing:1px;
    display:inline-block;
    float:left;
    text-align:center;
    padding:10px;
    height:30px;
    width:30px;
    line-height:30px;
    margin-right:10px;
    font-family:Abhaya Libre;
    border-radius:3px;
}

.deets {
    padding:10px;
    display:Block;
    height:70px;
    overflow:auto;
    text-align:justify;
}

.add:before{
    content:'\e3fc';
    font-family:'honeybee';
    color:#e0bf1a;
    font-size:6px;
    margin-right:5px;
}

.add {
    margin-left:5px;
    width:115px;
    font-size:9px;
    border-bottom:1px solid #e7e7e7;
    line-height:15px;
    display:inline-block;
}

#top {
    margin-bottom:15px;
    display:inline-block;
    width:680px;
    padding:5px;
    border-radius:3px;
    background-color:#f3f3f3;
    border:1px solid #e7e7e7;
}

.title {
    font-family:Abhaya Libre;
    color:#e0bf1a;
    font-size:20px;
    line-height:35px;
    margin-left:15px;
    float:left;
    text-transform:uppercase;
}

.nav {
    display:inline-block;
    float:right;
}

.nav a {
    background-color:#e0bf1a;
    font-size:12px;
    font-weight:300;
    text-transform:uppercase;
    color:#f8f8f8;
    letter-spacing:1px;
    display:inline-block;
    text-align:center;
    padding:10px;
    margin-left:2px;
    font-family:Abhaya Libre;
    border-radius:3px;
}

#credit {
    font-size:12px;
    position:fixed;
    bottom:25px;
    right:25px;
    padding:8px;
    border-radius:3px;
    color:#e0bf1a;
    background-color:#f3f3f3;
    border:1px solid #e7e7e7;
}

#credit a {
    color:#e0bf1a;
}

</style>

</head>

<body>

<div id="contain">

<!----

top title & navigation

--->

<div id="top">
<div class="title">character directory</div>
<div class="nav">
<a href="/">index</a>
<a href="/ask">message</a>
<a href="/submit">submit</a>
<a href="/yoururl">extra</a>
</div>
</div>

<!----

start of box #1

--->

<div id="full">
<div class="image"><img src="https://via.placeholder.com/300x150"></div>
<div class="thm">
<div class="initial">xy</div>
<div class="add">character info.</div>
<div class="add">character info.</div><br>
<div class="add">character info.</div>
<div class="add">character info.</div><br>
<div class="add">character info.</div>
<div class="add">character info.</div>
</div>
<div class="deets">lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis.</div>
</div>

<!----

start of box #2

--->

<div id="full">
<div class="image"><img src="https://via.placeholder.com/300x150"></div>
<div class="thm">
<div class="initial">xy</div>
<div class="add">character info.</div>
<div class="add">character info.</div><br>
<div class="add">character info.</div>
<div class="add">character info.</div><br>
<div class="add">character info.</div>
<div class="add">character info.</div>
</div>
<div class="deets">lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis.</div>
</div>

<!----

start of box #3

--->

<div id="full">
<div class="image"><img src="https://via.placeholder.com/300x150"></div>
<div class="thm">
<div class="initial">xy</div>
<div class="add">character info.</div>
<div class="add">character info.</div><br>
<div class="add">character info.</div>
<div class="add">character info.</div><br>
<div class="add">character info.</div>
<div class="add">character info.</div>
</div>
<div class="deets">lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis.</div>
</div>

<!----

start of box #4

--->

<div id="full">
<div class="image"><img src="https://via.placeholder.com/300x150"></div>
<div class="thm">
<div class="initial">xy</div>
<div class="add">character info.</div>
<div class="add">character info.</div><br>
<div class="add">character info.</div>
<div class="add">character info.</div><br>
<div class="add">character info.</div>
<div class="add">character info.</div>
</div>
<div class="deets">lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis.</div>
</div>

<!----

start of box #5

--->

<div id="full">
<div class="image"><img src="https://via.placeholder.com/300x150"></div>
<div class="thm">
<div class="initial">xy</div>
<div class="add">character info.</div>
<div class="add">character info.</div><br>
<div class="add">character info.</div>
<div class="add">character info.</div><br>
<div class="add">character info.</div>
<div class="add">character info.</div>
</div>
<div class="deets">lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis.</div>
</div>

<!----

start of box #6

--->

<div id="full">
<div class="image"><img src="https://via.placeholder.com/300x150"></div>
<div class="thm">
<div class="initial">xy</div>
<div class="add">character info.</div>
<div class="add">character info.</div><br>
<div class="add">character info.</div>
<div class="add">character info.</div><br>
<div class="add">character info.</div>
<div class="add">character info.</div>
</div>
<div class="deets">lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna. maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. aenean id massa ut lacus molestie porta. curabitur sit amet quam id libero suscipit venenatis.</div>
</div>

<div id="credit"><a href="https://scftlcves.tumblr.com/"><span class="th th-stars-o"></span></a></div>

</body></html>