page 05 // cronos

<!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

  - icon font: https://suiomi.com/font#_=_

  - @magnusthemes tutorial helped me with the filters https://magnusthemes.tumblr.com/post/171696773190/isotope-combination-filtering

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

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

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

<link href="//solrainha.github.io/saturnicons/saturnicons.css" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Karla|Montserrat|Playfair+Display|Quicksand|Raleway" rel="stylesheet"><link rel="stylesheet" type="text/css" href="//dl.dropbox.com/s/pc57y9b0yvkeno3/style.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script><script src="https://static.tumblr.com/p0knose/FpAp5c11c/magnusthemes.combofilters.js"></script><script src="//dl.dropbox.com/s/neh2yxytu2lxf9f/javastuff.js"></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: 'Karla';
  letter-spacing: 1px;
  font-size:11px;
  color:#000;
  box-shadow: none;
}

/***** scrollbar *****/

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

/***** selection *****/

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

/***** general *****/

body {
background: #fff;
cursor: default;
font-family: 'karla'; /* font family */
font-size: 12px; /* font size (except for titles) */
}

/***** navigation *****/

.nav img { /* image */
   border-radius: 5px;
}

.nav h1, .filters h1 { /* nav + filter title */
    font-size: 15px;
    text-transform: uppercase;
}

/***** filters *****/

.selected { /* selected filter color */
    color: rgb(252, 151, 151);
}

/***** tags section *****/

.tagbox { /* boxes */
   background: none;
}

h2 { /* title */
   font-size: 15px;
}

.tagbox a { /* tags */
    border-radius: 3px;
}

/* if you don't want the hashtag before the tag: delete from here*/
.tagbox a:before {
    content: "#";
    margin-right: 2px;
} /* to here */

/* color you use as a background for the tags, add as many as you like
   you have to put the name you give the color (example: red)(withouth the dot before) as the class of the tag */
.red {background: rgb(253,192,192);}
.yellow {background: rgb(255,247,167);}
.pink {background: rgb(250,194,225);}
.purple {background: rgb(232, 201, 255);}
.blue {background: rgb(194,244,250);}
.green {background: rgb(215,244,188);}

</style>
</head>

<body>

<!------- navigation ------->
<div class="nav">
    <img src="{PortraitURL-64}"></img> <!-- replace {PortraitURL-64} with a image url if you don't want your icon there -->
    <h1>navigation</h1><br>
    <p class="desc">here goes your description. make it as long as you want.</p>
    <div class="links">
        <a href="/">back</a>
        <a href="/ask">ask</a>
        <a href="/">link</a>
        <a href="/">link</a>
    </div>
</div>

<!------- filters
if you want that only one filter can be selected add 'exclusive' (without the '') behind 'option-set'
------->
<div class="filters">
    <p class="desc">here you can filter the tags. you can also add more filters.</p>
    <ul class="filter option-set" data-filter-group="group1">
     <li><a href="#" data-filter-value="" class="selected">everything</a></li>
     <li><a href="#" data-filter-value=".filter1">filter1</a></li>
     <li><a href="#" data-filter-value=".filter2">filter2</a></li>
     <!----- copy & paste as needed ---->
   </ul>
</div>

<!------- tags section:
you can add as many boxes as you like.
you have to put your filter name ( filter="THISISTHEFILTERNAME") after 'tagbox' (between the " ").
IMPORTANT: do not delte 'tagbox'
you can put as many filters as you like there.
the class defines the background color of the tag (put the name you choosed in the css)(example: class="red")
--------->
<div class="tags">

<!------- box one starts ------->
    <div class="tagbox filter goes here"><h2>title</h2>
       <a class="red" href="/">tag</a>
       <a class="blue" href="/">tag</a>
       <a class="green" href="/">tag</a>
       <a class="purple" href="/">tag</a>
       <a class="yellow" href="/">tag</a>
       <a class="pink" href="/">tag</a>
       <a class="green" href="/">tag</a>
       <a class="green" href="/">tag</a>
       <a class="yellow" href="/">tag</a>
       <a class="purple" href="/">tag</a>
       <a class="blue" href="/">tag</a>
       <a class="red" href="/">tag</a>
    </div>
<!------- box one ends ------->

<!------- box two starts ------->
    <div class="tagbox filter goes here"><h2>title</h2>
       <a class="red" href="/">tag</a>
       <a class="blue" href="/">tag</a>
    </div>
<!------- box two ends ------->


<!----- DO NOT EDIT AFTER THIS LINE ---->
</div>
<div class="vt"><a https://venusthms.tumblr.com/" title="venusthms"><img src="https://i.imgur.com/PxFLRpM.png"></img></a></div>


</body>
</html>