Cuenta regresiva para el año nuevo

2571 pan4o

Abrir en el editor Video Publica tu código

Recomendado

21 August 2025

Contenedor de animación CSS con cuenta regresiva

21 May 2025

libro electrónico

19 December 2025

Lumina Tech: Productos tecnológicos del futuro e innovación

HTML

CSS

body {
margin: 0;
display: flex;
flex-direction: column;
align-items: center;
height: 100vh;
justify-content: center;
font-family: cursive;
background-color: slateblue;
overflow: hidden;
#credits {position: fixed; bottom: 10px; right: 10px; color: black; font-size: 12px; font-family: Arial, sans-serif;}
}
h2 {
color: white;
text-align:center;
text-transform: uppercase; 
letter-spacing: 4px;   
}
.year {
font-size: 5em;
color: white;
font-weight: bold;
}
.countdown {
margin: 30px;
background-color: rgba(0, 0, 0, 0.1);
width: 100%; 
color: white;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
}
.countdown div {
 margin: 0 15px;
 font-size: 2.5em;
 font-weight: 500;
 margin-top: -25px;
 position: relative;
 text-align: center;
 width: 100px;
}
.countdown div::before {
content: "";
position: absolute;
bottom: -30px;
left: 0;
font-size: 0.35em;
line-height: 35px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
width: 100%;
height: 35px;
}

.countdown #day::before {
 content: "Days";   
}
.countdown #hour::before {
    content: "Hours";   
   }
   .countdown #minute::before {
    content: "Minutes";   
   }
   .countdown #second::before {
    content: "Seconds";   
   }

Recomendado

Contenedor de animación CSS con cuenta regresiva

libro electrónico

Lumina Tech: Productos tecnológicos del futuro e innovación

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS