Green - Rel

<link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Wire+One' rel='stylesheet' type='text/css'>

<div class="kate1" style="background-image:url(http://placehold.it/400x400);">
    <div class="kate2"><div id="kat">Nombre y Apellido</div>
        <table><tr>
            <td>
                <div style="width: 170px; height: 250px; border: 4px solid #A6E66B; background-image:url(http://placehold.it/170x250);"></div>
            </td>
            <td>
                <div class="k2">
                    <div class="kat2"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et lacus magna. Donec justo mi, lacinia vitae euismod nec, ultrices id orci. Vestibulum pretium facilisis elementum. Pellentesque quam metus, consectetur non tellus ac, placerat rhoncus elit. Morbi efficitur, odio a facilisis elementum, enim purus feugiat mi, sit amet tempor urna nisl tincidunt risus. Sed efficitur erat at bibendum sollicitudin. Etiam nec mauris ut velit condimentum cursus vitae vitae sem. Morbi facilisis metus in velit lobortis feugiat. Pellentesque vestibulum neque id nisi hendrerit efficitur. In et nunc et metus varius consequat nec nec quam. Cras ac est id felis convallis vestibulum id quis tortor. Suspendisse finibus dignissim nisi ac mollis. In hac habitasse platea dictumst. Praesent malesuada nec lectus venenatis egestas. Nam condimentum sagittis nisi nec vehicula. Morbi bibendum tortor at pharetra suscipit.

                    Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras sit amet quam euismod enim malesuada bibendum id sit amet odio. Nullam a finibus dolor. Donec tempus facilisis risus sed semper. Nunc ex mauris, eleifend et lacus sit amet, euismod bibendum odio. Praesent at risus ipsum. Curabitur sit amet placerat sapien, quis tempus sapien. Sed vel odio tortor. Curabitur justo magna, ultrices at aliquet mattis, condimentum vel justo. Cras viverra facilisis turpis, eget accumsan justo. Nunc condimentum porttitor erat, id rhoncus lacus maximus elementum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris vel efficitur dolor, ut ultricies dui. Nunc a massa nec arcu fermentum congue sit amet eu metus. Vivamus gravida orci ac quam tempor imperdiet. Vestibulum et iaculis mauris, quis mattis neque.       </div>
                </div>
            </td>
        </tr></table>
        <table><tr>
            <td id="kaat">EDAD</td>
            <td id="kaat">NACIONALIDAD</td>
            <td id="kaat">PROFESIÓN</td>
            <td id="kaat">OTRO DATO</td>
        </tr></table>
        <div id="katf">Frase bonita aquí</div>
    </div>
</div>
<center>
    <a href="https://mystiqueworkshop.tumblr.com/" style="color: #1F424E;"><div style="font-family: 'Pacifico'; font-size: 11px; text-align: center; color: ##1F424E;">Mystique☪ © 2020</div></a>
</center>

// AQUI EMPIEZAN LAS CAJITAS DE RELACIONES

<center><table><tr>
    <td>
        <div class="rek1" style="background-image:url(http://placehold.it/200x120);">
        <div class="rek2">
            <div id="reka">Nombre y Apellido</div>
            <div class="rek3">Mauris finibus metus ac purus suscipit, vel rutrum sem ultricies. Fusce lobortis dictum lectus sit amet blandit. Mauris vitae lectus ac lorem porttitor accumsan. Proin nec mi gravida nisi feugiat accumsan nec nec neque. Fusce varius tristique diam, non luctus turpis facilisis ut. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris consequat convallis arcu, eget ultricies tellus interdum vel. Cras hendrerit nulla et diam luctus, semper viverra magna commodo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed faucibus fringilla vulputate. Curabitur ac augue ac quam commodo accumsan non in tortor.</div>
        </div>
        </div>
    </td>
    <td>
    <div class="rek1" style="background-image:url(http://placehold.it/200x120);">
        <div class="rek2">
            <div id="reka">Nombre y Apellido</div>
            <div class="rek3">Mauris finibus metus ac purus suscipit, vel rutrum sem ultricies. Fusce lobortis dictum lectus sit amet blandit. Mauris vitae lectus ac lorem porttitor accumsan. Proin nec mi gravida nisi feugiat accumsan nec nec neque. Fusce varius tristique diam, non luctus turpis facilisis ut. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris consequat convallis arcu, eget ultricies tellus interdum vel. Cras hendrerit nulla et diam luctus, semper viverra magna commodo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed faucibus fringilla vulputate. Curabitur ac augue ac quam commodo accumsan non in tortor.</div>
        </div>
        </div>
    </td>
</tr></table></center>


<style type="text/css">
    .kat2::-webkit-scrollbar-button:start:decrement, .kat2::-webkit-scrollbar-button:end:increment{display:none;} .kat2::-webkit-scrollbar{  width:5px; height: auto; background-color: #FFF;}
    .kat2::-webkit-scrollbar-track-piece {  background-color: #FFF;}
    .kat2::-webkit-scrollbar-thumb:vertical{  width: 5px; height:5px; background-color: #85DD6F;}

    .rek3::-webkit-scrollbar-button:start:decrement, .rek3::-webkit-scrollbar-button:end:increment{display:none;} .rek3::-webkit-scrollbar{  width:5px; height: auto; background-color: #FFF;}
    .rek3::-webkit-scrollbar-track-piece {  background-color: #FFF;}
    .rek3::-webkit-scrollbar-thumb:vertical{  width: 5px; height:5px; background-color: #85DD6F;}

    .kate1{margin: 0 auto; width: 400px; height: 400px; overflow: hidden; border: 20px solid #378E5B;}
    .kate2{font: 9px century gothic; color: #FFF; padding:5px; background: #1F424E;  width: 390px; height: 390px; position:relative; top:-400px; transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-ms-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;} .kate1:hover .kate2{top: 0px;}
    #kat{font-family: 'Pacifico'; font-size: 28px; text-align: center;}
    .kat2{width: 190px; height: 250px; overflow: auto; font: 10px century gothic; padding: 5px; color: #FFF; text-align: justify;}
    #kaat{width:95px; height: 45px; background: #85DD6F; font: 10px century gothic; color: #000; text-align: center;}
    #katf{font: 18px 'Wire One'; color: #FFF; text-align:center;}


    .rek1{margin: 0 auto; width: 200px; height: 120px; overflow: hidden; border: 20px solid #378E5B;}
    .rek3{margin: 0 auto; padding: 4px; overflow: auto; color: #fff; font: 10px century gothic; width: 190px; height: 65px;text-align: justify;}

    .rek2{font: 9px century gothic; color: #FFF; padding:5px; background: #1F424E;  width: 190px; height: 110px; position:relative; top:-120px; transition:ease-in-out 0.5s;-webkit-transition:ease-in-out 0.5s;-ms-transition:ease-in-out 0.5s;-moz-transition:ease-in-out 0.5s;} .rek1:hover .rek2{top: 0px;} #reka{font-family: 'Pacifico'; font-size: 15px; text-align: center;}
</style>