TAB CODES

<style>
#navi {
bottom: 470px;
right: 440px;
vertical-align: center;
text-align: center;
position: absolute;
letter-spacing: 10px;
line-height: 5px;
padding: 5px;
margin: px;
opacity:.8;
}


#navi a {
padding: 10px;
height:10;
width: 90px;
font-family: tinytots;
font-size: 8px;
text-transform:uppercase;
letter-spacing: 3px;
float: left;
text-align: center;
color:#999;
background-color: lightgray;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
border: 1px solid #CDBBC9;
}


#navi a:hover {
background-color: #CDBBC9;
color: #999;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
border: 1px solid lightgray;
}

</style>

<div id="navi">
<a href="#one"></a>

<a href="#two"></a>

<a href="#three"></a>

<a href="#four"></a>

<a href="#five"></a>
</div>

<a name="one"></a>
<a name="two"></a>
<a name="three"></a>
<a name="four"></a>
<a name="five"></a>



<style>
This one is html only. This one to me is more complex.
</style>
-Style the background-
<div style="background: #; margin-top: -250px; margin-left: 650px; float: left; font-size: 12px; letter-spacing: 1px;">

-Designing Individual Tabs-
<a href="#1" style="text-decoration: none; color: #414954;"><div style="width: 105px; height: 105px; background: #000; border: 1px solid #EA0223; float:left; margin-top: 300px; margin-left:-240px; padding-top:px; border-radius: ;"><img src="https://78.media.tumblr.com/4cfd2d98c7fc1a66fd217cd05325238c/tumblr_oxo3ro54Hk1utd96do4_250.png" width="105"></div></a>

<a href="#2" style="text-decoration: none; color: #414954;"><div style="width: 105px; height: 104px; background: #000; border: 1px solid #EA0223; float: left; margin-top: 422px; margin-left: -240px; padding-top: px; border-radius: ;"><img src="https://78.media.tumblr.com/129945009d99499cab80263c5a48282e/tumblr_oxo3ro54Hk1utd96do2_250.png" width="105"></div></a>

<a href="#3" style="text-decoration: none; color: #414954;"><div style="width: 105px; height: 105px; background: #000; border: 1px solid #EA0223; float: left; margin-top: 548px; margin-left: -240px; padding-top: px; border-radius: ;"><img src="https://78.media.tumblr.com/6e50785633a48efdebcd589dbbec8724/tumblr_oxo3ro54Hk1utd96do7_250.png" width="105"></div></a>

<a href="#4" style="text-decoration: none; color: #414954;"><div style="width: 105px; height: 104px; background: #000; border: 1px solid #EA0223; float: left; margin-top: 668px; margin-left: -240px; padding-top: px; border-radius: ;"><img src="https://78.media.tumblr.com/4780f02363db5bbf038b8afc09b97696/tumblr_oxo3ro54Hk1utd96do8_250.png" width="105"></div></a>

-The box for the tabs to be connected yo-
<div style="width: 490px; height: 240px; border: 2px solid #EA0223; margin-left: 174px; margin-right: 7px; margin-top: 540px; padding-left:20px; padding-top:5px; float: left; background-color: #fff; border-radius: ; overflow: hidden;"><div style="width: 475px; height: 300px; overflow: hidden; text-align: justify; font-size: 12px; font-variant: small-caps;">


<a name="1"><a>
<a name="2"><a>
<a name="3"><a>
<a name="4"><a>

<div>