In love

<div class="name"><i class="fas fa-ice-cream"></i> NOMBRE PJ</div><div class="brightblue"> <div class="close" style="background: url('IMAGEN GRANDE AQUÍ');"><div class="insideblue"><span> DATO</span><span>DATO</span> <span>DATO</span><span>DATO</span><span>DATO</span><span>DATO</span></div></div><div class="trueblue"><i class="fas fa-user-circle"></i>NOMBRE PB</div><div class="bluee"><div class="close2" style="background: url('IMAGENPEQUEÑA AQUÍ');"></div><div class="titleblock">FRASE NO MUY LARGA</div> <div class="bluetext"> <span><i class="fas fa-caret-square-right"></i> HISTORIA</span>
TEXTO
<span><i class="fas fa-caret-square-right"></i> PERSONALIDAD</span>
TEXTO</div></div></div>
<div class="credits"><a href="https://therocketgirl-codes.tumblr.com/">Lilith <i class="fas fa-rocket"></i></a></div>


<style>.brightblue{width: 500px; height: 540px; background: #fff; overflow: hidden;} .close{width: 500px; height: 200px;} .close2{display: inline-block; width: 100px; height: 280px;} .bluee{padding: 10px; width: 480px; height: 280px;} .insideblue{width: 100px; height: 200px; position: relative; top: 10px; left: 10px; } .insideblue span{background:#A5B0E5; color: #fff; text-transform: uppercase; width: 80px; padding: 5px; display: inline-block; font-size: 10px; margin-bottom: 1px; margin-right: 1px; text-align: left;} .titleblock{ transform: rotate(90deg); background: #A5B0E5; color: #fff; font-size: 14px; width: 270px; padding: 5px; height: 20px; display: inline-block; position: relative; top: -137px; right: 120px; font-family: Knewave; letter-spacing: 1px; text-align: center;} .bluetext{border-right: 5px solid #A5B0E5; width: 300px; padding: 10px; height: 260px; display: inline-block; position: relative; top: -290px; float: right; font-size: 10px; overflow: auto; text-align: justify; overflow: auto;} .bluetext span{text-transform: uppercase; color:#A5B0E5; font-size: 14px; font-family: Anton; letter-spacing: 5px;} .bluetext .fas{background: #A5B0E5; color: #fff; font-size: 18px; padding: 3px;} .name{background: #A5B0E5; width: 480px; padding: 10px; font-size: 20px; text-align: right; letter-spacing: 5px; color: #fff; font-family: Anton;}.trueblue{color: #fff; background: #A5B0E5; width: 490px; padding: 5px; height: 20px; font-size: 11px; letter-spacing: 10px; font-family: Anton;} .bluetext::-webkit-scrollbar {width: 5px; height: 2px;} .trueblue .fas{ font-size: 16px;} .bluetext::-webkit-scrollbar-button:start:decrement, .bluetext::-webkit-scrollbar-button:end:increment{height: 10px;display: none;background: #fff;} .bluetext::-webkit-scrollbar-track-piece{background: #ccc;} .bluetext::-webkit-scrollbar-thumb:vertical{height: 20px; background: #fff; border: 1px solid #A5B0E5} .bluetext::-webkit-scrollbar-thumb:horizontal{height: 20px;background: #fff; border: 1px solid #A5B0E5;} .credits{font-size: 10px; text-align: right; width: 500px; text-transform: lowercase; letter-spacing: 3px;} .credits a{color: #B24058;}</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Knewave" rel="stylesheet">