Event Section

src/Components/About/NitsHacks/NitsHacks.module.scss

@@ -6,6 +6,18 @@
   font-style: normal;
 }
 .nitsParent {
+  margin: 2rem;
+  @media screen and (min-width: 640px) {
+    margin: 2rem;
+  }
+  @media screen and (min-width: 900px) {
+    margin: 4rem;
+  }
+  @media screen and (min-width: 1000px) {
+    margin-left: 15rem;
+    margin-right: 15rem;
+    margin-top: 10rem;
+  }
   .NitsHacks {
     .headWrapper {
       width: 100%;
@@ -16,17 +28,18 @@
       .heading {
         font-size: 1.5rem;
         text-align: left;
-        // background-color: black;
-        color: var(--gdsc-yellow-1-100);
-        // line-height: 89.13px;
-        font-family: "StarJedi", sans-serif;
-        font-weight: 400;
         @media screen and (min-width: 640px) {
           font-size: 2rem;
         }
         @media screen and (min-width: 900px) {
           font-size: 3rem;
         }
+        text-align: right;
+        // background-color: black;
+        color: var(--gdsc-yellow-1-100);
+        // line-height: 89.13px;
+        font-family: "StarJedi";
+        font-weight: 400;
       }
     }
     .line {
@@ -65,22 +78,20 @@
       background-color: black;
       color: #c0c0c0;
       font-size: 14px;
+      @media screen and (min-width: 800px) {
+        font-size: 18px;
+      }
       align-items: center;
       justify-content: center;
       font-weight: 400;
       line-height: 1.8;
       font-family: "Outfit", sans-serif;
       padding: 1rem;
       overflow: hidden;
-      @media screen and (min-width: 800px) {
-        font-size: 18px;
-      }
     }
     .icon {
       height: 30px;
       width: 20px;
-      background-color: white;
-      margin-right: 10px;
     }
 
     .main {
@@ -97,14 +108,13 @@
     }
     .brochure {
       display: flex;
-
       height: 50px;
-      width: 400px;
+      width: 100%;
+      justify-content: start;
       align-items: center;
-      padding-top: 10px;
       padding-right: 55px;
+      padding-top: 10px;
       padding-bottom: 16px;
-      // padding-left:55px;
       gap: 10px;
       margin-top: 20px;
       .btn {
@@ -114,6 +124,7 @@
         height: 40px;
         width: 180px;
         display: flex;
+        gap: 10px;
         align-items: center;
         justify-content: center;
         margin-top: 20px;
@@ -132,9 +143,9 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    justify-content: flex-end;
+    justify-content: flex-start;
     margin: 2rem;
-    .redSaber {
+    .blueSaber {
       width: 20%;
     }
   }
@@ -152,39 +163,19 @@
   }
   //}
   .element {
+    position: relative;
     width: 100%; /* Adjust the width */
     height: 150px; /* Adjust the height */
     background-color: #4a4a4a; /* Adjust the background color */
-    clip-path: polygon(0% 0%, 100% 0%, 100% 185%, 80% 70%, 45% 70%, 40% 100%, 0% 100%);
-  }
-  @media screen and (min-width: 640px) {
-    margin: 2rem;
-  }
-  @media screen and (min-width: 900px) {
-    margin: 4rem;
-  }
-  @media screen and (min-width: 1000px) {
-    margin-left: 15rem;
-    margin-right: 15rem;
-    margin-top: 10rem;
-  }
-
-  @media screen and (max-width: 600px) {
-    hr.line1 {
-      width: 6px;
-      height: 3px;
-      border: 2px solid red;
-      background-color: white;
-    }
-    hr.lin2 {
-      width: 77px;
-      height: 3px;
-      border: 2px solid red;
-      background-color: white;
-    }
-    .brochure {
-      justify-content: flex-start;
-      margin-left: 2rem;
-    }
+    clip-path: polygon(
+      0% 0%,
+      100% 0%,
+      100% 100%,
+      55% 100%,
+      50% 70%,
+      15% 70%,
+      10% 100%,
+      0% 100%
+    );
   }
 }

src/Components/CustomButton/CustomButton.jsx

@@ -1,8 +1,14 @@
+import { useState } from "react";
 import styles from "./CustomButton.module.scss";
 
 const Button = ({ name, ohref }) => {
+  const [audio] = useState(new Audio("/sound/button.wav"));
+  const playm = () => {
+    audio.volume = 0.5;
+    audio.play();
+  };
   return (
-    <div className={styles.button}>
+    <div onMouseEnter={playm} className={styles.button}>
       <a href={ohref} className={styles.backtohome}>
         <div className={styles.top}></div>
         <div className={styles.visited}>{name}</div>

src/Components/CustomButton/CustomButton.module.scss

@@ -21,6 +21,7 @@
   background-color: white;
   color: black;
   padding: 5px 0;
+  text-align: center;
 }
 
 .last {

src/Pages/Event/Event.jsx

@@ -9,37 +9,47 @@ const Event = () => {
   const info = data[id - 1];
   const [loaded, setLoaded] = useState(false);
   return loaded ? (
-    <div>
+    <div className={styles.event}>
       <Navbar />
-      <section className={styles.innerParent}>
-        <div className={styles.infoParent}>
-          <img src="/images/starchar.png" alt="starwar characters" />
-          <div className={styles.info}>
-            <h1>{info.name}</h1>
-            <div className={styles.mobileimg}>
-              <div
-                className={styles.eImg}
-                style={{
-                  backgroundImage: `url("${info.photo}")`,
-                }}
-              ></div>
+      <div className={styles.event_parent}>
+        <div className={styles.left}>
+          <div className={styles.top}>
+            <div className={styles.images}>
+              <img
+                className={styles.bot1}
+                src="https://res.cloudinary.com/dtt4ftdrw/image/upload/v1727804005/yoda_pdb5v4.webp"
+                alt="im1"
+              />
+              <img
+                className={styles.bot2}
+                src="https://res.cloudinary.com/dtt4ftdrw/image/upload/v1727799326/Death_vader_it5m5h.webp"
+                alt="im2"
+              />
+              <img
+                className={styles.bot3}
+                src="https://res.cloudinary.com/dtt4ftdrw/image/upload/v1727802329/storm_trooper_kgn7no.png"
+                alt="im3"
+              />
             </div>
-            {info.bigdesc.split("\n").map((value) => (
-              <p>{value}</p>
-            ))}
-            <div className={styles.buttons}>
-              <Button name="register now" ohref={info.gform} />
-              <Button name="back to home" ohref="/" />
+          </div>
+          <div className={styles.middle}>
+            <h1 className={styles.title}>{info.name}</h1>
+            <img className={styles.poster_mob} src={info.photo} alt="POSTER" />
+            <div className={styles.desc}>
+              {info.bigdesc.split("\n").map((value) => (
+                <p>{value}</p>
+              ))}
             </div>
           </div>
+          <div className={styles.bottom}>
+            <Button name="register now" ohref={info.gform} />
+            <Button name="back to home" ohref="/" />
+          </div>
+        </div>
+        <div className={styles.right}>
+          <img className={styles.poster} src={info.photo} alt="POSTER" />
         </div>
-        <div
-          className={styles.eventImage}
-          style={{
-            backgroundImage: `url("${info.photo}")`,
-          }}
-        ></div>
-      </section>
+      </div>
       <Footer />
     </div>
   ) : (