Finn Code

<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Gugi');

 ::-webkit-scrollbar {width: 0.3vw; height: 0.3vw;}
 ::-webkit-scrollbar-track { border-radius: 0px; background-color: transparent;}
 ::-webkit-scrollbar-thumb { border-radius: 0px; background-color: transparent;}


body{
background-color: #0D163C;
background-image: url(https://www.transparenttextures.com/patterns/pixel-weave.png);
}

b, strong {
color: #053590;
}

i, em {
color: #053590;
}

strike {
color: #053590;
}

u {
color: #053590;
}

a {color: #053590;}

h1 { Color: #053590; Border-bottom: 1px solid #E6E6FA; font-size:25px; text-align: center; Text-Shadow: #5356A0 1px 1px 1px; font-family: 'Gugi'; Margin-top: 2px;}

h2 { Color: #053590; Border-bottom: 1px dashed #E6E6FA; Border-top: 1px dashed #E6E6FA; font-size:16px; text-align: center; Text-Shadow: #5356A0 1px 1px 1px; Margin-top: 2px;}

.bartop {
Position: fixed;
Bottom: 80px;
right: 300px;
Width: 500px;
Height: 405px;
background: rgba(210,221,238, 0.5);
border: 10px double #0D163C;
Z-index: -5;
}

.pic {
Position: fixed;
background-image: url('https://i.imgur.com/DBXM9V8.png');
background-repeat: no-repeat;
background-size: 100% 100%;
Bottom: 0px;
right: 100px;
Width: 350px;
Height: 600px;
z-index: 20;
filter:contrast(180%);
}

.pic2 {
Position: fixed;
background-image: url('https://i.imgur.com/4hEKZJ3.png');
background-repeat: no-repeat;
background-size: 100% 100%;
Bottom: 0px;
right: 430px;
Width: 250px;
Height: 150px;
z-index: 5;
}

.boop { Width: 80px;
Height: 80px;
border-radius: 100%;
background-image:url("https://i.gifer.com/2j2J.gif"); background-repeat:no-repeat; background-position:100% 100%; color:#FFFFFF; background-size: 100% 100%;

border:3px solid #0D163C;

position:fixed; Bottom: 400px;
Right: 772px;

visibility:visible }

.boop2 { Width: 80px;
Height: 80px;
border-radius: 100%;
background-image:url("http://33.media.tumblr.com/eb1a36506d57f69a21816920f6eb270c/tumblr_mj60zq68AU1rkiy6bo2_500.gif"); background-repeat:no-repeat; background-position:100% 100%; color:#FFFFFF; background-size: 100% 100%;

border:3px solid #0D163C;

position:fixed; Bottom: 100px;
Right: 772px;

visibility:visible }

.boop3 { Width: 80px;
Height: 80px;
border-radius: 100%;
background-image:url("https://78.media.tumblr.com/e091973c146cfcf7cbf9f6db598a1e28/tumblr_osbxwkBd2i1vxd43yo1_500.gif"); background-repeat:no-repeat; background-position:100% 100%; color:#FFFFFF; background-size: 100% 100%;

border:3px solid #0D163C;

position:fixed; Bottom: 250px;
Right: 772px;

visibility:visible }

/* Buttons */

.ff {z-index: 30; position: absolute; right: 0px; bottom: 0px; width: 25px; height: 25px; background-color: #0D163C; }

.f1 {Position: absolute; bottom: 510px; right: 152px; Z-index: 30;}

.f2 {Position: absolute; bottom: 510px; right: 122px; Z-index: 30;}

.f3 {Position: absolute; bottom: 510px; right: 92px; Z-index: 30;}

.f4 {Position: absolute; bottom: 510px; right: 62px; Z-index: 30;}

.f5 {Position: absolute; bottom: 510px; right: 32px; Z-index: 30;}

.slide {
Position: fixed;
bottom: -100px;
Right: 0px;
transition: all 0.6s ease-in-out;
opacity: 0;
z-index:-8;
}

.slide:target {
bottom: 0px;
transition: all 0.6s ease-in-out;
opacity: 1;
z-index: 5;}

/* Boxes */

.box1 {
Position: fixed;
Bottom: 80px;
right: 10px;
Width: 150px;
Height: 385px;
padding: 10px 10px;
background: rgba(210,221,238, 0.5);
border: 10px double #0D163C;
color: #000000; font-size: 13px;
Z-index: -5;
}


.finn {
Width: 255px;
Height: 180px;
font-size: 13px;
Overflow: auto;
background-color: rgba(255,255,255, 0.3);color:#000000;
border: 4px double #D6DFDF;
position:absolute; Bottom: 195px;
Right: 398px;
padding: 20px 20px;
visibility:visible;
z-index: 15;}

.finn2 {
Width: 255px;
Height: 140px;
font-size: 13px;
Overflow: auto;
background-color: rgba(255,255,255, 0.3);color:#000000;
border: 4px double #D6DFDF;
position:absolute; Bottom: 110px;
Right: 398px;
padding: 20px 20px;
visibility:visible;
z-index: 15;}

.finn3 {
Width: 255px;
Height: 140px;
font-size: 13px;
Overflow: auto;
background-color: rgba(255,255,255, 0.3);color:#000000;
border: 4px double #D6DFDF;
position:absolute; Bottom: 302px;
Right: 398px;
padding: 20px 20px;
visibility:visible;
z-index: 15;}

.finn4 {
Width: 255px;
Height: 333px;
font-size: 13px;
Overflow: auto;
background-color: rgba(255,255,255, 0.3);color:#000000;
border: 4px double #D6DFDF;
position:absolute; Bottom: 110px;
Right: 398px;
padding: 20px 20px;
visibility:visible;
z-index: 15;}

/* Cool buttons */

.swords {
height: 60px;
width: 30px;
border: #FFFFFF 2px solid;
opacity: 0.5;
}

.swords:hover {
height: 60px;
width: 30px;
border: #FFFFFF 2px solid;
opacity: 1;
transition: all 0.5s ease-in-out;
}

.pals {
height: 100px;
width: 100px;
border: #FFFFFF 2px solid;
}

</style>

<div class="box1">

<h1>Under Co.</h1>



<center><i>Italic</i>, <b>Bold</b>, <a href="Link">Link</a>, <u>Underline</u>, <strike>Strike</strike></center><br />

<h2>Another Header</h2>

</div>
<div id="1" class="slide"><div class="finn">

<b><font style=float:left>Name:</font></b> <font style=float:right> Finn.</span></font><br>

<b><font style=float:left>Age:</font></b> <font style=float:right> 18.</span></font><br>

<b><font style=float:left>Gender:</font></b> <font style=float:right> Male.</span></font><br>

<b><font style=float:left>Species:</font></b> <font style=float:right> Human.</span></font><br>

<b><font style=float:left>Status:</font></b> <font style=float:right> Single.</span></font><br>

<b><font style=float:left>Height:</font></b> <font style=float:right> 5'10".</span></font><br>

<b><font style=float:left>Alignment:</font></b> <font style=float:right> Chaotic Good. </span></font><br>

<b><font style=float:left>Occupation:</font></b> <font style=float:right> Adventurer, Hero.</span></font><br>

<b><font style=float:left>Stuff:</font></b> <font style=float:right>Is red-green colorblind.<br> Visibly missing teeth.<br></font>


</div></div>
<div id="2" class="slide"><div class="finn2">

<center>FinnFinnFinn</center>

</div>
<div class="finn3">

<center>Weewooweewoo</center>

</div></div>
<div id="3" class="slide"><div class="finn">

<h1>Gallery</h1><center>

<a href="https://78.media.tumblr.com/22acbbcab77a453b00d086c4a9e7f83f/tumblr_n6v9r5MxPs1rn4abzo1_1280.jpg" target="_blank"><img src="https://78.media.tumblr.com/22acbbcab77a453b00d086c4a9e7f83f/tumblr_n6v9r5MxPs1rn4abzo1_1280.jpg" class="swords"></a>

<a href="PutPicHere" target="_blank"><img src="PutLinkOfPicHere" class="swords"></a>

<a href="PutPicHere" target="_blank"><img src="PutLinkOfPicHere" class="swords"></a>


</center></div></div>
<div id="4" class="slide"><div class="finn4">
<h1>Peeps</h1>

<a href="https://roleplay.chat/profile.php?user=Finn+Mertens" target="_blank"><img src="https://media.giphy.com/media/psEUNtWjENnxe/giphy.gif" class="pals" align="left"></a> You can add some stuff here! Then once you finish, you just go ahead and place [hr]. Make sure to put a lot of [br] codes if it gets funky, so that it splits it up from the other peeplez.

<hr><br>

<a href="https://roleplay.chat/profile.php?user=Finn+Mertens" target="_blank"><img src="https://media.giphy.com/media/psEUNtWjENnxe/giphy.gif" class="pals" align="right"></a> You can add some stuff here! Then once you finish, you just go ahead and place [hr]. Make sure to put a lot of [br] codes so that it splits it up from the other peeplez.

<hr><br>

<a href="https://roleplay.chat/profile.php?user=Finn+Mertens" target="_blank"><img src="https://media.giphy.com/media/psEUNtWjENnxe/giphy.gif" class="pals" align="left"></a> Woogity boogity!

</div></div>
<div id="5" class="slide">

</div>

<div class="f1"><a href="#1"><div class="ff"></div></div></a>

<div class="f2"><a href="#2"><div class="ff"></div></div></a>

<div class="f3"><a href="#3"><div class="ff"></div></div></a>

<div class="f4"><a href="#4"><div class="ff"></div></div></a>

<div class="f5"><a href="#5"><div class="ff"></div></div></a>


<div class="bartop"></div> <div class="pic"></div> <div class="pic2"></div> <div class="boop"></div> <div class="boop2"></div> <div class="boop3"></div>