Custom Order - Giovanni

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

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

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

a:link, a:active, a:visited {
color: #fff;
font-family: Georgia;
font-size: 12px;
display: inline-block;
margin-top: 7px;
margin-right: 34px;
text-transform: uppercase;
}

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

b{
color:#c29aa2;
}

.container {
width:800px;
height:500px;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
overflow:hidden;
margin:auto;
color:#fff;
background-color:#0d0d0d;
font-family: 'Abel', sans-serif;
padding: 12px;
border: solid 5px #c29aa2;
}

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

h2{
font-family: 'Montserrat', sans-serif;
color: #a16053;
text-transform: uppercase;
width: 100%;
text-align: center;
font-size: 20px;
margin: 0;
letter-spacing: 11px;
}

h3{
font-family: 'Montserrat', sans-serif;
color: #a16053;
text-transform: uppercase;
width: 100%;
text-align: center;
font-size: 15px;
margin: 0;
letter-spacing: 6px;
margin-bottom: 10px;
}

h4{
font-family: 'Montserrat', sans-serif;
color: #a16053;
text-transform: uppercase;
font-size: 15px;
margin: 0;
letter-spacing: 6px;
margin-bottom: 10px;
padding: 16px;
}


h5{
font-family: 'Montserrat', sans-serif;
color: #ffffff;
text-transform: uppercase;
font-size: 21px;
margin: 0;
letter-spacing: 6px;
margin-bottom: 10px;
text-align: center;
}


h6{
font-family: 'Montserrat', sans-serif;
color: #ffffff;
text-transform: uppercase;
font-size: 21px;
margin: 0;
letter-spacing: 6px;
margin-bottom: 10px;
text-align: center;
background-color: #c29aa2;
padding: 6px;
}

.topBar{
width: 825px;
height: 30px;
background: #c29aa2;
margin-top: -12px;
margin-left: -12px;
text-align:right;
}

.wrapper {
width: 500px;
margin: 0 auto;
display: inline-block;
vertical-align: top;
margin-left: 17px;
}

.tabs {
position: relative;

height: 268px;
}
.tabs::before,
.tabs::after {
content: "";
display: table;
}
.tabs::after {
clear: both;
}
.tab {
float: left;
}
.tab-switch {
display: none;
}
.tab-label {
position: relative;
display: block;
line-height: 13px;
font-size: 12px;
height: 23px;
padding: 9px;
background: #c29aa2;
border-right: 0.125rem solid #0d0d0d;
color: #0d0d0d;
cursor: pointer;
top: 0;
transition: all 0.25s;
}
.tab-label:hover {
  top: -0.25rem;
  transition: top 0.25s;
}
.tab-content {
height: 177px;
position: absolute;
z-index: 1;
top: 2.75em;
left: 0;
padding: 1.618rem;
background: #0d0d0d;
color: #fff;
opacity: 0;
transition: all 0.35s;
overflow: auto;
text-align:justify;
}
.tab-switch:checked + .tab-label {
background: #fff;
color: #c29aa2;
border-bottom: 0;
border-right: 13px solid #fff;
transition: all 0.35s;
z-index: 1;
top: -0.0625rem;
}
.tab-switch:checked + label + .tab-content {
  z-index: 2;
  opacity: 1;
  transition: all 0.35s;
}


::-webkit-scrollbar-thumb:vertical {height:12px; background:#0d0d0d; border-top:10px solid #f0f0f0; border-bottom:10px solid #f0f0f0;}
::-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 class="topBar">
<a href="/home.php">home</a>
<a href="/add_comment.php?member_id=">comment</a>
<a href="/send_message.php?member_id=">message</a>
<a href="/status_stream.php?member_id=">stream</a>
<a href="/gallery.php?member_id=">photos</a>
<a href="/1631904" style="margin-right:6px;">credit</a>
</div>

<h1>
I'm doing good, I'm on some new shit
</h1>
<h2>
Been saying "yes" instead of "no"
</h2>
<img src="https://i.imgur.com/HFkHkll.png" style="margin-top:10px; margin-left:10px;">
<div class="wrapper">
<div class="tabs">
<div class="tab">
<input type="radio" name="css-tabs" id="tab-1" checked class="tab-switch">
<label for="tab-1" class="tab-label">The Storyline</label>
<div class="tab-content">
<h3>I thought I saw you at the bus stop, I didn't though</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa placerat duis ultricies lacus. Platea dictumst vestibulum rhoncus est pellentesque. Tempor id eu nisl nunc mi ipsum faucibus vitae. Ut aliquam purus sit amet luctus. Gravida arcu ac tortor dignissim convallis aenean et. Morbi tristique senectus et netus et malesuada fames ac. Nibh praesent tristique magna sit amet purus gravida quis. Duis at consectetur lorem donec massa sapien faucibus et molestie. Magna fringilla urna porttitor rhoncus. Etiam sit amet nisl purus in mollis nunc sed. Facilisi etiam dignissim diam quis enim lobortis. Cras semper auctor neque vitae tempus quam pellentesque. Vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Ultrices vitae auctor eu augue ut lectus. Sit amet risus nullam eget felis eget nunc lobortis mattis. Elementum curabitur vitae nunc sed velit dignissim sodales. Vitae congue eu consequat ac felis donec et.
<br><br>
Auctor eu augue ut lectus arcu bibendum at. Quis vel eros donec ac. Et tortor consequat id porta nibh venenatis. Vulputate odio ut enim blandit volutpat maecenas. Eget est lorem ipsum dolor sit. Dui id ornare arcu odio. Amet justo donec enim diam vulputate ut pharetra sit. Proin libero nunc consequat interdum varius. Quisque id diam vel quam elementum pulvinar etiam. Morbi tempus iaculis urna id volutpat lacus. Magna fringilla urna porttitor rhoncus dolor purus non enim praesent.
<br><br>
Aliquet bibendum enim facilisis gravida neque convallis a. Nisl nunc mi ipsum faucibus vitae aliquet nec. Eu sem integer vitae justo eget magna fermentum iaculis eu. Amet luctus venenatis lectus magna fringilla urna. Magna fringilla urna porttitor rhoncus dolor purus non enim. Parturient montes nascetur ridiculus mus. Fringilla phasellus faucibus scelerisque eleifend donec pretium. Gravida dictum fusce ut placerat orci nulla. Sem et tortor consequat id. Quam quisque id diam vel quam. Pretium aenean pharetra magna ac placerat vestibulum. At lectus urna duis convallis.
<br><br>
Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Sodales ut etiam sit amet nisl purus in mollis nunc. Dui faucibus in ornare quam viverra orci sagittis. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Et pharetra pharetra massa massa ultricies mi quis hendrerit. Enim diam vulputate ut pharetra sit amet. Et netus et malesuada fames ac turpis egestas. Volutpat maecenas volutpat blandit aliquam etiam. Felis imperdiet proin fermentum leo vel orci porta. Ultricies mi quis hendrerit dolor. Imperdiet nulla malesuada pellentesque elit eget gravida. Et netus et malesuada fames ac turpis egestas.
<br><br>
Id volutpat lacus laoreet non curabitur. Vitae tempus quam pellentesque nec nam aliquam. Posuere urna nec tincidunt praesent semper feugiat nibh. Ut ornare lectus sit amet est placerat in. Ac ut consequat semper viverra nam libero. Elementum eu facilisis sed odio morbi quis commodo. Est pellentesque elit ullamcorper dignissim cras tincidunt lobortis. Tempus quam pellentesque nec nam aliquam sem et tortor. Neque egestas congue quisque egestas diam in arcu cursus euismod. Elit ut aliquam purus sit. Consequat mauris nunc congue nisi vitae suscipit tellus. In iaculis nunc sed augue lacus. Dui nunc mattis enim ut tellus elementum sagittis vitae. Egestas egestas fringilla phasellus faucibus. Vitae sapien pellentesque habitant morbi tristique senectus et netus et.
</div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-2" class="tab-switch">
<label for="tab-2" class="tab-label">Basic Information</label>
<div class="tab-content">
<h4>Basic Information</h4>
<ul>
<li>
<b>Full Name:</b> here
</li>
<li>
<b>Nickname(s):</b> here
</li>
<li>
<b>Age:</b> here
</li>
<li>
<b>Date of Birth:</b> here
</li>
<li>
<b>Hometown:</b> here
</li>
<li>
<b>Current Location:</b> here
</li>
<li>
<b>Ethnicity:</b> here
</li>
<li>
<b>Nationality:</b> here
</li>
<li>
<b>Gender:</b> here
</li>
<li>
<b>Pronouns:</b> here
</li>
<li>
<b>Orientation:</b> here
</li>
<li>
<b>Religion:</b> here
</li>
<li>
<b>Occupation:</b> here
</li>
<h4>Physical Appearance</h4>
<li>
<b>Hair Color:</b> here
</li>
<li>
<b>Eye Color:</b> here
</li>
<li>
<b>Height:</b> here
</li>
<li>
<b>Build:</b> here
</li>
<li>
<b>Tattoos:</b> here
</li>
<li>
<b>Piercings:</b> here
</li>
<li>
<b>Clothing Style:</b> here
</li>
<li>
<b>Distinguishing Characteristics:</b> here
</li>
<h4>Favorites</h4>
<li>
<b>Weather:</b> here
</li>
<li>
<b>Color:</b> here
</li>
<li>
<b>Music:</b> here
</li>
<li>
<b>Sport:</b> here
</li>
<li>
<b>Beverage:</b> here
</li>
<li>
<b>Food:</b> here
</li>
</div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-3" class="tab-switch">
<label for="tab-3" class="tab-label">Love Life</label>
<div class="tab-content">
<h5>But we were something, don't you think so?</h5>
<h4 style="padding:0;text-align: center; margin-top: -12px;">Roaring twenties, tossing pennies in the pool</h4>
<b>status:</b> here <br>
<b>since:</b> here <br>
<b>to whom:</b> here <br>
<b>comments:</b> here <br>
</div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-4" class="tab-switch">
<label for="tab-4" class="tab-label">Storylines</label>
<div class="tab-content">
<h6>connection name here</h6>
talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know.

<h6>connection name here</h6>
talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know.

<h6>connection name here</h6>
talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know.

<h6>connection name here</h6>
talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know.

<h6>connection name here</h6>
talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know.

<h6>connection name here</h6>
talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know. talk about them here and what not, you know.
</div>
</div>
<div class="tab">
<input type="radio" name="css-tabs" id="tab-5" class="tab-switch">
<label for="tab-5" class="tab-label">Owes List</label>
<div class="tab-content">
<h6 style="width: 375px;">I owe you</h6>
<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>

<h6 style="width: 375px;margin-top:10px;">You Owe Me</h6>
<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>

<h5>Updated: 00/00</h5>
</div>
    </div>
  </div>
<img src="https://i.imgur.com/UOqE0gH.png" style="margin-top:26px;">
</div>
</div>
</body>
</html>