Water - Rel [Elements Pack]

<link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Playfair+Display:wght@400;600&family=Raleway:wght@100&display=swap" rel="stylesheet"><link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet"> <div class="elementwater1"> <div class="elemtitlew">TITULO</div><div class="elemprofw" style="background:url('IMAGEN'); background-size: cover;"> <div class="elemprof2w"></div><div class="elemiconw"><span class="th th-drop"></span></div></div><div class="eleminfow"> <div class="elemtitw">RELACIONES</div><div class="elemrelw"><div class="elemperw" style="background:url('IMAGEN RELACION'); background-size: cover;"><div id="elemp2w">Nombre y Apellido <br>Relación</div></div><div class="elemperw" style="background:url('IMAGEN RELACION'); background-size: cover;"><div id="elemp2w">Nombre y Apellido <br>Relación</div></div><div class="elemperw" style="background:url('IMAGEN RELACION'); background-size: cover;"><div id="elemp2w">Nombre y Apellido <br>Relación</div></div><div class="elemperw" style="background:url('IMAGEN RELACION'); background-size: cover;"><div id="elemp2w">Nombre y Apellido <br>Relación</div></div><div class="elemperw" style="background:url('IMAGEN RELACION'); background-size: cover;"><div id="elemp2w">Nombre y Apellido <br>Relación</div></div><div class="elemperw" style="background:url('IMAGEN RELACION'); background-size: cover;"><div id="elemp2w">Nombre y Apellido <br>Relación</div></div><div class="elemperw" style="background:url('IMAGEN RELACION'); background-size: cover;"><div id="elemp2w">Nombre y Apellido <br>Relación</div></div><div class="elemperw" style="background:url('IMAGEN RELACION'); background-size: cover;"><div id="elemp2w">Nombre y Apellido <br>Relación</div></div><div class="elemperw" style="background:url('IMAGEN RELACION'); background-size: cover;"><div id="elemp2w">Nombre y Apellido <br>Relación</div></div><div class="elemperw" style="background:url('IMAGEN RELACION'); background-size: cover;"><div id="elemp2w">Nombre y Apellido <br>Relación</div></div><div class="elemperw" style="background:url('IMAGEN RELACION'); background-size: cover;"><div id="elemp2w">Nombre y Apellido <br>Relación</div></div><div class="elemperw" style="background:url('IMAGEN RELACION'); background-size: cover;"><div id="elemp2w">Nombre y Apellido <br>Relación</div></div><div class="elemperw" style="background:url('IMAGEN RELACION'); background-size: cover;"><div id="elemp2w">Nombre y Apellido <br>Relación</div></div><div class="elemperw" style="background:url('IMAGEN RELACION'); background-size: cover;"><div id="elemp2w">Nombre y Apellido <br>Relación</div></div><div class="elemperw" style="background:url('IMAGEN RELACION'); background-size: cover;"><div id="elemp2w">Nombre y Apellido <br>Relación</div></div></div><br><div class="elemlinw"> <div class="elemico2w"><a href="link1" class="th th-user"><h>PROFILE</h></a></div><div class="elemico2w"><a href="link2" class="th th-id-card-1"><h>EXPEDIENTE</h></a></div><div class="elemico2w"><a href="link3" class="th th-clock"><h>CRONOLOGIA</h></a></div><div class="elemico2w"><a href="link4" class="th th-envelope"><h>MP</h></a></div></div></div></div><div id="myscr"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div><style>.elementwater1{--cwater1: #000; --cwater2:#54A5C5; --cwater3: #2C4769; --cwater4: #FFF;}.elementwater1{width: 350px; height: 550px; background: var(--cwater1); padding: 10px; position: relative; border: 1px solid var(--cwater2); margin: 0 auto;}.elemtitlew{width: 520px; height: 30px; background: linear-gradient(to bottom right, var(--cwater2), var(--cwater3)); font-family: 'Playfair Display'; font-size: 20px; color: var(--cwater4); transform: rotate(-90deg); position: absolute; top: 265px; left: -220px; text-align: center;}.elemprofw{width: 265px; height: 150px; border: 1px solid var(--cwater2); position: absolute; top: 20px; left: 80px;}.elemprof2w{width: 265px; height: 150px; background: var(--cwater2); opacity: 0.4;}.elemiconw{width: 45px; height: 45px; background: var(--cwater2); position: absolute; top: 106px; left: 220px;}.elemiconw .th{color: var(--cwater1); font-size: 40px; line-height: 30px; position:relative; top:4px; left:1px;}.eleminfow{width: 300px; padding: 5px; position: relative; top: 165px; left: 55px;}.elemtitw{padding-top: 7px; font-family: 'PlayFair Display'; font-size: 12px; color: var(--cwater2); position: relative; text-align: right; right: 15px; font-style: bold;}.elemrelw{width: 290px; height: 277px; padding: 5px; overflow: auto; border-top: 1px solid var(--cwater2); display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;}.elemperw{width: 80px; height: 80px; border: 5px solid var(--cwater2);}#elemp2w{max-width:90px; background:var(--cwater1); position:absolute; font:0px 'raleway'; text-transform:uppercase; text-align: center; display:flex; transition:ease 1s;}.elemperw:hover #elemp2w{overflow:visible; padding:5px 10px; font:7px 'raleway'; color: var(--cwater4); border: 1px solid var(--cwater2);}.elemlinw{width: 250px; height: 10px; padding: 10px; margin-left: 8px; background: linear-gradient(to bottom right, var(--cwater2), var(--cwater3)); display: flex; justify-content: center; align-items: center;}.elemico2w{background: var(--cwater1); width: 25px; height: 25px; border-radius: 25px; display: flex; justify-content: center; align-items: center; margin-left: 5px;}.elemico2w a{color: var(--cwater4); font-size: 15px; line-height: 10px; text-decoration: none;}.elemico2w h{max-width:68px; background:var(--cwater1); position:absolute; font:0px 'raleway'; text-transform:uppercase; display:flex; transition:ease 1s;}.elemico2w:hover h{overflow:visible; padding:5px 10px; margin-top: 20px; margin-left: 10px; font:8px 'raleway'; border: 1px solid var(--cwater2);}#myscr{font-family: 'Century Gothic'; font-size: 11px; text-align: center; color: #333 ; margin: 0 auto; margin-top: 1px;}#myscr a{color: var(--color3);text-decoration: none;}.elemrelw::-webkit-scrollbar{width:6px; height: auto; background-color: var(--cwater1);}.elemrelw::-webkit-scrollbar-thumb:vertical{width: 6px; height:10px; background-color: var(--cwater2);}.elemrelw::-moz-scrollbar{width:2px; height: auto; background-color: var(--cwater1);}.elemrelw::-moz-scrollbar-thumb:vertical{width: 2px; height:10px; background-color: var(--cwater2);}</style>