Archetype Slides

by roomyrooms

HTML

<div id='archetype_container'>

  <div id='archetype_main'>
    <img id='archetype_image' src='https://i.gyazo.com/66334c23a90514dd73ebfd52ea380939.png'>
    <div id='archetype_image_border'></div>
    <div id='archetype_title'>Berserker</div>
    <div id='archetype_description'>+3 Str, +2 Con
      Iron Armor, Iron Axe
    </div>
  </div>

</div>

CSS

#archetype_container {
  width: 200px;
  height: 256px;
}

#archetype_main {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  border: 5px solid #261900;
  background-color: #876930;
  text-align: center;
}

#archetype_image {
  width: calc(64px * 2);
  image-rendering: pixelated;
  z-index: 0;
}
#archetype_image_border {
  border: 12px solid #261900;
  border-radius: 96px;
  width: 106px;
  height: 106px;
  margin-left: 35px;
  margin-top: -133px;
  position: absolute;
  z-index: 1;
}

#archetype_title {
  font-family: Verdana;
  font-size: 20px;
  font-weight: 600;
  color: #261900;
}

#archetype_description {
  color: #261900;
  font-size: 16px;
  font-weight: 200;
  font-family: Verdana;
  white-space: pre-line;
}