added another project box

Author: sumana-2705

projects.html

@@ -29,8 +29,20 @@ <h4>title</h4>
                 <br>
                 <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo cum dolores animi itaque ab dicta et, explicabo at, sit eligendi architecto natus exercitationem a provident expedita fugit voluptate, atque molestiae nemo! Ipsa consequuntur hic exercitationem fuga aliquam nostrum eius officia ad perspiciatis voluptas et molestias qui labore ratione facere fugit quibusdam iusto, laudantium, nihil illum esse! Reiciendis sapiente consequuntur unde! Ad accusantium repudiandae ipsum optio ullam numquam aliquid, sapiente quia sequi architecto  
                 </p>
+                </div>
+            </div>
 
+            <div class="project-box">
+                <div class="image">
+                    <img src="pictures/chatbot.png" alt="image">
+                </div>
+                <div class="project-content">
+                    <h4>title</h4>
+                <br>
+                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo cum dolores animi itaque ab dicta et, explicabo at, sit eligendi architecto natus exercitationem a provident expedita fugit voluptate, atque molestiae nemo! Ipsa consequuntur hic exercitationem fuga aliquam nostrum eius officia ad perspiciatis voluptas et molestias qui labore ratione facere fugit quibusdam iusto, laudantium, nihil illum esse! Reiciendis sapiente consequuntur unde! Ad accusantium repudiandae ipsum optio ullam numquam aliquid, sapiente quia sequi architecto  
+                </p>
                 </div>
+            </div>
         </div>
     </section>
 

style.css

@@ -197,41 +197,51 @@ span{
 
 }
 .flex-box{
-    display: flex;
+    padding: 0px;
+    display:flex;
     justify-content: space-evenly;
-    width: 100%;
-    max-height: 400px;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    gap: 1rem;
 }
 .project-box{
-    width: 100%;
-    max-height: 500px;
-    padding: 0.5%;
+    flex: 1 1 calc(50%-2rem);
+    max-width: calc(50%-2rem);
+    box-sizing: border-box;
+    max-height: 410px;
+    padding: 1rem;
     font-size: 20px;
     color: black;
     background: whitesmoke;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
     border-radius: 0.8rem;
     margin: 1rem 0;
     border: 2px solid black;
 }
 
 .image{
     width: 100%;
-    height: 50%;
+    height: auto;
+    max-height: 150px;
     display: flex;
     justify-content: center;
     align-items: center;
     overflow: hidden;
+    border-radius: 0.8rem;
 }
 .image img{
     width: 100%;
-    height: 100%;
+    height: auto;
     object-fit: cover;
-    border-radius: 0.8rem;
 }
-
 .project-content{
-    padding: 2% 0.5% ;
+    padding: 1rem 0 0 0;
     overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: 0rem;
 }
 
 .contact-box{