From 183ac11346ea92805ebcb26d339ece05c8ab1174 Mon Sep 17 00:00:00 2001
From: vitorsoaresdev <dev.vitors@gmail.com>
Date: Sun, 9 Oct 2022 15:15:38 -0300
Subject: [PATCH] Cria cards do topo desktop e mobile

---
 assets/imagens/top-infocard-image1.png | Bin 0 -> 1260 bytes
 assets/imagens/top-infocard-image2.png | Bin 0 -> 1836 bytes
 assets/imagens/top-infocard-image3.png | Bin 0 -> 2751 bytes
 assets/styles/main.css                 |  46 ++++++++++++++++++++++++-
 index.html                             |  29 +++++++++++++++-
 5 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 assets/imagens/top-infocard-image1.png
 create mode 100644 assets/imagens/top-infocard-image2.png
 create mode 100644 assets/imagens/top-infocard-image3.png

diff --git a/assets/imagens/top-infocard-image1.png b/assets/imagens/top-infocard-image1.png
new file mode 100644
index 0000000000000000000000000000000000000000..304a1a0cfe8b5a65fa188404b4e77407e4643d52
GIT binary patch
literal 1260
zcmeAS@N?(olHy`uVBq!ia0vp^89<!Q!3HGXc(IoNDb50q$YKTtZeb8+WSBKa0w~B>
z9OUlAu<o49OCX0O-O<;Pfnj4m_n$;oAh*%e#WAFU@$H<AMUP!1j{i6NvSMM<j7YAi
zN0S^TE?u<e1B;>mgguT&gztQ0G15KTI_=o91&M8)D`zb1tZ1@sd(_8vKTjwA$=P*Z
z);=oUxBE}M@%-aa@3;Rd`yX|3@n4k&0VfW{7BI0#xku<}>*kf4nJ3hKXy448zIDl`
zotx9og>Bgz{q&4N<9yR%*MoK;yNk>mTf7oC@JFiHC&tA$>s;Hs{A_Xhedn?`o8#ZE
z{PBCS{h++z^0jYMH@}yWTl_NQ@XXEi3dgOiGjsnx%4xG%mGJv^-SpQp{?;9iG|v8Q
z@9N~J`1!znC4T82=O>;Iz0l?;clp46C%cC}Cl>P5{QcjMbmvb-^Qrp@w#_I0X>7E8
zR@Zc+@bgmJ=$fUfCu%<gZ-~ud$vQl9afe|?md1o4g6Q592g~l-CCvH(JN9hoK6o~F
z@r#@H+@;yd7Yj@){pc96LGZ;jFS$=MzT|xWsPSn2WlQ0e^*uIy?_T69r|x_#aBaPL
ze44~QIs2n;xBhtjwPfM`gKuk?@>QRNyg1P#cue5*x{VWz`+q!t66SMp;^hQo`*|Ev
zrXK2+Ud^k8{_TrBDVQ<QFTP6W!*``P#kv1dSaRo-A1P4#U_Mb|)rLzpn+v;3j+=cG
zdC4dC;{4IiZ~Z4eWBD7o;koR;V>g#7uwA}*O!L?0JG+u*DA@HK`)|Re73U_kV&l2M
z=xtU{*^jxs`js6i_%S|VuE55he>q+^>a+aI_)~x2tmVz)zcd7$dv7zpI;~eQdCEmm
z=QH<>50}Z;%)RV!_xak|mbYz>U;Gx>eeLI-Lq<V$w#i}4Yh8X-DQ!GEG3uQ{+rphs
z?bz%$Y_>j9aOXzAf5|Ef=?e!pJ<Xq>e@S&){}H3h|0TEiA9qfgk^Fl_y^#Xj?N8g8
zlPZ`LFDWPVeX*Zw?AWj`SoP6zQ|3sc|1uwgC*=nlomjXdci9BqqNyDRr=Ml{=UEtZ
zo;@<>KX<me@vry)DyO+7*UFf`mEH2^f8MR#4)t>LGH+QN>YZTv<ouNxY5ymC@Z76!
ztjiI0{$06pS7#zyq`c0x>vI-`rbU%bx;{6=;bEXxnRn-x)JLX!B3H?9Ey0TBe0SYy
z_wUMs<NKH0Q2oC<+BUv#+M-?i*Qvb=I2CL6Zt<~)8H%eacWQkws^;7?`|^7J54X?n
zy_&*Q`(t8Z`CF|wlRkdkt3J~q+1z6BIoI`yItsh_+133ve*Rbgja7x|qsVfswh|VM
z^gGmDf4E%p&fKff-|OB<?S8Uf{2}+##V1&Peg3X$Ctusze(K?hvib89woh@WSK{$6
zJhjjPADVc#dv|5|`M(7gholcYviq&lV(ek5*_bt<HuyN#eeaNO*{1*YBsqRN$n^UA
l(Y-9t0s&YmREAfwYIN$qKX9Sv1h8;o@O1TaS?83{1ON-%T>St5

literal 0
HcmV?d00001

diff --git a/assets/imagens/top-infocard-image2.png b/assets/imagens/top-infocard-image2.png
new file mode 100644
index 0000000000000000000000000000000000000000..6a87a3bf99a0deb2279982d9db6a3b8c3d841690
GIT binary patch
literal 1836
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
a)BF!!P3Z#fI_b9n0000<MNUMnLSTabMtvgy

literal 0
HcmV?d00001

diff --git a/assets/imagens/top-infocard-image3.png b/assets/imagens/top-infocard-image3.png
new file mode 100644
index 0000000000000000000000000000000000000000..2aded610ac0e967136ca3630c90739fb4321416d
GIT binary patch
literal 2751
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
FV1horUR(eG

literal 0
HcmV?d00001

diff --git a/assets/styles/main.css b/assets/styles/main.css
index a6a4bed..1f11722 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -40,7 +40,7 @@ body {
     }
 }
 
-/* Cria top infocard */
+/* Cria top infocard desktop e mobile */
 .top-infocard {
     display: flex;
     align-items: center;
@@ -101,4 +101,48 @@ body {
         max-width: 520px;
         margin-right: 70px;
     }
+}
+
+/* Cria cards topo desktop e mobile*/
+.top-cards {
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    gap: 20px;
+    justify-content: center;
+    padding: 74px 0;
+    background-color: #f0f0f0;
+}
+
+.top-card {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 26px 26px 34px;
+    background-color: #fff;
+    box-shadow: 8px 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 (min-width: 769px) and (max-width: 1200px) {
+    .top-cards {
+        grid-template-columns: repeat(2, max-content);
+    }
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 9ad89e5..233a6d0 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,7 @@
                 </figure>
             </div>
 
-            <!--Cria top infocard-->
+            <!--Cria top infocard desktop e mobile-->
             <section class="top-infocard">
                 <div class="top-infocard-text">
                     <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
@@ -41,6 +41,33 @@
 
                 <img class="top-infocard-image" src="assets/imagens/top-infocard-image.png" alt="Banner do Infocard do Topo" />
             </section>
+
+            <!--Cria cards topo desktop e mobile-->
+            <section class="top-cards">
+                <div class="top-card">
+                    <img class="top-card-image" src="assets/imagens/top-infocard-image1.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/imagens/top-infocard-image2.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/imagens/top-infocard-image3.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