Custom Order - Maverick - Customization

<!--about me-->
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<style type="text/css">

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');


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

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


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

.topBar{
width:900px;
background:#4195a2;
}



a.topLineLink:link, a.topLineLink:visited {
background-color: #4195a2;
color: white;
padding: 9px 13px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Georgia;
font-size: 10px;
text-transform: uppercase;
width: 59px;
font-weight:100;
}

a.topLineLink:hover, a.topLineLink:active {
color: #839a92;
}



a.barrow:link, a.barrow:visited {
background-color: #4195a2;
color: white;
padding: 9px 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: Georgia;
font-size: 10px;
text-transform: uppercase;
width: 57px;
font-weight:100;
}

a.barrow:hover, a.barrow:active {
color: #839a92;
}

h1{
font-family: 'Playfair Display', serif;
    font-weight: 100;
    text-transform: uppercase;
    color: #fff;
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 50px;
}


h2{
font-family: 'Playfair Display', serif;
    font-weight: 100;
    color: #fff;
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    margin-left: 10px;
}


h3{
    font-family: 'Playfair Display', serif;
    font-weight: 100;
    color: #000;
    display: inline-block;
    vertical-align: top;
    font-size: 17px;
    margin-left: 1px;
    margin-top: 0px;
}


h4{
    font-family: 'Playfair Display', serif;
    font-weight: 100;
    color: #656565;
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    margin-left: 2px;
    margin-top: -20px;
}


h5{
font-family: 'Playfair Display', serif;
    font-weight: 100;
    text-transform: uppercase;
    color: #000;
    display: inline-block;
    vertical-align: top;
    font-size: 12px;
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 79px;
}

p {
max-width: 255px;
word-wrap: break-word;
margin-bottom: 12px;
padding:10px 20px;
border-radius:25px;
}



.from-me {
    color: white;
    background: #9bbec4;
    align-self: flex-end;
    font-family: 'Playfair Display';
    font-size: 12px;
    font-weight: 100;
direction:rtl;
text-align:justify;
}



.from-them {
background:#dedede;
color:black;
font-family: 'Playfair Display';
font-size: 12px;
font-weight: 100;
text-align: left;
}

#iphoneHolder{
display:none;
}

#iphoneHolder:target{
display:block;
position:absolute;
background-image:url('https://i.imgur.com/mkqOXqs.png');
}


#faceTimeHolder{
display:none;
}

#faceTimeHolder:target{
display:block;
position:absolute;
}

#lyftHolder{
display:none;
}

#lyftHolder:target{
display:block;
position:absolute;
}

#instaHolder{
display:none;
}

#instaHolder:target{
display:block;
position:absolute;
}

#notesHolder{
display:none;
}

#notesHolder:target{
display:block;
position:absolute;
}

#imessageHolder{
display:none;
}

#imessageHolder:target{
display:block;
position:absolute;
}

#callHolder{
display:none;
}

#callHolder:target{
display:block;
position:absolute;
}

#huluHolder{
display:none;
}

#huluHolder:target{
display:block;
position:absolute;
}



#contactHolder{
display:none;
}

#contactHolder:target{
display:block;
position:absolute;
}

#cameraHolder{
display:none;
}

#cameraHolder:target{
display:block;
position:absolute;
}

#safariHolder{
display:none;
}

#safariHolder:target{
display:block;
position:absolute;
}

#calendarHolder{
display:none;
}

#calendarHolder:target{
display:block;
position:absolute;
}


.iPhoneQuote{
width: 174px;
height: 85px;
background: #321d1d;
margin-top: -288px;
position: absolute;
margin-left: 39px;
border-radius: 17px;
background-image:url('https://i.imgur.com/kHi1SV7.png');
}

.firstBlockIphone{
    width: 80px;
    height: 80px;
    position: absolute;
    margin-top: -386px;
    margin-left: 38px;
}

.secondBlockIphone{
    width: 90px;
    height: 80px;
    position: absolute;
    margin-top: -386px;
    margin-left: 125px;
}

.thirdBlockIphone{
    width: 90px;
    height: 80px;
    position: absolute;
    margin-left: 37px;
    margin-top: -185px;
}

.fourthBlockIphone{
    width: 80px;
    height: 80px;
    position: absolute;
    margin-top: -185px;
    margin-left: 131px;
}

.bottomBarIphone{
width: 178px;
    height: 56px;
    background: #0000008f;
    position: absolute;
    margin-top: -81px;
    margin-left: 36px;
    border-radius: 25px;
}



::-webkit-scrollbar {display:none;}


.ocean {
  height: 5%;
  width:100%;
  position:absolute;
  bottom:0;
  left:0;
  background: #7eacb1;
}

.wave {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/85486/wave.svg) repeat-x;
  position: absolute;
  top: -198px;
  width: 6400px;
  height: 198px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

.wave:nth-of-type(2) {
  top: -175px;
  animation: wave 7s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
  opacity: 1;
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1600px;
  }
}

@keyframes swell {
  0%, 100% {
    transform: translate3d(0,-25px,0);
  }
  50% {
    transform: translate3d(0,5px,0);
  }
}


.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">
<h1>Maverick Rayne Lawson</h1>
<a href="/home.php" class="topLineLink">home</a>
<a href="/send_message.php?member_id=1657003" class="topLineLink">message</a>
<a href="/add_comment.php?member_id=1657003" class="topLineLink">comment</a>
<a href="/status_stream.php?member_id=1657003" class="topLineLink">stream</a>
<a href="/view_member_blog.php?member_id=1657003" class="topLineLink">blog</a>
<a href="https://www.roleplayer.me/view_blog.php?id=0000490264" class="topLineLink" style="width:119px;">owes and storylines</a>
<a href="/albums.php?member_id=" class="topLineLink">gallery</a>
</div>

<div style="width:250px; height:402px; padding:20px; display:inline-block; vertical-align:top; padding-top:7px;">
<p class="from-me">
<img src="https://i.imgur.com/gcE6NwI.png" width="70px" align="left">
<b>SHIPWRECKED CREW</b><br>

Islanders,
<br><br>
It's time to see how well you know your other half in today's challenge...
<br><br>
#onthesamepage #whenyouknowyouknow
</p>




<div style="width: 252px; height: 230px; background: #dfe6de; margin-top: 2px; display: inline-block;">

<div style="width: 231px; background: #4195a2; margin-top: 10px; display: inline-block; margin-left: 5px; border-radius: 36px; padding: 5px;">
<h2>Maverick Lawson <span class="material-icons" style="font-size: 14px; margin-top: 1px; margin-left: 60px; border-right: solid #fff 1px; padding-right: 5px; display: inline-block; vertical-align: top;">close</span> <span class="material-icons" style="font-size: 16px; margin-top: 1px; display: inline-block; vertical-align: top;">mic</span><span class="material-icons" style="font-size: 15px; margin-top: 1px; display: inline-block; vertical-align: top;">search</span></div>

<div style="width: 240px; height: 162px; background: #dfe6de; margin-left: 5px; border-top: solid 1px #afafaf; margin-top: 5px; padding-top:5px; overflow:none;">
<img src="https://i.imgur.com/IF6WtNM.png" width="232px">
<h3>Maverick Lawson</h3>
<h4>the hopeless romantic</h4>
<br>
<div style="margin-top: -12px; margin-left: 3px; display: inline-block;">
<b>people also search for:</b> <b style="color:#4195a2; margin-right:5px;">Shipwrecked: Season One</b>
</div>
</div>


</div>


</div>

<div style="width:315px; height:402px; padding:20px; display:inline-block; vertical-align:top; text-align:center;">
<center>
<div style="width:315px; height: 330px;">
<div style="width: 300px; height: 30px; padding: 5px; text-align: left; padding-left: 10; background: #dfe6de;">
<img src="https://i.imgur.com/sCN5B84.png" style="width:30px; border-radius:50%;">
<h5>mavycakes</h5>
</div>
<div style="width:315px; height:235px;">
<img src="https://i.imgur.com/6mZPN0A.png">
</div>
<div style="width:315px; height: 57px; background:#dfe6de; font-family:Playfair Display; font-size:12px; text-align:left; color:#000;">
<img src="https://i.imgur.com/c0BkoKN.png"><br>
<b style="margin-left: 7px; margin-top: 0px; display: inline-block;">mavycakes</b> Who's hotter: me or the random grandad behind me?
</div>

<p class="from-them" style="width: 320px; max-width: 279px; margin-top: 10px; height:48px;">
<img src="https://i.imgur.com/HIrTpsy.png" width="50px" align="right" style="border-radius:50%;">
<b>Oshian <span class="th th-butterfly-o"></span></b><br>
can I borrow your white bathing suit?
</p>
</div>
</center>
</div>


<div style="width:250px; height:402px; display:inline-block; vertical-align:top; margin-right:-1px; text-align:center; padding-top:20px;">
<a href="#iphoneHolder"><img src="https://i.imgur.com/mkqOXqs.png" style="width: 224px; margin-top: -17px; z-index:1;"></a>
<div id="faceTimeHolder">
<a href="#iphoneHolder"><img src="https://i.imgur.com/gXscrXb.gif" style="width: 224px; margin-top: -439px; margin-left: 15px; z-index: 1;"></a>
</div>

<div id="instaHolder">
<a href="#iphoneHolder"><img src="https://i.imgur.com/en8qX7T.png" style="width: 224px; margin-top: -439px; margin-left: 15px; z-index: 1;"></a>
</div>

<div id="imessageHolder">
<a href="#iphoneHolder"><img src="https://i.imgur.com/VtMlfk8.png" style="width: 224px; margin-top: -439px; margin-left: 15px; z-index: 1;"></a>
</div>

<div id="notesHolder">
<a href="#iphoneHolder"><img src="https://i.imgur.com/SEuxg5o.png" style="width: 224px; margin-top: -439px; margin-left: 15px; z-index: 1;"></a>
</div>

<div id="callHolder">
<a href="#iphoneHolder"><img src="https://i.imgur.com/d0t51Ov.png" style="width: 224px; margin-top: -439px; margin-left: 15px; z-index: 1;"></a>
</div>


<div id="huluHolder">
<a href="#iphoneHolder"><img src="https://i.imgur.com/TKP33Yi.png" style="width: 224px; margin-top: -439px; margin-left: 15px; z-index: 1;"></a>
</div>

<div id="contactHolder">
<a href="#iphoneHolder"><img src="https://i.imgur.com/1Jiphq6.png" style="width: 224px; margin-top: -439px; margin-left: 15px; z-index: 1;"></a>
</div>

<div id="lyftHolder">
<a href="#iphoneHolder"><img src="https://i.imgur.com/8z8VuLD.png" style="width: 224px; margin-top: -439px; margin-left: 15px; z-index: 1;"></a>
</div>

<div id="cameraHolder">
<a href="#iphoneHolder"><img src="https://i.imgur.com/u5x9Wpw.png" style="width: 224px; margin-top: -439px; margin-left: 15px; z-index: 1;"></a>
</div>

<div id="safariHolder">
<a href="#iphoneHolder"><img src="https://i.imgur.com/02EACL0.png" style="width: 224px; margin-top: -439px; margin-left: 15px; z-index: 1;"></a>
</div>

<div id="calendarHolder">
<a href="#iphoneHolder"><img src="https://i.imgur.com/ygE7TcF.png" style="width: 224px; margin-top: -439px; margin-left: 15px; z-index: 1;"></a>
</div>


<div id="iphoneHolder">
<img src="https://i.imgur.com/mkqOXqs.png" style="width: 224px; margin-top: -437px; margin-left: 13px; z-index: 1;">
<div class="iPhoneQuote"></div>
<div class="firstBlockIphone"><img src="https://i.imgur.com/8yTdZ91.png"></div>
<div class="secondBlockIphone">
<a href="#instaHolder"><img src="https://i.imgur.com/PA8gHe6.png" style="margin-top:-3px; width:40px; border-radius:15px;"></a>
<a href="#contactHolder"><img src="https://i.imgur.com/2lT7i17.png" style="margin-top:-3px; width:40px; border-radius:15px;"></a>
<a href="#faceTimeHolder"><img src="https://i.imgur.com/67vidNk.png" style="margin-top:5px; width:40px; border-radius:15px;"></a>
<a href="#lyftHolder"><img src="https://i.imgur.com/llMyAmV.png" style="margin-top:5px; width:40px; border-radius:15px;"></a>

</div>
<div class="thirdBlockIphone">
<a href="#huluHolder"><img src="https://i.imgur.com/D3dMixl.png" style="margin-top:-3px; width:40px; border-radius:15px;"></a>
<a href="#cameraHolder"><img src="https://i.imgur.com/6x9tefC.png" style="margin-top:-3px; width:40px; border-radius:15px;"></a>
<a href="#safariHolder"><img src="https://i.imgur.com/kfSyWQr.png" style="margin-top:5px; width:40px; border-radius:15px;"></a>
<a href="#calendarHolder"><img src="https://i.imgur.com/XNo8cfx.png" style="margin-top:5px; width:40px; border-radius:15px;"></a>

</div>
<div class="fourthBlockIphone"><img src="https://i.imgur.com/Z6lRswh.png"></div>
<div class="bottomBarIphone">
<a href="#callHolder"><img src="https://i.imgur.com/7p29IIK.png" style="border-radius: 15px; margin-top: 5px; margin-right: 5px;"></a>

<a href="#imessageHolder"><img src="https://i.imgur.com/eHO6xZt.png" style="border-radius: 15px; margin-top: 5px; margin-right: 5px;"></a>


<a href="#notesHolder"><img src="https://i.imgur.com/2Ytk3sK.png" style="border-radius: 15px; margin-top: 5px;"></a>
</div>
</div>
</div>

<div class="topBar" style="margin-top: 2px;">
<h1 style="margin-right:196px;">My few good friends</h1>
<a href="/" class="barrow">name</a>
<a href="/" class="barrow">name</a>
<a href="/" class="barrow">name</a>
<a href="/" class="barrow">name</a>
<a href="/" class="barrow">name</a>
<a href="/" class="barrow">name</a>
<a href="/" class="barrow">name</a>
<a href="/" class="barrow">name</a>
</div>

</div>

<div class="ocean">
  <div class="wave"></div>
  <div class="wave"></div>
</div>
</body>
</html>