Tabbed interface

by Brenton Strine

HTML

<script src="http://fonts.googleapis.com/css?family=Oregano:400italic|Open+Sans+Condensed:300"></script>
Multiple steps, sort of like tabs. 
<div class="steps">
    <section id="one">
        <h1><a href="#one">One</a></h1>
        <div><p>hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one hello one </p></div>
    </section>
    <section id="two" class="current">
        <h1><a href="#two">Two</a></h1>
        <div>hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 hello 2 </div>
    </section>
    <section id="three">
        <h1><a href="#three">Three</a></h1>
        <div>hello 3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3  3 </div>
    </section>
</div>

CSS

body {padding:0; margin: 0; background: black;}
.steps {position: relative; padding:0; margin: 0 auto; background: rgba(122,154,193,.95)}
.steps {
    width: 660px;
    height: 500px;
}
.steps section {
    position: absolute;
    top: 0;
    left: 0;
}
.steps h1 { 
    position: absolute; 
    top: 0px; 
}
.steps h1 a {
    display: block;
    width: 200px;
    height: 60px;
    background-color: rgba(28,81,147,1);
    border: solid 1px rgba(28,81,147,1);border:none;
    border-bottom: solid 1px rgba(28,81,147,1);border:none;
    line-height: 60px;
    text-align: center;
    
    font-family: "Open Sans Condensed", "Arial Narrow", Arial, Tahoma, Helvetica, sans-serif;
    text-decoration: none;
    color: #fff;
    text-shadow: 1px 1px 3px #000;
    font-weight: normal;
}

.steps #one h1 a:after,
.steps #two h1 a:after {
    content: "";
    display: block;
    height: 42px;
    width: 42px;
    
    background: rgba(122,154,193,.95)
        
    transform: rotate(0deg);
    transform: rotate(45deg);
    position: absolute;
    right:-21px;
    top:9px;
}
.steps #three h1 a:before,
.steps #two h1 a:before {
    content: "";
    display: block;
    height: 42px;
    width: 42px;
    
    background-color: rgba(122,154,193,.95);
    
    transform: rotate(0deg);
    transform: rotate(45deg);
    position: absolute;
    left:-21px;
    top:9px;
}

.steps .current h1 a,
.steps .current h1 a:after  {
    text-shadow: 0 3px 1px #000;
}

.steps h1 a:after { }
.steps #one h1 a,
.steps #one h1 a:after,
.steps #one div {
    background-color: rgba(28,81,147,1);
}
.steps #one h1 a:hover,
.steps #one h1 a:hover:after {
    background-color: rgba(18,71,137,1);
}

.steps #two h1 a,
.steps #two h1 a:after,
.steps #two div  {
    background-color: rgba(186,84,18,1)
}
.steps #two h1 a:hover,
.steps #two h1 a:hover:after {
    background-color: rgba(176,74,08,1)
}

.steps #three h1 a:hover,
.steps #three h1 a:hover:after,
.steps #three div  {
    background-color:...