diff --git a/assets/Icon.png b/assets/Icon.png
new file mode 100644
index 0000000..fb380bb
Binary files /dev/null and b/assets/Icon.png differ
diff --git a/index.css b/index.css
index 3104a4f..f95a8c0 100644
--- a/index.css
+++ b/index.css
@@ -541,6 +541,39 @@ form #type-msg {
   margin-bottom: 20px;
 }
 
+/* Pop windows for card */
+
+.pop-up {
+  width: 343px;
+  height: auto;
+  position: fixed;
+  top: 60px;
+  right: 5%;
+  bottom: 0;
+  left: calc(50% - 343px / 2);
+  overflow: scroll;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  border-radius: 10px;
+  background-color: #fff;
+}
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 100%;
+  margin-top: 30px;
+}
+
+.top-1 {
+  width: 10px;
+  height: 20px;
+  position: relative;
+}
+
 @media only screen and (min-width: 768px) {
   .wrapper {
     width: auto;
@@ -763,4 +796,16 @@ form #type-msg {
   .black-linen {
     display: none;
   }
+
+  /* pop up */
+
+  /* form validation error */
+
+  .error {
+    background-color: #fff;
+    color: red;
+    margin-top: 20px;
+    text-align: center;
+    border-radius: 5px;
+  }
 }
diff --git a/index.html b/index.html
index 67469fc..14c280a 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,7 @@
     <div class="wrapper">
 
         <div class="top-container">
+
     
             <div class="header">
     
@@ -77,7 +78,8 @@ <h1>I'm Toyyib. Glad to see you!</h1>
         </div>
         <!-- returning other part after pr -->
 
-        <section class="second-container" id="portfolio">
+        <!-- <section class="second-container" id="portfolio">
+
     
             <div class="inner-second-container">
         
@@ -192,12 +194,12 @@ <h2> Multi-Post <br> Stories </h2>
         
         <section class="second-container">
         
-            <div class="inner-second-container ">
+            <div class="inner-second-container  ">
         
                 <div class="top-image">
         
                     <img src="./assets/Snapshoot Portfolio 3.png" alt="" class="mobile-first-card">
-                    <img src="./assets/third-desktop-card.png" alt="" class="desktop-first-card">
+                    <img src="c" alt="" class="desktop-first-card">
         
                 </div>
         
@@ -297,8 +299,14 @@ <h2> Multi-Post <br> Stories </h2>
 
             </div>
         
-        </section>
+        </section> -->
         
+        <div class="second-container" id="portfolio"></div>
+
+        <div class="pop"></div>
+
+        <div class="overlay"></div>
+
         <div class="third-container" id="about">
 
                 <div class="lower-body">
@@ -446,8 +454,8 @@ <h2>About Myself</h2>
             
                         <form action="https://formspree.io/f/mayzpyer" method="post">
             
-                            <input type="text" name="name" placeholder="Name" class="text" maxlength="30" required> 
-                            <input type="email" placeholder="Email" class="text" id="text2" required> 
+                            <input type="text" name="name" placeholder="Name" class="text" maxlength="30" value="" required> 
+                            <input type="email" placeholder="Email" class="text" id="text2" value="" required> 
                             <textarea name="textareaName" cols="30" rows="2" maxlength="500" id="type-msg" class="text" placeholder="Write your message here" required></textarea>
                             
     
@@ -456,10 +464,11 @@ <h2>About Myself</h2>
                                 <button class="sec-btn">   
                                     <span>Get in touch</span>
                                 </button>
-                    
+                                
                                 <span class="dot"></span>
-                
+                                
                             </div>
+                            <div class="error hidden"></div>
                         </form>   
                     </div>
                 </div>
diff --git a/index.js b/index.js
index c576d9b..126f659 100644
--- a/index.js
+++ b/index.js
@@ -13,3 +13,215 @@ xMen.addEventListener('click', () => {
 menuList.addEventListener('click', () => {
   menuList.classList.toggle('nav-active');
 });
+
+
+//cards
+
+const projectDetails = [
+  {
+    id: 1,
+    name: 'Tonic',
+    title: 'Canopy',
+    stack: 'Back End Dev',
+    year: '2015',
+    description: 'Experimental content creation feature that allows users to add to an existing stay over the course of a day without spamming their friends',
+    mobileImg: './assets/Snapshoot Portfolio.png',
+    desktopImg: './assets/first-desktop-card.png',
+    live: '#',
+    source: '#',
+    skills: {
+      skill1: 'html',
+      skill2: 'css',
+      skill3: 'javaScript'
+    },
+  },
+
+  {
+    id: 2,
+    name: 'Multi-Post Stories',
+    title: 'Canopy',
+    stack: 'Back End Dev',
+    year: '2015',
+    description: 'A daily selection of privately personalized reads; no accounts or sign-ups required.',
+    mobileImg: './assets/Snapshoot Portfolio 2.png',
+    desktopImg: './assets/second-desktop-card.png',
+    live: '#',
+    source: '#',
+    skills: {
+      skill1: 'html',
+      skill2: 'css',
+      skill3: 'javaScript'
+    },
+  },
+
+  {
+    id: 3,
+    name: 'Tonic',
+    title: 'Canopy',
+    stack: 'Back End Dev',
+    year: '2015',
+    description: 'A daily selection of privately personalized reads; no accounts or sign-ups required.',
+    mobileImg: './assets/Snapshoot Portfolio 3.png',
+    desktopImg: './assets/second-desktop-card.png',
+    live: '#',
+    source: '#',
+    skills: {
+      skill1: 'html',
+      skill2: 'css',
+      skill3: 'javaScript'
+    },
+  },
+
+  {
+    id: 4,
+    name: 'Multi-Post Stories',
+    title: 'Canopy',
+    stack: 'Back End Dev',
+    year: '2015',
+    description: 'Experimental content creation feature that allows users to add to an existing stay over the course of a day without spamming their friends.',
+    mobileImg: './assets/Snapshoot Portfolio 4.png',
+    desktopImg: './assets/fourth-desktop-card.png',
+    live: '#',
+    source: '#',
+    skills: {
+      skill1: 'html',
+      skill2: 'css',
+      skill3: 'javaScript'
+    },
+  },
+
+]
+
+projectDetails.forEach((projects, index) => {
+  const section = document.createElement('div');
+
+  const isSecond = index === 1;
+  const isLast = index === 3;
+  const reverseClass = isSecond ? 'inner-second-containerr' : '';
+  const marginB = isLast ? 'inner-second-containerl' : ''; 
+
+
+
+  section.innerHTML = `
+    <section class = "second-container">
+      <div class = "inner-second-container ${reverseClass} ${marginB}">
+        <div class = "top-image same ${projects.id}">
+          <img src="${projects.mobileImg}" class="mobile-first-card ${projects.id}"></img>
+          <img src="${projects.desktopImg}" class="desktop-first-card ${projects.id}"></img>
+        </div>
+
+        <div class = "text-inner-container same">
+          <h2> ${projects.name}</h2>
+          <div class = "canopy-inner-container">
+            <p id ="text1"> ${projects.title} </p>
+            <ul> 
+              <li> ${projects.stack} </li> 
+              <li> ${projects.year} </li> 
+            </ul>
+          </div>
+
+          <div class = "canopy-daily"> 
+            <p> ${projects.description} </p>
+          </div>
+              
+          <ul class = "canopy-list"> 
+            <li> ${projects.skills.skill1} </li>
+            <li> ${projects.skills.skill2} </li>
+            <li> ${projects.skills.skill3} </li> 
+          </ul>
+
+          <div>
+            <button id = "second-container-button" class = "all-button"> See Project </button>
+          </div>
+
+        </div>
+
+      </div>
+
+    </section>
+              
+  `;
+
+  const sections = document.querySelector('.second-container');
+  sections.append(section);
+
+  const allButton = document.querySelectorAll('.all-button');
+  const pop = document.querySelector('.pop');
+
+  allButton.forEach(btn => {
+    btn.addEventListener('click', e => {
+      let {id} = e.target;
+      id = Number(id);
+
+      if(id === projects.id){
+        pop.innerHTML = ` 
+          <div class = "pop-up">
+            <div class = "top">
+              <div class = "top-1">
+                <h2> ${projects.title} </h2>
+                <div class = "canopy-inner-container">
+                  <p id = "text1"> ${projects.title} </p>
+                  <ul> <li> ${projects.stack} </li> </ul>
+                  <ul> <li> ${projects.year} </li> </ul>
+                </div>
+              </div>
+
+              <div class="upper-2">
+                <i class="fa-solid fa-xmark close-btns"></i>
+              </div>
+
+            </div>
+
+            <img src = "${projects.img}" class = "mobile-first-card">
+
+            <div class = "canopy-daily">
+              <p> ${projects.description} </p>
+
+              <div class = "canopy-list">
+                <ul> <li> ${projects.skills.skill1} </li> </ul>
+                <ul> <li> ${projects.skills.skill2} </li> </ul>
+                <ul> <li> ${projects.skills.skill3} </li> </ul>
+              </div>
+
+              <div class="btns">
+                <button class="project-btn">See live&nbsp; <img src="./assets/Icon.png" alt=""></button>
+                <button class="project-btn">See source &nbsp;<img src="./assets/github.svg" alt=""> </button>
+              </div>
+            </div>
+          </div>
+        `;
+
+        document.querySelector('.top-container').classList.add('overlay');
+        sections.classList.add('overlay');
+
+        const closeBtn = document.querySelector('.close-btn');
+
+        closeBtn.addEventListener('click', e => {
+          e.preventDefault();
+
+          pop.innerHTML = '';
+
+          document.querySelector('.top-container').classList.remove('overlay');
+
+          sections.classList.remove('overlay');
+        });
+      }
+    });
+  });
+});
+
+//Form Validation
+
+
+const form = document.forms[0];
+form.addEventListener('submit', (e) => {
+  const email = form.elements.email.value;
+  const errorMsg = document.querySelector('.error');
+  if (email === email.toLowerCase()) {
+    form.onsubmit();
+  } else {
+    errorMsg.innerHTML = 'Email should be lowercase';
+    errorMsg.classList.remove('hidden');
+  }
+  e.preventDefault();
+});
\ No newline at end of file