From 98828ee4eccae8d868ddf7b57d14e8cda95a8482 Mon Sep 17 00:00:00 2001
From: carloswinter <caduwinteer@gmail.com>
Date: Sat, 8 Oct 2022 23:16:52 -0300
Subject: [PATCH] Adiciona cards do topo

---
 assets/images/img/topcard1.png | Bin 0 -> 965 bytes
 assets/images/img/topcard2.png | Bin 0 -> 2096 bytes
 assets/images/img/topcard3.png | Bin 0 -> 3010 bytes
 assets/styles/main.css         |  46 ++++++++++++++++++++++++++++++---
 index.html                     |  30 ++++++++++++++++++---
 5 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 assets/images/img/topcard1.png
 create mode 100644 assets/images/img/topcard2.png
 create mode 100644 assets/images/img/topcard3.png

diff --git a/assets/images/img/topcard1.png b/assets/images/img/topcard1.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b144a67914ed499275c6dc21b3a8b449fb8c96e
GIT binary patch
literal 965
zcmeAS@N?(olHy`uVBq!ia0vp^=^)I(1|(%2V}1fD&H|6fVg?3oVGw3ym^DWND9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~y$2IeSF7srqa#<zD2i*7kcus(>tG5O<?&b$QC
zh10uJE=kT;ILY~d%_7$71m~PN3`I=8*&bZ-6MVHqz>-l!b52k1Cg~*>o1>P9a(p&;
zKRdF2V%hZjHr~fJc(imt!8RY~t&Lg2SCh7F-R}9R!d%sTLW$G=M7iSbNis$UT^6vu
z&vA$o>N7RGHDh6x`mfp3QZ7rcD0^cOcwFN4#7}2_>u1l-<_NXkey4u%vVD8Ztm04D
zZ1rB)ZV>c#?V0{*|4U0Oc#|KqFZ4B#{~pl(SX$cMX|{n$-fvUI2p)Ec!;HrY8VqF;
z@GzGho+)*kZ|R&1J7hg97p6*Q2kd-NaK`-ly%SlJ*ICUoJ@fbM(U=(v!XN#3v`qEe
zQ`_Z_^n`wYS`fSH;PxvQ{K{uc{wAZwlk#y@z+T&u8IKq1#O;3?<Q(D1`*)7iIhkYP
zR|PE2T-@IC*Zkd?O`mPj9|dd1ty}%wT)c<>NN(xNb=NLjw!ZAz`s>9{t#3+gMf-m^
ze9!LuTX4NrYTDb!DfcaQ-aYYhx>(Mx3BULEp1!u=`HVbIUiT!MK<<>EsypYV^qrgZ
zc=3~ek<RBbH{>M#nvg49JViGrLF9;35li3ECv&^Mev3OO^ULJcl%r9T{xkSa`pvOz
zPumvRS<QP{h24&ATX*LC`d>CH&hMT+>F@KaZvB?iej3jz`C}saepiK|&$AEmk-V{s
z{TJNoU({KmZXCKQ?%~A4*RSCS(YL!xR_*<BZz5Oaqu%%H=GT|Kl5wkhdonj#%k1~x
z&y#!lV&bYM?iIfuweh*ES8Lk!uZQgX9#-7E-WVo)-1+NO-8s$D_h-K?Uz+7V|Lf7W
zrG{T`zck%@<JY~@Q6IOk^*m%qwm2ZcXVAt>By-L+fsW}r6~201`TcR-{O-mFXH!JN
z|7YLPc=bT!+}+T>E@d~~PXA@SGVbB?c@<I2_!7!GakWKXxsU8H5bT#p*j8}KJMQA)
zQ!(eV&tH1!wl#j$-k`S*8F#-leu&$ut*8V6i*i4)mwlJbOkDB*G%(jOc)I$ztaD0e
F0syQd!}tII

literal 0
HcmV?d00001

diff --git a/assets/images/img/topcard2.png b/assets/images/img/topcard2.png
new file mode 100644
index 0000000000000000000000000000000000000000..55c906017a39e1a829775b4a25f5547dad0e78f9
GIT binary patch
literal 2096
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
aQO*AsgOD5?Tz+x@0000<MNUMnLSTZfO~%at

literal 0
HcmV?d00001

diff --git a/assets/images/img/topcard3.png b/assets/images/img/topcard3.png
new file mode 100644
index 0000000000000000000000000000000000000000..cfbd0f16f6517b76b128a356c696f7a827114e0b
GIT binary patch
literal 3010
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
Ef*p>)@Bjb+

literal 0
HcmV?d00001

diff --git a/assets/styles/main.css b/assets/styles/main.css
index ddad9d9..8beb12a 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -60,9 +60,29 @@ body{
 }
 .topinfo-img{
     margin-top:70px;
-
 }
-
+.topcards{
+    margin: 0 25%;
+}
+.topcards-wrapper{
+    margin-top: 178px;
+    margin-bottom: 80px;
+    display: flex;
+    justify-content: center;
+    gap:21px;
+}
+.topcard{
+    padding: 46px 26px 27px;
+    text-align: center;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+.topcard-text{
+    min-width: 300px;
+    margin-top: 38px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 24px;
+}
 
 @media screen and (max-width: 1439px){
     .topinfo-texts{
@@ -92,6 +112,20 @@ body{
     .topinfo-img{
         width: 75%;
     }
+    .topcards{
+        margin: 0 10%;
+    }
+    .topcards-wrapper{
+        margin-top: 90px;
+        margin-bottom: 80px;
+        flex-direction:column;
+        gap:24px;
+    }
+    
+    .topcard-text{
+        min-width: 0;
+        
+    }
 }
 @media screen and (min-width: 2500px){
     .topinfo-subtitle{
@@ -117,7 +151,13 @@ body{
         text-align: center;
     }
     .topinfo-img{
-        width: 20%;
+        width: 13%;
+    }
+
+    .topcard-text{
+        font-weight: 400;
+        font-size: 32px;
+        line-height: 48px;
     }
 
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 980a5e1..7eb0e92 100644
--- a/index.html
+++ b/index.html
@@ -24,14 +24,38 @@
         </section>
         <section class="topinfo">
             <div class="topinfo-texts">
-                <h2 class="topinfo-subtitle">Lorem ipsum</h2>
-                <h1 class="topinfo-title">dolor sit amet</h1>
-                <p class="topinfo-text">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>
+                <article>
+                    <h2 class="topinfo-subtitle">Lorem ipsum</h2>
+                    <h1 class="topinfo-title">dolor sit amet</h1>
+                    <p class="topinfo-text">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>
+                </article>
             </div>
             <figure class="figuretopinfo">
                 <img src="./assets/images/img/topinfopcs.png" class="topinfo-img" alt="Imagem do topo">
             </figure>
         </section>
+        <section class="topcards">
+            <div class="topcards-wrapper">
+                <div class="topcard">
+                    <figure>
+                        <img src="./assets/images/img/topcard1.png" alt="Primeira imagem dos cards">
+                        <figcaption class="topcard-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
+                    </figure>
+                </div>
+                <div class="topcard">
+                    <figure>
+                        <img src="./assets/images/img/topcard2.png" alt="Segunda imagem dos cards">
+                        <figcaption class="topcard-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
+                    </figure>
+                </div>
+                <div class="topcard">
+                    <figure>
+                        <img src="./assets/images/img/topcard3.png" alt="Terceira imagem dos cards">
+                        <figcaption class="topcard-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
+                    </figure>
+                </div>
+            </div>
+        </section>
 
 </body>
 </html>