069 | It's Magic, you know

<div id="spell">
<div class="sl" style="background: url(https://via.placeholder.com/190x460)"></div>
<div class="sr">
<div class="title">
<i class="fas fa-magic"></i>
<h1>it's magic, you know</h1>
<strong>Never believe it's not so
</strong>
</div>
<div class="sb">
<span><i class="fas fa-check"></i> <strong><b>Nombre del Tema</b>
<e>Datitos del tema</e></strong></span>

<span><i class="fas fa-tilde"></i> <strong><b>Nombre del Tema</b>
<e>Datitos del tema</e></strong></span>

<span><i class="fas fa-times"></i> <strong><b>Nombre del Tema muy largo que podría chocar.</b>
<e>Datitos del tema</e></strong></span>

</div></div></div><div class="crdts"><a href="https://gitanodoescodes.tumblr.com/">— gitano;</a></div>

<style>#spell br {display: none;}#spell {outline: 1px solid #7AB3CA; width: 470px; height: 460px; display: flex; justify-content: space-between; background: #fdfdfd; margin: 0 auto; overflow: hidden;}#spell .sl {width: 190px; position: relative; border: 10px solid #fdfdfd}#spell .sr {width: 270px; background: #fafafa; margin-left: 1px; border-left: 1px solid #7AB3CA;}#spell .sr .title {height: 460px; background: #fdfdfd; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; -webkit-transition: all .5s ease; -moz-transition: all .5s ease; border-bottom: 1px solid #7AB3CA;}#spell:hover .sr .title {height: 100px}#spell:hover .sr .title h1 {transform: scale(0.5)}#spell:hover .sr .title i {transform: scale(0.4); top: 29px}#spell .sr .title h1 {margin: 0px; padding: 0px; font: 31px 'Montserrat', sans-serif; font-weight: 900; text-transform: uppercase; text-align: center; line-height: 90%; color: #7AB3CA; margin-top: 10px; margin-bottom: 10px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease;transform: scale(1)}#spell .sr .title strong {font: 9px 'Inconsolata', monospace; text-transform: uppercase; background: #7AB3CA; padding: 2px 10px; color: #fff; font-weight:bold; z-index: 1}#spell .sr .title i {color: #7AB3CA; font-size: 30px; position: relative; top: 0px; -webkit-transition: all .5s ease; -moz-transition: all .5s ease;transform: scale(1)}#spell .sb {height: 320px; background: #fdfdfd; padding: 20px; overflow: auto;}#spell .sb span {display: flex; margin-top: 10px} #spell .sb i {color: #7AB3CA; display: flex; justify-content: center; align-items: center; font-size: 15px; padding: 13px; width: 20px}#spell .sb strong {width: 160px; display: flex; flex-direction: column; justify-content: space-between;}#spell .sb b {font: 10px 'Montserrat', sans-serif; font-weight: 900; text-transform: uppercase; ght: 90%; color: #7AB3CA;padding: 6px;}#spell .sb e {font: 9px 'Inconsolata', monospace; text-transform: uppercase; background: #7AB3CA; padding: 2px 10px; color: #fff; font-weight: bold;display: block;}.crdts {text-decoration:none; font-family: verdana; font-size: 9px; text-align: center;}</style><link href="https://fonts.googleapis.com/css?family=Inconsolata:400,700|Montserrat:100,200,300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css"/>