we don't talk anymore - relaciones

<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;700&display=swap" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<div class="dont1"><div class="dont2"><div class="dont3">someone's relations</div><img src="https://via.placeholder.com/100">
<div class="dont8"><div class="dont10"><span class="th th-home"></div><div class="dont10"><span class="th th-sun"></div><div class="dont10"><span class="th th-flash"></div><div class="dont10"><span class="th th-star"></div><div class="dont10"><span class="th th-fire"></div>
<div class="dont9">familia</div><div class="dont9">amistad</div><div class="dont9">enemistad</div><div class="dont9">vip</div><div class="dont9">otro</div></div>
<div class="dont4"><div class="dont5"><img src="https://via.placeholder.com/100x100"><div class="dont6"><span class="th th-home"></div><div class="dont7">nombre del personaje</div></div></div>
<div class="dont4"><div class="dont5"><img src="https://via.placeholder.com/100x100"><div class="dont6"><span class="th th-sun"></div><div class="dont7">nombre del personaje</div></div></div>
<div class="dont4"><div class="dont5"><img src="https://via.placeholder.com/100x100"><div class="dont6"><span class="th th-flash"></div><div class="dont7">nombre del personaje</div></div></div>
<div class="dont4"><div class="dont5"><img src="https://via.placeholder.com/100x100"><div class="dont6"><span class="th th-star"></div><div class="dont7">nombre del personaje</div></div></div>
</div></div>
<div class="stcred"><a href="https://stardustcodes.tumblr.com/ "target="_blank">stardust</a></div>

<style>.dont1 {margin: 0 auto; width: 360px; padding: 20px; border: 1px solid #eee; background: #fff; outline: 1px solid #d5b0b5; outline-offset: 10px;} .dont2 {width: 340px; background: #fff; padding: 10px; display: flex; flex-wrap: wrap;} .dont2 img {width: 100px; height: 100px; border-radius: 100px; padding: 5px; border: 5px solid #d5b0b5; margin-bottom: 20px;} .dont3 {width: 220px; height: 20px; padding: 40px 0 0 0; border-bottom: 5px solid #d5b0b5; font-family: quicksand; font-weight: 700; font-size: 20px; color: #888;} .dont4 {width: 170px; display: flex; flex-wrap: wrap; text-align: center} .dont5 {width: 170px; text-align: center; margin: 10px 0;} .dont5 img {width: 100px; height: 100px; padding: 5px; border: 1px solid #eee; border-radius: none} .dont6 {text-align: center; color: #d5b0b5; font-size: 22px; position: absolute; margin-top: -15px} .dont7 {width: 170px; font-family: quicksand; font-weight: 400; font-size: 10px; color: #888; text-align: center; line-height: 100%; margin-top: -5px} .dont8 {width: 360px; text-align: center; border: 1px solid #eee; display: flex; flex-wrap: wrap; margin-bottom: 20px; line-height: 100%; padding: 10px 0} .dont10 {width: 66px; color: #d5b0b5; font-size: 12px; text-align: center;} .dont9 {width: 66px; font-family: quicksand; font-weight: 400; font-size: 9px; color: #888; text-align: center;} .stcred {margin: 0 auto; width: 360px; text-align: center} .stcred a {text-decoration: none; font-family: calibri; font-size: 9px; color: #888; text-transform: uppercase; letter-spacing: 3px}</style>