I'm Bulletproof - Baúl

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"/><link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Roboto&display=swap" rel="stylesheet"><div class="bulcont"> <div class="bulcont1"> <div class="bulbar"><div class="bulbar1"></div></div><div class="bultitle">I'm Bulletproof</div><div class="bulcont2"> <div class="bulinfo"> <a href="#"><span class="fas fa-envelope"></span></a> <a href="#"><span class="fas fa-user"></span></a> <a href="#"><span class="fas fa-id-card"></span></a> </div><div class="bultxt">Cupcake ipsum dolor sit amet cake candy canes. Apple pie halvah soufflé sweet roll gummies wafer pastry brownie cupcake. Caramels soufflé dragée bonbon donut apple pie gummies.</div><div class="bulinfo"> <a href="#"><span class="fas fa-heart"></span></a> <a href="#"><span class="fas fa-clock"></span></a> <a href="#"><span class="fas fa-star"></span></a> </div></div></div></div><div class="mystcred"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div><style>.bulcont{--bulcolor1: #000; --bulcolor1rgb: rgb(0,0,0,0.7); --bulcolor2: #5D5D5D; --bulcolortxt: #AAA;--bulfondo:url('https://c.tenor.com/HJc7Jj4jjZgAAAAC/date-a-live-kurumi-tokisaki.gif');}.bulcont{width: 500px; height: 300px; background: var(--bulfondo); background-size:cover; border: 3px solid var(--bulcolor1); margin: 0 auto; overflow: hidden; transition: 0.4s ease-in;}.bulcont1{width:498px; height: 298px; background: var(--bulcolor1rgb); margin: 1px 1px; display: flex; flex-direction: column; justify-content: center; align-items: center;}.bulbar{width: 450px; border: 5px solid; margin-top: 30px; animation: bulaction 1s ease-out infinite; display: flex; justify-content: center; align-items: center;}.bulbar1{width: 450px; height: 1px; background: var(--bulcolor2);}.bultitle{width: 450px; font-size: 35px; margin-top: 10px; font-family:'Bebas Neue'; text-transform: uppercase; color: var(--bulcolor2); text-align: left;}.bulcont2{width: 498px; height: 298px; background: var(--bulcolor1rgb); position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; transition: 0.4s ease-in; margin-left: -200px; opacity: 0;}.bulinfo{width: 450px; height: 100px; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;}.bulinfo a{color: var(--bulcolor2); font-size: 40px;}.bultxt{font: 10px 'Roboto'; color: var(--bulcolortxt); width: 400px; text-align: justify; border-left: 10px solid var(--bulcolor2); border-right: 10px solid var(--bulcolor2); padding: 10px;}.bulcont1:hover .bulcont2{opacity: 1; margin-left: 0px; transition: 0.4s ease-out;}.mystcred{width: 450px; margin: 0px auto; text-align: center;}.mystcred a{font: 11px 'Roboto'; text-decoration: none; color: #000; font-weight: 500;}@keyframes bulaction{0%{margin-left: 0px; border-color: rgba(234,215,215,0.5)}25%{margin-left: 50px; width: 400px; border-color: rgba(234,215,215,0)}50%{margin-left: 100px; width: 300px; border-color: rgba(234,215,215,0)}75%{margin-left: 200px; width: 200px; border-color: rgba(234,215,215,0)}100%{margin-left: 700px; width: 50px; border-color: rgba(234,215,215,0.1)}}</style>