From 261ce7375b4e343f12eb56759d373dc1f87847fd Mon Sep 17 00:00:00 2001
From: Gustavo_Rallenson <Rallenson900²gmail.com>
Date: Sat, 8 Oct 2022 20:04:25 -0300
Subject: [PATCH] feat(css):Finalizei os card do topo do site

---
 assets/css/main.css | 30 ++++++++++++++++++++++++++++--
 index.html          | 12 ++++++------
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 9be29c7..b9f79e0 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -51,21 +51,41 @@ body{
 .top-cards{
     background: #f0f0f0;
     display: grid;
+    grid-template-columns: repeat(3,max-content);
     gap: 20px;
-    grid-template-columns: repeat(3,1fr);
+    justify-content: center;
+    padding: 74px 0;
+    
 }
 .top-card{
+    padding: 26px 26px 34px;
     display: flex;
     flex-direction: column;
     align-items:center;
     background: #ffffff;
-    box-shadow: 0px 4px 20px rgba(0,0,0,0);
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0,23);
+}
+.top-card-image{
+    display: block;
+    margin-bottom: 26px;
+}
+.top-card-description{
+    text-align: center;
+    font-size: 16px;
+    line-height: 24px;
+    max-width: 300px;
 }
 @media screen and (max-width: 414px) {
     .main-banner-desktop{
         display: none;
     } 
 }
+@media screen and (max-width: 768px) {
+    .top-cards{
+        grid-template-columns: 1fr;
+        padding: 36px 26px;
+    }
+}
 @media screen and (min-width: 415px) {
     .main-banner-mobile{
         display: none;
@@ -92,6 +112,12 @@ body{
     font-size: 28px;
 }
 }
+@media screen and (min-width: 769) and (max-width: 1200) {
+    .top-cards{
+        grid-template-columns: repeat(2,max-content);
+        padding: 36px 26px;
+    }
+}
 @media screen and (min-width: 993px) and (max-width: 1280px) {
         .top-infocard-text {
             max-width: 520px;
diff --git a/index.html b/index.html
index 3beef27..56d2278 100644
--- a/index.html
+++ b/index.html
@@ -33,16 +33,16 @@
                 </section>
                 <section class="top-cards">
                         <div class="top-card">
-                            <img src="/assets/Image/shop 1.png"alt=="icone do shopping">
-                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                            <img class="top-card-image"  src="/assets/Image/shop 1.png"alt=="icone do shopping">
+                            <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p class="top-card-description">
                         </div>
                         <div class="top-card">
-                            <img src="/assets/Image/shopping-bag (1) 1.png" alt="icone da sacola">
-                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                            <img class="top-card-image"  src="/assets/Image/shopping-bag (1) 1.png"alt=="icone sacola de shopping">
+                            <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p class="top-card-description">
                         </div>
                         <div class="top-card">
-                            <img src="/assets/Image/coin 1.png"alt=="icone da moeda">
-                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                            <img class="top-card-image"  src="/assets/Image/coin 1.png"alt=="icone do dinheiro">
+                            <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p class="top-card-description">
                         </div>
                 </section>
         </main>