Calendario (Navideño)

<div class="bt-calendario" style="background-image:url(https://www.animationsoftware7.com/img/agifs/snow01.gif)"><div class="btcal-titulo"><span><i class="fas fa-gifts"></i>Diciembre</span></div><div class="btcal-dias"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a><a>7</a><a>8</a><a>9</a><a>10</a><a>11</a><a>12</a><a>13</a><a>14</a><a>15</a><a>16</a><a>17</a><a>18</a><a>19</a><a>20</a><a>21</a><a>22</a><a>23</a><a>24</a><a bcal-title="Merry Christmas!">25</a><a>26</a><a>27</a><a>28</a><a>29</a><a>30</a><a bcal-title="El fin del 2020 (al fin)">31</a></div></div><a class="bettycred" href="http://bettyleg.tumblr.com/">bettyleg</a>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"><link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,600;0,700;1,600&display=swap" rel="stylesheet"><style>.bt-calendario{width:500px; border:1px solid #ddd; background:#e7e7e7; margin:10px auto; position:relative; padding-bottom:20px; border-radius:40px 40px; overflow:hidden; font-family:'Source Serif Pro', serif;} .btcal-titulo{height:70px; border-bottom:1px solid #ddd; background:#c83926; display:flex; align-items:center; justify-content:center; font-weight:900; font-style:italic;} .btcal-titulo span{font-size:32px; color:#fff;}.btcal-dias{width:420px; margin:20px auto 10px; border:1px solid #ddd; background:#fff; display:grid; grid-template-columns:60px 60px 60px 60px 60px 60px 60px; grid-auto-rows:60px; padding:20px; border-radius:30px;} .btcal-titulo > span i{font-size:40px; color:#fff; padding-right:40px;} .btcal-dias > a{display:flex; width:55px; height:55px; margin:0px auto; border:1px solid #ddd; align-items:center; justify-content:center; border-radius:8px; position:relative; background:#fafafa; color:#c83926; font-weight:600;}.btcal-dias > a[bcal-title]{background:#c83926; color:#fff} a[bcal-title]:hover:after{content:attr(bcal-title); position: absolute; font-size: 12px; color: #c83926; padding: 10px 10px; font-family: 'Source Serif Pro', serif; text-align: center; background: #fafafa; border:1px solid #c83926; display:block; top:-48px; border-radius:10px; min-width:180px; z-index:1; } a[bcal-title]:hover:before{content:""; display:block; position:absolute; top:-9px; border-color:#c83926 transparent transparent transparent;border-width: 10px;border-style: solid; z-index:2;}.bettycred{display:block; margin:0 auto; border:1px solid #ddd; width:100px; padding:5px 0px; font-size:8px;text-transform:uppercase; text-align:center; letter-spacing:2px;background:#fff; color:#999; text-decoration:none;}</style>