Custom Order - Protego - 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=Oswald: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/EZ1NZq7.png');
background-size:cover;
background-position:bottom left;
}

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

blockquote{
text-align:justify;
}

a.affiliateLinks:link, a.affiliateLinks:visited {
background-color: #5d1010;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
width: 100px;
font-family: Georgia;
font-size: 10px;
text-transform: uppercase;
margin:0;
}

a.affiliateLinks:hover, a.affiliateLinks:active {
background-color: #0c0c0c;
}

a:link, a:active, a:visited {
color: #fff;
font-family: Georgia;
font-size: 10px;
display: inline-block;
margin-right: 34px;
text-transform: uppercase;
width: 100%;
text-align: center;
background: #5d1010;
padding-top: 7px;
padding-bottom: 7px;
border-bottom: 3px solid #000;
}

a:hover{
text-decoration:none;
color:#0d0d0d;
}

b{
color: #ffffff;
background: #5d1010;
padding: 5px;
line-height: 30px;
}

.container {
width:800px;
height:604px;
position:absolute;
right:150px;
top:150px;
overflow:hidden;
margin:auto;
color:#fff;
background-color:#0c0c0c;
font-family: 'Abel', sans-serif;
padding: 12px;
}

h1{
font-family: 'Oswald', sans-serif;
color: #5d1010;
text-transform: uppercase;
width: 100%;
text-align: center;
font-size: 37px;
margin: 0;
margin-top: 5px;
}


h2{
font-family: 'Oswald', sans-serif;
background-color: #5d1010;
text-transform: uppercase;
width: 100%;
text-align: center;
font-size: 17px;
margin: 0;
margin-top: 5px;
color:#fff;
}

 ul {
  list-style-type: none;
}

input[type=radio] {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

.tabs {
  position: relative;
  z-index: 999;
  height: 42px;
  white-space: nowrap;
  font-size: 0;
}

.tabs label {
  display: inline-block;
  vertical-align: bottom;
  margin-right: 4px;
  margin-bottom: -1px;
  margin-left: -1px;
  background: #EEE;
  padding: 12px 24px;
  border: solid 1px #151414;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
  background-color: #151414;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  box-shadow: 0 -1px 6px rgba(0,0,0,0.1) inset;
  color: #949191;
}

.tabs label:first-child {
  margin-left: 0;
}

.tabs label:hover {
  background-color: #DDD;
}

input:nth-child(1):checked ~ .tabs label:nth-child(1),
input:nth-child(2):checked ~ .tabs label:nth-child(2),
input:nth-child(3):checked ~ .tabs label:nth-child(3),
input:nth-child(4):checked ~ .tabs label:nth-child(4) {
  padding: 14px 24px;
  border-bottom-color: #5d1010;
  background: #5d1010;
  box-shadow: none;
  color: #fff;
}

.sections {}

.sections li {
  display: none;
  height: 220px;
  padding: 1em;
  border-radius: 0 5px 5px 5px;
  background-color: #0c0c0c;
  box-shadow: 1px 1px 20px rgba(0,0,0,0.4);
margin-left: -40px;
margin-top: -12px;
overflow:auto;
color: #777;
}

input:nth-child(1):checked ~ .sections li:nth-child(1),
input:nth-child(2):checked ~ .sections li:nth-child(2),
input:nth-child(3):checked ~ .sections li:nth-child(3),
input:nth-child(4):checked ~ .sections li:nth-child(4) {
  display: block;
}


::-webkit-scrollbar-thumb:vertical {height:12px; background:#0d0d0d; border-top:10px solid #5d1010; border-bottom:10px solid #5d1010;}
::-webkit-scrollbar-thumb:horizontal {background-color:#0d0d0d;}
::-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 style="width:300px; height:500px; display:inline-block;vertical-align:top;">
<img src="https://i.imgur.com/FWYsL0f.gif">
<div style="width: 147px; height: 109px; vertical-align: top; display: inline-block;">
<a href="/">home</a>
<a href="/">audition</a>
<a href="/">content</a>
<a href="/">rules</a>
</div>
<img src=https://i.imgur.com/DVobz1K.gif">
<div style="width:280px; height:100px; text-align:justify; padding:10px; color:#777; overflow:auto;">
<b>--/--/---</b> What happened will go here. <br>
<b>--/--/---</b> What happened will go here. <br>
<b>--/--/---</b> What happened will go here. <br>
<b>--/--/---</b> What happened will go here. <br>
<b>--/--/---</b> What happened will go here. <br>
<b>--/--/---</b> What happened will go here. <br>
<b>--/--/---</b> What happened will go here. <br>
<b>--/--/---</b> What happened will go here. <br>
<b>--/--/---</b> What happened will go here. <br>
<b>--/--/---</b> What happened will go here. <br>
<b>--/--/---</b> What happened will go here. <br>
</div>
<img src="https://i.imgur.com/PHWrMeJ.gif" style="margin-top:7px;">
</div>
<div style="width:496px; height:500px; display:inline-block;vertical-align:top;">
<img src="https://i.imgur.com/I0awGG6.gif">
<div>
 <input type="radio" id="s1" name="s" checked/>
  <input type="radio" id="s2" name="s"/>
  <input type="radio" id="s3" name="s"/>
  <input type="radio" id="s4" name="s"/>
  <div class="tabs">
    <label for="s1">Storyline</label>
    <label for="s2">Members</label>
    <label for="s3">Owners</label>
    <label for="s4">Most Wanted</label>
  </div>
  <ul class="sections">
<li>
<h1>This is the Storyline</h1>
Storyline will go here.
</li>
<li>
<h1>Our Current Members</h1>
<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>
<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>
</li>
<li>
<h1>Meet the Owners</h1>
<img src="https://i.imgur.com/bfakeWZ.gif">
<div style="width: 266px; height: 157; vertical-align: top; overflow: auto; display: inline-block; color: #5d5d5d;">
<h2>Owner One</h2>
<blockquote>something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. </blockquote>

<h2>Owner Two</h2>
<blockquote>something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. something about them as an owner here. </blockquote>
</div>
</li>
<li>
<h1>Most Wanted Roles</h1>
<h2>Gryffindor</h2>
<blockquote>
name here<br>
name here<br>
name here<br>
name here<br>
name here<br>
name here<br>
name here<br>
</blockquote>
<h2>Ravenclaw</h2>
<blockquote>
name here<br>
name here<br>
name here<br>
name here<br>
name here<br>
name here<br>
name here<br>
</blockquote>
<h2>Slytherin</h2>
<blockquote>
name here<br>
name here<br>
name here<br>
name here<br>
name here<br>
name here<br>
name here<br>
</blockquote>
<h2>Hufflepuff</h2>
<blockquote>
name here<br>
name here<br>
name here<br>
name here<br>
name here<br>
name here<br>
name here<br>
</blockquote>
<h2>Professors</h2>
<blockquote>
name here<br>
name here<br>
name here<br>
name here<br>
name here<br>
name here<br>
name here<br>
</blockquote>
</li>
</ul>
</div>
</div>
<div style="width:800px; height:100px; overflow:auto; display:block;">
<center>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>
<a href="/" class="affiliateLinks">affiliate name</a>

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