Peaches and Cream

Title PSD: http://www.mediafire.com/file/9spdba1bdm4s1ym/peachesandCreamPSD.psd

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

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


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

.navigationBar{
width:1200px;
height:100px;
background-color:#fff;
color:#fff;
font-family: 'Abel', sans-serif;
z-index:4;
}

.nameSpaceHere{
width:340px;
height:40px;
display:inline-block;
-webkit-text-stroke: 1px #fdd2cb;
-webkit-text-fill-color: rgba(0, 0, 0, 0);
padding:25px;
font-family: 'Alegreya Sans SC', sans-serif;
font-size:35px;
text-transform:uppercase;
text-align:center;
vertical-align:top;
}
.nameSpaceHere b{
-webkit-text-stroke: 0px;
    -webkit-text-fill-color: #fdd2cb;
}

.nameSpaceHere span{
font-size:20px;
color:#086b45;
font-family: 'Poppins', sans-serif;
line-height:5px;
-webkit-text-stroke: 0px;
    -webkit-text-fill-color: #ec8366;
}

.navigationBarTop{
width:737px;
height:40px;
padding:30px;
display:inline-block;
vertical-align:top;
text-align:right;
}


.wrap-collabsible {
  margin-bottom: 1.2rem 0;
}

input[type='checkbox'] {
  display: none;
}

.lbl-toggle {
    display: block;
    font-weight: bold;
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: center;
    padding: 10px;
    color: #fff;
    background: #fdd2cb;
    cursor: pointer;
    /* border-radius: 7px; */
    transition: all 0.5s ease-out;
    margin-top: 28px;
    border-left: 23px solid #fff;
}

.lbl-toggle:hover {
  color: #fff;
}

.lbl-toggle::before {
  content: ' ';
  display: inline-block;

  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid currentColor;
  vertical-align: middle;
  margin-right: .7rem;
  transform: translateY(-2px);

  transition: transform .2s ease-out;
}

.toggle:checked + .lbl-toggle::before {
  transform: rotate(90deg) translateX(-3px);
}

.collapsible-content {
  max-height: 0px;
  overflow: hidden;
  transition: max-height .25s ease-in-out;
}

.toggle:checked + .lbl-toggle + .collapsible-content {
  max-height: 100vh;
}

.toggle:checked + .lbl-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.collapsible-content .content-inner {
  text-align:left;
  border-bottom-left-radius: 7px;
  border-bottom-right-radius: 7px;
  padding: .5rem 1rem;
}

h1{
    color:#ec8366;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 25px;
    text-transform: uppercase;
    text-align: center;
}

h2{
    margin:0;
    width:100%;
    padding:10px;
    color:#fff;
    background-color:#ec8366;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 25px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
}

a.navigationBarLinks,  a.navigationBarLinks:link,  a.navigationBarLinks:active,  a.navigationBarLinks:visited  {
width:144px;
height:40px;
display:inline-block;
-webkit-text-stroke: 1px #fdd2cb;
-webkit-text-fill-color: rgba(0, 0, 0, 0);
font-family: 'Alegreya Sans SC', sans-serif;
font-size:25px;
text-transform:uppercase;
text-align:center;
vertical-align:top;
}

a.navigationBarLinks:hover {
-webkit-text-stroke: none;
-webkit-text-fill-color: #fdd2cb;
text-decoration:none;
}


a.socialMediaButton,  a.socialMediaButton:link,  a.socialMediaButton:active,  a.socialMediaButton:visited  {
    width:100%;
    padding-top:10px;
    padding-bottom:10px;
    color:#fff;
    background-color:#ec8366;
    font-family: 'Alegreya Sans SC', sans-serif;
    font-size: 25px;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
display: block;
    margin-top: 20px;
    margin-left: 23px;
}

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


.rightSide b{
font-size:10px;
color:#086b45;
font-family: 'Poppins', sans-serif;
line-height:5px;
-webkit-text-stroke: 0px;
-webkit-text-fill-color: #ec8366;
}

a.navigationBarLinks span{
font-size:10px;
color:#086b45;
font-family: 'Poppins', sans-serif;
line-height:5px;
-webkit-text-stroke: 0px;
-webkit-text-fill-color: #ec8366;
}

.leftSideBar{
padding-top:10px;
text-align:center;
width:340px;
height:auto;
display:inline-block;
background-color:#fff;
vertical-align:top;
}

.rightSide{
padding-top:10px;
text-align:center;
width: 857px;
height:600px;
display:inline-block;
background-color:#fff;
vertical-align:top;
overflow:auto;
text-align:center;
}

.biographyBit{
margin-top: -57px;
width:355px;
height:256px;
text-align:justify;
padding:10px;
overflow:auto;
display:inline-block;
}

.modal-window {
  position: fixed;
  background-color: rgba(200, 200, 200, 0.75);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.modal-window:target {
  opacity: 1;
  pointer-events: auto;
}

.modal-window>div {
  width: 600px;
  position: relative;
  margin: 10% auto;
  padding: 2rem;
  background: #fafafa;
  color: #444;
  text-align:center;
}

.modal-window header {
  font-weight: bold;
}

.modal-close {
  color: #aaa;
  line-height: 50px;
  font-size: 80%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 70px;
  text-decoration: none;
}

.modal-close:hover {
  color: #000;
}

.modal-window h1 {
 font-family: 'Spectral SC', serif;
    font-size: 25pt;
    color: #698792;
    text-align: center;
    display: block;
    margin: 0;
    line-height: 34px;
    text-align: center;
    text-transform:uppercase;
}


.modal-window h2 {
 font-family: 'Spectral SC', serif;
    font-size: 15pt;
    color: #232426;
    text-align: center;
    display: block;
    margin: 0;
    line-height: 20px;
    vertical-align:middle;
    text-align: center;
    text-transform:uppercase;
}

::-webkit-scrollbar-thumb:vertical {height:12px; background:#fff; border-top:10px solid #ed8467; border-bottom:10px solid #ed8467;}
::-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>



<html>
<body>
<div class="container">
<div class="navigationBar">
<div class="nameSpaceHere">
<b>First</b>Last<br>
<span>Peaches and Cream.</span>
</div>
<div class="navigationBarTop">
<a href="/home.php" class="navigationBarLinks">home<br><span>new york, new york</span></a>
<a href="/send_message.php?member_id=###" class="navigationBarLinks">message<br><span>whisper to me bby</span></a>
<a href="/add_comment.php?member_id=###" class="navigationBarLinks">comment<br><span>yell all the time</span></a>
<a href="/status_stream.php?member_id=###" class="navigationBarLinks">stream<br><span>whats the haps</span></a>
<a href="/albums.php?member_id=###" class="navigationBarLinks">photos<br><span>just a pretty face</span></a>
</div>
</div>
<div class="leftSideBar">
<img src="https://i.imgur.com/fWJEtTF.png" style="width: 318px; margin-left: 23px;">
<div class="wrap-collabsible">
  <input id="collapsible" class="toggle" type="checkbox">
  <label for="collapsible" class="lbl-toggle">Owes List</label>
  <div class="collapsible-content">
    <div class="content-inner">
      <p>
        <h1>I Owe Them</h1>
         <ul>
            <li><b>Name Here</b> - --/-- - <i>reply/starter</i></li>
            <li><b>Name Here</b> - --/-- - <i>reply/starter</i></li>
         </ul>
        <h1>You Owe Me</h1>
         <ul>
            <li><b>Name Here</b> - --/-- - <i>reply/starter</i></li>
            <li><b>Name Here</b> - --/-- - <i>reply/starter</i></li>
         </ul>
        <h1 style="color:#086b45">Updated On: --/--</h1>
      </p>
    </div>
  </div>
</div>













<div class="wrap-collabsible">
  <input id="collapsible2" class="toggle" type="checkbox">
  <label for="collapsible2" class="lbl-toggle">Storylines</label>
  <div class="collapsible-content">
    <div class="content-inner">
      <p>
         <ul>
            <li><b style="color:#ec8366;">Name here</b> - About the storyline</li>
            <li><b style="color:#ec8366;">Name here</b> - About the storyline</li>
            <li><b style="color:#ec8366;">Name here</b> - About the storyline</li>
            <li><b style="color:#ec8366;">Name here</b> - About the storyline</li>
            <li><b style="color:#ec8366;">Name here</b> - About the storyline</li>
         </ul>
      </p>
    </div>
  </div>
</div>
<a href="https://editsbymresources.tumblr.com/" class="socialMediaButton"><span class="th th-alien-o"></span> Credit</a>

<audio autoplay loop>
<source src="https://www.dl.dropboxusercontent.com/s/arpv176ikmbsnjk/Legally%20Blonde%20So%20Much%20Better.mp3?dl=0">
</audio>
<center>
<img src="https://i.imgur.com/Q0YBH3b.png" width="229px" style="margin-left: 29px;">
</center>
</div>

<div class="rightSide">
<img src="https://i.imgur.com/2xlra8G.png" style="margin-bottom:-59px">
<center>
<div class="biographyBit">
Biography will go here.
</div>
<img src="https://i.imgur.com/g8hRA85.png">
<img src="https://i.imgur.com/D8IUG9j.png" style="margin-bottom:-59px">
<center>
<img src="https://i.imgur.com/a7zY3Ad.png">
<div class="biographyBit">
<h2>First Middle Last</h2>
A little bit about them here.

<h2>First Middle Last</h2>
A little bit about them here.
</div>

<img src="https://i.imgur.com/FiYz72m.png" style="margin-bottom:-59px">
<center>
<img src="https://i.imgur.com/50o3GOD.png">
<div class="biographyBit">
<b>current status:</b> status.<br>
<b>since when:</b> date. <br>
<b>comments on this:</b> comments here.
</div>
<img src="https://i.imgur.com/sCrqFaJ.png" style="margin-bottom:-59px">
<center>
<img src="https://i.imgur.com/2CDz0K6.png" width="600px">
</div>
</center>
</div>
</div>






<div id="instagramsModal" class="modal-window">
  <div>
    <a href="#modal-close" title="Close" class="modal-close" style="color:#000;">x</a>
                   <img src="https://i.imgur.com/Hw0lotY.png">
  </div>
</div>






<div id="twittersModal" class="modal-window">
  <div style="background-color:#fff;">
    <a href="#modal-close" title="Close" class="modal-close" style="color:#000;">x</a>
                   <img src="https://i.imgur.com/hdWSnAV.png">
  </div>
</div>







</body>
</html>