From 1bbddcdfb4aa5fd448e2a8c3107dfa1c5e2e3f37 Mon Sep 17 00:00:00 2001
From: Filipe Quintanilha <feliipequintanilha@gmail.com>
Date: Fri, 7 Oct 2022 14:54:25 -0300
Subject: [PATCH] Adiciona os cards do topo desktop e mobile

---
 assets/images/top-card-image-01.png | Bin 0 -> 1273 bytes
 assets/images/top-card-image-02.png | Bin 0 -> 1902 bytes
 assets/images/top-card-image-03.png | Bin 0 -> 2778 bytes
 assets/styles/main.css              |  44 ++++++++++++++++++++++++++++
 index.html                          |  22 ++++++++++++++
 5 files changed, 66 insertions(+)
 create mode 100644 assets/images/top-card-image-01.png
 create mode 100644 assets/images/top-card-image-02.png
 create mode 100644 assets/images/top-card-image-03.png

diff --git a/assets/images/top-card-image-01.png b/assets/images/top-card-image-01.png
new file mode 100644
index 0000000000000000000000000000000000000000..594067681241c1d1f82b7014f1080d52625730aa
GIT binary patch
literal 1273
zcmeAS@N?(olHy`uVBq!ia0vp^89<!Q!3HGXc(IoNDb50q$YKTtZeb8+WSBKa0w~B>
z9OUlAu<o49OCX0O-O<;Pfnj4m_n$;oAh*xc#WAFU@$H<AMVGxq+UkoxGi2qJKIg0M
zzI|`U?i39jty449JMJ@lW-;>@xaY8NDd!dwGge+>AD^Q<zDI-)@USjC_~w|<MDyL(
zB9D9WJ^7z@u1EE4<ovt!;g>S{Sp=Lo6kEW=g!?UiDfMY<^K*Cq^3|I@bF26@FVBY?
zxB6duwncmUp;?YB=D})RO?y|C<*e;yXg!pWzsY0y^l87OrX(9y&#Kw>jb+p4M+;Uh
zes<uNNYR}RNwaO~SL>HQIAy+m`nrARCrnPh*f&d4?5)Sc1GnWC%w41P{QRtqTaSM|
zrl`clrD^lucFDx*f5J<O-&`$}&g8NA&-C(#v0`iO`RjMtQ?{>a-WmRb@sgYTPK*8x
zcb?}peVOCHc6#$s(OHc#?C1Bsoo~E?GrdnKuW>~ilV&?1lpf4v`1$#y0;Zp*xnGxj
zb7eghwe9-K$MQ=i?qa(A?f=Hwm8EkYEsuQaarnD`tlqcjXP$dx&*A*hKj9e5^XYSf
zU$7_LaFzPEsdl~HgXbzsN<JtE%*dW2_-nR9!b;f~m!t_@IRfX_om5O0`rv<Ztwe&W
zpR=6B4)qmR6y`nA;C*NC=>4m=Tz`s>T%P`o^`GC7<Rh2o_bljp*d@`%R4?4I@B_E6
zkoI}O{D|E44)Y78XBcmNKKxA}z2TeAjZh`YZ1*OKGhJ3~y8q4{)BdxY<NM-5_Srjc
zS{_=w?}*a#H?rrXwzhxxQf@92d7!?_^<81@o_5#gX-xGGbll%2Z+%;I?Ds?ouQ~4n
zw!g0wWnT68_CyJ%e=Gj&zu5+4y_&r)U~irMyRgz9Jr_@OW-CeZ8cHkH*-nhG4RV+6
zNW6RJQ}T(lZ(6UFYYr=HWzyxjp7CJC!~6+)mjtJ|zty;S|LE@zO@=-jY+il8-m&od
zhx6Av9E;A{xLPr(#Rd4bH8I34cH@|TjVI;gAK?~%Psx<IZ@O=%Fhr`0Pn6(!V)@>&
zFzG$}(};a?rjsRK-w)1Sf8ktSX#Dnv@sHljow3cv=K1y2uU53K`FpqYX>#}el{MQ7
z?bx2{XEy)-Z#V6|)@iM_<r(?SE0YRpCz^hn={D0)>H1s&%X9rfn<Cvh;??R7wJ$xj
z&;dKTDKz!h@A&3)dA1uW_unQ@+C6vXiZ`z-uk)#%d=$&2T4og-cye)N+vEqE4*as&
zbN}e<>1&UsF#Y{GeWU+duAE70FQ@w(HEw%jyyoXA*Y%|{oPO!H3;+I;bNTK6e0HJ6
zimqTj)*v!apN{&&*W%y*dEd4+$UIZO^L_Djp!@di`rZ;{FRUQ^;_q$AcO~y0F57fj
zbK<|Jlg#e?c6hwa$>u15JmCIK=iQszw$~5;myKbvT({ZR$)b6Ru<#0&omr<YoU>PI
reZ6&-%oD8{Ngvnl5JoN`rphmi^tvgj!mI}@sTe$6{an^LB{Ts55BW>U

literal 0
HcmV?d00001

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

literal 0
HcmV?d00001

diff --git a/assets/images/top-card-image-03.png b/assets/images/top-card-image-03.png
new file mode 100644
index 0000000000000000000000000000000000000000..d24ad6a08201415cbfd8c6007875bd0408fff12c
GIT binary patch
literal 2778
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

literal 0
HcmV?d00001

diff --git a/assets/styles/main.css b/assets/styles/main.css
index 5e46fc4..177294a 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -54,8 +54,36 @@ body{
     line-height: 24px;
 }
 
+.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: 26px 26px 34px;
+    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;
+    font-size: 16px;
+    line-height: 24px;
+    text-align: center;
+}
 
 @media screen and (max-width: 414px) {
     .main-banner-desktop{
@@ -63,6 +91,14 @@ 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;
@@ -92,9 +128,17 @@ 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 fd85665..bd615d9 100644
--- a/index.html
+++ b/index.html
@@ -40,6 +40,28 @@
                 <img class="top-infocard-image" src="./assets/images/top-infocard-image.png" alt="Banner Infocard do Topo" />
                 
             </section>
+
+            <section class="top-cards">
+
+                <div class="top-card">
+                    <img class="top-card-image" src="./assets/images/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/images/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/images/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>
 </html>