Merge pull request JiyaGupta-cs#41 from sudhanshu-77/master

Animation-Added

src/Components/NewsLetter/NewsLetter.css

@@ -58,3 +58,25 @@
   position: relative;
   right: 10.5%;
 }
+.newsletter {
+  /* existing styles */
+
+  /* Add animation properties */
+  animation-name: floating;
+  animation-duration: 3s;
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+}
+
+/* Define the keyframes for the floating animation */
+@keyframes floating {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-10px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}

src/Components/Offers/Offers.css

@@ -1,29 +1,46 @@
-.offers{
+.offers {
     width: 65%;
-    height:60vh;
+    height: 60vh;
     display: flex;
     margin: auto;
     padding: 0px 140px;
     margin-bottom: 150px;
     background: linear-gradient(180deg, #fde1ff 0%, #e1ffea22 60%);
+    animation: floating 3s ease-in-out infinite;
 }
-.offers-left{
+
+@keyframes floating {
+    0% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-10px);
+    }
+    100% {
+        transform: translateY(0);
+    }
+}
+
+.offers-left {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
 }
-.offers-left h1{
+
+.offers-left h1 {
     color: #171717;
     font-size: 80px;
     font-weight: 600;
 }
-.offers-left p{
+
+.offers-left p {
     color: #171717;
     font-size: 22px;
     font-weight: 600;
 }
-.offers-left button{
+
+.offers-left button {
     width: 282px;
     height: 70px;
     border-radius: 35px;
@@ -35,10 +52,11 @@
     margin-top: 30px;
     cursor: pointer;
 }
-.offers-right{
+
+.offers-right {
     /* flex: 1; */
     display: flex;
     align-items: center;
     justify-content: flex-end;
     padding-top: 50px;
-}
+}