Update index.css

reflecthub · Oct 27, 2024 · c8a43f0 · c8a43f0
1 parent c96c5d3
commit c8a43f0
Showing 1 changed file with 60 additions and 10 deletions.
diff --git a/index.css b/index.css
@@ -14,6 +14,56 @@ body {
     flex-direction: column;
     min-height: 100vh;
 }
+/* Keyframes for the pop-up animation */
+@keyframes popUp {
+    0% {
+        transform: scale(0);
+        opacity: 0;
+    }
+    60% {
+        transform: scale(1.02);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@keyframes popUp1 {
+    0% {
+        transform: scale(0);
+        opacity: 0;
+    }
+    60% {
+        transform: scale(1);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1.001);
+    }
+}
+@keyframes popUp2 {
+    0% {
+        transform: scale(0);
+        opacity: 0;
+    }
+    60% {
+        transform: scale(5);
+        opacity: 1;
+    }
+    100% {
+        transform: scale(1.001);
+    }
+}
+/* Add this class to apply the animation */
+.pop-up-animate {
+    animation: popUp 0.6s ease;
+}
+.pop-up-animate1 {
+    animation: popUp1 0.6s ease;
+}
+.pop-up-animate2 {
+    animation: popUp2 0.6s ease;
+}
 
 /* Navbar styling */
 .navbar {
@@ -217,8 +267,8 @@ body {
     }
 
     .navbar-brand img {
-        width: 15vw; /* Responsive width for logo on smaller screens */
-        max-width: 90px; 
+        width: 50vw; /* Responsive width for logo on smaller screens */
+        max-width: 190px; 
     }
 
     /* Adjust navbar height and padding */
@@ -266,8 +316,8 @@ body {
     top: 0; /* Change to 0 to stick to very top */
     z-index: 999; /* Just below navbar */
     background-color: #c8ffcd;
-    padding: 15px 0;
-    width: 100%;
+    padding: 25px 25px;
+    width:100%;
 }
 .btn-group-toggle {
     width: 100%; /* Full width for better distribution */
@@ -324,7 +374,7 @@ body {
     border-radius: 8px;
     text-align: center;
     font-size: 1.25rem;
-    width: 98%;
+    width: 100%;
     height: auto;
     color: #333333;
     margin: 0 auto;
@@ -334,7 +384,7 @@ body {
 
 /* Colors for each content div */
 #div1 {
-    background-color: #73ff7f;
+    background-color: #21dcb4;
     color: #333333;
 }
 #div2 {
@@ -471,7 +521,7 @@ body {
     font-weight: bold;
     border-right: 2px solid rgb(26, 243, 48); /* Blinking cursor */
     width: 15em;
-    animation: typing 3.7s steps(60, end), blinkCursor 0.5s step-end infinite;
+    animation: typing 2.2s steps(50, end), blinkCursor 0.5s step-end infinite;
 }
 .typing-effect {
     font-family: 'Courier New', monospace;
@@ -493,7 +543,7 @@ body {
         width: 0;
     }
     to {
-        width: 100%; /* Expand to full width of the container */
+        width: 50%; /* Expand to full width of the container */
     }
 }
 
@@ -587,7 +637,7 @@ body {
     height: 100%; /* Full height of the h1 */
     /* background: rgba(255, 255, 255, 0.5); Green dim light with opacity */
     background-image: url('./green.png');
-    background-size: contain; /* Ensure the image scales correctly */
+    background-size:cover; /* Ensure the image scales correctly */
     background-repeat: no-repeat; /* Prevent the image from repeating */
     background-position: center; /* Center the image within the pseudo-element */
     /* background: linear-gradient(to right, transparent, #73ff71, transparent); */
@@ -673,7 +723,7 @@ body {
     padding: 20px;
     width: 80%; /* Responsive width */
     max-width: 500px; /* Maximum width */
-    animation: popupAnimation 0.5s ease forwards;
+    animation: popUp 0.5s ease forwards;
 }
 
 @keyframes popupAnimation {