Relaciones basicas

<link href="https://fonts.googleapis.com/css?family=Domine|Kanit:600&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">

<div class="chrono"><div class="fotchro"><img src="http://via.placeholder.com/200"></div><div class="titchro"><span class="tiit">Betty's</span><br/><span class="tiit">relationships</span></div><div class="datospj"><div class="mppj"><a href="#">¡Enviame mp!</a> <span class="lnr lnr-envelope"></span></div><div class="fichpj"><span class="lnr lnr-file-empty"></span> <a href="#">¡Revisa mi ficha!</a></div></div><div class="relationshipspj"><div class="relap"><div class="bord"><img src="http://via.placeholder.com/100"/> </div><div class="dtrel"><div class="nomb"><span class="lnr lnr-users"></span><span class="nombrpj">Nombre</span><br/><span class="relatpj">mejor amiga</span></div></div></div><div class="relap"><div class="bord"><img src="http://via.placeholder.com/100"/> </div><div class="dtrel"><div class="nomb"><span class="lnr lnr-users"></span><span class="nombrpj">Nombre</span><br/><span class="relatpj">mejor amiga</span></div></div></div><div class="relap"><div class="bord"><img src="http://via.placeholder.com/100"/> </div><div class="dtrel"><div class="nomb"><span class="lnr lnr-users"></span><span class="nombrpj">Nombre</span><br/><span class="relatpj">no te soporto</span></div></div></div><div class="relap"><div class="bord"><img src="http://via.placeholder.com/100"/> </div><div class="dtrel"><div class="nomb"><span class="lnr lnr-users"></span><span class="nombrpj">Nombre</span><br/><span class="relatpj">comp. de clase</span></div></div></div></div></div><div class="cred"><a href="">bettyleg</a></div>

<style>.chrono{width:340px; height:auto; border:1px solid #ddd; margin:0 auto; padding:0px; overflow:hidden; padding-bottom:30px; border-radius:100px 0px} .fotchro{width:200px; height:200px; position:relative; margin:0 auto; border-radius:180px; padding:10px; border:1px solid #eee; top:-34px; right:-105px;} .fotchro img{width:200px; height:200px; border-radius:180px; } .titchro{font-family: 'Kanit', sans-serif; font-weight:900; text-transform:uppercase; line-height:25px; text-align:center; width:240px; font-size:30px; color:#629480; margin:-40px auto; position:relative;} .datospj{ margin:55px; margin-left:20px; margin-right:20px; font-family: 'Domine', serif; font-size:12px; width:300px; display:grid; grid-template-columns: auto auto;} .mppj{float:left; text-align:right; margin-right:10px; border-right:1px solid #ccc; padding-right:10px;} .fichpj{float:left; } .datospj span { color:#629480; } .datospj a{text-decoration:none; color:#333;} .relationshipspj{ margin:20px; height:auto; margin-top:-20px; display:grid; grid-template-columns:auto auto;} .relap{width:148px; height:146px; margin:2px; margin-bottom:20px;} .bord{width:100px; height:100px; padding:4px; border-radius:180px; margin: 0 auto; border:1px solid #ddd;} .relap .bord img{width:100px; height:100px; border-radius:180px;} .dtrel{text-align:center; margin-top:3px; line-height:16px;} .dtrel span.lnr{ font-size:30px; position:absolute; color:#ddd; margin-left:-30px;} .nomb .nombrpj{font-family: 'Kanit', sans-serif; text-transform:uppercase; color:#629480; top:5px;position:relative; left:10px;} .nomb .relatpj{font-family: 'Domine', serif; color:#444; font-size:8px; left:10px; position:relative;} .cred{margin: 0 auto; width:340px; text-align:center; } .cred a{font-family: 'Domine', serif; color:#ccc; text-decoration:none; font-size:8px; text-transform:uppercase; letter-spacing:2px;}</style>