From 815aab0bb82e2df0d01aa850545ec3c799fa4c10 Mon Sep 17 00:00:00 2001
From: Samuel <samuelcondackxz@gmail.com>
Date: Wed, 12 Oct 2022 18:27:34 -0300
Subject: [PATCH] Adiciona image-row e seus aspectos desktop e mobile

---
 index.html       | 34 ++++++++++++++---------
 styles/style.css | 71 +++++++++++++++++++++++++++++++++++-------------
 2 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/index.html b/index.html
index d5aba2b..56ab319 100644
--- a/index.html
+++ b/index.html
@@ -37,23 +37,31 @@
             </div>
         </section>
         <section class="image-row-background">
-            <div class="image-row-desktop">
-                <div class="row-image"><img src="assets/images/Rectangle 13.png" alt="laptop image" class="row-image-desktop"></div>
-                <div class="row-image"><img src="assets/images/Rectangle 16.png" alt="laptop image" class="row-image-desktop"></div>
-                <div class="row-image"><img src="assets/images/Rectangle 17.png" alt="laptop image" class="row-image-desktop"></div>
+            <div class="image-row-wrapper">
+                <div class="image-row-desktop">
+                    <div class="row-image"><img src="assets/images/Rectangle 13.png" alt="laptop image" class="row-image-desktop"></div>
+                    <div class="row-image"><img src="assets/images/Rectangle 16.png" alt="laptop image" class="row-image-desktop"></div>
+                    <div class="row-image"><img src="assets/images/Rectangle 17.png" alt="laptop image" class="row-image-desktop"></div>
+                </div>
+                <div class="image-row-mobile1">
+                    <img src="assets/mobile-images/middle-card-image01.png" alt="laptop image" class="row-image-mobile">
+                    <img src="assets/mobile-images/middle-card-image02.png" alt="laptop image" class="row-image-mobile">
+                </div>
+                <div class="image-row-mobile2"><img src="assets/mobile-images/middle-card-image03.png" alt="laptop image" class="row-image-mobile2"></div>
             </div>
-            <div class="image-row-mobile1">
-                <img src="assets/mobile-images/middle-card-image01.png" alt="laptop image" class="row-image-mobile">
-                <img src="assets/mobile-images/middle-card-image02.png" alt="laptop image" class="row-image-mobile">
-            </div>
-            <div class="image-row-mobile2"><img src="assets/mobile-images/middle-card-image03.png" alt="laptop image" class="row-image-mobile"></div>
         </section>
+            
         <section>
             <div class="second-card">
-                <div class="second-card-cards"><img src="assets/images/money (1) 2.svg" alt="shop image" class="second-card-image"><p class="second-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
-                <div class="second-card-cards"><img src="assets/images/coin 2.svg" alt="bag shop image" class="second-card-image"><p class="second-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
-                <div class="second-card-cards"><img src="assets/images/laptop 1.svg" alt="coin image" class="second-card-image"><p class="second-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
-                <div class="second-card-cards"><img src="assets/images/Group.svg" alt="coin image" class="second-card-image"><p class="second-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
+                <div class="second-card-cards"><img src="assets/images/money (1) 2.svg" alt="shop image" class="second-card-image"><p class="second-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.  </p></div>
+                <div class="second-card-cards"><img src="assets/images/coin 2.svg" alt="bag shop image" class="second-card-image"><p class="second-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.  </p></div>
+                <div class="second-card-cards"><img src="assets/images/laptop 1.svg" alt="coin image" class="second-card-image"><p class="second-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.  </p></div>
+                <div class="second-card-cards"><img src="assets/images/Group.svg" alt="coin image" class="second-card-image"><p class="second-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.  </p></div>
+            </div>
+        </section>
+        <section>
+            <div>
+                <p></p>
             </div>
         </section>
     </main>
diff --git a/styles/style.css b/styles/style.css
index 56d9dd3..7798f22 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -75,10 +75,10 @@
 }
 
 .first-card-p {
-    width: 299px;
     padding: 27px;
     padding-top: 27px;
     text-align: center;
+    padding: 27px 25px;
 }
 
 .first-card-image {
@@ -90,11 +90,18 @@
 
 .first-card-cards {
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    max-width: 350px;
 }
 
 .image-row-background {
-    background-color: #E0E0E0;;
-    height: 530px;
+    background-color: #E0E0E0;
+    max-height: 530px;
+    padding: 62px 72px 0px 72px;
+}
+
+.image-row-wrapper {
+    position: relative;
+    bottom: -25px;
 }
 
 .image-row-desktop {
@@ -106,22 +113,34 @@
 }
 
 .row-image-desktop {
-    margin-top:62px;
+    width: 100%;
 }
 
 .image-row-mobile1 {
+    margin: auto;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 14px;
-    padding-top: 32px;
 }
 
 .image-row-mobile2 {
+    margin: auto;
+    max-width: 368px;
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 24px 23px;
+    padding-top: 24px;
+}
+
+.row-image-mobile {
+    width: 100%;
+    max-width: 177px;
+}
+
+.row-image-mobile2 {
+    width: 100%;
+    max-width: 368px;
 }
 
 .second-card {
@@ -130,28 +149,25 @@
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    gap: 21px;
-    padding-top: 191px;
-    padding-bottom: 79px;
+    gap: 16px;
+    padding: 191px 72px 79px 72px;
 }
 
 .second-card-p {
-    width: 299px;
-    padding: 27px;
-    padding-top: 27px;
+    padding: 15px 32px 65px 32px;
     text-align: center;
 }
 
 .second-card-image {
     display: block;
     margin: auto;
-    width: 103px;
-    height: 103px;
+    height: 104px;
     padding: 35px 12px 0px 12px;
 }
 
 .second-card-cards {
     box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    width: auto;
 }
 
 @media screen and (max-width: 1024px) {
@@ -187,18 +203,25 @@
         display: flex;
         flex-direction: column;
         gap: 16px;
-        padding-top: 112px;
+        padding: 150px 23px 0px 23px;
     }
-}
 
-@media screen and (max-width: 1270px) {
     .second-card {
         flex-direction: column;
         
     }
+
+    .second-card-p {
+        font-size: 14px;
+        max-width: 302px;
+    }
+
 }
 
-@media screen and (max-width: 1919px) {
+@media screen and (max-width: 1270px) {
+}
+
+@media screen and (max-width: 1024px) {
     .image-row-background {
         height: 579px;
     }
@@ -208,7 +231,7 @@
     }
 }
 
-@media screen and (min-width: 1920px){
+@media screen and (min-width: 1025px){
     .image-row-mobile1 {
         display: none;
     }
@@ -216,4 +239,14 @@
     .image-row-mobile2 {
         display: none;
     }
+}
+
+@media screen and (max-width: 369px) {
+    .image-row-mobile1 {
+        width: 50%;
+    }
+    
+    .image-row-mobile2 {
+        width: 100px;
+    }
 }
\ No newline at end of file