diff --git a/public/abc.jpg b/public/abc.jpg
new file mode 100644
index 0000000..347bae7
Binary files /dev/null and b/public/abc.jpg differ
diff --git a/src/App.jsx b/src/App.jsx
index c4b9226..5f9ea90 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,7 +1,31 @@
-import React from "react";
+import "./App.css";
+import Card from "./components/card";
+import Pop from "./components/modal";
+import { data } from "./components/data";
+
+export default function App() {
+  return (
+    <div id='main' className=" mx-0 my-0 px-4 py-4  bg-[#2E243c] overflow-hidden  relative">
+      <div id="pop">
+        <Pop 
+          title = "ABX"
+          detail = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy"
+
+        />
+      </div>
+      
+      <h2 className="text-center text-xl font-bold md:text-[60px] md:my-16 text-white">EVENTS</h2>
+      
+      <div id='row' className='flex flex-col justify-between items-center lg:flex-row flex flex-wrap shrink-0'>
+        {
+          data.map( (d) => (
+            <Card data={d} />
+
+          ))
+        }
+      </div>
+    </div>
+  );
+}
+
 
-export default function App(){
-  return(
-    <div className="text-center font-bold">start here</div>
-  )
-}
\ No newline at end of file
diff --git a/src/components/abc.jpg b/src/components/abc.jpg
new file mode 100644
index 0000000..347bae7
Binary files /dev/null and b/src/components/abc.jpg differ
diff --git a/src/components/card.jsx b/src/components/card.jsx
new file mode 100644
index 0000000..f493d5c
--- /dev/null
+++ b/src/components/card.jsx
@@ -0,0 +1,18 @@
+import React from "react"; 
+import { data } from "./data";
+
+export default function Card({data}){
+    
+    return(
+        
+        <div className= "w-60 mx-12 my-4  rounded-md relative group border-solid border-2 md:w-[500px] h-[300px]  first-letter: lg:w-96">
+            {/* <img src = {`../public/${props.img}`} /> */}
+            <img src= {data.img} className = "w-[100%] h-[100%] group-hover:scale-10 group-hover:scale-100 group-hover:blur-lg "/>
+            <div className= " absolute  px-4 py-30  w-[100%] h-[100%] translate-y-[0px] invisible text-white transition ease-in-out  duration-500 group-hover:-translate-y-[200px]  group-hover:visible" >
+                <h2>{data.info}</h2>
+                <button className = "border-2  px-8 py-2 text-xl bg-green-400 hover:border-2 hover:scale-105 hover:border- rounded-md font-semibold my-8  absolute left-[35%] " >More</button>
+            </div>
+        </div>
+        )
+    }
+    
\ No newline at end of file
diff --git a/src/components/data.jsx b/src/components/data.jsx
new file mode 100644
index 0000000..2ca7b98
--- /dev/null
+++ b/src/components/data.jsx
@@ -0,0 +1,40 @@
+export const data = [
+    {key :1,
+        img : "../public/abc.jpg",
+        info :"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer",
+    },
+    {key :2,
+        img : "../public/abc.jpg",
+       info :"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer",
+    },
+    {key :3,
+        img : "../public/abc.jpg",
+       info :"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer",
+    },
+    {key :4,
+        img : "../public/abc.jpg",
+       info :"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer",
+    },
+    {key :5,
+        img : "../public/abc.jpg",
+       info :"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer",
+    },
+    {key :6,
+        img : "../public/abc.jpg",
+       info :"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer",
+    },
+    {key :7,
+        img : "../public/abc.jpg",
+       info :"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer",
+    },
+    {key :8,
+        img : "../public/abc.jpg",
+       info :"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer",
+    },
+    {key :9,
+        img : "../public/abc.jpg",
+       info :"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer",
+    },
+    
+
+]
\ No newline at end of file
diff --git a/src/components/modal.jsx b/src/components/modal.jsx
new file mode 100644
index 0000000..5459486
--- /dev/null
+++ b/src/components/modal.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+export default function Pop(props){
+    return(
+        <div className= " fixed top-10 z-10 left-[0%] w-80 h-40 bg-white text-center sm:left-0 md:left-[40%]" id="pop">
+            <button className = "absolute left-0 border-2 px-4 py-2" id="clear">X</button>
+            <h1 className='text-2xl'>{props.title}</h1>
+            <p className="my-2">{props.detail}</p>
+        </div>
+    )
+}
\ No newline at end of file