नये साल की उलटी गिनती

अनुशंसित

3 January 2025

एलेक्जेंडररेस्टेलमास्की द्वारा लिखित एक कोड

12 January 2025

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";   
   }

नये साल की उलटी गिनती

अनुशंसित

एलेक्जेंडररेस्टेलमास्की द्वारा लिखित एक कोड

माइकीकुन द्वारा एक कोड

माइकीकुन द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

एलेक्जेंडररेस्टेलमास्की द्वारा लिखित एक कोड

माइकीकुन द्वारा एक कोड

माइकीकुन द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS