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

संपादक में खोलें Video अपना कोड प्रकाशित करें

अनुशंसित

18 August 2024

होवर और धुंधला प्रभाव वाली साइटों की गैलरी

10 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