there are still stuff to add and fix

Author: Marokhmala

assets/biomonitor.svg

@@ -80,23 +80,68 @@ <h1>Discover how technology came so far with us</h1>
         <div class="impl-card">
           <img src="assets/impl-karanzikov.svg" alt="karanzikov" />
           <h3>KARENZIKOV</h3>
-          <p>This cyberware implant will allow you to aim and shoot while dodging enemy attacks.</p>
+          <p>
+            This cyberware implant will allow you to aim and shoot while dodging
+            enemy attacks.
+          </p>
         </div>
         <div class="impl-card">
           <img src="assets/impl-mantis blades.svg" alt="mantis blades" />
           <h3>MANTIS BLADES</h3>
-          <p>Perfect for those who put personal safety first, not to mention discreet too.</p>
+          <p>
+            Perfect for those who put personal safety first, not to mention
+            discreet too.
+          </p>
         </div>
         <div class="impl-card">
           <img src="assets/impl-optical camo.svg" alt="optical camo" />
           <h3>OPTICAL CAMO</h3>
-          <p>The Optical Camo is a piece of Integumentary System Cyberware implant</p>
+          <p>
+            The Optical Camo is a piece of Integumentary System Cyberware
+            implant
+          </p>
         </div>
       </div>
     </section>
 
     <section class="poplr-implants-wrap">
       <p>OUR MOST POPULAR IMPLANTS</p>
+
+      <div class="most-pop-wrper">
+        <span class="arrow-left">
+          <img src="assets/vector-left.png" alt="Left Arrow" />
+        </span>
+
+        <div class="pop-card-wrp">
+          <img src="assets/kiroshi.svg" alt="Kiroshi" />
+          <h3>KIROSHI OPTICS</h3>
+          <p>
+            The Kiroshi Optics allow scanning of the environment, as well as
+            display information about citizens of Nigt city
+          </p>
+        </div>
+        <div class="pop-card-wrp">
+          <img src="assets/biomonitor.svg" alt="biomonitor" />
+          <h3>BIOMONITOR</h3>
+          <p>
+            The Biomonitor is a piece of circulatory System Cyberware implant
+          </p>
+        </div>
+        <div class="pop-card-wrp">
+          <img src="assets/heal-kill.svg" alt="heal-kill" />
+          <h3>HEAL - ON - KILL</h3>
+          <p>The Heal-On-Kill is a Frontal Cortex Cyberware implant</p>
+        </div>
+
+        <span class="arrow-right">
+          <img src="assets/vector-right.png" alt="Right Arrow" />
+        </span>
+
+      </div>
+      <span class="dots">
+        <img src="assets/dot-white.png" alt="dot white" />
+        <img src="assets/dot-grey.png" alt="dot grey" />
+      </span>
     </section>
 
     <footer>

assets/dot-grey.png

@@ -15,7 +15,6 @@ header {
   background-image: url(assets/Zhang-Yiwei-CGI-women-short-hair-purple-hair-blue-eyes-2185487-wallhere\ 1.svg);
   background-size: cover;
   color: #ffffff;
-  position: relative;
   background-position: center;
   height: 100vh;
 }
@@ -27,6 +26,7 @@ header {
   justify-content: space-between;
   align-items: center;
   padding: 15px 80px;
+  flex-wrap: wrap;
 }
 
 .logo img {
@@ -99,21 +99,15 @@ header {
   max-width: 1081px;
   height: 327px;
   top: 348px;
-  left: 179.16px;
+  margin-left: 179.16px;
+  margin-right: 179.16px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 40px;
   text-align: center;
 }
 
-@media (max-width: 1300px) {
-  .welcome {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-}
-
 .welcome h1 {
   font-weight: 700;
   font-style: Bold;
@@ -302,8 +296,9 @@ footer {
   color: #ffffff;
 }
 
+/* calculated myself ))) (5057-497-595-616-713-656-176-1024)/6 */
 section {
-  margin-top: 150px;
+  margin-top: 130px;
 }
 
 .social-pad-wrap {
@@ -355,7 +350,6 @@ section {
   flex-direction: column;
   opacity: 1;
   height: 656px;
-  position: relative;
   width: auto;
 }
 
@@ -367,27 +361,28 @@ section {
   line-height: 100%;
   letter-spacing: 0%;
   text-align: center;
+  margin-bottom: 119px;
 }
 
 .implant-crd-wrp {
   display: flex;
   justify-content: center;
   height: 537px;
   opacity: 1;
-  top: 119px;
   gap: 20px;
-  position: absolute;
-  width: 100%
+  width: 100%;
 }
 
 .impl-card {
-  width: 350px;
+  width: 386px;
   height: 537px;
   opacity: 1;
-  border: solid 1px #e15cf2;
+  border: solid 3px #e15cf2;
   position: relative;
 }
 
+/* we need a media here */
+
 .impl-card img {
   width: 283px;
   height: 246px;
@@ -416,9 +411,102 @@ section {
   font-size: 14px;
   line-height: 100%;
   letter-spacing: 0%;
+  position: absolute;
+  top: 393px;
+  max-width: 275px;
+  margin-left: 60px;
+  margin-right: 60px;
+}
+
+/* for this i did use the previous code nearly the same but since there were few extra details i wrote it one more time */
+
+.poplr-implants-wrap {
+  display: flex;
+  flex-direction: column;
+  opacity: 1;
+  height: 713px;
+  width: auto;
+}
+
+.poplr-implants-wrap p {
+  color: #ffffff;
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 24px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  margin-bottom: 119px;
   text-align: center;
+}
+
+.most-pop-wrper {
+  display: flex;
+  justify-content: center;
+  height: 594px;
+  opacity: 1;
+  gap: 20px;
+  position: relative;
+}
+
+.pop-card-wrp {
+  width: 386px;
+  height: 537px;
+  opacity: 1;
+  border: solid 3px #6892ff;
+  position: relative;
+}
+
+.pop-card-wrp img {
+  width: 283px;
+  height: 246px;
+  opacity: 1;
+  top: 60px;
+  left: 52px;
+  align-items: center;
+  position: absolute;
+}
+
+.pop-card-wrp h3 {
+  color: white;
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 18px;
+  line-height: 100%;
+  letter-spacing: 0%;
   position: absolute;
-  top: 394px;
-  padding-left: 60px;
-  padding-right: 60px;
+  top: 322px;
+  left: 120px;
+}
+
+.pop-card-wrp p {
+  color: white;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 14px;
+  line-height: 100%;
+  letter-spacing: 0%;
+  position: absolute;
+  top: 393px;
+  max-width: 275px;
+  margin-left: 60px;
+  margin-right: 60px;
+}
+
+.arrow-left {
+  position: absolute;
+  top: 50%;
+  left: 33.33px;
+}
+
+.arrow-right {
+  position: absolute;
+  top: 50%;
+  right: 33.33px;
+}
+
+.dots {
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 40px;
 }