MBTI

<div class="w3tch"><n>NOMBRE DEL PJ<m>"FRASE"</m></n></div><div id="b3g"><div class="mbt3" style="background:url('http://via.placeholder.com/250x400');"><div class="info1"><n>FUNCTION</n>
<m>MINI DESCRIPTION</m></div><div class="info2"><n>FUNCTION</n>
<m>MINI DESCRIPTION</m></div></div> <div class="mbt4" style="background:url('http://via.placeholder.com/250x400');"><div class="info1"><n>FUNCTION</n>
<m>MINI DESCRIPTION</m></div><div class="info2"><n>FUNCTION</n>
<m>MINI DESCRIPTION</m></div></div><div class="m3v3"><div class="imgherm" style="background:url('http://via.placeholder.com/100');"></div><div class="typ3">TYPE</div><div class="t3xt3">TEXTO</div></div></div><div class="credits"><a href="https://therocketgirl-codes.tumblr.com/">Lilith</a></div>

<link href="https://fonts.googleapis.com/css?family=Abril+Fatface|Playfair+Display" rel="stylesheet">
<style>.w3tch{width: 480px; padding: 10px; background: #903232; text-align: center;} .w3tch n{font-family: Abril Fatface; font-size: 20px; color: #fff;} .w3tch m{font-family: Playfair Display; letter-spacing: 4px; text-transform: uppercase; font-size: 12px; display: block;} #b3g{width: 500px; height: 400px; background-color: none; overflow: hidden;} .mbt3{width: 250px; height: 400px; float: left;} .mbt4{width: 250px; height: 400px; float: right;} .imgherm{border-radius: 50%; height: 100px; width: 100px; margin-left: 80px; border: 1px solid #fff;} .t3xt3{width: 250px; height: 80px; padding: 5px; background: #fff; overflow: auto; position: absolute; margin-top: 37px; font-size: 10px; text-align: justify;} .m3v3{position: relative; left: 120px; top: 90px;} .typ3{width: 240px; padding: 10px; letter-spacing: 9px; text-transform: uppercase; font-family: Playfair Display; font-size: 16px; color: #fff; background: #903232; text-align: center; position: absolute;} .info1{width: 200px; font-family: Playfair Display; color: #fff; text-transform: uppercase; text-align: center; outline: 1px solid #fff; outline-offset: 3px; position: relative; top: 40px; left: 30px; background: rgb(144, 50, 50,0.4);} .info1 n{font-size:13px; letter-spacing: 3px;} .info1 m{font-size: 9px;}.info2{width: 200px; font-family: Playfair Display; color: #fff; text-transform: uppercase; text-align: center; outline: 1px solid #fff; outline-offset: 3px; position: relative; top: 300px; left: 30px; background: rgb(144, 50, 50,0.4);} .info2 n{font-size:13px; letter-spacing: 3px;} .info2 m{font-size: 9px;}.t3xt3::-webkit-scrollbar {width: 3px; height: 2px;} .t3xt3::-webkit-scrollbar-button:start:decrement, . .t3xt3::-webkit-scrollbar-button:end:increment{height: 10px;display: none;} .t3xt3::-webkit-scrollbar-track-piece{background: #ccc;}.t3xt3::-webkit-scrollbar-thumb:vertical{height: 30px; background: #903232; border: 1px solid #903232; }.t3xt3::-webkit-scrollbar-thumb:horizontal{height: 20px;background: #903232;}.credits{font-size: 10px; text-align: right; width: 500px; text-transform: lowercase; letter-spacing: 3px;} .credits a{color: #B24058;}</style>