Custom Order - Olivia

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

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

b{
color: #fff;
background-color: #bd2420;
padding: 5px;
line-height: 28px;
}

a.contentLinks:link, a.contentLinks:visited {
background-color: #a9898f;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
width: 186px;
border-bottom: solid 5px #fff;
font-family: Georgia;
text-transform: uppercase;
font-size: 13px;
}

a.contentLinks:hover, a.contentLinks:active {
background-color: #fff;
color:#a9898f;
}

#navigation{
display:none;
}

#navigation:target{
display:block;
width: 475px;
height: 527px;
margin-top: -580px;
margin-left: 264px;
z-index: 9999;
position: absolute;
background:#fff;
padding:20px;
overflow:auto;
}


#loveInterest{
display:none;
}

#loveInterest:target{
display:block;
width: 475px;
height: 527px;
margin-top: -580px;
margin-left: 264px;
z-index: 9999;
position: absolute;
background:#fff;
padding:20px;
overflow:auto;
}

#instagram{
display:none;
}

#instagram:target{
display:block;
width: 475px;
height: 527px;
margin-top: -580px;
margin-left: 264px;
z-index: 9999;
position: absolute;
background:#fff;
padding:20px;
overflow:auto;
}


#twitter{
display:none;
}

#twitter:target{
display:block;
width: 475px;
height: 527px;
margin-top: -580px;
margin-left: 264px;
z-index: 9999;
position: absolute;
background:#fff;
padding:20px;
overflow:auto;
}




h1{
margin: 0;
width: 200px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
text-transform: uppercase;
color: #fff;
background: #bd2420;
font-size: 19px;
}


h2{
margin: 0;
width: 514px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
text-transform: uppercase;
color: #fff;
background: #bd2420;
font-size: 19px;
}

h3{
margin: 0;
width: 300px;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
text-transform: uppercase;
color: #fff;
background: #bd2420;
font-size: 19px;
}

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

.container {
width:800px;
height:600px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
overflow:hidden;
margin:auto;
color:#fff;
background-color:#f6f5f5;
font-family: 'Abel', sans-serif;
}
blockquote{
text-align: justify;
width: 156px;
border-left: solid 5px #bd2420;
padding-left: 7px;
margin-left: 16px;
text-transform: uppercase;
font-size: 11px;
background: #fff;
padding-right: 12px;
padding-top: 10px;
padding-bottom: 12px;
}

.instaBio{
font-size: 12px;
color: #000;
font-family: Georgia;
}

a.guidanceLinks:link, a.guidanceLinks:visited {
background-color: #bd2420;
color: #ffffff;
padding: 13px 13px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
}

a.guidanceLinks:hover, a.guidanceLinks:active {
background-color: #ce3436;
}

.leftSide{
width: 200px;
height: 560px;
display: inline-block;
vertical-align: top;
padding: 20px;
}

.rightSide{
width: 517px;
height: 560px;
padding: 20px;
display: inline-block;
vertical-align: top;
}



#topTwitterHeadBar {
width: 465px;
height: 151px;
padding: 5px;
}

#twitterProfileIcon img {
width:100px;
height:100px;
border:3px solid #fff;
border-radius:100%;
margin-top:-70px;
margin-left:5px;
}

#twitterHeader img {
width:465px;
}



#tweet {
margin-top:75px;
height:auto;
width:460px;
padding:10px 5px;
margin-left:5px;
margin-bottom:3px;
}


#tweet img {
width:60px;
border-radius:100%
}

#tweetText{
margin-top: -54px;
margin-left: 75px;
}


::-webkit-scrollbar-thumb:vertical {height:12px; background:#fff; border-top:10px solid #bd2420; border-bottom:10px solid #bd2420;}
::-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">
<div class="leftSide">
<h1>Olivia Gatina</h1>
<img src="https://i.imgur.com/fQUT2Ti.png">
<h1>xoxolivia</h1>
<blockquote>
You're not my homeland anymore. So what am I defending now?
</blockquote>
<center>
<a href="#navigation" class="guidanceLinks"><span class="th th-bee"></span></a>
<a href="#loveInterest" class="guidanceLinks"><span class="th th-heart-1"></span></a>
<a href="#instagram" class="guidanceLinks"><span class="th th-instagram"></span></a>
<a href="#twitter" class="guidanceLinks"><span class="th th-twitter"></span></a>
</center>
</div>

<div id="navigation">
<h2 style="width: 475px;">Find Your Way</h2>
<img src="https://i.imgur.com/1pFcvsw.png" style="margin-bottom:5px;">
<a href="/home.php" class="contentLinks">home</a>
<a href="/" class="contentLinks">message</a><br>
<a href="/" class="contentLinks">comment</a>
<a href="/" class="contentLinks">photos</a>
<br>
<a href="/" class="contentLinks">stream</a>
<a href="/" class="contentLinks">blog</a>
</div>

<div id="loveInterest">
<h2 style="width: 475px;">Follow Your Heart</h2>
<img src="https://i.imgur.com/cbVWzZS.png" style="margin-bottom:5px;">
<b>status:</b> here <br>
<b>since when:</b> here <br>
<b>to whom:</b> here <br>
<b>Comments:</b> here<br>
</div>

<div id="instagram">
<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/VN41RWt.png" style="margin-left: 29px; margin-top: 20px; border-radius: 50%;">
<div style="width: 289px; height: 63px; display: inline-block; vertical-align: top; margin-top: 28px; margin-left: 11px;">
<h4 style="font-size:15px; text-align:left; color:#000;">@username</h2>
<h4 style="font-size: 10px; text-align: left; color: #000; margin-top: 7px;width: 500px;"><b style="color:#da8c81;">###</b> Posts <b style="color:#da8c81;">###</b> Followers <b style="color:#da8c81;">###</b> Following</h2>
<div class="instaBio" style="color: #000; 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.
</div>
</div>
<center>
<img src="https://i.imgur.com/TdF7sjm.png" style="width: 130px; height: 130px; margin-top: 42px;">
<img src="https://i.imgur.com/XKuurU8.png" style="width: 130px; height: 130px; margin-left:10px;">
<img src="https://i.imgur.com/57jGvrR.png" style="width: 130px; height: 130px; margin-left:10px;">
<br>
<img src="https://i.imgur.com/23Uhmq4.png" style="width: 130px; height: 130px; margin-top:10px;">
<img src="https://i.imgur.com/VK8uVWG.png" style="width: 130px; height: 130px; margin-left:10px;">
<img src="https://i.imgur.com/XOGxYPh.png" style="width: 130px; height: 130px; margin-left:10px;">
</center>
</div>
<div id="twitter">
<div id="topTwitterHeadBar">
<div id="twitterHeader">
<img src="https://i.imgur.com/D01SIEF.png">
</div>
<div id="twitterProfileIcon">
<img src="https://i.imgur.com/VN41RWt.png">
</div>
<b style="color: #bd2420; background: none; padding: 0px; line-height: inherit;font-size: 26px;">olivia</b>
<br>
@xoxolivia<br>
<div class="instaBio" style="color: #000; 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.
</div>
</div>

<div id="tweet"><img src="https://i.imgur.com/VN41RWt.png">
<div id="tweetText">
<b>olivia</b> @xoxolivia<br>
tweet goes here.
</div>
</div>


<div id="tweet" style="margin-top: 0;"><img src="https://i.imgur.com/VN41RWt.png">
<div id="tweetText">
<b>olivia</b> @xoxolivia<br>
tweet goes here.
</div>
</div>


<div id="tweet" style="margin-top: 0;"><img src="https://i.imgur.com/VN41RWt.png">
<div id="tweetText">
<b>olivia</b> @xoxolivia<br>
tweet goes here.
</div>
</div>


<div id="tweet" style="margin-top: 0;"><img src="https://i.imgur.com/VN41RWt.png">
<div id="tweetText">
<b>olivia</b> @xoxolivia<br>
tweet goes here.
</div>
</div>


<div id="tweet" style="margin-top: 0;"><img src="https://i.imgur.com/VN41RWt.png">
<div id="tweetText">
<b>olivia</b> @xoxolivia<br>
tweet goes here.
</div>
</div>


</div>




<div class="rightSide">
<center>
<div style="width: 514px; height: 250px;font-size:12px; font-family:Georgia; text-align:justify;">
<h2>this is the story of the girl</h2>
<div style="width:475px; padding:20px; text-align:justify; height:210px; overflow:auto; background:#fff;">
<img src="https://i.imgur.com/p5jTuD1.png">
This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go. This is where your story will go.
</div>
<div style="width: 300px; height: 270px; background: #000; display: inline-block; vertical-align: top; margin-top: 10px;">
<h3>Basic Information</h3>
<div style="width: 260px; height: 199px; background: #fff; padding: 20px; overflow:auto;">

<b>Full Name:</b> here
<br>
<b>Nickname(s):</b> here
<br>
<b>Age:</b> here
<br>
<b>Date of Birth:</b> here
<br>
<b>Hometown:</b> here
<br>
<b>Current Location:</b> here
<br>
<b>Ethnicity:</b> here
<br>
<b>Nationality:</b> here
<br>
<b>Gender:</b> here
<br>
<b>Pronouns:</b> here
<br>
<b>Orientation:</b> here
<br>
<b>Religion:</b> here
<br>
<b>Occupation:</b> here
<br>
<b>Hair Color:</b> here
<br>
<b>Eye Color:</b> here
<br>
<b>Height:</b> here
<br>
<b>Build:</b> here
<br>
<b>Tattoos:</b> here
<br>
<b>Piercings:</b> here
<br>
<b>Clothing Style:</b> here
<br>
<b>Distinguishing Characteristics:</b> here
</div>
</div>

<div style="width: 200px; height: 270px; background: #000; display: inline-block; vertical-align: top; margin-top: 10px; margin-left: 10px;">
<h1>
I owe you
</h1>
<div style="width:160px; height:49px; background:#fff; padding:20px; overflow:auto;">
<b>name</b> - <i>starter/reply</i> - 00/00<br>
<b>name</b> - <i>starter/reply</i> - 00/00<br>
<b>name</b> - <i>starter/reply</i> - 00/00<br>
<b>name</b> - <i>starter/reply</i> - 00/00<br>
<b>name</b> - <i>starter/reply</i> - 00/00<br>
<b>name</b> - <i>starter/reply</i> - 00/00<br>
</div>
<h1>
You owe me
</h1>
<div style="width:160px; height:49px; background:#fff; padding:20px; overflow:auto;">
<b>name</b> - <i>starter/reply</i> - 00/00<br>
<b>name</b> - <i>starter/reply</i> - 00/00<br>
<b>name</b> - <i>starter/reply</i> - 00/00<br>
<b>name</b> - <i>starter/reply</i> - 00/00<br>
<b>name</b> - <i>starter/reply</i> - 00/00<br>
<b>name</b> - <i>starter/reply</i> - 00/00<br>
</div>
<h1>
updated: --/--
</h1>
</div>

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