Black Swan - Relaciones

<script src="//pull.cappuccicons.com/cpf.js"></script><link href="https://fonts.googleapis.com/css2?family=Gentium+Basic&family=Spline+Sans&display=swap" rel="stylesheet"><div class="bswancon"> <div class="bswantop"> <div class="bswanimg"><img src="http://via.placeholder.com/120x120"></img></div><div class="bswantop2"> <div class="bswantitle">Black Swan</div><div class="bswansub"> <div class="bswandat"><span class="cp cp-feather"></span>Dato 1</div><div class="bswandat"><span class="cp cp-feather"></span>Dato 2</div><div class="bswandat"><span class="cp cp-feather"></span>Dato 3</div></div></div></div><div class="bswanrel"> <div class="bswanrela"> <div class="bswanreimg"><img src="http://via.placeholder.com/80x80"></img></div><div class="bswanreinfo"> <div class="bswanretit">Nombre de Persona</div><div class="bswanrein"> <div class="bswanicon"><span class="cp cp-heart"></span></div><div class="bswantxt">Relacion aqui</div></div></div></div><div class="bswanrela"> <div class="bswanreimg"><img src="http://via.placeholder.com/80x80"></img></div><div class="bswanreinfo"> <div class="bswanretit">Nombre de Persona</div><div class="bswanrein"> <div class="bswanicon"><span class="cp cp-broken-heart"></span></div><div class="bswantxt">Relacion aqui</div></div></div></div><div class="bswanrela"> <div class="bswanreimg"><img src="http://via.placeholder.com/80x80"></img></div><div class="bswanreinfo"> <div class="bswanretit">Nombre de Persona</div><div class="bswanrein"> <div class="bswanicon"><span class="cp cp-user"></span></div><div class="bswantxt">Relacion aqui</div></div></div></div></div><div class="bswanbot"></div></div><div class="mystcred"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div>
<style>.bswancon{--bswan1:#c1c1c1;--bswan2:#000;--bswan3: #aaa;--bswan4: #111;}.bswancon{width: 400px; height: auto; padding: 20px; border-radius: 20px; background: var(--bswan2); margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;}.bswantop{width: 380px; display: flex; justify-content: space-around; align-items: center; margin-top: 15px;}.bswanimg img{width: 120px; height: 120px; object-fit: cover; border-radius: 120px; border: 5px solid var(--bswan1)}.bswantop2{width: 300px; display: flex; flex-direction: column; justify-content: center; align-items: center;}.bswantitle{width: 100%; font: 35px 'Gentium Basic'; font-style: italic; font-weight: 700; text-align: center; color: var(--bswan1); text-shadow: 1px 1px 10px var(--bswan3); border-bottom: 5px solid var(--bswan1);}.bswansub{background: var(--bswan1); width: 180px; min-height: 105px; padding: 10px; display: flex; flex-direction: column; justify-content: space-around; opacity: 0; position: absolute; margin-top: 100px; transition: 0.5s ease-out;}.bswandat{outline: 1px solid var(--bswan2); padding: 5px; display: flex; justify-content: space-between; align-items: center; font: 13px 'Gentium Basic';}.bswandat span{background: var(--bswan2); color: var(--bswan1); padding: 5px; font-size: 10px;}.bswantop2:hover .bswansub{opacity: 0.94; margin-top: 175px; transition: 0.5s ease-out;}.bswanrel{width: 340px; height: auto; padding: 20px; text-align: justify; font: 12px 'Spline Sans'; color: var(--bswan1); margin-top: -10px;}.bswanrela{display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; background: var(--bswan4); margin-bottom: 5px; padding: 10px;}.bswanreimg img{border-radius: 80px; width: 80px; height: 80px; object-fit: cover; border: 5px solid var(--bswan1);}.bswanreinfo{width: 70%; font: 20px 'Gentium Basic'; font-style: italic; text-align: center; display: flex; flex-direction:column; justify-content: center; align-items: center;}.bswanretit{width: 220px; border-bottom: 3px solid var(--bswan2); font-weight: 600; transition: 0.2s ease-out;}.bswanrein{display: flex;flex-direction: column; justify-content: space-between; align-items: center; width: 220px; font: 15px 'Spline Sans'; opacity: 0; position: absolute; transition: 0.2s ease-out;}.bswanrein span{font-size: 35px;}.bswanrela:hover .bswanretit{opacity: 0; transition: 0.2s ease-out;}.bswanrela:hover .bswanrein{opacity: 1; transition: 0.2s ease-out;}.bswanrela:nth-child(even){flex-direction: row;}.bswanbot{width: 100%; height: 5px; background: var(--bswan1); margin-bottom: 5px;}.mystcred{width: 400px; margin: 0px auto; text-align: center;}.mystcred a{font: 11px 'Spline Sans'; text-decoration: none; color: #000; font-weight: 500;}</style>