New Year Wishes HTML & CSS

Published by StudyMuch on December 31, 2022December 31, 2022

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 1^st 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.

New Year Wishes studymuch.in

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 –

1 Comment

smortergiremal · November 3, 2024 at 9:49 pm

Hi, just required you to know I he added your site to my Google bookmarks due to your layout. But seriously, I believe your internet site has 1 in the freshest theme I??ve came across. It extremely helps make reading your blog significantly easier.

New Year Wishes HTML & CSS

Related

1 Comment

smortergiremal · November 3, 2024 at 9:49 pm

Leave a Reply Cancel reply

Applications of AI (Artificial Intelligence)

Interview Questions and Answers for Freshers

Python Sets

New Year Wishes HTML & CSS

Related

1 Comment

smortergiremal · November 3, 2024 at 9:49 pm

Leave a Reply Cancel reply

Related Posts

Applications of AI (Artificial Intelligence)

Interview Questions and Answers for Freshers

Python Sets