By My Side (Navigation 03)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!-----PAGE 13 BY STVCKY (http://odinsson.co.vu/). DON'T STEAL OR REDISTRIBUTE. THANK.----->

<head>


    <title>By My Side</title> <!-----CHANGE THE TITLE ON THE TAB HERE----->
    <link rel="shortcut icon" href="http://ic.pics.livejournal.com/attice/50729155/149866/149866_original.png"> <!-----CHANGE THE ICON ON THE TAB HERE----->
    <link rel="alternate" type="application/rss+xml" href="{RSS}">


    <style type="text/css">

/*THESE ARE THE CUSTOM FONTS I'M USING IN THIS BASE. IF YOU WANT TO CHANGE THEM TO YOUR OWN CUSTOM FONTS, YOU CAN LOOK UP A TUTORIAL ON HOW TO DO SO*/

@font-face{font-family:b;src:url(http://static.tumblr.com/q54tzar/7POm34eyl/a_s_black_swan_3_.ttf);}

@font-face {font-family:n;src:url(http://static.tumblr.com/cvlbtjz/cnsln9tpp/bebasneue.otf);}


::-webkit-scrollbar-thumb {
    background-color: #386496; /*CHANGE THE SCROLLBAR*/
    height:auto;
    border-bottom:none;
}
::-webkit-scrollbar {
    height:9px;
    width:5px;
    background-color: #fcfcfc; /*MATCH THIS TO THE BG COLOR*/

}

::selection {
    background-color: #857d72; /*SELECTION BG*/
    color: #fcfcfc; /*SELECTION TEXT*/
}

body {
      background-color: #fcfcfc; /*BACKGROUND COLOR*/
      background-image: url(/); /*BACKGROUND URL*/
      background-repeat: repeat;
}


a {
      text-decoration: none;
      -webkit-transition: 0.5s;
      -moz-transition: 0.5s;
      transition: 0.5s;
      color: #000;
}

a: hover {
      text-decoration: none;
      -webkit-transition: 0.5s;
      -moz-transition: 0.5s;
      transition: 0.5s;
      color: white;
}

#box {
    width: 500px;
    height: 200px;
    margin-top: 283px;
    border-top: 50px solid #386496; /*TITLE BG*/
}

#image {
    width: 500px;
    margin-top: -283px;
}

#image img {
    width: 500px;
    height: 213px;
}

#title {
    font-family: b;
    font-size: 120px;
    color: #fcfcfc; /*TITLE COLOR*/
    text-shadow: 2px 2px #386496;  /*TITLE SHADOW*/
    margin-top: -20px;
}

#navbox {
    width: 100px;
    height: 200px;
    border-top: 20px solid #386496; /*NAV TITLE BG*/
    position: fixed;
    overflow-y: scroll;
    margin-top: -20px;
}

.title {
    font-family: n;
    font-size: 15px;
    color: #fcfcfc; /*NAV TITLE COLOR*/
    margin-top: -18px;
    position: fixed;
}

.link {
    width: 90px;
    height: 16px;
    padding-top: 4px;
    border-left: 5px solid #386496; /*LINK BORDER*/
    font-family: arial;
    font-size: 10px;
    margin-top: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

.link a {
    color: #386496; /*LINK COLOR*/
}

.link:hover {
    background-color: #ffe77d; /*LINK BG HOVER*/
    -webkit-transition: 0.8s;
      -moz-transition: 0.8s;
      transition: 0.8s;
}

.link a:hover {
    opacity: .7;
}

</style>
</head>

<body>

    <center>
    <div id="box">

        <div id="image">
            <img src="https://31.media.tumblr.com/7887eba93a8834e9ba6bac18374a76c4/tumblr_n6pzjuNmgB1tpb7s5o1_500.png"> <!--CHANGE THE IMAGE-->
        </div>

        <div id="title">
            Navigation <!--CHANGE THE TITLE-->
        </div>

        <div id="navbox" style="margin-left: 40px">

            <div class="title" style="margin-left: 40px">
                title <!--CHANGE THE FIRST BOX'S TITLE-->
            </div>


            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>


        </div>

        <div id="navbox" style="margin-left: 150px">

            <div class="title" style="margin-left: 40px">
                title <!--CHANGE THE SECOND BOX'S TITLE-->
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

        </div>

        <div id="navbox" style="margin-left: 260px">

            <div class="title" style="margin-left: 40px">
                title <!--CHANGE THE THIRD BOX'S TITLE-->
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

        </div>

        <div id="navbox" style="margin-left: 370px">

            <div class="title" style="margin-left: 40px">
                title <!--CHANGE THE FOURTH BOX'S TITLE-->
            </div>


            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

            <div class="link">
                <a href="/">link</a>
            </div>

        </div>

    </div>
    </center>

    <!--DON'T TOUCH ANYTHING HERE EXCEPT FOR #386486 AND #FCFCFC TO CHANGE THE CREDIT BG AND LINK-->

    <div style="position:fixed;bottom:2px; right:3px; font-size:9px; letter-spacing:1px; font-family:calibri; height: 15px; width: 20px; background-color:#386496; border:1px solid #386496; border-radius: 50%; padding-top: 5px; text-align: center"><a style="color:#fcfcfc; text-decoration:none;" href="http://stvcky.tumblr.com/">S</a></center></div>

</body>