From d2423e5b8a3f9714a48ec502d102c97a40a66ccd Mon Sep 17 00:00:00 2001
From: Samuel <samuelcondackxz@gmail.com>
Date: Tue, 11 Oct 2022 17:48:25 -0300
Subject: [PATCH] adiciona first-card e seus aspectos desktop e mobile

---
 index.html       | 11 +++++++++--
 styles/style.css | 40 ++++++++++++++++++++++++++++++++++++++--
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 3ef2e8c..9286a62 100644
--- a/index.html
+++ b/index.html
@@ -13,8 +13,8 @@
     </header>
     <main>
         <picture>
-            <source media="(max-width: 414px)" srcset="assets/mobile-images/top-card-image.png">
-            <source media="(min-width: 415px)" srcset="assets/images/desktop-banner.png">
+            <source media="(max-width: 500px)" srcset="assets/mobile-images/top-card-image.png">
+            <source media="(min-width: 501px)" srcset="assets/images/desktop-banner.png">
             <img src="assets/images/desktop-banner.png" alt="laptop image banner" class="main-banner">
         </picture>
         <section class="first-content">
@@ -29,6 +29,13 @@
                 <img src="assets/images/computers.svg" alt="computers image" class="block">
             </picture>
         </section>
+        <section>
+            <div class="first-card">
+                <div class="first-card-cards"><img src="assets/images/shop 1.svg" alt="shop image" class="first-card-image"><p class="first-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
+                <div class="first-card-cards"><img src="assets/images/shopping-bag (1) 1.png" alt="bag shop image" class="first-card-image"><p class="first-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
+                <div class="first-card-cards"><img src="assets/images/coin 1.png" alt="coin image" class="first-card-image"><p class="first-card-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p></div>
+            </div>
+        </section>
     </main>
 </body>
 </html>
\ No newline at end of file
diff --git a/styles/style.css b/styles/style.css
index 89a158d..428290c 100644
--- a/styles/style.css
+++ b/styles/style.css
@@ -61,10 +61,38 @@
     max-width: 315px;
     display: block;
     margin: auto;
-    padding: 73px 0px;
+    padding: 73px 0px 179px 0px;
 }
 
-@media screen and (max-width: 414px) {
+.first-card {
+    width: auto;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 21px;
+    padding-bottom: 79px;
+}
+
+.first-card-p {
+    width: 299px;
+    padding: 27px;
+    padding-top: 27px;
+    text-align: center;
+}
+
+.first-card-image {
+    display: block;
+    margin: auto;
+    width: 103px;
+    padding: 35px 12px 0px 12px;
+}
+
+.first-card-cards {
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+@media screen and (max-width: 1024px) {
     .first-content-text {
         max-width: 367px;
         padding: 0px 29px;
@@ -84,4 +112,12 @@
         text-align: center;
     }
 
+    .block {
+        padding-bottom: 90px;
+    }
+    
+    .first-card {
+        display: flex;
+        flex-direction: column;
+    }
 }
\ No newline at end of file