Done with alignment

Author: User-DK

Frontend/src/assets/yuvarang-2025.png

@@ -98,7 +98,7 @@ const Event = ({ index, idx, Name, date, description, icon, register }) => {
 
   return (
     <div>
-      <div className={index === 1 ? "event1" : "event"}>
+      <div className="event">
         <div className="event-image">
           <img src={icon} alt="" />
         </div>
@@ -216,7 +216,7 @@ const Event = ({ index, idx, Name, date, description, icon, register }) => {
           <div className="modal-content">
             <span className="close" onClick={() => setDescp(false)}>
               &times;
-            </span>
+            </span> 
             <div
               className="event-descp"
               style={{
@@ -225,7 +225,7 @@ const Event = ({ index, idx, Name, date, description, icon, register }) => {
                 justifyContent: "center",
                 alignItems: "center",
                 marginLeft: isSmallScreen ? "0rem" : "20rem",
-                gap: isSmallScreen ? "0rem" : "10rem",
+                gap: isSmallScreen ? "1rem" : "10rem",
                 fontSize: isSmallScreen ? "4rem" : "1rem",
                 fontWeight: isSmallScreen ? "normal" : "bold",
               }}

Frontend/src/components/events/Event.jsx

@@ -4,7 +4,7 @@ const events = [
     Name: 'Yuvarang 2025',
     description:
       'Yuvarang is the signature event of Art Circle. It is the only cultural mega event of WCE Sangli. The event is open to all colleges and for all trades. Art Circle tries to cover and enhance all the artforms in all the domains (eg- drama, dance, music or content writing like poetry sketching colouring and many more. Art Circle also gives an opportunity to school going children to showcase their talent.We members of Art Circle always try to preserve the culture,promote and encourage the artforms of India and always try to do our best in this initiative',
-    icon: "https://github.com/wce-artcircle/Assets/blob/main/events/yuvarang-2025.png?raw=true",
+    icon: "https://github.com/wce-artcircle/Assets/blob/main/events/yuvarang-final-2025.png?raw=true",
     register: "https://konfhub.com/yuvarang-2025"
   },
   {

Frontend/src/components/events/allEvents.js

@@ -222,7 +222,7 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    width: 15rem;
+    width: 20rem;
     text-align: center;
     margin: 0px;
   }
@@ -276,28 +276,21 @@
     color: white;
   }
   .modal {
-    position: fixed; 
-    top: 20rem;
-    left: 2.5rem;
     width: 10rem;
-    height: 15rem;
-    margin-left: 2rem;
-    background-color: rgba(0, 0, 0, 0.7);
+    height: 20rem;
+  }
+
+  .modal-content {  
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
-  }
-
-  .modal-content {
-    position: fixed;
     overflow-y:auto;
   background-color: #7c48dc;
   color: rgb(255, 255, 255);
-    width: 15rem;
     border-radius: 10px;
     font-weight: 300;
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
+
   }
 
   .close {
@@ -338,6 +331,8 @@
   height: 100%;
   overflow: auto;
   background-color: rgba(0, 0, 0, 0.8);
+  align-items: center;
+  justify-content: center;
 }
 
 /* Close button for the modal */
@@ -368,6 +363,9 @@
   width: auto;
   height: auto;
   border-radius: 0.7rem;
+  align-items: center;
+  justify-content: center;
+
 }
 
 /* Caption for the expanded image */
@@ -386,13 +384,17 @@
   .modal1-content {
     max-width: 85%;
     max-height: 75vh;
+    align-items: center;
+    justify-content: center;
   }
 }
 
 @media (max-width: 480px) {
   .modal1-content {
     max-width: 80%;
     max-height: 70vh;
+    align-items: center;
+    justify-content: center;
   }
 }
 

Frontend/src/components/events/events.css

@@ -22,6 +22,7 @@ function Toplink() {
       <a
         href="https://konfhub.com/yuvarang-2025"
         target="_blank"
+        rel="noopener noreferrer"
         style={{
           color: "black",
           fontWeight: "bold",