New Year Wishes HTML & CSS
New Year Wishes HTML & CSS
In this article you will get HTML and CSS code of Festival Wishes (New Year Wishes HTML & CSS Coding). Here we provided you both HTML and CSS code and also given you JavaScript code, with Time Countdown of 1st January.
HTML Code of New Year Wishes
Through HTML we create only structure of this program.
<html> <!-- Coding by Shubham Verma (StudyMuch Learning Institute), Program for wishing Festival (Happy New year 2023) --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="robots" content="noindex"> <meta name="google" content="notranslate"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <meta property="og:type" content="Message"> <meta property="og:title" content="New year Wishes"> <meta property="og:url" content="# "> <meta property="og:keywords" keyword="New Year, Happy New Year 2023"> <meta property="og:studymuch.in" content="StudyMuch"> <meta property="og:image" content="image/msg.jpg"> <title>Happy New Year 2023!</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ ajax/libs/animate.css/4.1.1/animate.min.css"> <body> <marquee class="m1" behavior="scroll" direction="up" scrolldelay="0"> <br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br> <br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br> <br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br> <br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br> <br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> </marquee> <marquee class="m2" behavior="scroll" direction="down" scrolldelay="0"> <br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br><br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br> <br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br> <br> <img src="image.img" alt=""class="imageleft"height="150px"width="70px"> <br> <br> <img src="image.img" alt="" class="imageleft" height="150px"width="70px"> <br> <br> </marquee> <img src="imagewishes.png" width="50%" height="auto" style="animation: tada 4s infinite; margin-top:10px;padding: 30px;"></div> <div style="font-size: 14px; font-weight: 800; color:rgb(30, 206, 250);"> <p id="demo">2<font color="red"> <span class="newyearwish">दिन,</span> </font> 1<font color="red"> <span class="newyearwish"> घंटे,</span> </font> 8<font color="red"> <span class="newyearwish">मिनट,</span> </font> 8<font color="red"> <span class="newyearwish">सेकेंड </span> <br> </font> <span class="newyearwish">पहले</span> </p> <span class="newyearwish">आपको नए वर्ष की हार्दिक शुभकामनाएं!</span> </div> <br> <!-- audio media player --> <audio src="" autoplay aria-disabled=""></audio> <a href="https://www.studymuch.in"target="_blank"> <center><img class="smwish"src="smswish.png" width="200" height="400" alt=""></a> <br> <br> <div align="center"> <div class="wishMessage" style="text-shadow: 1px 1px 3px rgb(50, 1, 1), 1px 1px 3px rgb(85, 1, 1), -1px -1px 3px rgb(84, 1, 1), -1px -1px 3px rgb(89, 2, 2);"> <p style="text-shadow: 1px 1px 3px black, 1px 1px 3px black, -1px -1px 3px black, -1px -1px 3px black;color:yellow"> नए साल के नये दिनों को,</p> <p style="text-shadow: 1px 1px 3px black, 1px 1px 3px black, -1px -1px 3px black, -1px -1px 3px black;color:white"> आओ नया त्योहार बनाएं | </p> <span style="text-shadow: 1px 1px 3px rgb(57, 1, 1), 1px 1px 3px rgb(60, 1, 1), -1px -1px 3px rgb(96, 1, 1), -1px -1px 3px rgb(67, 1, 1);color:#ff934b">सुगम, सुलझ और सफल जीवन का </span> <p style="text-shadow: 1px 1px 3px black, 1px 1px 3px black, -1px -1px 3px black, -1px -1px 3px black;color:white"> आओ नया संकल्प उठाएं || </p> <p style="color:rgb(244, 41, 244)" class="blowwishtext">आपको नए वर्ष की हार्दिक शुभकामनाएं.</p> <span class="smbottom" style="text-shadow: 1px 1px 3px black, 1px 1px 3px black, -1px -1px 3px black, -1px -1px 3px black;color:#ffff00; margin-bottom:65px; font-size: 15px;"> <marquee><b><i> <br> <font color="red">Shubham Verma</font> कि तरफ से आपको नए वर्ष कि हार्दिक शुभकामनाएँ" </i></b></marquee> </span> </div> </body> </html>
Above you can see the HTML Code, that is only the structure of our New Year Wishes program.
CSS code New Year Wishes Coding
As we know why we use CSS, so through CSS we style this New Year Wishes program.
<style type="text/css"> * { margin: 0; padding: 0; } body { text-align: center; justify-content: center; align-items: center; display: block; margin: auto; background-color: rgb(2, 15, 71); background-image: url(); background-repeat: no-repeat; background-size: 100% 100%; min-height: 100vh; display: block; } img { border: none; } .newyearwish { font-size: 12px; } .wishMessage { color: rgb(255, 255, 255); width: 90%; font-size: 14px; font-weight: bold; text-shadow: 0px 0px 10px #afafaf; } .wishMessage p { margin: 0.3em 0; } @keyframe bounceIn { 0%, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(.215, .61, .355, 1); animation-timing-function: cubic-bezier(.215, .61, .355, 1) } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3) } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); color: #FF9933; } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9) } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); color: #fff; } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1) } } #formBox { left: 0; position: fixed; bottom: 0; display: inline-block; width: 100%; animation: pulse infinite 1s linear; margin: 0; } */ .inAdvanceTime { margin: 20px 0 30px 0; } .inAdvanceTimp { color: #b90707; font-size: 10px; font-weight: 700; margin-top: 0px; } #inAdvance { font-size: 20px; font-weight: bold; margin-top: 0px; color: #98201F; } .button-studymuch { margin-top: 0.0px; } #loading { -webkit-animation: rotation-star 15s infine linear; nimation: rotation-star 15s infinitlinear; } .m1 { position: fixed; left: 1%; width: auto; height: 100%; top: 1%; color: rgb(255, 249, 249); } .m2 { position: fixed; right: 1%; width: auto; height: 100%; top: 1%; color: #000; } .smwish { border-radius: 20px; } .smbottom { padding: 20px; } .buttonsm { margin-top: 0px; } .blowwishtext { font-size: 12px; } </style>
JavaScript Code of New Year Wishes
In JavaScript We created the Date Countdown using a JavaScript Coding.
<script> // Set the date we're counting down to var countDownDate = new Date("January 1, 2023 00:00:00") .getTime(); // Update the count down every 02 second var x = setInterval(function () { // Get todays date and time var now = new Date().getTime(); // Find the distance between now an the count down date var distance = countDownDate - now; // Time calculations for days, hours, minutes and seconds 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); // Display the result in the element with id="demo" document.getElementById("demo").innerHTML = days + "<font color='red'> दिन,</font> " + hours + "<font color='red'> घंटे,</font> " + minutes + "<font color='red'> मिनट,</font> " + seconds + "<font color='red'> सेकेंड <br></font>पहले "; // If the count down is finished, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = ""; } }, 1000); </script>
Above we have given you the complete coding program of New Year Wishes HTML & CSS (Festival Wish Coding), which you can copy and run in your computer system. you can edit and style this code attractive with your own choice using CSS Stylesheet. I hope you read well and learned something amazing. If you have any questions and doubts, please ask in the comment sections.
Read Also –
- Create Responsive Navigation Bar with HTML and CSS only.
- Create Responsive and Attractive Contact Us Page.
- Learn Full Tutorial of HTML with Coding Examples.
- Create attractive and stylish Table with HTML and CSS.
- Learn Full Tutorial of CSS with Coding Examples.
- Get full code of New Year Wishes from our GitHub.
0 Comments