feat: created midle banner

index.html

@@ -54,6 +54,30 @@
                 </p>
             </div>
         </section>
+        <section class="midle-card-section">
+            <div class="midle-card-div">
+                <img class="midle-card" src="./assets/images/midle card 1.png" alt="laptop 1" />
+            </div>
+            <div class="midle-card-div">
+                <img class="midle-card" src="./assets/images/midle card 2.png" alt="laptop 2" />
+            </div>
+            <div class="midle-card-div">
+                <img class="midle-card" src="./assets/images/midel card 3.png" alt="laptop 3" />
+            </div>
+        </section>
+        <section class="midle-card-mobile">
+            <figure class="midle-card-mobile-figure">
+                <div class="midle-card-div-mobile">
+                    <img src="./assets/images/midle card 2.png" alt="laptop 2">
+                </div>
+                <div class="midle-card-div-mobile">
+                    <img src="./assets/images/midle card 1.png" alt="laptop 1">
+                </div>
+            </figure>
+            <div class="midle-card-div-mobile2">
+                <img class= "laptop-image-mobile"src="./assets/images/midel card 3.png" alt="laptop 3">
+            </div>
+        </section>
         
     </body>
 </html>

styles/styles.css

@@ -75,7 +75,6 @@ body {
     align-items: center;
     gap: 21px;
     display: flex;
-    grid-template-columns: 1fr 1fr 1fr;
 }
 
 .image-card {
@@ -88,6 +87,26 @@ body {
     margin-top: 179px;
 }
 
+.midle-card-section {
+    display: flex;
+    flex-direction: row;
+    background: #E0E0E0;
+    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+    margin-top: 80px;
+    justify-content: center;
+    align-items: center;
+    gap: 40px;
+}
+.midle-card {
+    
+}
+
+.midle-card-div {
+    position: relative;
+    top: 62px;
+    max-width: 88.44%;
+}
+
 .image-card-image {
     display: block;
     margin-top: 36px;
@@ -103,12 +122,38 @@ body {
     line-height: 24px;
 }
 
+.midle-card-mobile-figure {
+    display: none;
+}
+
+.midle-card-div-mobile2 {
+    display: none;
+}
+
+
 @media screen and (max-width: 1024px) {
+    .banner-1-desktop {
+        display: none;
+    }
+
+    .banner-1-mobile {
+        display: unset;
+    }
+
+    .text-1 {
+        width: 86.47%;
+    }
+
+    .first-section p {
+        text-align: center;
+    }
+
     .section-cards {
         display: flex;
         flex-direction: column;
         margin-top: 90px;
     }
+
     .image-card {
         max-width: 84.54%;
         margin-top: 0%;
@@ -117,22 +162,27 @@ body {
         padding-right: 26px;
         padding-bottom: 27px;
     }
+
     .image-computer {
         width: 57.73%;
     }
+
+    .midle-card-mobile-figure {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 14px;
     }
 
-@media screen and (max-width: 1024px) {
-    .banner-1-desktop {
+    .midle-card-mobile {
+        background: #E0E0E0;
+    }
+    
+    .midle-card-div-mobile2 {
+        display: flex;
+    }
+    .midle-card-div {
         display: none;
     }
-    .banner-1-mobile {
-        display: unset;
-    }
-    .text-1 {
-        width: 86.47%;
-    }
-    .first-section p {
-        text-align: center;
-    }
-}
+}