WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Calendario
1429
ledoc
Abrir en el editor
Video
Publica tu código
0
HTML
Copy
<div class="calendar-icon"> <div class="calendar-header"> <span class="month">Août</span> </div> <div class="calendar-body"> <span class="day">11</span> </div> </div>
CSS
Copy
.calendar-icon { width: 50px; height: 65px; background-color: #fff; border: 2px solid #000; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); font-family: "Arial", sans-serif; text-align: center; } .calendar-header { background-color: #f00; color: #fff; padding: 5px 0; border-bottom: 2px solid #000; border-top-left-radius: 8px; border-top-right-radius: 8px; } .calendar-header .month { font-size: 1em; font-weight: bold; } .calendar-body { padding: 5px 0; } .calendar-body .day { font-size: 0.4 em; font-weight: bold; color: #000; }
JS
Copy
document.addEventListener("DOMContentLoaded", function () { const date = new Date(); const monthNames = [ "Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Août", "Sep", "Oct", "Nov", "Déc" ]; document.querySelector(".calendar-header .month").textContent = monthNames[date.getMonth()]; document.querySelector(".calendar-body .day").textContent = date.getDate(); });
