Trip

<style type="text/css">

@font-face {
font-family: 'neon';
src: url('https://dl.dropboxusercontent.com/s/stnks106rzcb7tf/carta-outline.otf');
}

@font-face {
font-family: 'reg';
src: url('https://dl.dropboxusercontent.com/s/wxlatp62agau1yu/ahellya.ttf');
}

body {
background-color: #151515;}

@-webkit-keyframes flicker {
0%  {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
10% {color: #333; text-shadow: none;}
20% {color: #333; text-shadow: none;}
30% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
40% {color: #333; text-shadow: none;}
50% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
60% {color: #333; text-shadow: none;}
70% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
80% {color: #333; text-shadow: none;}
90% {color: #333; text-shadow: none;}
100% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
}

@-webkit-keyframes flicker {
0%  {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
10% {color: #333; text-shadow: none;}
20% {color: #333; text-shadow: none;}
30% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
40% {color: #333; text-shadow: none;}
50% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
60% {color: #333; text-shadow: none;}
70% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
80% {color: #333; text-shadow: none;}
90% {color: #333; text-shadow: none;}
100% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
}

@-webkit-keyframes flicker {
0%  {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
10% {color: #333; text-shadow: none;}
20% {color: #333; text-shadow: none;}
30% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
40% {color: #333; text-shadow: none;}
50% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
60% {color: #333; text-shadow: none;}
70% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
80% {color: #333; text-shadow: none;}
90% {color: #333; text-shadow: none;}
100% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
}

@-webkit-keyframes flicker {
0%  {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
10% {color: #333; text-shadow: none;}
20% {color: #333; text-shadow: none;}
30% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
40% {color: #333; text-shadow: none;}
50% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
60% {color: #333; text-shadow: none;}
70% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
80% {color: #333; text-shadow: none;}
90% {color: #333; text-shadow: none;}
100% {color: #E21142; text-shadow: 1px 1px 13px rgba(173, 0, 0, 1), 2px 2px 13px rgba(173, 0, 0, 1), -1px -1px 13px rgba(173, 0, 0, 1), -2px -2px 13px rgba(173, 0, 0, 1);}
}


#title {
height: 200px;
width: 300px;
position: fixed;
margin: auto;
top: 0px;
left: 0px;
right: 0px;
bottom: 50px;
display: inline-block;
letter-spacing: 10px;
z-index: 999;
}

#border {
height: 3px;
width: 220px;
position: fixed;
margin: auto;
top: 0px;
right: 20px;
left: 0px;
bottom: 30px;
border-top: 1px solid #e21142;
border-bottom: 2px solid #e21142;
border-left: 1px solid #e21142;
border-right: 1px solid #e21142;
background: transparent;
border-radius: 20px;
box-shadow: 1px 1px 3px rgba(173, 0, 0, 1),
2px 2px 3px rgba(173, 0, 0, 1),
-1px -1px 3px rgba(173, 0, 0, 1),
-2px -2px 3px rgba(173, 0, 0, 1);
}

a.t{
font-family: neon;
font-size: 120px;
color: #E21142;
text-shadow: 1px 1px 13px rgba(173, 0, 0, 1),
2px 2px 13px rgba(173, 0, 0, 1),
-1px -1px 13px rgba(173, 0, 0, 1),
-2px -2px 13px rgba(173, 0, 0, 1);
display: inline-block;
text-decoration: none;
}

a.t1 {
font-family: neon;
font-size: 120px;
color: #E21142;
-webkit-animation: flicker 2s infinite;
-moz-animation: flicker 2s infinite;
-o-animation: flicker 2s infinite;
animation: flicker 2s infinite;
display: inline-block;
text-decoration: none;
}

#hold1 {
height: 300px;
width: 550px;
position: fixed;
margin: auto;
top: 30px;
left: 0px;
bottom: 0px;
right: 220px;
overflow: hidden;
background: transparent;
opacity: 0;
transition: all .3s;
}

#hold1:target {
opacity: 1;
z-index:10;
}

#hold2 {
height: 300px;
width: 550px;
position: fixed;
margin: auto;
top: 30px;
left: 0px;
bottom: 0px;
right: 220px;
overflow: hidden;
background: transparent;
opacity: 0;
transition: all .3s;
}

#hold2:target {
opacity: 1;
z-index:10;
}

#hold3 {
height: 300px;
width: 550px;
position: fixed;
margin: auto;
top: 30px;
left: 0px;
bottom: 0px;
right: 220px;
overflow: hidden;
background: transparent;
opacity: 0;
transition: all .3s;
}

#hold3:target {
opacity: 1;
z-index:10;
}

#hold4 {
height: 300px;
width: 550px;
position: fixed;
margin: auto;
top: 30px;
left: 0px;
bottom: 0px;
right: 220px;
overflow: hidden;
background: transparent;
opacity: 0;
transition: all .3s;
}

#hold4:target {
opacity: 1;
z-index:10;
}

#hold5 {
height: 300px;
width: 550px;
position: fixed;
margin: auto;
top: 30px;
left: 0px;
bottom: 0px;
right: 220px;
overflow: hidden;
background: transparent;
opacity: 0;
transition: all .3s;
}

#hold5:target {
opacity: 1;
z-index:10;
}

#img {
height: 250px;
width: 175px;
overflow: hidden;
position: fixed;
margin: auto;
left: 0px;
top: 30px;
bottom: 0px;
right: 550px;
background: #333;
}

#box {
height: 124px;
width: 294px;
padding: 3px;
overflow: hidden;
position: fixed;
margin: auto;
left: 0px;
top: 150px;
bottom: 0px;
right: 30px;
background: transparent;
border-left: 1px solid #E21142;
border-right: 1px solid #E21142;
}

.i1 {
height: 124px;
width: 294px;
padding: 3px;
overflow: auto;
position: relative;
top: 0px;
right: 0px;
font-family: reg;
color: #e21142;
font-size: 14px;
font-variant: small-caps;
}

.i2 {
height: 124px;
width: 294px;
padding: 3px;
overflow: auto;
position: relative;
top: 0px;
right: 0px;
font-family: reg;
color: #e21142;
font-size: 14px;
font-variant: small-caps;
}

.i3 {
height: 124px;
width: 294px;
padding: 3px;
overflow: auto;
position: relative;
top: 0px;
right: 0px;
font-family: reg;
color: #e21142;
font-size: 14px;
font-variant: small-caps;
}

.i4 {
height: 124px;
width: 294px;
padding: 3px;
overflow: auto;
position: relative;
top: 0px;
right: 0px;
font-family: reg;
color: #e21142;
font-size: 14px;
font-variant: small-caps;
}

.i5 {
height: 124px;
width: 294px;
padding: 3px;
overflow: auto;
position: relative;
top: 0px;
right: 0px;
font-family: reg;
color: #e21142;
font-size: 14px;
font-variant: small-caps;
}

.p1 {
height: 250px;
width: 175px;
overflow: hidden;
position: relative;
top: 0px;
right: 0px;
background-image: url('http://i.picpar.com/Fu4c.png');
}

.p2 {
height: 250px;
width: 175px;
overflow: hidden;
position: relative;
top: 0px;
right: 0px;
background-image: url('http://i.picpar.com/iv4c.png');
}

.p3 {
height: 250px;
width: 175px;
overflow: hidden;
position: relative;
top: 0px;
right: 0px;
background-image: url('http://i.picpar.com/Fu4c.png');
}

.p4 {
height: 250px;
width: 175px;
overflow: hidden;
position: relative;
top: 0px;
right: 0px;
background-image: url('http://i.picpar.com/iv4c.png');
}

.p5 {
height: 250px;
width: 175px;
overflow: hidden;
position: relative;
top: 0px;
right: 0px;
background-image: url('http://i.picpar.com/Fu4c.png');
}

</style>

<div id="title">
<a class="t" href="#hold1">S</a>
<a class="t1" href="#hold2">A</a>
<a class="t" href="#hold3">T</a>
<a class="t" href="#hold4">A</a>
<a class="t" href="#hold5">N</a>
</div>

<div id="border">
</div>

<div id="hold1">
<div id="img">
<div class="p1">
</div>
</div>

<div id="box">
<div class="i1">
    test1
</div>
</div>
</div>

<div id="hold2">
<div id="img">
<div class="p2">
</div>
</div>

<div id="box">
<div class="i2">
    test2
</div>
</div>
</div>

<div id="hold3">
<div id="img">
<div class="p3">
</div>
</div>

<div id="box">
<div class="i3">
    test3
</div>
</div>
</div>

<div id="hold4">
<div id="img">
<div class="p4">
</div>
</div>

<div id="box">
<div class="i4">
    test4
</div>
</div>
</div>

<div id="hold5">
<div id="img">
<div class="p5">
</div>
</div>

<div id="box">
<div class="i5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin massa lorem, posuere id ornare eget, scelerisque ut lacus. Fusce varius, leo vel convallis tristique, ante neque egestas mauris, nec sollicitudin elit libero et leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque malesuada fermentum sapien, sit amet finibus justo gravida sit amet. Aliquam fringilla urna id finibus congue. Etiam facilisis libero lorem, eget venenatis justo bibendum quis. Donec a ante in purus ullamcorper egestas. Aliquam sollicitudin turpis fermentum urna auctor, eu luctus lacus mollis.

Cras tempus elementum turpis, eget ultrices massa volutpat eu. Nullam a condimentum leo. Phasellus suscipit a augue euismod mattis. In facilisis enim sem, et consequat odio facilisis ac. Nulla facilisi. Duis auctor enim sit amet vehicula maximus. Fusce nibh nisi, suscipit vel suscipit consectetur, laoreet nec metus. Duis dignissim lacus felis, nec placerat sem laoreet ac. In aliquam arcu vitae velit laoreet fermentum. Nullam iaculis pretium eros, eu gravida purus eleifend sed. Praesent sit amet sapien at metus tincidunt luctus eget ut lorem. Donec sollicitudin sed magna vitae congue. Morbi id nisl non lectus rhoncus commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce quis orci lacinia, sagittis elit id, pellentesque ligula.

Praesent egestas semper sem, et euismod ante euismod ac. Nam laoreet nibh mattis magna vulputate, ut vulputate massa commodo. Nulla ut lorem ac neque pharetra dignissim. Quisque fermentum suscipit facilisis. Duis pretium quam vel sem mattis efficitur. Etiam hendrerit elementum tellus, vitae sodales tortor congue vitae. Aliquam posuere, tellus eget auctor molestie, est velit ultricies nisl, porta molestie lorem quam eget est. Nullam in elit dictum, efficitur massa faucibus, rhoncus lacus. Aenean placerat convallis urna ac tincidunt. Nam fringilla porta felis eget sodales.
</div>
</div>
</div>