Air - Post [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="elementair1"> <div class="elemtitlea">TITULO</div><div class="elemprofa" style="background:url('IMAGEN AQUI'); background-size: cover;"> <div class="elemprof2a"></div><div class="elemicona"><span class="th th-leaf-1"></span></div></div><div class="eleminfoa"> <div class="elemtita">TITULO DEL POST AQUÍ</div><div class="elemrola"> TEXTO AQUI </div><br><div class="elemlina"> <div class="elemico2a"><a href="link1" class="th th-user"><h>PROFILE</h></a></div><div class="elemico2a"><a href="link2" class="th th-id-card-1"><h>EXPEDIENTE</h></a></div><div class="elemico2a"><a href="link2" class="th th-heart-1"><h>RELACIONES</h></a></div><div class="elemico2a"><a href="link3" class="th th-clock"><h>CRONOLOGIA</h></a></div><div class="elemico2a"><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>.elementair1{--cair1: #000; --cair2:#E2DC44; --cair3: #67641F; --cair4: #FFF;}.elementair1{width: 350px; height: 550px; background: var(--cair1); padding: 10px; position: relative; border: 1px solid var(--cair2); margin: 0 auto;}.elemtitlea{width: 520px; height: 30px; background: linear-gradient(to bottom right, var(--cair2), var(--cair3)); font-family: 'Playfair Display'; font-size: 20px; color: var(--cair4); line-height: 30px; text-align: center; transform: rotate(-90deg); position: absolute; top: 265px; left: -220px;}.elemprofa{width: 265px; height: 150px; border: 1px solid var(--cair2); position: absolute; top: 20px; left: 80px;}.elemprof2a{width: 265px; height: 150px; background: var(--cair2); opacity: 0.4;}.elemicona{width: 45px; height: 45px; background: var(--cair2); position: absolute; top: 106px; left: 220px;}.elemicona .th{color: var(--cair1); font-size: 40px; line-height: 30px; position:relative; top:4px; left:1px;}.eleminfoa{width: 300px; padding: 5px; position: relative; top: 165px; left: 55px;}.elemtita{padding-top: 7px; font-family: 'PlayFair Display'; font-size: 12px; color: var(--cair2); position: relative; text-align: right; right: 15px; font-style: bold;}.elemrola{width: 260px; height: 277px; padding: 5px; overflow: auto; border-top: 1px solid var(--cair2); font-family: 'Raleway'; font-size: 11px; color: var(--cair4); text-align: justify;}.elemlina{width: 250px; height: 10px; padding: 10px; margin-left: 8px; background: linear-gradient(to bottom right, var(--cair2), var(--cair3)); display: flex; justify-content: center; align-items: center;}.elemico2a{background: var(--cair1); width: 25px; height: 25px; border-radius: 25px; display: flex; justify-content: center; align-items: center; margin-left: 5px;}.elemico2a a{color: var(--cair4); font-size: 15px; line-height: 10px; text-decoration: none;}.elemico2a h{max-width:68px; background:var(--cair1); position:absolute; font:0px 'raleway'; text-transform:uppercase; display:flex; transition:ease 1s;}.elemico2a:hover h{overflow:visible; padding:5px 10px; margin-top: 20px; margin-left: 10px; font:8px 'raleway'; border: 1px solid var(--cair2);}#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;}.elemrola::-webkit-scrollbar{width:6px; height: auto; background-color: var(--cair1);}.elemrola::-webkit-scrollbar-thumb:vertical{width: 6px; height:10px; background-color: var(--cair2);}.elemrola::-moz-scrollbar{width:2px; height: auto; background-color: var(--cair1);}.elemrola::-moz-scrollbar-thumb:vertical{width: 2px; height:10px; background-color: var(--cair2);}</style>