From f097f7054823a065685de63cdd65281447a2ef9d Mon Sep 17 00:00:00 2001
From: Nicolas Oliveira <110689312+thedevnicolas@users.noreply.github.com>
Date: Fri, 7 Oct 2022 17:27:54 -0300
Subject: [PATCH] Adiciona os cards do topo desktop e mobile

---
 assets/images/top-card-image-01.png | Bin 0 -> 1277 bytes
 assets/images/top-card-image-02.png | Bin 0 -> 1863 bytes
 assets/images/top-card-image-03.png | Bin 0 -> 2788 bytes
 assets/styles/main.css              |  47 ++++++++++++++++++++++++++++
 index.html                          |  15 +++++++++
 5 files changed, 62 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..e9be04a599cd3a680187904be0582097fc44815f
GIT binary patch
literal 1277
zcmeAS@N?(olHy`uVBq!ia0vp^89<!Q!3HGXc(IoNDb50q$YKTtZeb8+WSBKa0w~B>
z9OUlAu<o49OCX0O-O<;Pfnj4m_n$;oAa|0di(^Oy<J&nK^PakhwEdqQa3PUPt3`q<
zs>r)(LfHxpa~nrJ{|S2z&Qibef#v!ZlbgAjH4|4%xX{Mcsa8He!O`P@*y=ZDZr%Gj
z_sos-yg5%YKG$FBOsYP2$M|#gv1!k5FetVNIB|f9O79t}-^9=H%{e=FFMHA5IhNIL
za&$HS9JpzmF1|&2`%>d(mbxofx|;T`F6&Esw##Ly&V}82ljIH7uXhwX`{L#2>6_mx
z&KBptZDpmEZtvV@pWIh<JN<3`^A7^Ki=+DH{^hk4^R>3B`6K!%g6;PGzTJCv9n&wU
zyi)Ug%^Neni2(r~qCfN}wDbPSeo`!VC2_)Wr4R8+^9xj-6bSwJ^}8Wyxot-Cq5BIY
z9iKe=puF$?^SXvRpP3|c`o!X2@H{cAkjdG<Us&_V#Kj%50#^eRo)SbpsshIK>p1lT
zcI=t3c~X_=e8vBoNd_klKgbd}RO_tb|Ha_!DW(1k_T@Ww9D4fn(VSy5JL)@avSQ+j
z&OKBRI$ZliQ1ABbcMdZqPq=)r+aqCLq1%gmrN*aa1yeg5wKh50>^|n?C;RdI$+Zy)
z3d;|=@yT&%nR=*OdNo`7{`g(>oT<LM<kuzV#{J?SWnO+!S6=ZrL!m9XaewEL4Lsae
zXHJb?B7N<q<|SU8TMBJ|YX7!-JnrvJJ;>LYGRIc%NCMj{3#pIaza<=~@2jwvs^2hw
zcCMiP>+2aoO?B^0UkQAC_&(pFtK&bHuaispoo%HeO!Zs-P2Ifw?KinumiLw9)_1=7
zy#GH({w)LlBLbh@fB*h#Rx_t#;qI4RSEau_{=2PjLhqa%c6CQ$axzsfT^H^wP0zA)
z<hlK9+HZ-P<6+?)4;em6v#ku3cv#WRHqExaxn|<LgwJbqjsMP1EVjC*)+RMO{qIRJ
z!yEJV-&JZ8=9oB-(ezTe)$t~V+QnW+mYXt18rApynDXTHl#(Kiy!ostbNBchdGI}y
z>HiXomEW6n%+|aAO>z6bf4+P8+TM$2FIU_CU!GgrZ!oX@`Fhdsx2&ubuTR(?oE&w(
zQibjRZ|$Dsi(8V{Z_mGb>;v<$+X=U<{+KR*@z!{+(aG0-S_?kts9p|Is-0QED?d%E
zok<fbdM+Edvfs}1$H()m%bv7W`+R!p^G)xKzIgGQF0uDT5y|!2gr=_1=h`D3D|Tbv
z;`QG@y!KywG=-`5!@@%Ux6@`!x*L9eUJBFOUFT-<>Q&_)=GyeUpx}|n<n8}A>njL$
z1kWkbm_QCnvE=;!_woID$!d1B{>X3T9C@=%mp%Ep|DWx`i|1KRu>5+w-MGf?H&^-8
zzc+9F{mXJWi0N^s!JJ1^oEz~W<!Z6-&u-gpKm3p9dc)D&ZJr$N6N-YE);i|R`h4Tu
zU6;iD-yS~~<t`FlbD>86T|KOTP;8m7ed_e026slz9KMCX(u%>;)z4*}Q$iB}KRR2K

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..fd9a49a3300df0715c637e2e15a0e9474680fc10
GIT binary patch
literal 1863
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
BZPfq(

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..825f21ef9534ab42c098227d6d6ca8dd0233c4a2
GIT binary patch
literal 2788
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

literal 0
HcmV?d00001

diff --git a/assets/styles/main.css b/assets/styles/main.css
index 99681a1..b16c664 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -55,6 +55,44 @@ body {
  
 }
 
+.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: 768px){
+    .top-cards {
+        grid-template-columns: 1fr;
+        padding: 36px 26px;
+    }
+}
+
 @media screen and  (max-width: 992px) {
     .top-infocard {
         flex-direction: column;
@@ -88,6 +126,15 @@ body {
     }
 }
 
+@media screen and (min-width: 769px ) and (max-width: 1200px) {
+    .top-cards {
+        grid-template-columns: repeat(2, max-content);
+    }
+}
+
+
+
+
 @media screen and  (max-width: 414px) {
     .main-banner-desktop {
         display: none;
diff --git a/index.html b/index.html
index 5f510bd..71e86c0 100644
--- a/index.html
+++ b/index.html
@@ -34,6 +34,21 @@
 
                 <img class="top-infocard-image" src="./assets/images/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/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>
\ No newline at end of file