Custom Order - amarum

<!--about me-->
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');
body {
background-color:#232426;
background-repeat:no-repeat;
background-attachment:fixed;
margin: 0;
overflow:auto;
background-image:url('https://i.imgur.com/5HAk9lx.png');
background-size:cover;
}

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

#ravenclaw{
display:none;
}

#ravenclaw:target{
display:block;
width:520px;
height:530px;
background:#fff;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}


#characterstudy{
display:none;
}

#characterstudy:target{
display:block;
width:520px;
height:530px;
background:#fff;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}



#occupation{
display:none;
}

#occupation:target{
display:block;
width:520px;
height:530px;
background:#fff;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}

.container {
width:963px;
height:500px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
overflow:hidden;
margin:auto;
color:#fff;
font-family: 'Abel', sans-serif;
}

.leftNavigation{
width:250px;
height:500px;
background-color:#c1a2a8;
display:inline-block;
vertical-align:top;
}

.middleContainer{
width:550px;
height:500px;
background-color:#f2f2f2;
margin-left:10px;
display:inline-block;
vertical-align:top;
}

h1{
font-family: 'Dancing Script', cursive;
color: #fff;
margin: 0;
margin-top: 19px;
font-size: 89px;
width: 250px;
text-align: center;
}

h2{
font-family: Georgia;
font-size: 19px;
background: #c1a2a8;
text-transform: uppercase;
color: #fff;
width: 100%;
text-align: center;
margin: 0;
}


h3{
font-family: 'Dancing Script', cursive;
color: #868179;
margin: 0;
margin-top: 1px;
font-size: 23px;
text-transform: lowercase;
width:100%;
}

blockquote{
width: 200px;
margin-left: 13px;
border-left: 5px solid #ded8cf;
background-color: #f2f2f2;
text-align: justify;
font-family: Georgia;
font-size: 11px;
color: #868179;
padding: 10px;
text-transform: uppercase;
letter-spacing: 3px;
}

a.leftNavigationLinks:link, a.leftNavigationLinks:visited {
color: #c1a2a8;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
width: 164px;
border-left: 5px solid #ded8cf;
background-color: #f2f2f2;
margin-left: 13px;
border-right: 5px solid #ded8cf;
margin-bottom: 5px;
}

a.leftNavigationLinks:hover, a.leftNavigationLinks:active {
background-color: #c1a2a8;
color:#f2f2f2;
}

a.bottomLinks:link, a.bottomLinks:visited {
background-color: #c1a2a8;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
width: 119px;
margin-top: 17px;
text-transform: uppercase;
font-family: Georgia;
margin-left: 5px;
}

a.bottomLinks:hover, a.bottomLinks:active {
background-color: #ded8cf;
}


::-webkit-scrollbar-thumb:vertical {height:12px; background:#f2f2f2; border-top:10px solid #f2f2f2; border-bottom:10px solid #f2f2f2;}
::-webkit-scrollbar-thumb:horizontal {background-color:#f2f2f2;}
::-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="leftNavigation">
<h1>L</h1>
<blockquote>
Normality is a paved road: it's comfortable to walk, but no flowers can grow.
</blockquote>
<a href="" class="leftNavigationLinks">Home</a>
<a href="" class="leftNavigationLinks">Message</a>
<a href="" class="leftNavigationLinks">Comment</a>
<a href="" class="leftNavigationLinks">Stream</a>
<a href="" class="leftNavigationLinks">Bulletin</a>
</div>
<div class="middleContainer">
<center>
<div style="margin-top: 15px;width:165px; height:100px; background:#000; margin-right:10px; display:inline-block;">
<img src="https://i.imgur.com/fVMx1MN.png">
</div>
<div style="width:165px; height:100px; background:#000; margin-right:10px; display:inline-block;">
<img src="https://i.imgur.com/9C4jSxC.png">
</div>
<div style="width:165px; height:100px; background:#000; display:inline-block;">
<img src="https://i.imgur.com/FKerJxB.png">
</div>
</center><br>
<div style="width: 300px; height: 283px; display: inline-block; background: #f2f2f2; margin-left: 13px; border: solid 3px #c1a2a8; vertical-align:top;">
<h2>Luna Lovegood</h2>
<h3 style="margin-left:10px;">Don't worry...</h3>
<h3 style="text-align: right; margin-left: -5px; margin-top: -14px;">Youre just as sane as I am.</h3>
<img src="https://i.imgur.com/CYUNMG8.png">
<div style="width: 280px; height: 98px; padding:10px; overflow: auto;">
This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this. This is where you would write about your biography and what not. You know? You got this.
</div>
</div>
<div style="width: 202px; height: 290px; display: inline-block; margin-left: 13px; vertical-align: top;">
<img src="https://i.imgur.com/Bi4Vxuc.png">
<div style="width: 98px; height: 76px; display: inline-block; background: #f2f2f2; margin-left: 10px; vertical-align: top; overflow:auto; text-align:justify;">
<h2 style="font-size: 11px; text-transform: lowercase;">Extra box 1</h2>
Talk about whatever you want to talk about here. Talk about whatever you want to talk about here. Talk about whatever you want to talk about here. Talk about whatever you want to talk about here. Talk about whatever you want to talk about here. Talk about whatever you want to talk about here.
</div>
<br>
<div style="width: 98px; height: 76px; display: inline-block; background: #f2f2f2; margin-right: 10px; vertical-align: top; overflow:auto;margin-top: 13px; text-align:justify;">
<h2 style="font-size: 11px; text-transform: lowercase;">Relationship</h2>
<b>status</b> here <br>
<b>since</b> here<br>
<b>to whom</b> here<br>
<b>comments</b> here<br>
</div><img src="https://i.imgur.com/QqCM9OH.png" margin-top:10px;"><br>
<img src="https://i.imgur.com/S2D129G.png" style="margin-top:10px;"> <div style="width: 98px; height: 76px; display: inline-block; background: #f2f2f2; margin-left: 10px; vertical-align: top; overflow:auto;margin-top: 13px; text-align:justify;">
<h2 style="font-size: 11px; text-transform: lowercase;">Extra box 2</h2>
Talk about whatever you want to talk about here. Talk about whatever you want to talk about here. Talk about whatever you want to talk about here. Talk about whatever you want to talk about here. Talk about whatever you want to talk about here. Talk about whatever you want to talk about here.
</div>
</div>
<div style="width:548px; height:60px;text-align: center;">
<a href="#ravenclaw" class="bottomLinks">ravenclaw</a>
<a href="#occupation" class="bottomLinks">occupation</a>
<a href="#characterstudy" class="bottomLinks">character study</a>
</div>

</div>
<div style="margin-left: 10px; vertical-align: top; width: 130px; height: 500px; background: #f2f2f2; display: inline-block; text-align:center; overflow:auto;">
<a href="#"><img src="https://i.imgur.com/Nd0cM2A.png"></a>
<a href="#"><img src="https://i.imgur.com/t8OT0iW.png" style="margin-top:10px;"></a>
<a href="#"><img src="https://i.imgur.com/4eNBN4E.png" style="margin-top:10px;"></a>
<a href="#"><img src="https://i.imgur.com/SWsXPLM.png" style="margin-top:10px;"></a>
<a href="#"><img src="https://i.imgur.com/INMzRx2.png" style="margin-top:10px;"></a>
</div>
</div>

<div id="ravenclaw">
<div style="width:510px; margin-top:4px;padding-right:10px; text-align:right"><a href="#close" style="color:#000; font-family:georgia;">X</a></div>
<img src="https://i.imgur.com/SMp4WsC.png">
</div>

<div id="occupation">
<div style="width:510px; margin-top:4px;padding-right:10px; text-align:right"><a href="#close" style="color:#000; font-family:georgia;">X</a></div>
<img src="https://i.imgur.com/pbocIju.png">
</div>

<div id="characterstudy">
<div style="width:510px; margin-top:4px;padding-right:10px; text-align:right"><a href="#close" style="color:#000; font-family:georgia;">X</a></div>
<img src="https://i.imgur.com/Nt2B3cp.png">
</div>
</body>
</html>