page 01 // hestia

<!DOCTYPE html>
<head>

 <!-- THEME BY @LEEJORDAN / @VENUSTHMS
                           do not remove the credit

-------------------------------------------------------------------------

  - terms of use: venusthms.tumblr.com/terms

  - message me if you got any problems or questions about the code

  - you'll find instructions about customization through out the code

  - the grid/filter effect was created with the tutorial by @cyantists

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

<title>title</title><link rel="shortcut icon" href="{Favicon}"> <!-- change (tab) title here -->

<!---- SCRIPT - DO NOT TOUCH ---->

<link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Karla|Montserrat|Playfair+Display|Quicksand|Raleway" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Lora|PT+Serif|Quattrocento" rel="stylesheet"><link rel="stylesheet" type="text/css" href="//dl.dropbox.com/s/crwotfg9i654fn5/icons.css?dl=0"><link rel="stylesheet" type="text/css" href="//dl.dropbox.com/s/llnh0qezfvh3axt/style.css?dl=0">


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

<script>
$(document).ready(function(){
    $(".shows").click(function(){
        $(".filters").toggle("slow");
    });
});
</script>


<script src="https://static.tumblr.com/xd6ujov/9Rpouml9f/imagesloaded.pkgd.min.js"></script>
<script src="https://static.tumblr.com/f6blkfc/3khouzw5b/masonry.pkgd.min.js"></script>

<script>$(document).ready(function(){
var $grid = $(".grid"); $grid.imagesLoaded(function() {
   $grid.masonry({
       itemSelector: ".item",
       columnWidth: 254
   });
});
$(".button").click(function(){
   $(this).addClass("selected");
   $(".button").not($(this)).removeClass("selected");
   var ssf = $(this).attr("filter");
   $(".item." + ssf).show();
   $(".item").not("." + ssf).hide();
   $grid.masonry();
});
});</script>
<link href="https://static.tumblr.com/4gatuv1/X8Poxwvz8/style-my-tooltips.css" rel="stylesheet" type="text/css" />
<script src="https://static.tumblr.com/4gatuv1/Aneoxwvz8/jquery.style-my-tooltips.js"></script>

<script>
!function(t){t(document).ready(function(){t("a[title]").style_my_tooltips({tip_follows_cursor:!0,tip_delay_time:200,tip_fade_speed:300})})}(jQuery);
</script>


<style type="text/css">

/* tooltips */

#s-m-t-tooltip {
  max-width: 250px;
  margin:24px 14px 7px 12px;
  padding:5px 8px;
  background: #fff;
  border-radius:2px;
  font-family: 'Raleway';
  letter-spacing: 1px;
  font-size:8px;
  color:#000;
  box-shadow: none;
}

/* scrollbar */

::-webkit-scrollbar {
   width:5px;
   height:17px;
   background-color: #F6F6F6;
}
::-webkit-scrollbar-track {
   background-color: #F6F6F6;
}
::-webkit-scrollbar-thumb {
   background-color: #fff;
   min-height:24px;
   min-width:24px;
}

/* selection */

::-moz-selection { background:#eee;color:#000; }
::selection { background:#eee;color:#000; }

/* general */

body {
    background: #F6F6F6; /* page background color*/
    cursor:default;
}

/* sidebar*/

.side {
    background-color: #fff; /* sidebar background */
}

.side img {
    border-radius: 5px;
}

/* sidebar: title */

.side h1 {
    font-family: 'Playfair Display';
    font-size: 16px;
}

/* sidebar: description + links */

.desc, .links, .filters {
    font-family: 'karla';
    font-size: 11px;
}

/* filters */

.button:hover {
    color:#C39B9B; /* filter hover color */
}

.button.selected {
    color:#C39B9B; /* color of selected filter */
}

/* members*/

.item {
    background-color: #fff; /* members backrgound */
    border-radius: 4px;
}

.item img { /* image */
    border-radius: 10px;
}

.item h2 { /* title one */
    font-family: 'Playfair Display';
    font-size: 14px;
}

.subtitle, .quote { /* subtitle */
    font-family: 'karla';
    font-size: 11px;
    text-align: left;
}

/* links */

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

a:hover, .shows:hover {
    color: #C39B9B; /* links hover colour */
}

</style>
</head>

<body>

<!--- sidebar -->

<div class="side">
    <img src="{PortraitURL-64}"></img> <!-- replace {PortraitURL-64} with a image url if you don't want your icon there -->
    <h1>page title;</h1>
    <p class="desc">here goes a description or a quote. it looks best if it's three lines long.</p>

    <div class="links">
    <a href="/">back</a>
    <a href="/ask">message</a>
    <a href="/">link</a>
    <p class="shows">filter</p></div>
    <div class="filters">
      <div class="button selected" filter="item">all</div>
      <div class="button" filter="filter1">filter1</div>
      <div class="button" filter="filter2">filter2</div>
      <div class="button" filter="filter3">filter3</div>
<!-- copy & paste as needed-->
</div>
</div>

<!---- members:

explanation: you have to put your filter name ( filter="THISISTHEFILTERNAME") after 'item' (between the " "). IMPORTANT: do not delete 'item' ! you can put as many filters as you like there.

layout:

  <div class="item your filter here ">
      <img src="/imageurl"></img><h2>titleone;</h2>
      <p class="subtitle">subtitle ; <a href="/">@tumblrurl</a>;</p>
      <p class="quote">description</p>
  </div>

--->

<div class="grid">

<!--- example --->
<div class="item filter1 filter4">
  <img src="https://i.imgur.com/P8jduhr.png"></img><h2>titleone;</h2>
  <p class="subtitle">subtitle ; <a href="/">@tumblrurl</a>;</p>
  <p class="quote">here you can add any kind of description or quote. don't make it too longe tho. <i>italic</i>; <b>big</b>; <strike>strike</strike></p>
</div>
<!--- example ends --->

<!--- DO NOT edit after this point---->
</div>
<div class="vt"><a href="https://venusthms.tumblr.com/" title="venusthms"><img src="https://i.imgur.com/PxFLRpM.png"></img></a></div>

</body>
</html>