cursedEnchantments - custom order - layout

<!--about me-->

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

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

table, tr, td, li, p, div, .profileInfo td.text {
font-size: 12px;
color: #ffffff;
font-family: Georgia;
text-align: justify;
}


.container {
width: 1000px;
height: 529px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
margin: auto;
color: #fff;
font-family: 'Abel', sans-serif;
background-image:url('https://i.imgur.com/OG6Agob.gif');
background-repeat:no-repeat;
background-color:#000;
}

a.popupContentLinks:link, a.popupContentLinks:visited {
background-color: #393b2a;
color: white;
padding: 22px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
width: 303px;
border-bottom: 10px solid #000;
font-family: Georgia;
font-size: 12px;
text-transform: uppercase;
}

a.popupContentLinks:hover, a.popupContentLinks:active {
background-color: #898e8e;
}

a.affiliateLinks:link, a.affiliateLinks:visited {
background-color: #4e1314;
color: white;
padding: 12px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
width: 530px;
border-bottom: 3px solid #000;
font-family: Georgia;
font-size: 12px;
text-transform: uppercase;
}

a.affiliateLinks:hover, a.affiliateLinks:active {
background-color: #898e8e;
}

a:hover{
text-decoration:none;
}

.popupContentLinkContainer{
width:375px;
height:371px;
background-color:#000;
vertical-align:top;
display:inline-block;
padding-top: 22px;
}

.bottomIconsContainer{
width:1000px;
height:179px;

}

.popupContentContainer{
width:622px;
height:371px;
vertical-align:top;
display:inline-block;
}

.topLevelHolder{
width:1000px;
height:371px;
}

#staffMembersPopup{
display:none;
}

#staffMembersPopup:target{
display:block;
width:578px;
height:327px;
padding: 22px;
background:#000;
}


#theStorylinePopup{
display:none;
}

#theStorylinePopup:target{
display:block;
width:578px;
height:327px;
padding: 22px;
background:#000;
overflow:auto;
}

#groupMembersPopup{
display:none;
}


#groupMembersPopup:target{
display:block;
width:578px;
height:327px;
padding: 22px;
background:#000;
overflow:auto;
}

#groupMembersPopup a:link, a:active, a:visited{
padding:3px;
}

#affiliatesPopup{
display:none;
}

#affiliatesPopup:target{
display:block;
width:578px;
height:327px;
padding: 22px;
background:#000;
overflow:auto;
}


#theNavigationPopup{
display:none;
}

#theNavigationPopup:target{
display:block;
width:578px;
height:327px;
padding: 22px;
background:#000;
}

h1{
margin:0;
color:#fff;
font-family: 'Great Vibes', cursive;
font-size:40px;
width:100%;
text-align:center;
}

h2{
margin: 0;
    width: 100%;
    background: #393b2a;
    color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 8px;
    text-align: center;
}

::-webkit-scrollbar-thumb:vertical {height:12px; background:#000; border-top:10px solid #393b2a; border-bottom:10px solid #393b2a;}
::-webkit-scrollbar-thumb:horizontal {background-color:#000;}
::-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="topLevelHolder">
<div class="popupContentContainer">

<div id="theStorylinePopup">
<h1>Welcome to CE</h1>
<img src="https://i.imgur.com/eXYuOhW.png">
<p>Established in 2014; Cursed Enchantments was a highly active and successful group, constantly gaining new membership. As the series came to an end the interest in the verse began to dwindle, much like many verses. However; April 14th, 2020, Belle decided to revive the group, in the hopes of bringing Magic back during the chaos happening in the world.
</p>
<p>
A week into the revival of Cursed Enchantments there had still been no auditions. Still, remaining hopeful that in due time things would change magic suddenly struck. Seemingly overnight several auditions had sprung to life and CE was born anew.
</p>
<p>
We're now beginning to blossom, as we once did before. Cursed Enchantments is a multi-novella, CANON, based RPG. We pride ourselves on members who ACTUALLY WRITE. If you have faith, trust, and pixie dust and aren't afraid to take flight on a magic carpet, embarking into the UNKNOWN, the come and join us!
</p>
</div>

<div id="theNavigationPopup">
<h1>Find your way</h1>
<center>
<a href="https://www.roleplayer.me/home.php"><img src="https://i.imgur.com/4sDDd11.png" style=" margin-top: 10px;"></a> <a href="https://www.roleplayer.me/add_comment.php?member_id=1609102"><img src="https://i.imgur.com/dpvK6A9.png" style="margin-left:10px;"></a> <a href="https://www.roleplayer.me/send_message.php?member_id=1609102"><img src="https://i.imgur.com/FFQ05Iw.png" style="margin-left:10px;"></a>
<br>
<a href="https://www.roleplayer.me/view_blog.php?id=0000471624"><img src="https://i.imgur.com/Ami9uzz.png" style=" margin-top: 10px;"></a> <a href="https://www.roleplayer.me/view_blog.php?id=0000471472"><img src="https://i.imgur.com/JDhzTiV.png" style="margin-left:10px;"></a> <a href="https://www.roleplayer.me/1631904"><img src="https://i.imgur.com/QFjQX3x.png" style="margin-left:10px;"></a>
</div>


<div id="staffMembersPopup">
<h1>Meet the Staff</h1>
<img src="https://i.imgur.com/hoqHnK6.png" height="129px" align="left">
<div style="height: 129px; width: 374px; background: #000; overflow: auto; display: inline-block;">
<h2>BELLERINA</h2>
Hello & thank you for taking interest in Cursed Enchantments. I first started up this group about six years ago, for about 3-4 years. I've come across so many talented writers. Some in which I still remain in contact with. A lot of groups mention that they're like family and we're no different. I cherish those I've come across and am always eager to meet new people, too. I do a lot of editing for group members and work hard on planning different events and keeping stories interesting. Just like the real world people come and people go. I want to make sure that no matter what happens these stories are adaptable for new faces, departing ones, and those taking over a role in which was previously filled. I like to think that I'm very approachable and overall laid back enough to talk to about anything. If you have any questions, please don't hesitate to ask. I've been writing since the AOL/Myspace days. I've been in various groups and ran a handful of them too.
</div>
<br>
<div style="height: 129px; width: 374px; background: #000; overflow: auto; display: inline-block; margin-top:7px;">
<h2>CAPTAIN FLOOR</h2>

</div>
<img src="https://i.imgur.com/M5p0odA.png" height="129px" align="right" style="margin-top:7px;">

</div>

<div id="groupMembersPopup">
<h1>Storybrooke Residents</h1>
<a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <br><br>

<a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <br><br>

<a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <a href=""><img src="https://i.imgur.com/lPJOi2G.png"> <br><br>
</div>

<div id="affiliatesPopup">
<h1>Our Dear Friends</h1>
<a href="/" class="affiliateLinks">Affiliate</a>
<a href="/" class="affiliateLinks">Affiliate</a>
<a href="/" class="affiliateLinks">Affiliate</a>
<a href="/" class="affiliateLinks">Affiliate</a>
<a href="/" class="affiliateLinks">Affiliate</a>
<a href="/" class="affiliateLinks">Affiliate</a>
<a href="/" class="affiliateLinks">Affiliate</a>
<a href="/" class="affiliateLinks">Affiliate</a>
<a href="/" class="affiliateLinks">Affiliate</a>
<a href="/" class="affiliateLinks">Affiliate</a>
</div>

</div>
<div class="popupContentLinkContainer">
<a href="#theStorylinePopup" class="popupContentLinks">Welcome to CE</a><br>
<a href="#theNavigationPopup" class="popupContentLinks">Navigation</a><br>
<a href="#staffMembersPopup" class="popupContentLinks">Staff Members</a><br>
<a href="#groupMembersPopup" class="popupContentLinks">Group Members</a><br>
<a href="#affiliatesPopup" class="popupContentLinks">Affiliates</a>
</div>

</div>
<div class="bottomIconsContainer" margin-bottom:10px;>
<img src="https://i.imgur.com/lcBmMuL.png">
</div>
</div>
</body>
</html>