Custom Order - StunningDaredevil - Layout

<!--about me-->
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
<style type="text/css">

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

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


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

#biography{
display:none;
}

#biography:target{
display:block;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
background:#000;
    width: 600px;
    height: 600px;
}




#loveLife{
display:none;
}

#loveLife:target{
display:block;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
background:#000;
    width: 600px;
    height: 200px;
border: solid 10px #000;
text-align:justify;
overflow:auto;
}


#friends{
display:none;
}

#friends:target{
display:block;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
background:#000;
    width: 600px;
    height: 371px;
}


#lifeDetails{
display:none;
}

#lifeDetails:target{
display:block;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
background:#000;
    width: 600px;
    height: 371px;
}

.doublePopUps{
    width: 278px;
    height: 280px;
    background: #000;
    display: inline-block;
    border: 10px solid #000;
    overflow: auto;
    text-align: justify;
}



h1 {
    text-align: center;
    text-transform: uppercase;
    font-size: 21px;
    margin: 0;
    color: #000;
    background: #e0ae97;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

h4 {
    text-align: center;
    font-size: 15px;
    margin: 10;
    text-transform: uppercase;
    color: #55c3dc;
}

a:link, a:active, a:visited {
    color: #fff;
    font-family: Georgia;
    font-size: 14px;
}

b {
    background: #55c3dc;
    padding: 5px;
    line-height: 35px;
}

a.connectionLinks:link, a.connectionLinks:visited {
    background-color: #55c3dc;
    color: #ffffff;
    padding: 11px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    font-weight: 100;
    width: 85px;
    margin-bottom: 6px;
    margin-top: 0px;
}

a.connectionLinks:hover, a.connectionLinks:active {
  color: #0d0d0d;
}

.topBanner{
width:600px;
height:200px;
}

.bioSections{
display: inline-block;
    vertical-align: top;
    background: #000;
    width: 287px;
    height: 185px;
    text-align: justify;
    overflow: auto;
    border: solid 5px #000;
}

.socialMediaSplit{
    display: inline-block;
    vertical-align: top;
    width: 298px;
    height: 355px;
}


#topTwitterHeadBar {
    width: 487px;
    height: 151px;
    padding: 5px;
    display: inline-block;
}

#twitterProfileIcon img {
    width: 90px;
    height: 90px;
    border: 8px solid #0d0d0d;
    border-radius: 100%;
    margin-top: -59px;
    margin-left: 5px;
}

#twitterHeader img {
width:484px;
}




nav > * {
  display: inline-block;
}

.dropdown:hover .dropdown-content,
.dropdown-content a {
  display: block;
  opacity: 1;

}

.dropdown-content {
  display:none;
  opacity: 0;
  position: absolute;
  top: 0px;
  left: 0;
}

.dropdown-content a {
  position: relative;
}


body {
  background-color: rgba(161,93,44,0.75)
}

nav {
    background-color: #410128;
    text-align: right;
}

#menu a {
    font-family: Georgia;
    color: #fff;
    font-size: 12px;
}

.dropdown {
  position: relative;
}

a {
  color: #D1CBA7;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;

  padding: 15px;
}

a:hover {
  background-color: #55C3DC;
}

.dropdown-content {
    background-color: #BF9D3E;
    min-width: 130px;
    left: 0px;
    top: 28px;
}

.dropdown-content a {
  color: #0A272D;
}





::-webkit-scrollbar-thumb:vertical {height:12px; background:#000; border-top:10px solid #55C3DC; border-bottom:10px solid #55C3DC;}
::-webkit-scrollbar-thumb:horizontal {background-color:#000;}
::-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">
 <nav id="menu">
  <a href="#">Home</a>
  <div class="dropdown">
    <a href="#">Navigation</a>
    <div class="dropdown-content">
      <a href="/home.php">Home</a>
      <a href="/send_message.php?member_id=">Message</a>
      <a href="/add_comment.php?member_id=">Commnet</a>
      <a href="/status_stream.php?member_id=">Stream</a>
      <a href="/view_member_blog.php?member_id=">Blog</a>
      <a href="/albums.php?member_id=">Pictures</a>
    </div>
  </div>
  <div class="dropdown">
    <a href="#">More About Me</a>
    <div class="dropdown-content">
      <a href="#biography">Biography</a>
      <a href="#friends">Friends</a>
      <a href="#loveLife">Love Life</a>
      <a href="#lifeDetails">Life Details</a>
    </div>
  </div>
</nav>




<div class="topBanner">
<img src="https://i.imgur.com/zyDkTlV.png">
</div>
<div class="socialMediaSplit" style="padding-top: 27px;">
<img src="https://i.imgur.com/XnDYF3W.png" style="width: 66px; margin-top: 12px; margin-left: 5px; border: 5px solid #E0AE97; border-radius: 50%;">
<div style="width: 199px; height: 107px; display: inline-block; vertical-align: top; margin-top: 0px; margin-left: 10px; margin-bottom: 9px;">
<h2 style="font-size: 19px; text-align: left; color: #717171; background: none; margin: 0px; vertical-align: top; width: 201px; color: #55C3DC; letter-spacing: 0px; margin-bottom: 2px; margin-left: -9px; margin-top: 7px;">
@stunningdaredevil</h2>
<h2 style="font-size: 12px; text-align: left; color: #717171; margin-top: -11px; background: none; width: 342px; color: #fff; letter-spacing: 0px; margin-bottom: 10px; margin-top: 0px;">
<b style="color:#fff;">156K</b>
Followers
<b style="color:#fff;">247</b> Following</h2>

<blockquote style="font-size: 12px; margin-left: 1px; margin-top: -8px; font-family: Playfair Display; width: 198px; height: 48px; text-align: justify; color: #fff;">
here is where your description will go. Make it a little short, but it can go on two lines.
</blockquote>
</div>
<center>
<img src="https://i.imgur.com/3baCZru.png" style="border-radius: 10px;border: 5px solid #E0AE97;width: 65px; height: 65px; margin-top: 12px;">
<img src="https://i.imgur.com/7HEarI8.png" style="border-radius: 10px;border: 5px solid #E0AE97;width: 65px; height: 65px; margin-left:10px;">
<img src="https://i.imgur.com/5UwLBlL.png" style="border-radius: 10px;border: 5px solid #E0AE97;width: 65px; height: 65px; margin-left:10px;"><br><Br>
<img src="https://i.imgur.com/17dPCHP.png" style="border-radius: 10px;border: 5px solid #E0AE97;width: 65px; height: 65px; margin-top: 12px;">
<img src="https://i.imgur.com/8aX21yp.png" style="border-radius: 10px;border: 5px solid #E0AE97;width: 65px; height: 65px; margin-left:10px;">
<img src="https://i.imgur.com/nLLjU4j.png" style="border-radius: 10px;border: 5px solid #E0AE97;width: 65px; height: 65px; margin-left:10px;">
</center>
</div>
<div class="socialMediaSplit">
<div style="width: 297px; margin-top: 0px; overflow: auto; height: 195px; display: inline-block; text-align: justify;">
<div>
<img src="https://i.imgur.com/XnDYF3W.png" style="border-radius: 50%; margin-top: 7px; margin-left: 7px; width:49px;"> <div style="width: 216px; height: 50px; margin-top: 9px; margin-left: 7px; vertical-align: top; display: inline-block; font-family: Georgia; font-size: 12px; color: #fff;"><strong style="color:55C3DC;">Hunter</strong> <i>@stunningdaredevil</i> 7h<br>
I wish I could say I was staying in bed today
</div>
</div>

<div style="margin-top:10px;">
<img src="https://i.imgur.com/XnDYF3W.png" style="border-radius: 50%; margin-top: 7px; margin-left: 7px; width:49px;"> <div style="width: 216px; height: 50px; margin-top: 9px; margin-left: 7px; vertical-align: top; display: inline-block; font-family: Georgia; font-size: 12px; color: #fff;"><strong style="color:55C3DC;">Hunter</strong> <i>@stunningdaredevil</i> 2d<br>
Does anyone else smell rotten cheese? just me?
</div>
</div>


<div style="margin-top:10px;">
<img src="https://i.imgur.com/XnDYF3W.png" style="border-radius: 50%; margin-top: 7px; margin-left: 7px; width:49px;"> <div style="width: 216px; height: 50px; margin-top: 9px; margin-left: 7px; vertical-align: top; display: inline-block; font-family: Georgia; font-size: 12px; color: #fff;"><strong style="color:55C3DC;">Hunter</strong> <i>@stunningdaredevil</i> 1w<br>
I'm so dizzy, this heat is getting to me. Ready for winter!
</div>
</div>

<div style="margin-top:10px;">
<img src="https://i.imgur.com/XnDYF3W.png" style="border-radius: 50%; margin-top: 7px; margin-left: 7px; width:49px;"> <div style="width: 216px; height: 50px; margin-top: 9px; margin-left: 7px; vertical-align: top; display: inline-block; font-family: Georgia; font-size: 12px; color: #fff;"><strong style="color:55C3DC;">Hunter</strong> <i>@stunningdaredevil</i> 2w<br>
Can I just go to spain?
</div>
</div>

<div style="margin-top:10px;">
<img src="https://i.imgur.com/XnDYF3W.pngf" style="border-radius: 50%; margin-top: 7px; margin-left: 7px; width:49px;"> <div style="width: 216px; height: 50px; margin-top: 9px; margin-left: 7px; vertical-align: top; display: inline-block; font-family: Georgia; font-size: 12px; color: #fff;"><strong style="color:55C3DC;">Hunter</strong> <i>@stunningdaredevil</i> 2w<br>
I just had the BEST burger in town.
</div>
</div>


</div>

<div style="width: 288px; height: 125px; background: #000; margin-top: 10px; overflow: auto;">
<h1>Basic Information</h1>
<b>Full Name</b> here<br>
<b>Pronunciation</b> here<br>
<b>Nickname/Alias</b> here<br>
<b>Gender</b> here<br>
<b>Orientation</b> here<br>
<b>Real Age</b> here<br>
<b>Birthday</b> here<br>
<b>Birthplace</b> here<br>
<b>Astrological Sign</b> here<br>
<b>Species</b> here<br>
<b>Ethnicity</b> here<br>
<b>Preferred Hand</b> here<br>
<b>Eye Color</b> here<br>
<b>Hair Color</b> here<br>
<b>Hairstyle</b> here<br>
<b>Skin Tone</b> here<br>
<b>Makeup</b> here<br>
<b>Build</b> here<br>
<b>Height</b> here<br>
<b>Weight</b> here<br>
<b>Shoe Size</b> here<br>
<b>Birthmarks/scars</b> here<br>
<b>Distinguishing Features</b> here<br>
<b>Health</b> here<br>
<b>Allergies</b> here<br>
</div>


</div>
</div>



<div id="biography">
<div style="width:590px; text-align:right;"><a href="#close" style="color:#fff;">X</a></div>
<div class="bioSections">
<h1>The Past</h1>
Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum. Rhoncus volutpat nunc sit quam urna dignissim, libero diam ullamcorper, ac augue vel pellentesque et eget, rhoncus dolor mus faucibus rhoncus rhoncus. Proin sapien, amet ante nulla iusto nec, sit vitae urna et amet, est nostra, justo lacus congue lacus. Vehicula morbi vel justo pharetra libero, porttitor sed mauris fames, nec id sit rutrum donec in gravida, nonummy urna varius, ac ut volutpat mi accumsan fusce etiam.
</div>
<div class="bioSections"><img src="https://i.imgur.com/UNDWx5t.png"></div>
<div class="bioSections"><img src="https://i.imgur.com/9dKqyOh.png"></div>
<div class="bioSections">
<h1>The Present</h1>
Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum. Rhoncus volutpat nunc sit quam urna dignissim, libero diam ullamcorper, ac augue vel pellentesque et eget, rhoncus dolor mus faucibus rhoncus rhoncus. Proin sapien, amet ante nulla iusto nec, sit vitae urna et amet, est nostra, justo lacus congue lacus. Vehicula morbi vel justo pharetra libero, porttitor sed mauris fames, nec id sit rutrum donec in gravida, nonummy urna varius, ac ut volutpat mi accumsan fusce etiam.</div>
<div class="bioSections">
<h1>The Future</h1>
Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum. Rhoncus volutpat nunc sit quam urna dignissim, libero diam ullamcorper, ac augue vel pellentesque et eget, rhoncus dolor mus faucibus rhoncus rhoncus. Proin sapien, amet ante nulla iusto nec, sit vitae urna et amet, est nostra, justo lacus congue lacus. Vehicula morbi vel justo pharetra libero, porttitor sed mauris fames, nec id sit rutrum donec in gravida, nonummy urna varius, ac ut volutpat mi accumsan fusce etiam.</div>
<div class="bioSections"><img src="https://i.imgur.com/SpYz3j4.png"></div>
</div>

<div id="friends">
<div style="width:590px; text-align:right;"><a href="#close" style="color:#fff;">X</a></div>

<h1>The Friends in my Life</h1>
<div class="doublePopUps">
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
<a href="/" class="connectionLinks">connection link</a>
</div>
<div class="doublePopUps">
<h1>My Hackers</h1>
<h2 style="font-size: 19px; text-align: center; color: #717171; margin: 0px; color: #55C3DC; letter-spacing: 0px;">hacker name</h2>
Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum.


<h2 style="font-size: 19px; text-align: center; color: #717171; margin: 0px; color: #55C3DC; letter-spacing: 0px;">hacker name</h2>
Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum.


<h2 style="font-size: 19px; text-align: center; color: #717171; margin: 0px; color: #55C3DC; letter-spacing: 0px;">hacker name</h2>
Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum.


<h2 style="font-size: 19px; text-align: center; color: #717171; margin: 0px; color: #55C3DC; letter-spacing: 0px;">hacker name</h2>
Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum.


<h2 style="font-size: 19px; text-align: center; color: #717171; margin: 0px; color: #55C3DC; letter-spacing: 0px;">hacker name</h2>
Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum.
</div>
</div>



<div id="loveLife">
<div style="width:590px; text-align:right;"><a href="#close" style="color:#fff;">X</a></div>
<h1>The Love Life</h1>
<b>status</b> here <br>
<b>to whom</b> <a href="/">link here</a><br>
<b>since when</b> 00.00 <br>
<h4>Comments</h4>
 Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum. Rhoncus volutpat nunc sit quam urna dignissim, libero diam ullamcorper, ac augue vel pellentesque et eget, rhoncus dolor mus faucibus rhoncus rhoncus. Proin sapien, amet ante nulla iusto nec, sit vitae urna et amet, est nostra, justo lacus congue lacus. Vehicula morbi vel justo pharetra libero, porttitor sed mauris fames, nec id sit rutrum donec in gravida, nonummy urna varius, ac ut volutpat mi accumsan fusce etiam.
</div>











<div id="lifeDetails">
<div style="width:590px; text-align:right;"><a href="#close" style="color:#fff;">X</a></div>

<h1>The Life Details</h1>
<div class="doublePopUps">
<h1>Personality</h1>
Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum.
<br><br>
Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum.
</div>
<div class="doublePopUps">
<h1>Employment</h1>
Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum.

Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum.
<br><br>
Lorem ipsum dolor sit amet, aut faucibus cras a aliquet, amet enim varius elementum nam nulla. Facilisis nullam semper aliquam sollicitudin, cras diam, nibh ac id eget velit, duis fames metus id massa amet mollis. Malesuada est mauris, suspendisse sit nullam, duis vel elit, turpis leo dictum nunc orci urna. Sodales rutrum sed libero sed in sed. Velit maecenas wisi ipsum, habitasse magna, nulla rhoncus sem augue tincidunt, malesuada neque. Leo pretium quam non, fusce tortor, a commodo sodales sit justo. Quam quis nulla proin, nec sagittis ridiculus, risus nonummy, sociosqu eu sit a mauris rutrum. Augue feugiat suspendisse mi, ultrices sit tempus risus est, dis orci enim congue elit mauris, est aliquet at vestibulum.
</div>
</div>




</body>
</html>