From 6f52f641bf75ed54a00435a3d35572f7165b3c1d Mon Sep 17 00:00:00 2001
From: Nicolly Vieira <nicollyvscosta@gmail.com>
Date: Tue, 11 Oct 2022 12:40:35 -0300
Subject: [PATCH] feature(index): cria estilo do cards do topo para desktop e
 mobile

---
 index.html      |  8 +++---
 styles/main.css | 65 ++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 4bf236c..a660c2e 100644
--- a/index.html
+++ b/index.html
@@ -52,21 +52,21 @@
         </section>
 
         <!-- Top Card -->
-        <div class="top-cards">
-            <figure class="top-card">
+        <div class="cards top-cards">
+            <figure class="card top-card">
                 <img class="top-card-image" src="assets/images/card-image-shopping.png"
                     alt="imagem do primeiro card do topo" />
                 <figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                     Craseuismod enim non dui fringilla interdum.</figcaption>
             </figure>
 
-            <figure class="top-card">
+            <figure class="card top-card">
                 <img class="top-card-image" src="assets/images/card-image-bag.png" alt="imagem do segundo card do topo" />
                 <figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                     Craseuismod enim non dui fringilla interdum.</figcaption>
             </figure>
 
-            <figure class="top-card" />
+            <figure class="card top-card" />
                 <img class="top-card-image" src="assets/images/card-image-coin.png"
                     alt="imagem do terceiro card do topo">
                 <figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
diff --git a/styles/main.css b/styles/main.css
index 3866f76..df635e7 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -85,6 +85,43 @@ body {
     width: 100%;
 }
 
+/*top cards*/
+.cards {
+    display: flex;
+    justify-content: center;
+}
+.top-cards {
+    gap: 21px;
+
+    width: 57%;
+    margin: 0 auto;
+    padding-bottom: 80px;
+}
+
+.card {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+.top-card {
+    padding: 36px 26px 26px;
+    min-width: 300px;
+}
+
+.top-card-image {
+    padding-bottom: 28px;
+}
+
+.top-card-description {
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+}
+
 /*mobile*/
 @media screen and (max-width: 1024px) {
 
@@ -127,11 +164,30 @@ body {
         min-width: initial;
         max-width: 239px;
     }
+
+    /*top cards*/
+    .cards {
+        flex-direction: column;
+    }
+
+    .top-cards {
+        width: 100%;
+        padding: 0 30px 80px;
+    }
+
+    .top-card {
+        min-width: initial;
+    }
+
+    .top-card-description {
+        font-size: 14px;
+    }
 }
 
 /*4K*/
 
 @media screen and (min-width: 2500px) {
+    /*top infocard*/
     .top-infocard-subtitle {
         font-size: 40px;
         line-height: 70px;
@@ -140,11 +196,17 @@ body {
     .top-infocard-title {
         font-size: 75px;
     }
-    
+
     .top-infocard-description {
         font-size: 32px;
         line-height: 40px;
     }
+
+    /*top cards*/
+    .top-card-description {
+        font-size: 25px;
+        line-height: 30px;
+    }
 }
 
 @media screen and (min-width: 3000px) {
@@ -159,4 +221,5 @@ body {
         line-height: 125px;
     }
 
+
 }
\ No newline at end of file