Mini Profile

by roomyrooms

HTML

<div id='mini_profile_container'>
  <div id='mini_profile_scroll'>
    
    <div id='mini_profile_contents'>
      <div id='mini_profile_avatar_wrapper'>
        <img id='mini_profile_avatar'>
        <div id='mini_profile_flavor'>
          Testing flavor here!
        </div>
      </div>
      <br>
      <div id='mini_profile_filler'>
        Eye Color: #FFFFFF
        <br>
        Hair Color: #FFFFFF
      </div>
      
    
    </div>
    <button id='mini_profile_viewer_button'>Test</button>
  </div>
</div>

CSS

#mini_profile_container {
  border: 10px solid;
  border-image: url(https://i.gyazo.com/2f2dea5dc8756d2cbb75cf31607423ad.png) 10 repeat;
  background: #302b37;
  border-radius: 5px;
  overflow: hidden;
  font-family: Verdana;
  width: 128px;
  height: 256px;
  color: #ddd;
  text-shadow: 1px 1px #000;
  font-size: 12px;
  text-align: center;
}

#mini_profile_scroll {
  overflow-x: hidden;
  overflow-y: hidden;
  width: 100%;
  height: 100%;
}

#mini_profile_contents {
}

#mini_profile_avatar {
  background-image: url("https://i.gyazo.com/3517ff5879094260cd4b6d2f584da172.png");
  content: url("https://i.gyazo.com/1ce35d567fb58c2302f365b2a49ba03d.png");
  width: 128px;
  height: 128px;
  image-rendering: pixelated;
}

#mini_profile_flavor {
}

#mini_profile_filler {
}

#mini_profile_viewer_wrapper {
  width: 100%;
  height: 100%;
}
#mini_profile_viewer_button {
  background-image: url("https://i.gyazo.com/c69f65f4e1f8de56eee76446a727cc1e.png");
  width: 96px;
  height: 32px;
  border: none;
  background-color: rgba(0,0,0,0);
  position: relative;
  bottom: 0px;
  color: #ddd;
  font-family: Verdana;
  text-shadow: 1px 1px #000;
  font-size: 12px;
  text-align: center;
}