Earth - Crono [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="elementearth1"> <div class="elemtitlee">TITULO</div><div class="elemprofe" style="background:url('IMAGEN'); background-size: cover; "> <div class="elemprof2e"></div><div class="elemicone"><span class="th th-tree"></span></div></div><div class="eleminfoe"> <div class="elemtite">CRONOLOGÍA</div><div class="elemcroe"> <div class="elemcpe"><a href="###">TITULO AQUÍ</a></div><div class="elemcpine"><b>ACTIVO</b> con PERSONAJE en LUGAR </div><div class="elemcpe"><a href="###">TITULO AQUÍ</a></div><div class="elemcpine"><b>ACTIVO</b> con PERSONAJE en LUGAR </div><div class="elemcpe"><a href="###">TITULO AQUÍ</a></div><div class="elemcpine"><b>ACTIVO</b> con PERSONAJE en LUGAR </div><div class="elemcpe"><a href="###">TITULO AQUÍ</a></div><div class="elemcpine"><b>ACTIVO</b> con PERSONAJE en LUGAR </div><div class="elemcpe"><a href="###">TITULO AQUÍ</a></div><div class="elemcpine"><b>ACTIVO</b> con PERSONAJE en LUGAR </div><div class="elemcpe"><a href="###">TITULO AQUÍ</a></div><div class="elemcpine"><b>ACTIVO</b> con PERSONAJE en LUGAR </div><div class="elemcpe"><a href="###">TITULO AQUÍ</a></div><div class="elemcpine"><b>ACTIVO</b> con PERSONAJE en LUGAR </div><div class="elemcpe"><a href="###">TITULO AQUÍ</a></div><div class="elemcpine"><b>ACTIVO</b> con PERSONAJE en LUGAR </div><div class="elemcpe"><a href="###">TITULO AQUÍ</a></div><div class="elemcpine"><b>ACTIVO</b> con PERSONAJE en LUGAR </div></div><br><div class="elemline"> <div class="elemico2e"><a href="link1" class="th th-user"><h>PROFILE</h></a></div><div class="elemico2e"><a href="link2" class="th th-id-card-1"><h>EXPEDIENTE</h></a></div><div class="elemico2e"><a href="link3" class="th th-heart-1"><h>RELACIONES</h></a></div><div class="elemico2e"><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>.elementearth1{--cearth1: #000; --cearth2:#57952D; --cearth3: #2D4D17; --cearth4: #FFF;}.elementearth1{width: 350px; height: 550px; background: var(--cearth1); padding: 10px; position: relative; border: 1px solid var(--cearth2); margin: 0 auto;}.elemtitlee{width: 520px; height: 30px; background: linear-gradient(to bottom right, var(--cearth2), var(--cearth3)); font-family: 'Playfair Display'; font-size: 20px; color: var(--cearth4); text-align: center; transform: rotate(-90deg); line-height: 30px; position: absolute; top: 265px; left: -220px;}.elemprofe{width: 265px; height: 150px; border: 1px solid var(--cearth2); position: absolute; top: 20px; left: 80px;}.elemprof2e{width: 265px; height: 150px; background: var(--cearth2); opacity: 0.4;}.elemicone{width: 45px; height: 45px; background: var(--cearth2); position: absolute; top: 106px; left: 220px;}.elemicone .th{color: var(--cearth1); font-size: 40px; line-height: 30px; position:relative; top:4px; left:1px;}.eleminfoe{width: 300px; padding: 5px; position: relative; top: 165px; left: 50px;}.elemtite{padding-top: 7px; font-family: 'PlayFair Display'; font-size: 12px; color: var(--cearth2); position: relative; text-align: right; right: 15px; font-style: bold;}.elemcroe{width: 290px; height: 277px; padding: 5px; overflow: auto; border-top: 1px solid var(--cearth2);}.elemcpe{width: 260px; padding-top: 5px; font-family: 'Raleway'; text-transform: uppercase; font-size: 15px; color: var(--cearth4); text-align: justify;}.elemcpe a{text-decoration: none; color: var(--cearth4);}.elemcpine{background: var(--cearth2); width: 260px; padding: 5px; font-family: 'Raleway'; text-align: right; font-size: 12px; font-weight: 700;}.elemline{width: 250px; height: 10px; padding: 10px; margin-left: 8px; background: linear-gradient(to bottom right, var(--cearth2), var(--cearth3)); display: flex; justify-content: center; align-items: center;}.elemico2e{background: var(--cearth1); width: 25px; height: 25px; border-radius: 25px; display: flex; justify-content: center; align-items: center; margin-left: 5px;}.elemico2e a{color: var(--cearth4); font-size: 15px; line-height: 10px; text-decoration: none;}.elemico2e h{max-width:68px; background:var(--cearth1); position:absolute; font:0px 'raleway'; text-transform:uppercase; display:flex; transition:ease 1s;}.elemico2e:hover h{overflow:visible; padding:5px 10px; margin-top: 20px; margin-left: 10px; font:8px 'raleway'; border: 1px solid var(--cearth2);}#myscr{font-family: 'Century Gothic'; font-size: 11px; text-align: center; color: #333 ; margin: 0 auto; margin-top: 1px;}#myscr a{color: #333;text-decoration: none;}.elemcroe::-webkit-scrollbar{width:6px; height: auto; background-color: var(--cearth1);}.elemcroe::-webkit-scrollbar-thumb:vertical{width: 6px; height:10px; background-color: var(--cearth2);}.elemcroe::-moz-scrollbar{width:2px; height: auto; background-color: var(--cearth1);}.elemcroe::-moz-scrollbar-thumb:vertical{width: 2px; height:10px; background-color: var(--cearth2);}</style>