diff --git a/index.html b/index.html
new file mode 100644
index 0000000..29c3581
--- /dev/null
+++ b/index.html
@@ -0,0 +1,470 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Happy New Year</title>
+   <link href="https://fonts.googleapis.com/css2?family=Bilbo+Swash+Caps&family=Electrolize&family=Roboto&display=swap" rel="stylesheet">
+   <link href="https://fonts.googleapis.com/css2?family=Electrolize&family=Roboto&display=swap">
+  <style>
+    @import url('https://fonts.googleapis.com/css?family=Montserrat:700|Pacifico');
+*, *:after, *:before {
+   box-sizing: border-box;
+   margin: 0;
+   padding: 0;
+   -webkit-transition: all 100ms ease-in;
+   transition: all 100ms ease-in;
+}
+html {
+   background: #222048;
+}
+.msg {
+   width: 100%;
+   font-family: "Bilbo Swash Caps", cursive;
+   font-size: 100px;
+   font-weight: bolder;
+   color: #ff0000;
+   text-align: center;
+   position: absolute;
+   opacity: 0;
+   animation: message 2s ease-in-out 7s forwards;
+   margin-top: 150px;
+}
+.Year {
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   display: flex;
+   flex-direction: row;
+   justify-content: center;
+   align-items: center;
+   overflow: hidden;
+   padding: 200px 100px 0px 0px;
+}
+.Year>span {
+   font-family:"Poppins", sans-serif;
+   font-size: 175px;
+   font-weight: 600;
+   color: #7a8fe8;
+   margin-right: 30px;
+}
+span.y1 {
+   position: absolute;
+   top: 50%;
+   right: 50%;
+   margin-right: -200px;
+   animation: Yr_2023 5s ease-in-out 5s forwards;
+}
+span.y2 {
+   position: absolute;
+   right: 0%;
+   margin-right: -200px;
+   animation: Yr_2024 6s ease-in-out forwards;
+}
+span.y2:before {
+   content: '';
+   width: 0px;
+   height: 6px;
+   display: block;
+   border-radius: 3px;
+   background: #eeeeee;
+   transform: rotate(0deg);
+   transform-origin: left top;
+   position: absolute;
+   top: 55px;
+   left: 10px;
+   z-index: -1;
+   animation: years 1s ease-in-out 4s;
+}
+.balloon {
+   width: 100px;
+   height: 100px;
+   display: block;
+   background: #e3c635;
+   border-radius: 50%;
+   position: absolute;
+   top: 50%;
+   margin-top: -165px;
+   right: 0%;
+   margin-right: -200px;
+   animation: balloon_animation 10s ease-in-out forwards;
+}
+.balloon:before {
+   content: '';
+   width: 0;
+   height: 0;
+   border-style: solid;
+   border-width: 0 10px 20px 10px;
+   border-color: transparent transparent #b19b32 transparent;
+   position: absolute;
+   left: 50%;
+   margin-left: -10px;
+   bottom: -10px;
+   z-index: -1;
+}
+.balloon:after {
+   content: '';
+   width: 4px;
+   height: 100px;
+   display: block;
+   background: #fff;
+   border-radius: 0px 0px 3px 3px;
+   position: absolute;
+   left: 50%;
+   margin-left: -2px;
+   bottom: -110px;
+}
+.cracker {
+   width: 100%;
+   height: 100%;
+   display: block;
+   position: absolute;
+   top: 0;
+   left: 0;
+   overflow: hidden;
+}
+.cracker>div {
+   border: 2px solid #fff;
+   position: absolute;
+   opacity: 0;
+   animation: fire 1.5s ease-in-out 8s forwards;
+}
+.cracker>div.f1 {
+   left: 20%;
+   top: 40%;
+}
+.cracker>div.f2 {
+   left: 15%;
+   top: 70%;
+}
+.cracker>div.f3 {
+   right: 20%;
+   top: 40%;
+}
+.cracker>div.f4 {
+   right: 15%;
+   top: 70%;
+}
+.cracker>div span {
+   width: 6px;
+   height: 6px;
+   display: block;
+   position: absolute;
+   top: 0;
+   left: 0;
+   opacity: 0;
+   animation: fire_animation 0.5s ease-in-out 9s forwards;
+}
+.cracker>div span:nth-child(1) {
+   transform: rotate(0deg);
+}
+.cracker>div span:nth-child(2) {
+   transform: rotate(120deg);
+}
+.cracker>div span:nth-child(3) {
+   transform: rotate(240deg);
+}
+.cracker>div span:before {
+   content: '';
+   width: 2px;
+   height: 50px;
+   display: block;
+   background: #f5cc06;
+   position: absolute;
+   top: -60px;
+   left: 2px;
+}
+.cracker>div span:after {
+   content: '';
+   width: 2px;
+   height: 50px;
+   display: block;
+   background: #f5cc06;
+   position: absolute;
+   bottom: -60px;
+   left: 2px;
+}
+.cracker>div span i:before {
+   content: '';
+   width: 3px;
+   height: 3px;
+   display: block;
+   border-radius: 50%;
+   background: #fff;
+   position: absolute;
+   top: -15px;
+   left: 10px;
+}
+.cracker>div span i:after {
+   content: '';
+   width: 3px;
+   height: 3px;
+   display: block;
+   border-radius: 50%;
+   background: #fff;
+   position: absolute;
+   top: -15px;
+   right: 10px;
+}
+@keyframes Yr_2024 {
+   0% {
+      right: 0%;
+   }
+   66.6666% {
+      right: 50%;
+      margin-right: -300px;
+   }
+   90% {
+      right: 50%;
+      margin-right: -300px;
+   }
+   100% {
+      right: 50%;
+   }
+}
+@keyframes balloon_animation {
+   0% {
+      right: 0%;
+   }
+   40% {
+      right: 50%;
+      margin-right: -300px;
+   }
+   50% {
+      right: 50%;
+      margin-right: -200px;
+      top: 50%;
+   }
+   100% {
+      top: -100%;
+      right: 50%;
+   }
+}
+@keyframes years {
+   0% {
+      transform: rotate(-30deg);
+      width: 40px;
+   }
+   100% {
+      transform: rotate(-150deg);
+      width: 70px;
+   }
+}
+@keyframes Yr_2023 {
+   0% {
+      top: 50%;
+   }
+   100% {
+      top: -100%;
+   }
+}
+@keyframes message {
+   0% {
+      margin-top: 0px;
+      opacity: 0;
+   }
+   100% {
+      margin-top: -200px;
+      opacity: 1;
+   }
+}
+.firework {
+    position: relative;
+    opacity: 0;
+    animation: show_fireworks 2s
+     ease-in-out 5s forwards;
+    margin-top: 20%;
+    z-index:-1;
+}
+
+@keyframes show_fireworks {
+    0% {
+        opacity: 0;
+    }
+    99% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+}
+
+.cracker {
+    position: absolute;
+    width: 4px;
+    height: 80px;
+    transform-origin: 50% 100%;
+    overflow: hidden;
+}
+
+.cracker::before {
+    content: '';
+    background-color:
+     rgb(255, 255, 0);
+    height: 40px;
+    position: absolute;
+    left: 0;
+    right: 0;
+    animation: fire 2s
+     ease-in-out infinite;
+}
+
+@keyframes fire {
+    0% {
+        top: 100%;
+    }
+    25% {
+        top: 50%;
+    }
+    50% {
+        top: -25%;
+    }
+    75% {
+        top: -50%;
+    }
+    100% {
+        top: -50%;
+    }
+}
+
+.cracker:nth-child(1) {
+    transform: rotate(0deg)
+     translateY(-15px);
+}
+.cracker:nth-child(2) {
+    transform: rotate(30deg)
+     translateY(-15px);
+}
+.cracker:nth-child(3) {
+    transform: rotate(60deg)
+     translateY(-15px);
+}
+.cracker:nth-child(4) {
+    transform: rotate(90deg)
+     translateY(-15px);
+}
+.cracker:nth-child(5) {
+    transform: rotate(120deg)
+     translateY(-15px);
+}
+.cracker:nth-child(6) {
+    transform: rotate(150deg)
+     translateY(-15px);
+}
+.cracker:nth-child(7) {
+    transform: rotate(180deg)
+     translateY(-15px);
+}
+.cracker:nth-child(8) {
+    transform: rotate(210deg)
+     translateY(-15px);
+}
+.cracker:nth-child(9) {
+    transform: rotate(240deg)
+     translateY(-15px);
+}
+.cracker:nth-child(10) {
+    transform: rotate(270deg)
+     translateY(-15px);
+}
+.cracker:nth-child(11) {
+    transform: rotate(300deg)
+     translateY(-15px);
+}
+.cracker:nth-child(12) {
+    transform: rotate(330deg)
+     translateY(-15px);
+}
+
+#firework1 {
+    left: 25%;
+    top: 50%;
+    transform: scale(1);
+}
+
+#firework2 {
+    left: 50%;
+    top: 75%;
+    transform: scale(0.5);
+}
+
+#firework3 {
+    left: 80%;
+    top: 15%;
+    transform: scale(1.5);
+}
+
+#crd{
+    color: #7a8fe8;
+    position: absolute;
+    bottom: 12px;
+    right: 12px;
+    font-size: 50px;
+    font-family: 'Electrolize', sans-serif;
+    border-bottom: 5px solid #7a8fe8; /* Adjust color and thickness */
+    border-spacing: 5px;
+    
+}
+
+  </style>
+</head>
+<body>
+   <strong><footer id="crd">--Kushal Agrawal</footer></strong>
+  <div class="msg">Happy New Year</div>
+  <div class="Year">
+    <span>202</span>
+    <span class="y1">3</span>
+    <span class="y2">4</span>
+    <div class="balloon"></div>
+  </div>
+  <div class="firework"
+    id="firework1">
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+</div>
+<div class="firework"
+ id="firework2">
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+</div>
+<div class="firework"
+ id="firework3">
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+    <div class="cracker"></div>
+
+    
+</div>
+  </body>
+</html>
