Custom Order - Forsaken Members Page

<!--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/q6ipV9U.jpg');
background-size:cover;
}

table, tr, td, li, p, div, .profileInfo td.text {
font-size: 10px;
font-family: georgia;
color: #d4d4d4;
}

b{
background-color: #9f0621;
padding: 5px;
line-height: 28px;
}

h1{
margin: 0;
margin-bottom:0px;
width: 100%;
text-align: center;
background: #9f0621;
color: #0c0c25;
padding-top: 5px;
padding-bottom: 5px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
}

.container {
width:800px;
height:688px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
overflow:hidden;
margin:auto;
color:#fff;
background-color:#0c0c25;
font-family: 'Abel', sans-serif;
border: 20px solid #0c0c25;
}

a.navigationLinks:link, a.navigationLinks:visited {
background-color: #9F0621;
color: #0c0c25;
padding: 10px 11px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Georgia;
text-transform: uppercase;
width: 94px;
font-size: 10px;
}

a.navigationLinks:hover, a.navigationLinks:active {
background-color: #0c0c25;
color:#9F0621;
}


a.affiliateLinks:link, a.affiliateLinks:visited {
background-color: #9F0621;
color: #0c0c25;
padding: 10px 11px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Georgia;
text-transform: uppercase;
width: 114px;
font-size: 10px;
border-bottom: 5px solid #0c0c25;
}

a.affiliateLinks:hover, a.affiliateLinks:active {
background-color: #0c0c25;
color:#9F0621;
}


a.helpfulLinks:link, a.helpfulLinks:visited {
background-color: #9F0621;
color: #0c0c25;
padding: 10px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Georgia;
text-transform: uppercase;
width: 139px;
font-size: 10px;
border-bottom: 5px solid #0c0c25;
}

a.helpfulLinks:hover, a.helpfulLinks:active {
background-color: #0c0c25;
color:#9F0621;
}

.navigationBar{
width:800px;
height:50px;
display:inline-block;
margin-top:-69px;
text-align:center;
margin-left: -9px;
}

.leftSide{
width:320px;
height:261px;
display:inline-block;
vertical-align:top;
text-align:center;
margin-top:10px;
}

.rightSide{
width:477px;
height:261px;
display:inline-block;
vertical-align:top;
margin-top:10px;
}

.bottomBar{
width: 800px;
height: 156px;
vertical-align: top;
margin-top: 0px;
overflow: auto;
padding-top: 10px;
background-position: center left;
background-repeat: no-repeat;
}

.groupInfoBox{
width: 800px;
height: 20px;
margin-top: 10px;
font-size: 13px;
text-align: center;
padding-top: 5px;
}

.membersBox{
width: 477px;
height: 153px;
margin-top: 19px;
overflow: auto;
}

.biographyBox{
width: 300px;
height: 134px;
text-align: justify;
font-family: georgia;
color: #d4d4d4;
display: inline-block;
overflow: auto;
}

.welcomeBox{
width: 289px;
height: 60px;
display: inline-block;
padding:10px;
margin-left: 10px;
overflow:auto;
vertical-align:top;
}

#highlyRec{
display:none;
}

#highlyRec:target{
width: 648px;
height: 103px;
display: inline-block;
vertical-align: top;
margin-left: 14px;
overflow: auto;
white-space: initial;
text-align:center;
background-color:#0c0c25;
margin-top:-1px;
}


#rpgLinks{
display:none;
}

#rpgLinks:target{
width: 648px;
height: 103px;
display: inline-block;
vertical-align: top;
margin-left: 14px;
overflow: auto;
white-space: initial;
text-align:center;
background-color:#0c0c25;
margin-top:-1px;
}


#resourceLinks{
display:none;
}

#resourceLinks:target{
width: 648px;
height: 103px;
display: inline-block;
vertical-align: top;
margin-left: 14px;
overflow: auto;
white-space: initial;
text-align:center;
background-color:#0c0c25;
margin-top:-1px;
}

::-webkit-scrollbar-thumb:vertical {height:12px; background:#0c0c25; border-top:10px solid #9F0621; border-bottom:10px solid #9F0621;}
::-webkit-scrollbar-thumb:horizontal {background:#0c0c25; border-left:10px solid #9F0621; border-right:10px solid #9F0621;}
::-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>

<!--this code was made by M from Edits by M, dont steal or we'll find you, thanks-->
</style>












<!--like to meet-->
<html>
<body>
<div class="container">
<img src="https://i.imgur.com/HcCmQCi.png">
<div class="navigationBar">
<a href="https://www.roleplayer.me/home.php" class="navigationLinks">home</a>
<a href="https://www.roleplayer.me/send_message.php?member_id=" class="navigationLinks" style="margin-left:15px;">message</a>
<a href="/" class="navigationLinks" style="margin-left:15px;">content</a>
<a href="/" class="navigationLinks" style="margin-left:15px;">newsletter</a>
<a href="/" class="navigationLinks" style="margin-left:15px;">activity check</a>
</div>

<div class="rightSide">
<img src="https://i.imgur.com/JITn1ue.png">
<div class="welcomeBox">
This is where your member message will go. It can be as long as you want, the box will just keep scrolling. This is where your member message will go. It can be as long as you want, the box will just keep scrolling. This is where your member message will go. It can be as long as you want, the box will just keep scrolling. This is where your member message will go. It can be as long as you want, the box will just keep scrolling. This is where your member message will go. It can be as long as you want, the box will just keep scrolling. This is where your member message will go. It can be as long as you want, the box will just keep scrolling. This is where your member message will go. It can be as long as you want, the box will just keep scrolling. This is where your member message will go. It can be as long as you want, the box will just keep scrolling. This is where your member message will go. It can be as long as you want, the box will just keep scrolling.
</div>
<br>
<div class="membersBox">
<img src="https://i.imgur.com/OXQRbGD.png"><br>

<center>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
<a href="/" class="affiliateLinks">member name</a>
</center>



</div>
</div>

<div class="leftSide">
<img src="https://i.imgur.com/Px7ufxl.png"><div style="width: 223px; height: 80px; font-family: Georgia; font-size: 12px; color: #fff; text-align: justify; display: inline-block; vertical-align: top; margin-left: 10px; overflow:auto;">
<b>who:</b> here<br>
<b>what:</b> here<br>
<b>when:</b> here<br>
<b>where:</b> here<br>
<b>why</b> here</div>



<div style="width: 223px; height: 80px; font-family: Georgia; font-size: 12px; color: #fff; text-align: justify; display: inline-block; vertical-align: top; margin-right: 10px; overflow:auto; margin-top:7px;">
<b>date:</b> event description will go here, it can be as long as you need it to be and what not.<br>
<b>date:</b> event description will go here, it can be as long as you need it to be and what not.<br>
<b>date:</b> event description will go here, it can be as long as you need it to be and what not.<br>
<b>date:</b> event description will go here, it can be as long as you need it to be and what not.<br>
</div>
<img src="https://i.imgur.com/Jpr2QjR.png" style="margin-top:7px;">


<img src="https://i.imgur.com/fyea0EI.png" style="margin-top:7px;"><div style="width: 223px; height: 80px; font-family: Georgia; font-size: 12px; color: #fff; text-align: justify; display: inline-block; vertical-align: top; margin-left: 10px; overflow:auto; margin-top:7px;">
<b>name:</b> hiatus date<br>
<b>name:</b> hiatus date<br>
<b>name:</b> hiatus date<br>
<b>name:</b> hiatus date<br>
<b>name:</b> hiatus date<br>
<b>name:</b> hiatus date<br>
</div>



</div>




<div class="bottomBar">
<div style="width: 485px; height: 156px; vertical-align: top; display: inline-block; text-align:justify; overflow:auto;">
<center><img src="https://i.imgur.com/sfaIPpf.png"></center>
<div style="width: 115px; height: 131px; display: inline-block; vertical-align: top; overflow:hidden;">
<h1>name</h1>
<b>status:</b> here <br>
<b>title:</b> here <br>
<b>responsibilities</b><br> what they do will go here, keep it kinda short<br><br>
</div>
<div style="width: 115px; height: 131px; display: inline-block; vertical-align: top; margin-left: 5px;overflow:hidden;">
<h1>name</h1>
<b>status:</b> here <br>
<b>title:</b> here <br>
<b>responsibilities</b><br>what they do will go here, keep it kinda short<br><br>
</div>
<div style="width: 115px; height: 131px; display: inline-block; vertical-align: top; margin-left: 5px;overflow:hidden;">
<h1>name</h1>
<b>status:</b> here <br>
<b>title:</b> here <br>
<b>responsibilities</b><br>what they do will go here, keep it kinda short<br><br>
</div>
<div style="width: 115px; height: 131px; display: inline-block; vertical-align: top; margin-left: 5px;overflow:hidden;">
<h1>name</h1>
<b>status:</b> here <br>
<b>title:</b> here <br>
<b>responsibilities</b><br>what they do will go here, keep it kinda short<br><br>
</div>
</div>
<div style="width: 155px; height: 156px; vertical-align: top; display: inline-block; overflow: auto;">
<img src="https://i.imgur.com/j7FaO8o.png" width="150px"><br>
<a href="/" class="helpfulLinks">Layout Resource</a><br>
<a href="/" class="helpfulLinks">Layout Resource</a><br>
<a href="/" class="helpfulLinks">Layout Resource</a><br>
<a href="/" class="helpfulLinks">Layout Resource</a><br>
<a href="/" class="helpfulLinks">Layout Resource</a><br>
<a href="/" class="helpfulLinks">Layout Resource</a><br>
<a href="/" class="helpfulLinks">Layout Resource</a><br>
<a href="/" class="helpfulLinks">Layout Resource</a><br>
<a href="/" class="helpfulLinks">Layout Resource</a><br>
<a href="/" class="helpfulLinks">Layout Resource</a><br>
</div>
<div style="width: 155px; height: 156px; vertical-align: top; display: inline-block; overflow: auto;">
<img src="https://i.imgur.com/lMTolSw.png" width="150px"><br>
<a href="/" class="helpfulLinks">Template Resource</a><br>
<a href="/" class="helpfulLinks">Template Resource</a><br>
<a href="/" class="helpfulLinks">Template Resource</a><br>
<a href="/" class="helpfulLinks">Template Resource</a><br>
<a href="/" class="helpfulLinks">Template Resource</a><br>
<a href="/" class="helpfulLinks">Template Resource</a><br>
<a href="/" class="helpfulLinks">Template Resource</a><br>
<a href="/" class="helpfulLinks">Template Resource</a><br>
<a href="/" class="helpfulLinks">Template Resource</a><br>
<a href="/" class="helpfulLinks">Template Resource</a><br>
</div>
</div>






</div>
</body>
</html>