Pixel Tags/Navigation Page - 6 Links

<!DOCTYPE html>
<html>
<head>

<title> {Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
{block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
<link rel="shortcut icon" href="{Favicon}" />

<link href='http://fonts.googleapis.com/css?family=VT323|Gudea|Inconsolata' rel='stylesheet' type='text/css'>

<style type="text/css">

*{-webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out;}

body {
    background-color:black; /*BACKGROUND COLOR (default is black)*/
    background-image:url(http://static.tumblr.com/puls2hm/FDdmslerr/96735-royalty-free-rf-clipart-illustration-of-a-seamless-background-of-blue-and-black-pixel-tiles.jpg); /*BACKGROUND IMAGE URL GOES INSIDE THE PARENTHESES*/
    font-family:Inconsolata; /*CHANGE TO Gudea OR VT323 OR ANY TUMBLR BASIC FONT*/
}

#everything {
    margin:auto;
    margin-top:100px;
    width:750px;
    padding:20px;
    background-color:white; /*CONTENT BACKGROUND COLOR (default is white)*/
    -webkit-box-shadow: 3px 4px 5px rgba(50, 50, 50, 0.5);
    -moz-box-shadow:    3px 4px 5px rgba(50, 50, 50, 0.5);
    box-shadow:         3px 4px 5px rgba(50, 50, 50, 0.5);
}

#titles {
    width:576px;
    overflow:hidden;
    margin:auto;
}

#titles div {
    margin:5px;
    padding:10px 25px;
    width:130px;
    height:20px;
    float:left;
    text-align:center;
    background-color:#0abfff; /*TITLE BACKGROUND COLOR (default is #0abfff)*/
    border:solid 1px black; /*BORDER STYLE*/
    color:black; /*TITLE TEXT COLOR (default is black)*/
    -webkit-box-shadow: 3px 4px 5px rgba(50, 50, 50, 0.25);
    -moz-box-shadow:    3px 4px 5px rgba(50, 50, 50, 0.25);
    box-shadow:         3px 4px 5px rgba(50, 50, 50, 0.25);
}

#titles div:hover {
    background-color:black; /*TITLE BACKGROUND COLOR ON HOVER (default is black)*/
    color:#0abfff; /*TITLE TEXT COLOR ON HOVER (default is #0abfff)*/
}

#nav {
    width:100% !important;
    height:20px !important;
    background-color:transparent !important;
    border:none !important;
    box-shadow:none !important; -webkit-box-shadow:none !important; -moz-box-shadow:none !important;
}

#nav:hover {
    color:#000000 !important; /*NAVIGATION STAR COLOR ON HOVER*/
}

#tags {
    text-align:center;
    width:725px;
    margin:auto;
}

#tags #titles a {
    opacity:1;
}

#titles .top {
    margin-top:30px;
}

span {
    text-transform:uppercase;
    font-size: 20pt;
    margin:auto;
}

a {
    opacity:0;
    text-decoration:none;
    margin:30px;
    color:black; /*LINK COLOR (default is black)*/
}

a:hover {
    text-decoration:underline;
}

{CustomCSS}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
    $('#1').click(function(){
        if ($('.1').css('opacity') == '0') {
            $('.1').css('opacity','1');
        } else {
            $('.1').css('opacity','0');
        };
        $('.2,.3,.4,.5,.6').css('opacity','0');
    });
    $('#2').click(function(){
        if ($('.2').css('opacity') == '0') {
            $('.2').css('opacity','1');
        } else {
            $('.2').css('opacity','0');
        };
        $('.1,.3,.4,.5,.6').css('opacity','0');
    });
    $('#3').click(function(){
        if ($('.3').css('opacity') == '0') {
            $('.3').css('opacity','1');
        } else {
            $('.3').css('opacity','0');
        };
        $('.2,.1,.4,.5,.6').css('opacity','0');
    });
    $('#4').click(function(){
        if ($('.4').css('opacity') == '0') {
            $('.4').css('opacity','1');
        } else {
            $('.4').css('opacity','0');
        };
        $('.2,.3,.1,.5,.6').css('opacity','0');
    });
    $('#5').click(function(){
        if ($('.5').css('opacity') == '0') {
            $('.5').css('opacity','1');
        } else {
            $('.5').css('opacity','0');
        };
        $('.2,.3,.4,.1,.6').css('opacity','0');
    });
    $('#6').click(function(){
        if ($('.6').css('opacity') == '0') {
            $('.6').css('opacity','1');
        } else {
            $('.6').css('opacity','0');
        };
        $('.2,.3,.4,.5,.1').css('opacity','0');
    });
});

</script>

</head>
<body>

<div id="everything">

<div id="tags">

<!--FEEL FREE TO ADD OR REMOVE TAGS, AS LONG AS THEY STILL HAVE THE SAME CLASS AS THE OTHERS IN THEIR SECTION-->

<a class="4" href="/tagged/tag">tag 1</a>
<a class="4" href="/tagged/tag">tag 2</a>
<a class="4" href="/tagged/tag">tag 3</a>
<a class="4" href="/tagged/tag">tag 4</a>
<a class="4" href="/tagged/tag">tag 5</a>
<a class="4" href="/tagged/tag">tag 6</a>
<br/>
<a class="5" href="/tagged/tag">tag 1</a>
<a class="5" href="/tagged/tag">tag 2</a>
<a class="5" href="/tagged/tag">tag 3</a>
<a class="5" href="/tagged/tag">tag 4</a>
<a class="5" href="/tagged/tag">tag 5</a>
<a class="5" href="/tagged/tag">tag 6</a>
<br/>
<a class="6" href="/tagged/tag">tag 1</a>
<a class="6" href="/tagged/tag">tag 2</a>
<a class="6" href="/tagged/tag">tag 3</a>
<a class="6" href="/tagged/tag">tag 4</a>
<a class="6" href="/tagged/tag">tag 5</a>
<a class="6" href="/tagged/tag">tag 6</a>

<div id="titles">
<div id="1" class="top">title one</div>
<div id="2" class="top">title two</div>
<div id="3" class="top">title three</div>

<div id="nav">
<a href="/ask"> ask </a> ✯ <a href="/"><span>navigation</span></a> ✯ <a href="/archive"> archive </a>
</div>

<div id="4" class="bottom">title four</div>
<div id="5" class="bottom">title five</div>
<div id="6" class="bottom">title six</div>
</div><!--titles-->
<br />

<a class="1" href="/tagged/tag">tag 1</a>
<a class="1" href="/tagged/tag">tag 2</a>
<a class="1" href="/tagged/tag">tag 3</a>
<a class="1" href="/tagged/tag">tag 4</a>
<a class="1" href="/tagged/tag">tag 5</a>
<a class="1" href="/tagged/tag">tag 6</a>
<br />
<a class="2" href="/tagged/tag">tag 1</a>
<a class="2" href="/tagged/tag">tag 2</a>
<a class="2" href="/tagged/tag">tag 3</a>
<a class="2" href="/tagged/tag">tag 4</a>
<a class="2" href="/tagged/tag">tag 5</a>
<a class="2" href="/tagged/tag">tag 6</a>
<br />
<a class="3" href="/tagged/tag">tag 1</a>
<a class="3" href="/tagged/tag">tag 2</a>
<a class="3" href="/tagged/tag">tag 3</a>
<a class="3" href="/tagged/tag">tag 4</a>
<a class="3" href="/tagged/tag">tag 5</a>
<a class="3" href="/tagged/tag">tag 6</a>

</div><!--tags-->

</div> <!--everything-->

<!------DO NOT REMOVE THE CREDIT. DOING SO WOULD MAKE YOU A THIEF.------->
<a href="http://syntaxthemes.tumblr.com">
<img style="position:fixed; bottom:0; right:0; display:block; opacity:0.7; margin:0; z-index:999999999999!important;" onmouseover="this.style.opacity=0.9" onmouseout="this.style.opacity=0.7" src="http://static.tumblr.com/puls2hm/QOHn1brjx/st.png"/></a>
<!----------------------------------THANK-------------------------------->

</body>
</html>