Tides (Icons)

<!--

    ICONS PAGE: TIDES
    by acuite

- don't steal this pls
- enjoy, ilu (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧

- @acuite for more themes

-->

<!DOCTYPE html>
<html>
<head>

<title>Icons</title>
<link rel="shortcut icon" href="{Favicon}" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/dwoqjdv/74togqq4n/icons.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,900,900i" rel="stylesheet">
<link href="http://static.tumblr.com/dwoqjdv/NOzogqsfm/tides.css" rel="stylesheet" type="text/css">
<style type="text/css">

/* To change the amount of columns, edit the '6' of the containers */
#center {width:calc(70px * 6 + 11px);}
aside {margin-left:calc(70px * 6 + 11px);}

</style>
</head>

<body>
<div id="center">

<!-- Start Sidebar -->
<aside>
<h1>icons by {Name}</h1>

<nav>
    <!-- Filters
    > keep the first one
    > keep all the class="filters"
    > the rel="" is basically a tag, it must correlate with the box classes
    -->
    <a href="#" rel="box" class="filters">all icons</a>
    <a href="#" rel="tagname1" class="filters">tag name / category 1</a>
    <a href="#" rel="tagname2" class="filters">tag name 2</a>
    <a href="#" rel="tagname3" class="filters">tag name 3</a>
    <a href="#" rel="tagname4" class="filters">tag name 4</a>

<b class="line"></b>

<!-- Colour Filters -->
<span class="colours">
    <a href="#" rel="bw" class="filters fbw">greyscale</a>
    <a href="#" rel="blue" class="filters fblu">blue</a>
    <a href="#" rel="pink" class="filters fpin">pink</a>
    <a href="#" rel="purple" class="filters fpur">purple</a>
    <a href="#" rel="green" class="filters fgrn">green</a>
    <a href="#" rel="yellow" class="filters fyel">yellow</a>
    <a href="#" rel="neutral" class="filters fneu">neutral</a>
    <a href="#" rel="white" class="filters fwht">white</a>
    <a href="#" rel="orange" class="filters fora">orange</a>
    <a href="#" rel="red" class="filters fred">red</a>
    <a href="#" rel="black" class="filters fblk">black</a>
    <a href="#" rel="multi" class="filters fmul">multi</a>
</span>
</nav>
</aside>
<!-- End Sidebar -->


<div id="content">
<!-- Start Icons Hold
        > keep the box class!!
        > add your other "tags" as classes
        > you can have as many or as few as you like
-->
<div class="box tagname1"><img src="http://placehold.it/50x50"></div>
<div class="box tagname1"><img src="http://placehold.it/50x50"></div>
<div class="box tagname1 tagname2"><img src="http://placehold.it/50x50"></div>
<div class="box tagname2"><img src="http://placehold.it/50x50"></div>
<div class="box tagname3"><img src="http://placehold.it/50x50"></div>
<div class="box tagname3"><img src="http://placehold.it/50x50"></div>
<div class="box tagname3"><img src="http://placehold.it/50x50"></div>
<div class="box tagname3 tagname4"><img src="http://placehold.it/50x50"></div>
<div class="box tagname4"><img src="http://placehold.it/50x50"></div>

<!-- End Icons Hold. No editing below this line. -->


</div></div>
<a class="c" href="http://acuite.tumblr.com">acuite</a>
</body>
</html>