FELIZ NAVIDAD

EL CÓDIGO▼

<style> .contenedor { background-color: #BE501B; padding-top: 50px;/*distancia de la caja de arriba*/ padding-bottom:20px; width: 100%; } .regalo { width: 100%; margin: 0 auto; } .caja, .tapa { background: -webkit-radial-gradient(white 10%, transparent 15.1%), -webkit-radial-gradient(white 7%, transparent 15.1%), #0F4652; background-position: 0 0, 25px 25px; background-size: 50px 50px; position: relative; margin: 0 auto; } .caja { width: 80%; height: 150px; } .tapa { width: 80%; height: 50px; box-shadow: 1px 2px 3px rgba(0,0,0,0.2); padding: 0 0,05px; background-color: #0F4652; /* transiciones */ top: 0; left: 0; transition: top ease-out 0.5s, left ease-out 0.5s, transform ease-out 0.5s; } .caja span, .tapa span { position: absolute; display: block; background: rgba(200, 221, 183, 0.8); box-shadow: 1px 2px 3px rgba(0,0,0,0.1); } .caja span:first-child { width: 100%; height: 27%; top: 25px; } .caja span:last-child, .tapa span { width: 17%; height: 100%; left: 90px; } .tapa span { left: 90px; } .promo { font-size: 30px; color: #FFFF75; font-family: Georgia, 'Times New Roman', Times, serif; text-align: center; position: relative; height: 0px; top: 10px; transition: all ease-out 0.7s; } .promo p { font-size: 30px; margin: 0; } .promo h2 { font-size: 24px; margin: 0; color: #FFFF75; } /* Efecto hover */ .regalo:hover .tapa { top: -100px; transform: rotateZ(10deg); left: 10px; } .regalo:hover .promo { top: -80px; } </style> <div class="contenedor"> <div class="regalo"> <div class="tapa"> <span></span> </div> <div class="promo"> <p><i>Feliz Navidad</i></p> <a href="https://codepen.io/steph_itw/pen/mdrwWpy"target=_blank> <h2><i>Y Próspero Año 2022</i></h2></a> </div> <div class="caja"> <span></span> <span></span> </div> </div></div>