diff --git a/CTF_Algeria_2k22_Website b/CTF_Algeria_2k22_Website
new file mode 160000
index 0000000..35a8d0c
--- /dev/null
+++ b/CTF_Algeria_2k22_Website
@@ -0,0 +1 @@
+Subproject commit 35a8d0ccc48f5d40288f4991ef905a1b131eed3c
diff --git a/src/index.html b/src/index.html
index cd35963..f5be66e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link href="../public/styles.css" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
     <title>CTF Algeria Website</title>
 </head>
 
@@ -100,7 +101,81 @@ <h1 class="text-bluesh text-4xl font-medium w-full pt-10">École supérieure en
   </div> 
 </section>
 <!--the end of the event venue= section-->
-  
+
+
+<!-- Event's content -->
+
+<section class="text-bluesh pb-24">
+  <h1 class="text-6xl font-bold text-center pt-32 pb-24">Event's content</h1>
+  <div class="container_img text-center text-3xl font-medium">
+      <h2 class="text-5xl font-medium W_C_title">Workshops</h2>
+      <div class="flex flex-col items-center">
+        <img class="item_img" src="place_holders/programmer.png" alt="Linux">
+        <p>Linux</p>
+      </div>
+      <div class="flex flex-col items-center">
+        <img class="item_img" src="place_holders/code.png" alt="DEVELOPMENT">
+        <p>DEVELOPMENT</p>
+      </div>
+      <div class="flex flex-col items-center">
+        <img class="item_img" src="place_holders/ux_design.png" alt="UX grapgic design">
+        <p>UX grapgic design</p>
+      </div>
+  </div>
+
+  <div class="container_img text-center text-3xl font-medium">
+    <h2 class="text-5xl font-medium W_C_title pt-32">Conferences</h2>
+    <div class="flex flex-col items-center">
+      <img class="item_img" src="place_holders/programmer.png" alt="Linux">
+      <p>Linux</p>
+    </div>
+    <div class="flex flex-col items-center">
+      <img class="item_img" src="place_holders/code.png" alt="DEVELOPMENT">
+      <p>DEVELOPMENT</p>
+    </div>
+    <div class="flex flex-col items-center">
+      <img class="item_img" src="place_holders/ux_design.png" alt="UX grapgic design">
+      <p>UX grapgic design</p>
+    </div>
+  </div>
+  <div class="text-center">
+    <h1 class="text-6xl font-medium pt-32">What is CTF?</h1>
+    <h3 class="text-3xl pb-24">Capture the flag</h3>
+  </div>
+
+
+  <div class="container text-center justify-center">
+    <p class="long_text text-2xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis
+      consectetur animi aliquid, laborum dicta labore soluta <br> et fuga sequi
+      adipisci, placeat officiis  mollitia, eveniet  voluptatum modi <br> consequatur
+      incidunt non quidem! Lorem ipsum dolor sit amet consectetur, adipisicing
+      elit. Perspiciatis consequatur praesentium <br> ab suscipit obcaecati tempora
+      ad possimus iusto aperiam provident, vel optio at esse! Atque
+      perspiciatis repellendus eius alias fugit.
+      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis
+      consectetur animi aliquid, laborum dicta labore soluta <br> et fuga sequi
+      adipisci, placeat officiis  mollitia, eveniet  voluptatum modi <br> consequatur
+      incidunt non quidem! Lorem ipsum dolor sit amet consectetur, adipisicing
+      elit. Perspiciatis consequatur praesentium <br> ab suscipit obcaecati tempora
+      ad possimus iusto aperiam provident, vel optio at esse! Atque
+      perspiciatis repellendus eius alias fugit.</p>
+    <div class="flex flex-col items-center">
+      <img class="logo_img pb-24" src="place_holders/logo_blue.png" alt="logo">
+      <h3 class="text-3xl font-medium">placeholder</h3>
+      <p class="pt-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis
+        consectetur animi aliquid, laborum dicta labore soluta et fuga sequi
+        adipisci, placeat officiis mollitia,</p>
+      <h3 class="text-3xl font-medium time_text">Time</h3>
+      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis
+        consectetur animi aliquid, laborum dicta labore soluta et fuga sequi
+        adipisci, placeat officiis mollitia,</p>
+    </div>
+    
+  </div>   
+</section> 
+
+<!-- end of the event's content -->
+
 
     <!-- Agenda part -->
     <section
diff --git a/src/place_holders/code.png b/src/place_holders/code.png
new file mode 100644
index 0000000..302483f
Binary files /dev/null and b/src/place_holders/code.png differ
diff --git a/src/place_holders/logo_blue.png b/src/place_holders/logo_blue.png
new file mode 100644
index 0000000..094e163
Binary files /dev/null and b/src/place_holders/logo_blue.png differ
diff --git a/src/place_holders/programmer.png b/src/place_holders/programmer.png
new file mode 100644
index 0000000..8c0a81a
Binary files /dev/null and b/src/place_holders/programmer.png differ
diff --git a/src/place_holders/ux_design.png b/src/place_holders/ux_design.png
new file mode 100644
index 0000000..51e4026
Binary files /dev/null and b/src/place_holders/ux_design.png differ
diff --git a/src/styles.css b/src/styles.css
index 6fbabf0..ea12c07 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -409,3 +409,48 @@ input::placeholder, textarea::placeholder{
 
 /* end of footer part */
 
+
+
+/* Event's content */
+
+.container_img{
+  display: grid;
+  grid-template-columns: 30% 30% 30%;
+  justify-content: space-evenly;
+  align-content: space-evenly;
+  row-gap: 20px;
+}
+
+.container_img img{
+  height: 500px;
+  width: 380px;
+  border-radius: 10px;
+}
+.W_C_title{
+  padding-bottom: 40px;
+  grid-column-start: 1;
+  grid-column-end: 4;
+  text-align: left;
+}
+.container{
+  display: grid;
+  grid-template-columns: 41% 41%;
+  justify-content: space-evenly;
+  align-content: space-around;
+}
+.long_text{
+  grid-row-start: 1;
+  grid-row-end: 6;
+  grid-column: 2;
+  width: 100%;
+  background-color: rgba(156, 163, 175, 0.2);
+}
+.logo_img{
+  width: 40%;
+}
+.time_text{
+  padding-top: 50px;
+  padding-bottom: 40px;
+}
+
+/* end of the event's content */