page 09 // chiron

<!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 filter effect was created with the tutorial by @magnusthemes

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


<!---- SCRIPT - DO NOT TOUCH ---->
<title>icons</title> <!--- change tab title here ---->
<link rel="shortcut icon" href="{Favicon}">

<link href="https://fonts.googleapis.com/css?family=Poiret+One|Quicksand|Raleway" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet"><link rel="stylesheet" type="text/css" href="//venusthms.github.io/pages/chiron/style.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>$(document).ready(function(){$(".hovern").click(function(){$(".hoverstext").toggle("slow");});});</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><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="//venusthms.github.io/pages/chiron/filter.js"></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; /* change color here */
   min-height:24px;
   min-width:24px;
}

/* selection */

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

/* general */

body {
    cursor: default;
    background: #fafafa; /* page background color*/
    font-family: 'karla';
}

.header h1 { /* title */
    font-family: 'quicksand';
    text-transform: uppercase;
}

/* header */

.header {
    background: #fff;
}

.header img { /* image */
   border-radius: 5px; /* delete this if you want sharp edges */
}

.header h1 { /* title */
    font-size: 18px;
    color: #000;
}

/* filters */

.filters {
    font-size: 12px;
    color: #000;
}

.filters ul li a:hover{
    color: #000; /* filter hover color */
}

.selected {
    text-decoration: none;
    box-shadow: 0 -6px 0 #eaf5ff inset; /* underline of selected filter */
}

/* navigation */

.menu {
    font-size: 12px;
}

.hoverstext { /* info hover box */
    font-size: 12px;
    background: #fff;
}

/* icons */

.item { /*icons size*/
    width: 100px;
    height: 100px;
}

.item img {/*icons size*/
    width: 100px;
    height: 100px;
}

.item img:hover {/* icons hover effect (delete this if you don't want it)*/
    border-radius: 50%;
}

/* links */

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

a:hover, .hovern:hover, .hovertext a { /* link hover color */
    color: #D5EBFF; /* links hover colour */
}


</style>

</head>
<body>

<div class="header">
  <img src="{PortraitURL-64}"><h1>icons</h1> <!--replace {PortraitURL-64} with an image url if you don't want your icon there -->

<!---- filters ------>
<!---- delete 'exclusive' if you want people to be able to select more than one filter from a group ------>
<div class="filters">
   <ul class="filter option-set exclusive" data-filter-group="colours">
     <li><a href="#" data-filter-value="" class="selected">all</a></li>
     <li><a href="#" data-filter-value=".filter1">filter one</a></li>
     <li><a href="#" data-filter-value=".filter2">filter two</a></li>
   </ul>

   <ul class="filter option-set exclusive" data-filter-group="others">
     <li><a href="#" data-filter-value="" class="selected">all</a></li>
     <li><a href="#" data-filter-value=".filter3">filter three</a></li>
     <li><a href="#" data-filter-value=".filter4">filter four</a></li>
   </ul>
   </div>

<!---- navigation ------>
<div class="menu">
    <a href="/">back</a>
    <a href="/ask">ask</a>
    <a href="/">link</a>
    <p title="click me" class="hovern">info</p>
    <div class="hoverstext">your info text goes here.</div>

</div></div>

<div class="grid">

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

EDITING ICONS:

- replace filter (after 'item') with the filter names you set above (<div class="button" filter="THISISYOURFILTERNAME">filter one</div>)
- do NOT delete 'item'

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

TEMPLATE - copy & paste as needed:

<div class="item filter"><img src="IMGURL"></img></div>

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

<div class="item filter"><img src="IMGURL"></img></div>
<div class="item filter"><img src="IMGURL"></img></div>


<!----- DO NOT EDIT AFTER THIS LINE ---->
</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>