diff --git a/CSS/event.css b/CSS/event.css
new file mode 100644
index 0000000..5ba2a87
--- /dev/null
+++ b/CSS/event.css
@@ -0,0 +1,114 @@
+
+.container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.item-container {
+    position: relative;
+    margin: 24px;
+    width: 320px;
+    height: 570px;
+    overflow: hidden;
+    background-color: #fff;
+    box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+}
+.img-container,
+.body-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.img-container img {
+    width: 100%;
+}
+.body-container {
+    position: relative;
+}
+.overlay {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    background-color: rgba(24, 83, 122, 0.6);
+    opacity: 0;
+    transition: height linear 0.4s, opacity linear 0.2s;
+}
+.item-container:hover .overlay {
+    opacity: 1;
+    height: 150px;
+}
+.event-info {
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 8px;
+}
+.title,
+.price {
+    color: #18537a;
+    font-size: 1.5em;
+    font-weight: bold;
+    letter-spacing: 1px;
+    margin: 12px;
+}
+.info {
+    letter-spacing: 0.5px;
+    margin-bottom: 6px;
+}
+.separator {
+    width: 20%;
+    height: 6px;
+    background-color: #17537a;
+    margin-bottom: 16px;
+}
+.additional-info {
+    border-top: 1px solid #bbb;
+    margin-top: 12px;
+    padding: 28px;
+    padding-bottom: 0;
+}
+.additional-info .info {
+    font-size: 0.9em;
+    margin-bottom: 20px;
+    text-align: center;
+}
+.info i {
+    color: #18537a;
+    font-size: 1.1em;
+    margin-right: 4px;
+}
+.info span {
+    color: #18537a;
+    font-weight: bolder;
+}
+.action {
+    color: #fff;
+    border: 3px solid #fff;
+    background-color: transparent;
+    position: absolute;
+    top: -100px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60%;
+    outline: none;
+    cursor: pointer;
+    padding: 12px;
+    text-transform: uppercase;
+    font-size: 1.3em;
+    font-weight: bold;
+    letter-spacing: 2px;
+    transition: background-color 0.4s, top 0.4s;
+}
+.item-container:hover .action {
+    top: 50px;
+}
+.action:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+}
\ No newline at end of file
diff --git a/CSS/project.css b/CSS/project.css
new file mode 100644
index 0000000..6acf11e
--- /dev/null
+++ b/CSS/project.css
@@ -0,0 +1,114 @@
+
+.container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+.item-container {
+    position: relative;
+    margin: 24px;
+    width: 320px;
+    height: 570px;
+    overflow: hidden;
+    background-color: #fff;
+    box-shadow: 0 0 30px 5px rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+}
+.img-container,
+.body-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.img-container img {
+    width: 100%;
+}
+.body-container {
+    position: relative;
+}
+.overlay {
+    position: relative;
+    width: 100%;
+    height: 400px;
+    background-color: rgba(24, 83, 122, 0.6);
+    opacity: 0;
+    transition: height linear 0.4s, opacity linear 0.2s;
+}
+.item-container:hover .overlay {
+    opacity: 1;
+    height: 150px;
+}
+.event-info {
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 8px;
+}
+.title,
+.price {
+    color: #18537a;
+    font-size: 1.5em;
+    font-weight: bold;
+    letter-spacing: 1px;
+    margin: 12px;
+}
+.info {
+    letter-spacing: 0.5px;
+    margin-bottom: 6px;
+}
+.separator {
+    width: 20%;
+    height: 6px;
+    background-color: #17537a;
+    margin-bottom: 16px;
+}
+.additional-info {
+    border-top: 1px solid #bbb;
+    margin-top: 12px;
+    padding: 28px;
+    padding-bottom: 0;
+}
+.additional-info .info {
+    font-size: 0.9em;
+    margin-bottom: 20px;
+    text-align: center;
+}
+.info i {
+    color: #18537a;
+    font-size: 1.1em;
+    margin-right: 4px;
+}
+.info span {
+    color: #18537a;
+    font-weight: bolder;
+}
+.action {
+    color: #fff;
+    border: 3px solid #fff;
+    background-color: transparent;
+    position: absolute;
+    top: -100px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 60%;
+    outline: none;
+    cursor: pointer;
+    padding: 12px;
+    text-transform: uppercase;
+    font-size: 1.3em;
+    font-weight: bold;
+    letter-spacing: 2px;
+    transition: background-color 0.4s, top 0.4s;
+}
+.item-container:hover .action {
+    top: 50px;
+}
+.action:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+}
diff --git a/CSS/style.css b/CSS/style.css
index f999a27..7137f13 100644
--- a/CSS/style.css
+++ b/CSS/style.css
@@ -4,6 +4,9 @@
   padding: 0;
   box-sizing: border-box;
 }
+h1 {
+  text-align: center;
+}
 
 :root {
   --body: #fff;
@@ -290,3 +293,26 @@ footer {
     padding: 1rem;
   }
 }
+/* Add responsiveness */
+@media (max-width: 768px) {
+  .formname {
+    flex-direction: column;
+  }
+}
+.container {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.item-container {
+  position: relative;
+  margin: 24px;
+  width: 320px;
+  height: 570px;
+  overflow: hidden;
+  background-color: #fff;
+  box-shadow: 0 0 30px 5px rgb(0, 0, 0, 0.15);
+  cursor: pointer;
+}
diff --git a/Media/blood.jpeg b/Media/blood.jpeg
new file mode 100644
index 0000000..c861f1d
Binary files /dev/null and b/Media/blood.jpeg differ
diff --git a/Media/clothes.avif b/Media/clothes.avif
new file mode 100644
index 0000000..474b189
Binary files /dev/null and b/Media/clothes.avif differ
diff --git a/Media/cover.jpg b/Media/cover.jpg
new file mode 100644
index 0000000..4267213
Binary files /dev/null and b/Media/cover.jpg differ
diff --git a/Media/donate phpto.jpg b/Media/donate phpto.jpg
new file mode 100644
index 0000000..82ead92
Binary files /dev/null and b/Media/donate phpto.jpg differ
diff --git a/Media/money.jpg b/Media/money.jpg
new file mode 100644
index 0000000..59e425e
Binary files /dev/null and b/Media/money.jpg differ
diff --git a/Media/mosque.jpg b/Media/mosque.jpg
new file mode 100644
index 0000000..352799c
Binary files /dev/null and b/Media/mosque.jpg differ
diff --git a/Media/treatment.avif b/Media/treatment.avif
new file mode 100644
index 0000000..451c270
Binary files /dev/null and b/Media/treatment.avif differ
diff --git a/Media/water.jpg b/Media/water.jpg
new file mode 100644
index 0000000..b6d959f
Binary files /dev/null and b/Media/water.jpg differ
diff --git a/events.html b/events.html
index 7d570ba..fe5ae3e 100644
--- a/events.html
+++ b/events.html
@@ -5,8 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Char-E-T - Making a Difference</title>
     <!-- Main css for header and footer and colors -->
-    <link rel="stylesheet" href="./CSS/style.css" />
+    <link rel="stylesheet" href="./css/style.css" />
     <link
+      rel="stylesheet"
+      href="./CSS/event.css"
+      <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
   </head>
@@ -15,7 +18,111 @@
     <our-header></our-header>
 
     <main>
-      <!-- Your main content goes here  -->
+      <div class="container">
+        <div class="item-container">
+          <div class="img-container">
+            <img src="./Media/donate phpto.jpg" alt="Event image" />
+          </div>
+
+          <div class="body-container">
+            <div class="overlay"></div>
+
+            <div class="event-info">
+              <p class="title">Food donation</p>
+              <div class="separator"></div>
+              <p class="info">Cairo</p>
+              <p class="price">Free</p>
+
+              <div class="additional-info">
+                <p class="info description">
+                  Donate A Meal' is a charitable trust striving to help more
+                  than 500 kids across its three shelters. We are dedicated to
+                  our mission to create a family where the kids feel safe and
+                  find growth opportunities.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="item-container">
+          <div class="img-container">
+            <img src="./Media/money.jpg" alt="Event image" />
+          </div>
+
+          <div class="body-container">
+            <div class="overlay"></div>
+
+            <div class="event-info">
+              <p class="title">Fundraising event</p>
+              <div class="separator"></div>
+              <p class="info">Alexandria</p>
+              <p class="price">Free</p>
+              <div class="additional-info">
+                <p class="info description">
+                  Fundraising is not just about collecting money; it is about
+                  creating opportunities for individuals and communities to come
+                  together and support a cause they believe in. These events
+                  serve as a platform for building relationships, raising
+                  awareness, and fostering a sense of community.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="item-container">
+          <div class="img-container">
+            <img src="./Media/clothes.avif" alt="Event image" />
+          </div>
+          <div class="body-container">
+            <div class="overlay"></div>
+            <div class="event-info">
+              <p class="title">clothes donation event</p>
+              <div class="separator"></div>
+              <p class="info">Luxor</p>
+              <p class="price">Free</p>
+              <div class="additional-info">
+                <p class="info description">
+                  Clothing donation is a cornerstone of sustainable living,
+                  offering a practical solution to the problem of consumer
+                  waste. By donating your unwanted garments, you're not only
+                  decluttering responsibly but also promoting the reuse and
+                  recycling of textiles.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="item-container">
+          <div class="img-container">
+            <img src="./Media/blood.jpeg" alt="Event image" />
+          </div>
+
+          <div class="body-container">
+            <div class="overlay"></div>
+
+            <div class="event-info">
+              <p class="title">blood donation event</p>
+              <div class="separator"></div>
+              <p class="info">Giza</p>
+              <p class="price">Free</p>
+
+              <div class="additional-info">
+                <p class="info">
+                  Most of this is used to help people with medical conditions
+                  that require blood or blood products regularly. For example,
+                  34% of donated red blood cells are used to help treat people
+                  with cancer and blood diseases.
+                </p>
+
+                <p class="info description"></p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </main>
 
     <!-- The footer  -->
diff --git a/projects.html b/projects.html
index 7d570ba..dba275b 100644
--- a/projects.html
+++ b/projects.html
@@ -6,6 +6,7 @@
     <title>Char-E-T - Making a Difference</title>
     <!-- Main css for header and footer and colors -->
     <link rel="stylesheet" href="./CSS/style.css" />
+    <link rel="stylesheet" href="./CSS/project.css" />
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
@@ -15,7 +16,91 @@
     <our-header></our-header>
 
     <main>
-      <!-- Your main content goes here  -->
+      <div class="container">
+        <div class="item-container">
+          <div class="img-container">
+            <img src="./Media/mosque.jpg" alt="Event image" />
+          </div>
+          <div class="body-container">
+            <div class="overlay"></div>
+            <div class="event-info">
+              <p class="title">Building a mosque</p>
+              <div class="separator"></div>
+              <div class="additional-info">
+                <p class="info description"></p>
+                Gain the immense rewards of Sadaqah Jariyah by constructing a
+                mosque in your name or a loved ones. Build a Mosque and leave a
+                lasting legacy.
+              </div>
+            </div>
+            <button class="action">Donate Now</button>
+          </div>
+        </div>
+        <div class="item-container">
+          <div class="img-container">
+            <img src="./Media/water.jpg" alt="Event image" />
+          </div>
+          <div class="body-container">
+            <div class="overlay"></div>
+            <div class="event-info">
+              <p class="title">water connection</p>
+              <div class="separator"></div>
+              <div class="additional-info">
+                <p class="info description">
+                  you can participate in delivering clean water to a family
+                  through a home water connection, which will be an ongoing
+                  charity for you or a loved one.
+                </p>
+              </div>
+            </div>
+            <button class="action">Donate Now</button>
+          </div>
+        </div>
+        <div class="item-container">
+          <div class="img-container">
+            <img src="./Media/cover.jpg" alt="Event image" />
+          </div>
+          <div class="body-container">
+            <div class="overlay"></div>
+            <div class="event-info">
+              <p class="title">Donate a cover</p>
+              <div class="separator"></div>
+              <div class="additional-info">
+                <p class="info"></p>
+                <p class="info description">
+                  Each Winter 'Give a Kid a Blanket' gathers blankets and other
+                  items of warmth, which are given to children and families in
+                  need through social workers, public health nurses, the police,
+                  emergency housing, refuge, and other community workers.
+                </p>
+              </div>
+            </div>
+            <button class="action">Donate Now</button>
+          </div>
+        </div>
+        <div class="item-container">
+          <div class="img-container">
+            <img src="./Media/treatment.avif" alt="Event image" />
+          </div>
+          <div class="body-container">
+            <div class="overlay"></div>
+            <div class="event-info">
+              <p class="title">Donate treatment</p>
+              <div class="separator"></div>
+              <div class="additional-info">
+                <p class="info description">
+                  Helping donors benefit from surplus medications instead of
+                  spoiling, disposing of, or accumulating them unnecessarily.
+                  Helping money donors find suitable banks for their donations.
+                  Supporting hospitals and charitable organizations with more
+                  than our need for some types of treatment.
+                </p>
+              </div>
+            </div>
+            <button class="action">Donate Now</button>
+          </div>
+        </div>
+      </div>
     </main>
 
     <!-- The footer  -->