fileName : index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>India 2021</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
html{
font-size: 62.5%;
}
body{
width: 100vw;
height: 100vh;
background: #00ffff;
text-align: -webkit-center;
overflow-x: hidden;
}
.container{
padding: 8px;
background: #fff;
}
h2{
font-size: 2rem;
text-transform: capitalize;
padding-bottom: 10px;
}
h3{
font-size: 3rem;
text-transform: uppercase;
}
marquee {
font-size: 3rem;
background: rgb(210,97,27);
text-align: center;
background: linear-gradient(31deg, rgba(210,97,27,1) 0%, rgba(229,228,240,1) 50%, rgba(9,208,62,1) 100%);
}
span{
animation: cplorxhnage 1s linear infinite;
}
@keyframes cplorxhnage{
0%{
color: #979798;
}
10%{
color: #66242d;
}
20%{
color: #b1f01d;
}
30%{
color: #06c9a8;
}
40%{
color: #50eb4b;
}
50%{
color: #991170;
}
60%{
color: #ce490b;
}
70%{
color: #7cc705;
}
80%{
color: #236d39;
}
90%{
color: #121225;
}
100%{
color: #11118b;
}
}
.display-div{
width: 60vw;
padding: 2rem 2rem;
background: rgba(0,0,0,0.3);
}.display-div h1{ font-size: 5rem; text-transform: capitalize;
padding-bottom: 10px;}
.display-div h2{ font-size: 4rem; text-transform: capitalize;
padding-bottom: 10px;}
.display-div p{ font-size: 2rem; text-transform: capitalize;
padding-bottom: 10px;}
.display-div marquee {
font-size: 2rem;
background: rgb(210,97,27);
text-align: center;
background: linear-gradient(31deg, rgba(210,97,27,1) 0%, rgba(229,228,240,1) 50%, rgba(9,208,62,1) 100%);
}
.form-div{
width: 50vw;
background: rgb(134, 134, 134);
margin: 0 auto;
padding: 2rem;
}
input[type='text']{
width: 100%;
height: 35px;
color: #000;
font-weight: 700;
text-transform: capitalize;
font-size: 2rem;
padding-left: 1rem;
border: 2px solid black;
outline: none;
}
input[type='submit']{
width: 20%;
height: 35px;
color: #fff;
font-weight: 700;
text-transform: capitalize;
font-size: 2rem;
padding-left: 1rem;
border: 2px solid black;
outline: none;
background: rgb(153, 5, 5);
}
footer{
width: 100vw;
background: rgb(59, 58, 58);
color: #fff;
position: absolute;
bottom: 0px;
left: 0px;
}
footer a{
color: #fff;
font-size: 2rem;
}
</style>
</head>
<body>
<div class="container">
<div class="innerdiv">
<h3 id="countTime">09:45:15 PM</h3>
<marquee behavior="smooth" direction="right-left">गणतन्त्र दिवस <span> (गणतंत्र दिवस)</span> भारत का एक राष्ट्रीय पर्व है जो प्रति वर्ष 26 जनवरी को मनाया जाता है। ... एक स्वतन्त्र गणराज्य बनने और देश में कानून का राज स्थापित करने के लिए संविधान को 26 नवम्बर 1949 को भारतीय संविधान सभा द्वारा अपनाया गया और 26 जनवरी 1950 को इसे एक लोकतान्त्रिक सरकार प्रणाली के साथ लागू किया गया था।</marquee>
</div>
</div>
<div class="display-div">
<div class="zoom">
<h2>sikendar kumar</h2>
</div>
<p>की तरफ से आप को </p>
<h1><span>happy 72nd Republic Day</span></h1>
<marquee width="60%" direction="up" height="100px">
जन-गण-मन अधिनायक जय हे,
<br><br>
भारत-भाग्य-विधाता ।
<br><br>
पंजाब सिन्धु गुजरात मराठा,
<br><br>
द्रावि़ड़ उत्कल बंग ।
<br><br>
विन्ध्य हिमाचल यमुना गंगा,
<br><br>
उच्छल जलधि तरंग ।
<br><br>
तव शुभ नामे जागे,
<br><br>
तव शुभ आशिष मांगे,
<br><br>
गाहे तव जय गाथा ।
<br><br>
जन-गण मंगलदायक जय हे,
<br><br>
भारत-भाग्य-विधाता ।
<br><br>
जय हे ! जय हे !! जय हे !!!
<br><br>
जय ! जय ! जय ! जय हे !!
<br><br>
</marquee>
</div>
<audio id="myAudio">
<source src="https://www.youtube.com/watch?v=VsVdEy2X2HA&feature=youtu.be" type="video/ogg">
<source src="https://www.youtube.com/watch?v=VsVdEy2X2HA&feature=youtu.be" type="video/mpeg">
</audio>
<div class="form-div">
<form method="GET">
<div class="form-grup">
<input type="text" autofocus placeholder="Enter your name" name="user">
</div>
<br>
<input type="submit" value="click here">
</form>
</div>
<footer>
<a href="https://babatechnicalgmt.blogspot.com/" target="_blank">
© BABATECHNICALGMT</a>
</footer>
<script>
const countTime = document.getElementById('countTime');
let date = new Date();
let h = date.toLocaleString();
// Jan 26, 2021 07:30:00
var countDownDate = new Date("Jan 26, 2021 07:30:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var distance = countDownDate - now;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
countTime.innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
if (distance < 0) {
clearInterval(x);
countTime.style.textTransform = "uppercase"
countTime.innerHTML = "happy 72nd Republic Day";
var x = document.getElementById("myAudio");
x.play();
//alert("hi");
}
}, 1000);
</script>
</body>
</html>
output
No comments:
Post a Comment