ABOUT ME FILLER | U BETCHA

:: notes n rules ::
✩ rules as usual:
    ✩ don't use this code as a base to claim/repost as your own. i know my coding and
      will not hesitate to raise a ruckus if i see this reposted as someone else's.
    ✩ inspo credit to illmakegaycodesforu "001 happy ending".
    ✩ leave the credit on!!!! leave it!! just leave it in the code!! give ME credit
      for MY work. it's the LEAST you could do. leaving the internal credit will not
      show anywhere physically on your layout.
    ✩ like what you take, take what you like. these things were coded with y'all in mind.

    ✩ small icon is 70x70.
    ✩ colors in this about me filler are: #f2bcbc, #fff2f2 and #7a7a7a. change the colors
      at ur own discretion (or not).
    ✩ scrollbar colors are: #f4cbcb, #ffeaea + fff2f2.
    ✩ background img size is 350x180. this will resize on its own but if you can't access photoshop
      or another photo editor to crop + resize, make sure the bg is at least 500x300.
    ✩ to change the color of the about me scroll box you will need the rgb #'s. you can access
      those here (https://www.w3schools.com/colors/colors_picker.asp) or from any other rgb color
      selector, on photoshop, etc. you will need to copy the 3 numbers in the parenthesis, for ex:
      "rgb(255, 26, 117)", you will take 255, 26, 117 (in that order) and paste it into the code
       under "background" in the div "peach-right-about".
    ✩ about me scrolls.
    ✩ if you need further help, feel free to reach out to me (mia) @ roleplayer.me/681968

✩ ✩ paste everything below the line in your about me section ✩ ✩
------------------

<style>
/*about me filler by mia villamor for peachlyts.
please do not delete this credit. it will not affect
how the filler shows on your profile. thank you! :-)
*/

@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700');

  #peach-web {
    position: relative;
    margin: 0 auto;
    width: 350px;
    height: 180px;
    padding: 10px;
    text-align: center;
    overflow: hidden;
    background-image: url('https://placehold.it/350x180');
    background-size: cover;
    border: .5px solid #f2bcbc;
    border-top: none;
  }

  #peach-web-top {
    position: relative;
    left: -10px;
    margin-top: -10px;
    height: 10px;
    width: 350px;
    padding: 10px;
    background-color: #fff2f2;
    border: .5px solid #f2bcbc;
  }

  #peach-web-circles {
    position: relative;
    float: left;
    top: -5px;
    left: -5px;
    margin: 5px;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    border: .5px solid #f2bcbc;
  }

  #peach-inner {
    position: relative;
    margin-top: 12px;
    width: 330px;
    height: 130px;
    padding: 10px;
    overflow-y: hidden;
    overflow-x: auto;
    background-color: transparent;
  }

  #peach-left {
    position: relative;
    float: left;
    left: -8px;
    margin-top: -10px;
    width: 340px;
    height: 120px;
    padding: 10px;
    background-color: transparent;
  }

    #peach-right {
    position: relative;
    margin-left: 390px;
    margin-top: -10px;
    width: 330px;
    height: 120px;
    padding: 10px;
    background-color: transparent;
  }

  #peach-left-bnr {
    position: relative;
    margin-top: 45px;
    left: -10px;
    width: 360px;
    height: 40px;
    background-color: #fff2f2;
  }

  #peach-left-icon {
    position: relative;
    width: 60px;
    height: 60px;
    margin-top: 10px;
    left: -5px;
    border-radius: 100%;
    border: 2px solid #fff;
    padding: 5px;
  }

  #peach-right-icon {
    position: relative;
    display: block;
    top: -2px;
    left: -15px;
    width: 80px;
    height: 80px;
    margin: 10px;
    border: 2px solid #fff;
    border-radius: 100%;
    padding: 5px;
  }

  #peach-right-about {
    position: relative;
    width: 210px;
    height: 80px;
    overflow: scroll;
    overflow-x: hidden;
    padding: 10px;
    margin-top: -110px;
    left: 100px;
    border-radius: 10px;
    background: rgba(255, 242, 242, 0.5);
    text-align: justify;
    color: #7a7a7a;
    font-size: 10px;
    font-family: 'inconsolata', monospace;
  }

  #peach-left-sub {
    position: relative;
    margin-top: 10px;
    text-align: center;
    font-family: 'inconsolata', monospace;
    font-size: 10px;
    color: #7a7a7a;
  }

  #peach-inner::-webkit-scrollbar-thumb {
    height:auto;
    background-color: #f4cbcb;
    border: 2px solid #ffeaea;}

  #peach-inner::-webkit-scrollbar {
    height:9px;
    width: 9px;
    background-color: #f9d6d6;
    border: 4px solid #fff2f2;
  }

  #peach-right-about::-webkit-scrollbar-thumb {
    height:auto;
    background-color: #f4cbcb;
    border: 2px solid #ffeaea;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;}

  #peach-right-about::-webkit-scrollbar {
    height:9px;
    width: 9px;
    background-color: #f9d6d6;
    border: 4px solid #fff2f2;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }
</style>

<div id="peach-web">
<div id="peach-web-top">
<div id="peach-web-circles" style="background-color: #ffeaea;"></div>
<div id="peach-web-circles" style="background-color: #f9d6d6;"></div>
<div id="peach-web-circles" style="background-color: #f4cbcb;"></div>
</div>
<div id="peach-inner">

<div id="peach-left">
<img src="https://placehold.it/60x60" id="peach-left-icon">
<div id="peach-left-sub">title here <i>!</i></div>
</div>

<div id="peach-right">
<img src="https://placehold.it/80x80" id="peach-right-icon">
<div id="peach-right-about">
about me here about me here about me here about me here
about me here about me here about me here about me here
about me here about me here about me here about me here
about me here about me here about me here about me here
about me here about me here about me here about me here
about me here about me here about me here about me here
about me here about me here about me here about me here
</div>

</div>



</div>
</div>