From bf78657674eff8015c385df7200a861b61425698 Mon Sep 17 00:00:00 2001
From: Andrea Matsunaga <andreamizuno@gmail.com>
Date: Tue, 11 Oct 2022 19:07:04 -0300
Subject: [PATCH] feat(home): cria top-cards desktop e mobile

---
 assets/img/png_jpg/top-card-image-01.png | Bin 0 -> 1272 bytes
 assets/img/png_jpg/top-card-image-02.png | Bin 0 -> 1846 bytes
 assets/img/png_jpg/top-card-image-03.png | Bin 0 -> 2786 bytes
 assets/styles/main.css                   |  42 +++++++++++++++++++++++
 index.html                               |  21 ++++++++++++
 5 files changed, 63 insertions(+)
 create mode 100644 assets/img/png_jpg/top-card-image-01.png
 create mode 100644 assets/img/png_jpg/top-card-image-02.png
 create mode 100644 assets/img/png_jpg/top-card-image-03.png

diff --git a/assets/img/png_jpg/top-card-image-01.png b/assets/img/png_jpg/top-card-image-01.png
new file mode 100644
index 0000000000000000000000000000000000000000..900604dc791d30f81231441bffd6767000ef0130
GIT binary patch
literal 1272
zcmeAS@N?(olHy`uVBq!ia0vp^89<!Q!3HGXc(IoNDb50q$YKTtZeb8+WSBKa0w~B>
z9OUlAu<o49OCX0O-O<;Pfnj4m_n$;oAh*}k#WAFU@$KA=MYr7q+Ukv79u`??B)QO2
zdUI&dk6ly3<~f`Z_Q+Rw!nwwVai&@CR5RY0O1^1ElUAKsBKV0VOs#e9u`jxuw;p`t
zyRkSUEBEjHGv@>jye)iRcZab#x`{!tMZk#zO#F0sq56$~PwyUErkm{7@9FIcopmVv
z-n{DBm%rsD=d%i(STR$I>)XOxz1tO)dU)A>PjH>Y`1zUClMOPqzIl89a@^fh(e`!W
z&*n?{t#b_3dvj+_K0onz@Ri<GmS4Z=f3e6v-uw3c9^VPaEpGhVcRN*Zb4|WQmYVPX
zbPtUcDN;YIpFCvxFZpRF=PL^bxy1+Sduk3%oZu|^<5cZ|1@ZDFjt}2&ka0|@pAzxD
zSW;nKe0@frm}UuUk^CQ_9R4sS(}yPvUF46Lh@7w>h~9fGm~+(bQWJ-Wp8lIf#l^2V
zPS-cp9I~==m1BK(%wgyH-rlnHEVm*~I?EmId#g9k<xjCxxXUSd#s1^vU&<%e?))n-
zZGD)$+KoEfx|XwBe;lpab!q>BG`q$KPTS-yDaSODJ5sM(yqM|sXSw7*<t<N4cAPkv
z?7Ecol4swo2gf+;SB4j}SuMFdeV*1I*CWzPF3;z3l}*<*oTK%p+k@xvh6^T}i`q*L
zhkfID$;NkKZnyf^{t3?{?nZ7%*ZtSJ-P@JN)mv8m#ku0_?!=A?d$FPo;v#!`LIM(J
z%9mfwm{QWyJ!NY4O@&AHhm91IO8*#6leG`{vH076&iv;oonJkb+PG%RYW>#xV5YfP
zw{6CLgM(GlOU`&Md6WCt`cT#3x+!Ky)|E~Qk8t~@?{=ofTYKWZc^NsS%cfa(B;LML
z)ahtdR@5%hmv#GEeG{MG_Kbv^AM_{aUsAnx{)o}#|CZO5Kh8~>k@$Cw{e302>mSOa
zj}-8!-ZD;T`!e_3N+pNPkj@`l!mfPHPSQ~N7qooYWaq-!JqunxDO6&+X&(4P{ix?(
zyAz3j^?aUPeSIu_rhEE@r7z^Je&v<^7aDt<b=T()U2d}4inISsJ#_!-efeVw|BOo>
zzmk|$J~dSKFv~8p9lQEMrTI3@JRj%OdH7kRSDAO`m()kRH4#}dTq#)5oc_?I`+j_4
zu>Ws+NU!p#{N$R;yMw0wt+o5IJm}r0LUB>PYU9w8r++f&Z=QbOw&l-ng8zPO-8{o@
z!FfCVKf${V%RK8pzVTEKxL@wKzVxE@{GX3(Is8JuEv>KH_WE1>S5p(F!Y*SzRwFV{
zpPu@|qxIYCc<rCp3+$S?KmGmld5`7aO!^;x!du%aUU-4<i}m*F3vU!xtdRMpb?2|I
zilXX;xg3Wz&k@K0yV46!PrrY*Fka@{2fiKm%`_i!82NcE;7Yk4vT?4wD%a_#-ZR>K
qDe@=Yr+S}QpU4R>AWpQO%KqYNRG{sis|zfs7(8A5T-G@yGywprKsJN`

literal 0
HcmV?d00001

diff --git a/assets/img/png_jpg/top-card-image-02.png b/assets/img/png_jpg/top-card-image-02.png
new file mode 100644
index 0000000000000000000000000000000000000000..906e3ea59b2f542d88b1195448cead336eb19ebd
GIT binary patch
literal 1846
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

literal 0
HcmV?d00001

diff --git a/assets/img/png_jpg/top-card-image-03.png b/assets/img/png_jpg/top-card-image-03.png
new file mode 100644
index 0000000000000000000000000000000000000000..4bd23346f53f7a53ce33c0c45563ab3e2834f9eb
GIT binary patch
literal 2786
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

literal 0
HcmV?d00001

diff --git a/assets/styles/main.css b/assets/styles/main.css
index 050c2ae..f5f23b3 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -56,6 +56,35 @@ body {
   font-size: 16px;
 }
 
+.top-cards {
+  display: grid;
+  grid-template-columns: repeat(3, max-content);
+  gap: 20px;
+  justify-content: center;
+  padding: 74px 0;
+  background: #F0F0F0;
+}
+
+.top-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 34px 26px 26px;
+  background: #FFFFFF;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+.top-card-image {
+  display: block;
+  margin-bottom: 26px;
+}
+
+.top-card-description {
+  max-width: 300px;
+  text-align: center;
+  line-height: 24px;
+  font-size: 16px;
+}
 
 @media screen and (max-width: 414px) {
   .main-banner-desktop {
@@ -63,6 +92,13 @@ body {
   }
 }
 
+@media screen and (max-width: 768px) {
+  .top-cards {
+    grid-template-columns: 1fr;
+    padding: 36px 26px;
+  }
+}
+
 @media screen and (max-width: 992px) {
   .top-infocard {
     flex-direction: column;
@@ -95,6 +131,12 @@ body {
   }
 }
 
+@media screen and (min-width: 769px) and (max-width: 1200px) {
+  .top-cards {
+    grid-template-columns: repeat(2, max-content);
+  }
+}
+
 @media screen and (min-width: 415px) {
   .main-banner-mobile {
     display: none;
diff --git a/index.html b/index.html
index 69c4622..b012ba9 100644
--- a/index.html
+++ b/index.html
@@ -38,6 +38,27 @@
 
         <img class="top-infocard-image" src="./assets/img/png_jpg/top-infocard-image.png" alt="Banner do Infocard do Topo" />
       </section>
+
+      <section class="top-cards">
+        <div class="top-card">
+          <img class=""top-card-image src="./assets/img/png_jpg/top-card-image-01.png" alt="Imagem do Primeiro Card do Topo">
+
+          <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.            
+          </p>
+        </div>
+        <div class="top-card">
+          <img class=""top-card-image src="./assets/img/png_jpg/top-card-image-02.png" alt="Imagem do Segundo Card do Topo">
+          
+          <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.        
+          </p>
+        </div>
+        <div class="top-card">
+          <img class=""top-card-image src="./assets/img/png_jpg/top-card-image-03.png" alt="Imagem do Terceiro Card do Topo">
+
+          <p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+          </p>
+        </div>
+      </section>
     </main>
     
   </body>