From 27f800988075112b6d6167d6c706f0467fa4793c Mon Sep 17 00:00:00 2001
From: Yan Garriga <yan.pg7@gmail.com>
Date: Fri, 7 Oct 2022 18:51:20 -0300
Subject: [PATCH] Adiciona os cards do topo desktop e mobile

---
 assets/images/top-card-image-01.png | Bin 0 -> 1270 bytes
 assets/images/top-card-image-02.png | Bin 0 -> 1867 bytes
 assets/images/top-card-image-03.png | Bin 0 -> 2765 bytes
 assets/styles/main.css              |  43 ++++++++++++++++++++++++++++
 inde.html                           |  40 +++++++++++++++++++++-----
 5 files changed, 76 insertions(+), 7 deletions(-)
 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..3b377c432e2a96ca9a0298aa8371e90963f1488c
GIT binary patch
literal 1270
zcmeAS@N?(olHy`uVBq!ia0vp^89<!Q!3HGXc(IoNDb50q$YKTtZeb8+WSBKa0w~B>
z9OUlAu<o49OCX0O-O<;Pfnj4m_n$;oAh+Ao#WAFU@$DSLq9-mQZT}5fQZy77Y0PR6
z@$XP95Efi#+1M_8!#tv}$y9xYqUuIZ&omB?6^qI`Rw!+>IOrs(Gy6@>cK2Hsx9nbe
z{nL%Q-T(Hl3OAkfYis=X`)kWq&Sw#D;!tb>6BD+#1U{;H_~yjTy1%pU=+#^7E(r7F
zvM>8~=4MyfbF<R42?x$k*|{h|epRfMwDO^l#0~tBOI9yk8riIKZS(T8_UHDszu8w2
zbN!-0@i*=#KLm>}S;bwew{BOz5vT7z_b<1l*y}QrA3xGhBumNE-+o^ty7~X^hiiVG
zi@Yf_M|t6b36T%%9p%hE%vYX&dO=_R#N#R-<}1xFP<v7!_T$%o=B~ZJ7V&b`H-F_(
zDsP|v@vYr=;UiUzJloQ{^|!F><gerEi$A}>Y>s8u4dy^z)*wDY=-fJ%D)}d2ADCKi
zb30#JlQ(Nt=ocCOm5+s=Bo-KRJ>03cj`xe(f^6%`6Uuk|?Oo*hmA*bTIp=aJ`ibDN
zniiWiA7aE4?ZeLY8>lO$+t)R{uKrkOf0yHL?atF4vZ_yfgbh7h%{tPrN1T}H{-?M|
zTkXY(%ncK}k2iVoUh?d_^x&NEzkT;M9=NYGci$J62k%|?xLEx?$??kKWyiyi2l+~d
zK8Kw?pE;#_i8uR=%u6=07w3<D{^~#BnZ)174Y5j+>He&SGy1IjF3f-aZO7sIo(g-Z
z`i*mE=L*Vy6}@JebvkTupWys|b-LP0|G3u(E6sY{9#LMS_`&_{e`d4qDfd^ncS>l*
zybq{<$25BhPkpVup!1pg#)r$KeU#eLZ2PZDe_Q;$e{E^BWnu20o=Dy;LNC9%B%Srp
zEf+X^;ZBi!^ZOe&d6O(w<*xY8V>^d0BjM&J^AqAPHMhCv&V2cw=l1r;iiT%4+P*r^
zb|fMCUzr0>x`2`_WAT#zmn}tEUPy;3)kPamQ2l&faKGwLE7iF&UANPiBGvtc4Sy6H
zH`WKux$@gl?Dp$G>zNn-e|x`KC+qd&73=c%KmA`Gd!O~!=MTrW{#P_}3Y)M$I63Qo
zp$gmk{SNkGv%fDDIAY*jFYOcC9$(yb&GNF=<e2gx#@5AC-b@pEnfl1ICSsKg*AlE~
zPPyw+yI)rx9N({YLskFo;(7Y+-hnsc!;{UYsLU?646%^Vby0o3n(2LNeq(v@r>}N(
zzjtn*;j@6>&g9+7yCS<&-oLsz*=K?6b<4%)eAg@LC{**YtNU&I{H^{Qs|wRcvE^88
zB`g@}cj)u~L;0F_=3JHjUi*$~_miW=|K|m~PiIPD`up>@(ER>=hn$}#ged+$ty(+9
zp<an6zwp#T2YhIvZTIb(-OuYRBp!-w*m2&B^C3@=pVtDeC+k)wso(b$`BrWEZ(ow*
qyC&9a_q%_~LrMlv@$e+~sc3G1Uab1fSzW+liow&>&t;ucLK6TIv^w?x

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..5f2dd090b8b8a8d7f206bb9a826593ddc7076f86
GIT binary patch
literal 1867
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
A^8f$<

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..c7a3c94db708afde8eba0df2e66e0f59542d26ba
GIT binary patch
literal 2765
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
Twdslk00000NkvXXu0mjf4{}65

literal 0
HcmV?d00001

diff --git a/assets/styles/main.css b/assets/styles/main.css
index da6db2f..bdcff5a 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -54,12 +54,49 @@ body {
     line-height: 24px;
 }    
 
+.top-cards {
+    background: #FFFFFF;
+    grid-template-columns: repeat(3, max-content);
+    padding: 74px 0;
+    display: grid;
+    gap: 20px;
+    justify-content: center;
+}
+
+.top-card {
+    flex-direction: column;
+    align-items: center;
+    display: flex;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    padding: 26px 26px 34px;
+}
+
+.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 {
         display: none;
     }
 }
 
+@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,6 +129,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/inde.html b/inde.html
index 13e352a..7e7ccff 100644
--- a/inde.html
+++ b/inde.html
@@ -30,16 +30,42 @@
              </section>
 
             <section class="top-infocard">
-              <div class="top-infocard-text">
-                  <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
-                  <h1 class="top-infocard-title">Dolor sit amet</h1>
+               <div class="top-infocard-text">
+                   <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
+                   <h1 class="top-infocard-title">Dolor sit amet</h1>
 
-                  <p class="top-infocard-description">
+                   <p class="top-infocard-description">
                       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.  
-                  </p>
-              </div>
+                   </p>
+               </div>
                
-              <img class="top-infocard-image" src="./assets/images/top-infocard-image.png" alt="Baner do infocard do Topo" />
+                   <img class="top-infocard-image" src="./assets/images/top-infocard-image.png" alt="Baner do 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>