Navigation Page #001 by striveattemptfail

<!--
CUSTOM PAGE 004:  NAV #001
THEME BY:  Jercy @ striveattemptfail.tumblr.com

Go ahead and use this as a base but just lemme know or credit me pl0x~
-->

<!DOCTYPE html>
<html>
<head>

<title>{Title}</title>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" href="{RSS}">

<head>
<style type="text/css">

body { font-size: 14px; margin: 0; padding: 0;
    font-family: Helvetica; /* changes main font */
    background-color: #fff; /* changes background colour */
    color: #000; /* changes font colour */
}

#main { width: 650px; margin-left: auto; margin-right: auto; }

/* HEADER *//* CODE BY STRIVEATTEMPTFAIL */
#header { margin-top: 25px; padding-bottom: 5px; text-align: right;
    border-bottom: 3px solid #000; /* changes header border colour */
}

#header a { width: 125px; text-align: center; text-decoration: none; display: inline-block; margin-top: 7px; margin-left: 10px; padding: 4px 0px; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;
    background-color: #000; /* changes header link background colour */
    color: #ccc; /* changes header link text colour */
}

#header a:hover { letter-spacing: 1px;
    background-color: #ccc; /* changes header link on hover background colour */
    color: #000; /* changes header link on hover text colour */
}

#header h1 { font-size: 35px; margin-top: 0px; margin-bottom: 5px;
    font-family: Georgia, serif; /* changes page title font */
}

/* LINKS */
#main2 { width: 645px; margin-top: 20px; margin-left: auto; margin-right: auto; position: absolute; }

#main2 .container { width: 280px; padding: 10px; margin: 0px 10px 10px 10px;
    background-color: #ccc; /* changes container background colour */
}

#main2 .header { padding-bottom: 5px; text-align: center; margin-bottom: 5px;
    border-bottom: 2px solid #000; /* changes container's header border colour */
}

#main2 .header .h1 { font-size: 20px; margin: 0px;
    font-family: Georgia, serif; /* changes container header */
}

#main2 .container .links a { text-align: center; text-decoration: none; width: 260px; padding: 5px; margin-top: 5px; display: block; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out;
    background-color: #fff; /* link background colour */
    color: #000; /* link text colour */
    border-left: 5px solid #000; /* link left border colour */
    border-right: 5px solid #000; /* link right border colour */
}

#main2 .container .links a:hover { letter-spacing: 1.5px;
    background-color: #eee; /* link background colour on hover */
}

/* SCROLLBAR */
body::-webkit-scrollbar { width: 0.5em; height: 0.5em; }

body::-webkit-scrollbar-track {
    background-color: #fff; /* changes scrollbar track colour */
}

body::-webkit-scrollbar-thumb {
    background-color: #000; /* changes main scrollbar colour */
}

body::-webkit-scrollbar-corner {
    background-color: #fff; /* changes scrollbar corner colour */
}

/* CREDIT *//* CODE BY STRIVEATTEMPTFAIL */
#cred { position: fixed; bottom: 10px; right: 5px; transition: all 0.75s ease-in-out; -webkit-transition: all 0.75s ease-in-out; -moz-transition: all 0.75s ease-in-out; }

#cred:hover { transform: translate(0,-10px); -webkit-transform: translate(0,-10px); -moz-transform: translate(0,-10px); }

#cred a { background: #fff; color: #000; text-decoration: none; padding: 3px; }

</style>
</head>

<body>

<!------------CODE BY STRIVEATTEMPTFAIL, please don't steal------------>

<div id="main">

<div id="header">
<h1>Navigation</h1>
Enjoy some tags
<br><a href="/">Back to blog</a><a href="/ask">Ask</a>
</div>

<!------------CODE BY STRIVEATTEMPTFAIL, please don't steal------------>

<div id="main2">

<!--- left container start --->
<div class="container" style="float:left">
<div class="header"><div class="h1">Header 1</div></div>
<div class="links">
<!--- insert links etc here --->
<a href="/">link</a>
</div></div>
<!--- left container end --->

<!--- right container start --->
<div class="container" style="float:right">
<div class="header">
<div class="h1">Header 2</div></div>
<div class="links">
<!--- insert links etc here --->
<a href="/">link</a>
</div></div>
<!--- right container end --->

<!----------------------------THEME CREDIT---------------------------->
<div id="cred"><a href="http://striveattemptfail.tumblr.com" title="theme credit" />&#9903;</a></div>

</div>
</div>

</body>
</html>