Forever Young

<link href="https://fonts.googleapis.com/css?family=Staatliches&display=swap" rel="stylesheet"><link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet"><div class="AN-1"> <div class="AN-b"></div> <div class="AN-t">Forever <span>young</span> </div> <div class="AN-l"></div> <div class="AN-tb"></div> <div class="AN-tt"> <div class="AN-cr"> <span class="th th-bee"></span> <a href="/">Titulo del tema </a><i>ft personaje</i> </div> <div class="AN-cr"> <span class="th th-bee"></span> <a href="/">Titulo del tema</a> <i>ft personaje</i> </div> <div class="AN-cr"> <span class="th th-bee"></span> <a href="/">Titulo del tema </a><i>ft personaje</i> </div> <div class="AN-cr"> <span class="th th-bee"></span> <a href="/">Titulo del tema </a><i>ft personaje</i> </div> <div class="AN-cr"> <span class="th th-bee"></span> <a href="/">Titulo del tema </a><i>ft personaje</i> </div> <div class="AN-cr"> <span class="th th-bee"></span> <a href="/">Titulo del tema </a><i>ft personaje</i> </div> </div> </div> <div class="AN-icc"><span class="th th-code"></span></div> <div class="HRC">POR <a href="https://hyeri-code.tumblr.com/">HYE RI</a>

<style>.AN-1{ width: 500px; height: 350px; background: #fff; box-shadow: #000 0px 0px 10px; margin: 20px auto; border: #444 5px solid; outline: 10px solid #d4ae26; background: #fff; overflow: hidden;}.AN-b{ clip-path: polygon(0 0, 94% 0, 67% 100%, 0% 100%); background: url(https://i.imgur.com/qmDrkjI.png); width: 500px; height: 350px;}.AN-a1{ clip-path: polygon(0 0, 100% 0, 74% 100%, 0% 100%); background: #e6c347; width: 500px; height: 350px;}.AN-t{ font-family: 'Staatliches', cursive; position: relative; top: -200px; text-align: right; padding: 40px; font-size: 80px; letter-spacing: -4px; text-shadow: #000 1px 1px 0px; color: #fff; font-style: italic; margin-bottom: -200px; left: 0px; transition: 0.8s; transition-delay: 0.8s; z-index: 10;}.AN-t span{ color: #e2b923;}.AN-l{ background: #e2b923; width: 300px; height: 5px; position: relative; top: -60px; left: 0px; transition: 0.8s; transition-delay: 0s; z-index: 11;}.AN-1:hover .AN-l{ left: -500px;}.AN-1:hover .AN-t{ left: 500px; transition-delay: 0.4s;}.AN-tt{ position: relative; background: #f9f9f9; margin: 40px; top: -250px; height: 210px; border: #f9f9f9 20px solid; font-family: calibri; font-size: 10px; opacity: 0; transition: 0.8s; padding-right: 5px; overflow: auto; display: flex; flex-wrap: wrap; z-index: 10;}.AN-tb{ clip-path: polygon(100% 100%, 100% 0, 0 100%, 0% 100%); background: #d4ae26; width: 430px; height: 250px; margin: 40px; top: 50px; position: relative; margin-top: -250px; opacity: 0; transition: 0.8s; z-index: 10;}.AN-1:hover .AN-tt{ opacity: 1; transition-delay: 1s;}.AN-1:hover .AN-tb{ opacity: 1; transition-delay: 1s;}.AN-cr{ width: 170px; margin: 0px 5px 5px 0px;}.AN-cr a{ color: #444; text-decoration: none; text-transform: uppercase; letter-spacing: 1px;}.AN-cr span{ background: #d4ae26; color: #fff; font-size: 14px; padding: 10px; border-radius: 100%; margin-right: 10px; float: left;}.AN-cr i{ display: block;}.AN-icc{ position: relative; font-size: 70px; margin: 0 auto; width: 500px; text-align: right; padding: 20px; top: -320px; right: 40px; margin-bottom: -170px;}.AN-icc span{ background: #fff; padding: 20px; border-radius: 100%; color: #d4ae26; border: 7px solid #d4ae26; z-index: 5;} .HRC{font-size: 8px; font-family: calibri; width: 500px; margin: auto; text-align: right;}</style>