From 92f061a3a765dbd2b46d288cfe45c824e61840e8 Mon Sep 17 00:00:00 2001
From: Savio <savio.96@hotmail.com>
Date: Mon, 10 Oct 2022 20:56:28 -0300
Subject: [PATCH] feat(home): Adiciona Cards do topo desktop e mobile

---
 assets/css/style.css                 |  37 +++++++++++++++++++++++++++
 assets/imagens/top-card-image-01.png | Bin 0 -> 962 bytes
 assets/imagens/top-card-image-02.png | Bin 0 -> 2061 bytes
 assets/imagens/top-card-image-03.png | Bin 0 -> 3033 bytes
 index.html                           |  35 ++++++++++++++++++++++---
 5 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 assets/imagens/top-card-image-01.png
 create mode 100644 assets/imagens/top-card-image-02.png
 create mode 100644 assets/imagens/top-card-image-03.png

diff --git a/assets/css/style.css b/assets/css/style.css
index 14ef12d..2aa69df 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -66,6 +66,36 @@ body {
   text-align: center;
 }
 
+.top-cards {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+  justify-content: center;
+  margin: 0 22% 4%;
+}
+
+.top-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: #ffffff;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+.top-card-image {
+  display: block;
+  margin-top: 10%;
+}
+.top-card-description {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 150%;
+  /* or 150% */
+  margin: 8%;
+  text-align: center;
+}
+
 @media screen and (max-width: 1023px) {
   .main-banner-desktop {
     display: none;
@@ -89,6 +119,13 @@ body {
   .top-infocard-description {
     line-height: 24px;
   }
+
+  .top-cards {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    margin: 0 32px 80px;
+  }
 }
 @media screen and (min-width: 1024px) {
   .main-banner-mobile {
diff --git a/assets/imagens/top-card-image-01.png b/assets/imagens/top-card-image-01.png
new file mode 100644
index 0000000000000000000000000000000000000000..8cf9fb5995fb2ae5d02eac4325d21066ba6fcac8
GIT binary patch
literal 962
zcmeAS@N?(olHy`uVBq!ia0vp^=^)I(1|(%2V}1fD&H|6fVg?3oVGw3ym^DWND9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~y$2Ig>27srqa#<zETgM=MrSU;FIZi+Z2Y!UWz
zqlwOzJBD){Y#oc3Z|+L6VZ5VI!SsctW$q)Vh*xPJST<~$pk-7xxii3at|vR&r%8L_
zLxYzr-~CyAeVUMyu!9Q}r1>P>nwP1*>}gi{J-@EwyL-6`4Lkm}&wM^j)N)GGNe}M0
z8x4z;Wb%`YOl>b;duuK`<?`*r4|b}%ygK7+X!-r0`qXm;yt<dmY`@PpIWyh-+=KHH
zORhEFX?MPSZ{eSc{96S=%ReipNZmQUH}!C))!g<8nJ+B2&*tUOZFTl}C=hIMM1;=}
z4|DUwIaalXYM&47{L3*pv+`Hcind_szTd~UZr^ct(e}CPrP%a}Jp=E}y6iH8@6YXO
zGXcHk`sxcxS1)|Ivcb^if!;0N2!mrUVi#`PFS_BFnA`jNTq_rbI`iJ`lG?`ftbes4
zU&P_?!~ZL9&uiW-%Dw;ikGH$NRa77OBayh<TYPKVI$Mi7AsOfA$$t>PXq@~1)(*2j
z%XiC8ulUv9oxH#McDCr_HrCy5%GNH9zV?ANT)*x{c0}uEC*5Obw?A2SRO%(~^Yo*C
zSGRSYez2tVX7IJzOWx`_8Rs=UOhY=DyI1ZKyZvvjVfKyF8PbbO1O77Hl-gAsaCpPi
zYaMPnGc0S%%opw5ckA_n+P`<5e@+jVw^l#+K=f?EzQ2v%1ou^5JQr*H_TikX8(#KQ
z_N;!sXJXQn;HkfQZHvF$lfoXJ8=p>a><zaMzM^p`sI2hAli&*v!mj1mSn&VtPTKJA
z=loomb!~gTHZ7gL->P!T@fCspAN;&w==jhjBWICc<vrv0!-pa*v)%qat$P2z=<Zb6
zmc9CEE^j#ko2r+c#$h9NcR)nBZ#g&Yxz~TLe}a5s+mqfu8n4_}L>lEe1XzgQpT91-
z@#}uu)wSRGnf|@^oNk)L)js2p;<ADcO&JWP*sp^wMc=*TeU=!v&(NO}%<|uQ-jx?O
z-bQ@lu`+(UK6AZqbmJY<YNZ;3x7x5YpEB(abLtQI;==SsUtpGF@O1TaS?83{1OUy=
By6*r0

literal 0
HcmV?d00001

diff --git a/assets/imagens/top-card-image-02.png b/assets/imagens/top-card-image-02.png
new file mode 100644
index 0000000000000000000000000000000000000000..0d270909d663df86dbacac06ad9b511a4464c620
GIT binary patch
literal 2061
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

literal 0
HcmV?d00001

diff --git a/assets/imagens/top-card-image-03.png b/assets/imagens/top-card-image-03.png
new file mode 100644
index 0000000000000000000000000000000000000000..11b00d411e8dc2d35f43e980aa63be6e840ea53e
GIT binary patch
literal 3033
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
bOojged;tx~#aLvf00000NkvXXu0mjffmpP>

literal 0
HcmV?d00001

diff --git a/index.html b/index.html
index 494ddf4..b4d119e 100644
--- a/index.html
+++ b/index.html
@@ -40,14 +40,43 @@
                     dui.
                 </p>
             </figcaption>
-
-
             <figure>
                 <img class="top-infocard-image" src="./assets/imagens/top-infocard-image.png"
                     alt="Banner do Infocard do Topo">
             </figure>
         </section>
-
+        <section class="top-cards">
+            <figure class="top-card">
+                <img class="top-card-image" src="./assets/imagens/top-card-image-01.png"
+                    alt="Imagem do Primeiro Card do Topo" />
+                <figcaption>
+                    <p class="top-card-description">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
+                        interdum.
+                    </p>
+                </figcaption>
+            </figure>
+            <figure class="top-card">
+                <img class="top-card-image" src="./assets/imagens/top-card-image-02.png"
+                    alt="Imagem do Segundo Card do Topo" />
+                <figcaption>
+                    <p class="top-card-description">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
+                        interdum.
+                    </p>
+                </figcaption>
+            </figure>
+            <figure class="top-card">
+                <img class="top-card-image" src="./assets/imagens/top-card-image-03.png"
+                    alt="Imagem do Terceiro Card do Topo" />
+                <figcaption>
+                    <p class="top-card-description">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
+                        interdum.
+                    </p>
+                </figcaption>
+            </figure>
+        </section>
 
     </main>
 </body>