Custom Order - Aubrey - Customization

<!--about me-->
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500&family=Raleway:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lobster+Two&display=swap');

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

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


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

.rightSide{
width:596px;
height:395px;
display:inline-block;
vertical-align:top;
}

.leftSide{
width: 281px;
padding: 10px;
height: 395px;
display: inline-block;
vertical-align: top;
}

.bottomBar{
width: 850px;
height: 79px;
text-align: center;
margin-top: -19px;
margin-left: 25px;
}

.biographyHolder{
width: 531px;
height: 317px;
padding: 20px;
overflow: auto;
vertical-align: top;
text-align: justify;
background: #a891c1;
margin-top: 20px;
color: #fff;
font-size: 12px;
}


#instagramBox{
display:none;
}


#instagramBox:target{
display:block;
width: 571px;
height: 357px;
vertical-align: top;
text-align: justify;
background: #a891c1;
margin-top: 20px;
color: #fff;
font-size: 12px;
position: fixed;
top: 1px;
left: 278px;
right: 0;
bottom: 0;
z-index: 999;
margin: auto;
}

#connectionsBox{
display:none;
}


#connectionsBox:target{
display:block;
width: 571px;
height: 357px;
vertical-align: top;
text-align: justify;
background: #a891c1;
margin-top: 20px;
color: #fff;
font-size: 12px;
position: fixed;
top: 1px;
left: 278px;
right: 0;
bottom: 0;
z-index: 999;
margin: auto;
}

.connectionHolder{
display: inline-block;
height: 290px;
width: 286px;
margin-top: 25px;
margin-left: -7px;
background: #fff;
overflow: auto;
vertical-align: top;
padding:10px;
}

.credit{
position:fixed;
bottom:5;
right:5;
font-size:20px;
color:#a65f64;
}

a.closeTabs:link, a.closeTabs:active, a.closeTabs:visited {
color:#fff;
font-size:12px;
}

a.closeTabs:hover{
color:#a65f64;
text-decoration:none;
}

a:link, a:active, a:visited {
color:#a65f64;
font-size:20px;
}

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

a.iconNav:link, a.iconNav:visited {
background: #a891c1;
width: 80px;
height: 62px;
display: inline-block;
font-size: 37px;
padding-top: 18px;
color: #fff;
margin-top: -1px;
text-align: center;
}

a.iconNav:hover, a.iconNav:active{
background:#fff;
color:#a891c1;
text-decoration:none;
}

h1{
font-family: 'Playfair Display', serif;
margin: 0;
width: 100%;
text-align: center;
text-transform: uppercase;
font-size: 69px;
color: #a891c1;
letter-spacing: 5px;
}

h2{
font-family: 'Raleway', sans-serif;
margin: 0;
width: 100%;
text-align: center;
font-size: 18px;
letter-spacing: 3px;
margin-top: -10;
color: #494483;
}

h3{
font-family: 'Playfair Display', serif;
margin: 0;
width: 100%;
text-align: center;
text-transform: uppercase;
font-size: 24px;
color: #fff;
letter-spacing: 0px;
margin-bottom: 10px;
}

h4{
font-family: 'Lobster Two', cursive;
color:#a891c1;
font-size:35px;
margin:0;
}

blockquote{
font-size: 12px;
color: #ae4e98;
font-family: Georgia;
}

::-webkit-scrollbar-thumb:vertical {height:12px; background:#fff; border-top:10px solid #a891c1; border-bottom:10px solid #a891c1;}
::-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">
<h1>First Middle Last</h1>
<h2>a soulmate isnt always a boyfriend, sometimes its your best friend</h2>
<div class="leftSide">
<center>
<img src="https://i.imgur.com/gjsnoDF.png" style="margin-top:10px">
</center>
</div>
<div class="rightSide">
<div class="biographyHolder">
<h3>I used to scream ferociously</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed adipiscing diam donec adipiscing tristique risus nec feugiat in. Nec ullamcorper sit amet risus nullam eget. Vivamus arcu felis bibendum ut tristique et egestas quis. Etiam erat velit scelerisque in dictum non consectetur a erat. Vel risus commodo viverra maecenas accumsan lacus vel facilisis. Purus in mollis nunc sed id semper. In est ante in nibh mauris cursus mattis. Dapibus ultrices in iaculis nunc sed augue lacus. Nibh sed pulvinar proin gravida hendrerit lectus. Consequat semper viverra nam libero justo. Et ligula ullamcorper malesuada proin. Quam lacus suspendisse faucibus interdum posuere lorem. Mi tempus imperdiet nulla malesuada pellentesque elit. Sed vulputate odio ut enim.
<br><br>
Sit amet venenatis urna cursus eget nunc scelerisque viverra mauris. Auctor elit sed vulputate mi sit amet mauris. Scelerisque eleifend donec pretium vulputate sapien nec. Sodales neque sodales ut etiam sit amet nisl purus in. Mi proin sed libero enim sed faucibus turpis in. Ornare quam viverra orci sagittis eu volutpat. Viverra adipiscing at in tellus integer feugiat. Faucibus nisl tincidunt eget nullam. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus. Venenatis tellus in metus vulputate. Habitant morbi tristique senectus et netus et. Risus commodo viverra maecenas accumsan lacus vel. Non quam lacus suspendisse faucibus interdum posuere lorem. Mattis molestie a iaculis at erat. Quis eleifend quam adipiscing vitae proin sagittis. Adipiscing enim eu turpis egestas pretium. Volutpat diam ut venenatis tellus in metus vulputate.
<br><br>
Elit sed vulputate mi sit amet. Dignissim sodales ut eu sem. Mattis nunc sed blandit libero volutpat sed. Sit amet porttitor eget dolor. Scelerisque purus semper eget duis at tellus at. Dolor morbi non arcu risus quis. A pellentesque sit amet porttitor eget dolor. Venenatis a condimentum vitae sapien pellentesque habitant. Pellentesque habitant morbi tristique senectus et netus et malesuada. Sed risus pretium quam vulputate dignissim suspendisse in. Aliquet nec ullamcorper sit amet risus nullam. Non blandit massa enim nec dui nunc mattis enim ut. Egestas diam in arcu cursus euismod quis viverra nibh cras. Mus mauris vitae ultricies leo integer. Id aliquet lectus proin nibh nisl condimentum id venenatis a. Et pharetra pharetra massa massa ultricies mi.
<br><br>
Eu mi bibendum neque egestas congue quisque. Curabitur gravida arcu ac tortor. Ac auctor augue mauris augue. Duis at consectetur lorem donec massa sapien faucibus et molestie. Elit eget gravida cum sociis. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Turpis egestas maecenas pharetra convallis posuere morbi. Nisi lacus sed viverra tellus in hac habitasse platea. Egestas pretium aenean pharetra magna. Leo vel orci porta non pulvinar neque laoreet suspendisse. Et netus et malesuada fames ac turpis. Sed blandit libero volutpat sed cras ornare arcu. Praesent tristique magna sit amet purus.
<br><br>
Viverra nibh cras pulvinar mattis nunc sed. Diam maecenas ultricies mi eget. Arcu dui vivamus arcu felis bibendum ut tristique et egestas. Aliquam sem fringilla ut morbi tincidunt. Elit scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Facilisi morbi tempus iaculis urna. Sollicitudin tempor id eu nisl nunc mi. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Nulla posuere sollicitudin aliquam ultrices sagittis orci a scelerisque purus. Scelerisque eleifend donec pretium vulputate sapien nec sagittis aliquam. Vestibulum morbi blandit cursus risus at ultrices. Interdum consectetur libero id faucibus nisl tincidunt eget.
</div>
</div>
<div class="bottomBar">
<a href="/home.php" class="iconNav" title="home"><span class="th th-bee"></span></a>
<a href="/add_comment.php?member_id=" class="iconNav" style="margin-left:30px;" title="comment"><span class="th th-flower-1-o"></span></a>
<a href="/send_message.php?member_id=" class="iconNav" style="margin-left:30px;" title="message"><span class="th th-fox"></span></a>
<a href="/albums.php?member_id=" class="iconNav" style="margin-left:30px;" title="gallery"><span class="th th-fire"></span></a>
<a href="https://www.roleplayer.me/view_blog.php?id=" class="iconNav" style="margin-left:30px;" title="blog"><span class="th th-notebook
"></span></a>
<a href="#connectionsBox" class="iconNav" style="margin-left:30px;" title="connections"><span class="th th-beehive"></span></a>
<a href="#instagramBox" class="iconNav" style="margin-left:30px;" title="instagram"><span class="th th-instagram-o"></span></a>
</div>
</div>
<div class="credit">
<a href="/1631904"><span class="th th-alien-o"></span></a>
</div>
<div id="connectionsBox">
<div style="width: 561px; text-align: right; margin-bottom: -14px; margin-top: 5px;"><a href="#close" class="closeTabs">X</a></div>
<img src="https://i.imgur.com/bSpUO6m.png" style="margin-top:5px;">
<div class="connectionHolder">
<h4>Connection Name</h4>
<h2 style="font-size:15px; text-align:left;">tagline here</h2>
<blockquote>
About the connection will go here, write as little or as much as you want, it really doesnt matter.
</blockquote>
<br><br>
<h4>Connection Name</h4>
<h2 style="font-size:15px; text-align:left;">tagline here</h2>
<blockquote>
About the connection will go here, write as little or as much as you want, it really doesnt matter.
</blockquote>
<br><br>
<h4>Connection Name</h4>
<h2 style="font-size:15px; text-align:left;">tagline here</h2>
<blockquote>
About the connection will go here, write as little or as much as you want, it really doesnt matter.
</blockquote>
<br><br>
<h4>Connection Name</h4>
<h2 style="font-size:15px; text-align:left;">tagline here</h2>
<blockquote>
About the connection will go here, write as little or as much as you want, it really doesnt matter.
</blockquote>
</div>
</div>
<div id="instagramBox">
<div style="width: 561px; text-align: right; margin-bottom: -14px; margin-top: 5px;"><a href="#close" class="closeTabs">X</a></div>
<img src="https://i.imgur.com/AAaA38B.png" style="margin-left:75px;margin-top: 10px;">
<div style="width: 289px; height: 63px; display: inline-block; vertical-align: top; margin-top: 28px; margin-left: 11px;">
<h2 style="font-size:15px; text-align:left; color:#fff;">@username</h2>
<h2 style="font-size: 10px; text-align: left; color: #fff; margin-top: 7px;"><b style="color:#2b2250;">###</b> Posts <b style="color:#2b2250;">###</b>Followers <b style="color:#2b2250;">###</b> Following</h2>
<blockquote style="color: #fff; font-size: 12px; margin-left: 1px; margin-top: 5px;">
do a little description here, like on insta. Talk about pizza or your animal or something.
</blockquote>
</div>
<center>
<img src="https://i.imgur.com/Fc4Brbi.png" style="width: 100px; height: 100px; margin-top: 22px;">
<img src="https://i.imgur.com/3SszP8l.png" style="width: 100px; height: 100px; margin-left:10px;">
<img src="https://i.imgur.com/zW5q49G.png" style="width: 100px; height: 100px; margin-left:10px;">
<br>
<img src="https://i.imgur.com/oBim3ps.png" style="width: 100px; height: 100px; margin-top:10px;">
<img src="https://i.imgur.com/q9BDIMp.png" style="width: 100px; height: 100px; margin-left:10px;">
<img src="https://i.imgur.com/gBoNEOx.png" style="width: 100px; height: 100px; margin-left:10px;">
</center>
</div>
</body>
</html>