Custom Order - The Little Merman

<!-- About me -->

<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Abel');
@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans+SC:wght@900&family=Poppins:wght@600&display=swap');

body {
background-color:#232426;
background-repeat:no-repeat;
background-attachment:fixed;
margin: 0;
overflow:auto;
background-image:url('https://i.imgur.com/LJhYWxq.jpg');
background-size:cover;
}

table, tr, td, li, p, div, .profileInfo td.text {
font-size: 10px;
color: #717171;
font-family: 'Poppins', sans-serif;
}

b{
color: #fff;
background-color: #5a1110;
padding: 5px;
font-size: 11px;
line-height: 31px;
}


.container {
width:800px;
height:500px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
overflow:hidden;
margin:auto;
color:#fff;
background-color:#7c7a75;
font-family: 'Abel', sans-serif;
background-image: url('https://i.imgur.com/IaJMspg.png');
}

.leftImage{
width: 308px;
height: 450px;
display: inline-block;
vertical-align:top;
}

.rightSection{
width: 489px;
height: 450px;
display: inline-block;
vertical-align:top;
}

.bottomNavigation{
width: 800px;
height: 46px;
display: inline-block;
text-align:center;
background-color:#031321;
}


#navigationSection{
display:none;
}

#navigationSection:target{
display: block;
width: 378px;
height: 174px;
text-align:center;
margin-top: 145px;
margin-left: 45px;
position: absolute;
background-color: #031321;
}


#theDetails{
display:none;
}

#theDetails:target{
display: block;
width: 378px;
height: 174px;
text-align: center;
margin-top: 145px;
margin-left: 45px;
position: absolute;
background-color: #031321;
text-align: left;
padding: 10px;
font-family: Georgia;
font-size: 12px;
color: #fff;
}


#theStoryline{
display:none;
}

#theStoryline:target{
display: block;
width: 478px;
height: 382px;
text-align: center;
margin-top: 35px;
margin-left: -15px;
position: absolute;
text-align: left;
padding: 10px;
font-family: Georgia;
font-size: 12px;
color: #fff;
}


#theOweList{
display:none;
}

#theOweList:target{
display: block;
width: 478px;
height: 382px;
text-align: center;
margin-top: 35px;
margin-left: -15px;
position: absolute;
text-align: left;
padding: 10px;
font-family: Georgia;
font-size: 12px;
color: #fff;
}

#theConnections{
display:none;
}

#theConnections:target{
display: block;
width: 478px;
height: 382px;
text-align: center;
margin-top: 35px;
margin-left: -15px;
position: absolute;
text-align: left;
padding: 10px;
font-family: Georgia;
font-size: 12px;
color: #fff;
background-color:#031321;
overflow:auto;
}



.leftNavContent{
width:185;
height:150px;
display:inline-block;
vertical-align:top;
overflow:auto;
}

.rightNavContent{
width:185;
height:150px;
display:inline-block;
vertical-align:top;
overflow:auto;}


.leftDetailsContent{
width:185;
height: 131px;
display:inline-block;
vertical-align:top;
overflow:auto;
}

.rightDetailsContent{
width:185;
height: 131px;
display:inline-block;
vertical-align:top;
overflow:auto;}

.leftStorylineBox{
width: 265px;
height: 139px;
background: #031321;
overflow:auto;
padding:10px;
text-align: justify;
font-family: georgia;
font-size: 11px;
color: #fff;
}

.rightStorylineBox{
width: 272px;
height: 131px;
background: #031321;
margin-left: 200px;
margin-top: 10px;
overflow:auto;
padding:10px;
text-align: justify;
font-family: georgia;
font-size: 11px;
color: #fff;
}

a.navigationLinks:link, a.navigationLinks:visited {
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-family: Georgia;
font-size: 12px;
}

a.navigationLinks:hover, a.navigationLinks:active {
color: #031321;
}



a.navBlockLinks:link, a.navBlockLinks:visited {
color: white;
padding: 14px 0;
text-align: center;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
font-family: Georgia;
font-size: 12px;
background-color: #031321;
width: 100%;
}

a.navBlockLinks:hover, a.navBlockLinks:active {
color: #031321;
}




h1{
width: 100%;
text-align: center;
background-color: #031321;
color: #fff;
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
font-family: Georgia;
text-transform: uppercase;
}


h2{
width: 100%;
text-align: center;
color: #fff;
margin: 0;
padding-top: 10px;
padding-bottom: 10px;
font-family: Georgia;
text-transform: uppercase;
font-size: 35px;
margin-top: 10px;
}

::-webkit-scrollbar-thumb:vertical {height:12px; background:#fff; border-top:10px solid #031321; border-bottom:10px solid #031321;}
::-webkit-scrollbar-thumb:horizontal {background-color:#fff;}
::-webkit-scrollbar {width:5px; height:7px;}


.contacttable, .whitetext12, .nametext, .lightbluetext8, .orangetext15, .blacktext12, .btext, .redtext, .redbtext {display:none;height:0px;!important;visibility:hidden} td td td td {border:0px;width:0px;text-align:left;} table, td, tr {padding:0px;width:;background-color:transparent} table table table {padding:1px;height:.01%;width:100%;} table table,table table table table,table,tr,td {height:0px;!important;border:0px;!important} a.text, table div font a, .navbar font, tr td font {visibility:hidden;display:none;height:0px;!important;} #footerWarpper{display: none;} table table table table,table table table table td.text, td.text td.text table{display:none;} td.text table table{display:inline;visibility:visible;} table td table tr td.text table{visibility:hidden;} table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;} table.footer {display: none;} div table a.navbar img {display:none;} div table.navigationBar {margin-bottom:-30px;} .profileInfo {display:none;} .profileInfo td {text-align:left;} .profileInfo a img {position:relative; margin-bottom:-1px; margin-bottom:-2px; width:125px; margin-right:-6px; margin-top:4px; _margin-top:3px; display:block;} .profileInfo td td, .nametext, .msOnlineNow img {display:none;} .profileInfo td td.text {display:table-cell; _display:inline;} .profileInfo .text {font-size:7px; line-height:8px; text-transform:uppercase; font-family:small fonts;} .msOnlineNow {font-family:small fonts; letter-spacing:0px; font-size:7px; line-height:8px; padding:2px; padding-left:0px; text-transform:uppercase; font-weight:normal; display:none; text-decoration:blink; letter-spacing:2px;} .userAlbums {display:none;} div td {display:none;} </span>
</style>



<!--Like to meet-->

<html>
<body>
<div class="container">
<div class="leftImage">
<img src="https://i.imgur.com/RaFvIlo.png">
</div>

<div class="rightSection">

<div id="navigationSection">
<h1>Navigation</h1>
<div class="rightNavContent">
<a href="/home.php" class="navBlockLinks">Home</a>
<a href="/send_message.php?member_id=" class="navBlockLinks">Message</a>
<a href="/add_comment.php?member_id=" class="navBlockLinks">Comment</a>
</div>
<div class="rightNavContent">
<a href="/status_stream.php?member_id=" class="navBlockLinks">Stream</a>
<a href="/view_member_blog.php?member_id=" class="navBlockLinks">Bulletin</a>
<a href="https://www.roleplayer.me/1631904" class="navBlockLinks">Credit</a>
</div>
</div>

<div id="theDetails">
<h1>The Details</h1>
<div class="leftDetailsContent">
<b>name</b> first middle last<br>
<b>age</b> -- years old<br>
<b>birthplace</b> my moms private parts
</div>
<div class="rightDetailsContent">
<b>pros</b> I can eat a lot of taco bell <br>
<b>cons</b> I'm lactose intolerant so after tacobell sucks<br>
<b>fun fact</b> I would rather lay in the rain on the ground then in my bed
</div>
</div>

<div id="theStoryline">
<h2>The Storyline</h2>
<div class="leftStorylineBox">
<h1>The Past</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Ultrices in iaculis nunc sed augue lacus viverra vitae. Egestas maecenas pharetra convallis posuere morbi leo. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Ultrices neque ornare aenean euismod elementum nisi quis. Enim eu turpis egestas pretium aenean pharetra magna ac. Aliquam eleifend mi in nulla posuere. Turpis egestas pretium aenean pharetra magna ac. Ut pharetra sit amet aliquam id diam maecenas ultricies. Sem viverra aliquet eget sit. Ut faucibus pulvinar elementum integer. Eget est lorem ipsum dolor sit. Fames ac turpis egestas sed tempus urna.
<br><br>
Potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Velit aliquet sagittis id consectetur purus ut. Lectus nulla at volutpat diam ut venenatis tellus in metus. Enim nec dui nunc mattis enim ut tellus elementum sagittis. Praesent tristique magna sit amet. In hac habitasse platea dictumst quisque sagittis purus sit. Lectus nulla at volutpat diam ut venenatis. Ullamcorper sit amet risus nullam eget felis eget nunc. Id donec ultrices tincidunt arcu non. Neque gravida in fermentum et sollicitudin. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Nec ullamcorper sit amet risus nullam eget. Nunc sed id semper risus in hendrerit gravida rutrum quisque. Elementum pulvinar etiam non quam lacus suspendisse. Condimentum id venenatis a condimentum vitae. Malesuada fames ac turpis egestas integer eget aliquet.
<br><br>
Sed viverra ipsum nunc aliquet bibendum enim facilisis. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Scelerisque varius morbi enim nunc faucibus a. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Duis tristique sollicitudin nibh sit amet. Pellentesque nec nam aliquam sem. Gravida arcu ac tortor dignissim convallis aenean. Dignissim diam quis enim lobortis scelerisque fermentum. Quam quisque id diam vel quam elementum pulvinar etiam. Odio facilisis mauris sit amet massa. Sed risus ultricies tristique nulla aliquet. Eget nulla facilisi etiam dignissim. Porta lorem mollis aliquam ut. Viverra maecenas accumsan lacus vel. Sit amet commodo nulla facilisi nullam vehicula ipsum a arcu.
<br><br>
Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Purus gravida quis blandit turpis cursus. Nec ultrices dui sapien eget. Praesent elementum facilisis leo vel fringilla. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Lacus sed viverra tellus in hac habitasse. Lectus quam id leo in vitae. Neque volutpat ac tincidunt vitae semper quis lectus nulla at. Eu sem integer vitae justo eget. Duis at tellus at urna condimentum mattis pellentesque. Orci eu lobortis elementum nibh. Est lorem ipsum dolor sit amet consectetur adipiscing elit.
<br><br>
Scelerisque fermentum dui faucibus in ornare quam viverra orci sagittis. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Vel facilisis volutpat est velit egestas dui id ornare arcu. Pharetra pharetra massa massa ultricies mi quis hendrerit. Mauris a diam maecenas sed enim. Sed euismod nisi porta lorem mollis aliquam. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget. In metus vulputate eu scelerisque felis imperdiet. Adipiscing elit pellentesque habitant morbi tristique. Euismod in pellentesque massa placerat duis ultricies lacus sed turpis. Porta lorem mollis aliquam ut porttitor leo a. Nibh praesent tristique magna sit amet. Purus in mollis nunc sed id. Ac turpis egestas sed tempus. Tellus molestie nunc non blandit massa enim nec. In est ante in nibh mauris cursus mattis. Bibendum enim facilisis gravida neque convallis a cras semper.
</div>

<div class="rightStorylineBox">
<h1>The Current</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Bibendum ut tristique et egestas quis ipsum suspendisse ultrices. Ultrices in iaculis nunc sed augue lacus viverra vitae. Egestas maecenas pharetra convallis posuere morbi leo. Dolor sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Ultrices neque ornare aenean euismod elementum nisi quis. Enim eu turpis egestas pretium aenean pharetra magna ac. Aliquam eleifend mi in nulla posuere. Turpis egestas pretium aenean pharetra magna ac. Ut pharetra sit amet aliquam id diam maecenas ultricies. Sem viverra aliquet eget sit. Ut faucibus pulvinar elementum integer. Eget est lorem ipsum dolor sit. Fames ac turpis egestas sed tempus urna.
<br><br>
Potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Velit aliquet sagittis id consectetur purus ut. Lectus nulla at volutpat diam ut venenatis tellus in metus. Enim nec dui nunc mattis enim ut tellus elementum sagittis. Praesent tristique magna sit amet. In hac habitasse platea dictumst quisque sagittis purus sit. Lectus nulla at volutpat diam ut venenatis. Ullamcorper sit amet risus nullam eget felis eget nunc. Id donec ultrices tincidunt arcu non. Neque gravida in fermentum et sollicitudin. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Nec ullamcorper sit amet risus nullam eget. Nunc sed id semper risus in hendrerit gravida rutrum quisque. Elementum pulvinar etiam non quam lacus suspendisse. Condimentum id venenatis a condimentum vitae. Malesuada fames ac turpis egestas integer eget aliquet.
<br><br>
Sed viverra ipsum nunc aliquet bibendum enim facilisis. Sit amet consectetur adipiscing elit ut aliquam purus sit amet. Scelerisque varius morbi enim nunc faucibus a. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Duis tristique sollicitudin nibh sit amet. Pellentesque nec nam aliquam sem. Gravida arcu ac tortor dignissim convallis aenean. Dignissim diam quis enim lobortis scelerisque fermentum. Quam quisque id diam vel quam elementum pulvinar etiam. Odio facilisis mauris sit amet massa. Sed risus ultricies tristique nulla aliquet. Eget nulla facilisi etiam dignissim. Porta lorem mollis aliquam ut. Viverra maecenas accumsan lacus vel. Sit amet commodo nulla facilisi nullam vehicula ipsum a arcu.
<br><br>
Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat. Purus gravida quis blandit turpis cursus. Nec ultrices dui sapien eget. Praesent elementum facilisis leo vel fringilla. Ullamcorper eget nulla facilisi etiam dignissim diam quis. Lacus sed viverra tellus in hac habitasse. Lectus quam id leo in vitae. Neque volutpat ac tincidunt vitae semper quis lectus nulla at. Eu sem integer vitae justo eget. Duis at tellus at urna condimentum mattis pellentesque. Orci eu lobortis elementum nibh. Est lorem ipsum dolor sit amet consectetur adipiscing elit.
<br><br>
Scelerisque fermentum dui faucibus in ornare quam viverra orci sagittis. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Vel facilisis volutpat est velit egestas dui id ornare arcu. Pharetra pharetra massa massa ultricies mi quis hendrerit. Mauris a diam maecenas sed enim. Sed euismod nisi porta lorem mollis aliquam. Dignissim cras tincidunt lobortis feugiat vivamus at augue eget. In metus vulputate eu scelerisque felis imperdiet. Adipiscing elit pellentesque habitant morbi tristique. Euismod in pellentesque massa placerat duis ultricies lacus sed turpis. Porta lorem mollis aliquam ut porttitor leo a. Nibh praesent tristique magna sit amet. Purus in mollis nunc sed id. Ac turpis egestas sed tempus. Tellus molestie nunc non blandit massa enim nec. In est ante in nibh mauris cursus mattis. Bibendum enim facilisis gravida neque convallis a cras semper.
</div>
</div>







<div id="theOweList">
<h2>The Owes List</h2>
<div class="leftStorylineBox">
<h1>I owe You</h1>
<b>Name</b> - starter/reply - <i>date</i><br>
<b>Name</b> - starter/reply - <i>date</i><br>
<b>Name</b> - starter/reply - <i>date</i><br>
</div>

<div class="rightStorylineBox">
<h1>You owe me</h1>
<b>Name</b> - starter/reply - <i>date</i><br>
<b>Name</b> - starter/reply - <i>date</i><br>
<b>Name</b> - starter/reply - <i>date</i><br>
</div>
</div>

<div id="theConnections">
<h1>The Connections</h1>
<img src="https://i.imgur.com/68pNE4T.png" align="left">
<div style="background: #031321; width: 342px; height: 90px; overflow: auto; display: inline-block; margin-left: 10px; text-align: justify; font-family: Georgia; font-size: 12px; color: #fff; padding: 5px;">
<h1>Connection Name</h1>
About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here.
</div>
<br>
<div style="background: #031321; width: 342px; height: 90px; overflow: auto; display: inline-block; margin-top: 10px; text-align: justify; font-family: Georgia; font-size: 12px; color: #fff; padding: 5px;">
<h1>Connection Name</h1>
About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here.
</div>
<img src="https://i.imgur.com/lWRnJNl.png" style="margin-top:10px; display:inline-block;">
<br>
<img src="https://i.imgur.com/Gx3ssXe.png" style="display:inline-block;margin-top:10px;">
<div style="background: #031321; width: 342px; height: 90px; overflow: auto; display: inline-block; margin-left: 10px; text-align: justify; font-family: Georgia; font-size: 12px; color: #fff; padding: 5px; margin-top:10px;">
<h1>Connection Name</h1>
About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here.
</div>
<br>
<div style="background: #031321; width: 342px; height: 90px; overflow: auto; display: inline-block; margin-top: 10px; text-align: justify; font-family: Georgia; font-size: 12px; color: #fff; padding: 5px;">
<h1>Connection Name</h1>
About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here. About the connection here.
</div>
<img src="https://i.imgur.com/kM8Codw.png" style="margin-top:10px; display:inline-block;">
</div>


</div><br>
<div class="bottomNavigation">
<a href="#navigationSection" class="navigationLinks">navigation</a>
<a href="#theDetails" class="navigationLinks" style="margin-left: 5px;">the details</a>
<a href="#theStoryline" class="navigationLinks" style="margin-left: 5px;">the storyline</a>
<a href="#theOweList" class="navigationLinks" style="margin-left: 5px;">owe list</a>
<a href="#theConnections" class="navigationLinks" style="margin-left: 5px;">the connections</a>
</div>
</div>
</body>
</html>