From edc1e1197f107f44db30fcc6e3c6d1e3c72739a7 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Mon, 10 Oct 2022 12:56:28 -0300 Subject: [PATCH] feat(index): adiciona os cards de baixo desktop e mobile --- assets/images/bottom-card-image-01.png | Bin 0 -> 1220 bytes assets/images/bottom-card-image-02.png | Bin 0 -> 1294 bytes assets/images/bottom-card-image-03.png | Bin 0 -> 2771 bytes assets/images/bottom-card-image-04.png | Bin 0 -> 1550 bytes index.html | 31 +++++++++++++- styles/main.css | 56 +++++++++++++++++++++++++ 6 files changed, 85 insertions(+), 2 deletions(-) create mode 100644 assets/images/bottom-card-image-01.png create mode 100644 assets/images/bottom-card-image-02.png create mode 100644 assets/images/bottom-card-image-03.png create mode 100644 assets/images/bottom-card-image-04.png diff --git a/assets/images/bottom-card-image-01.png b/assets/images/bottom-card-image-01.png new file mode 100644 index 0000000000000000000000000000000000000000..fe5c8a525319085b4dce3617d431039bbaf28332 GIT binary patch literal 1220 zcmV;#1UvhQP)xviHiKW(Oc5A|fIpA|fIpA|j$H z3ox2c;+Diepe#ia4<))7k&#%Fh#9%Y!tNV>814*ga%Mnz3x9uqm|`2WP_Cn}3K6>Y zK}MpJSQbg#17#(YxG6E!v#bS2S`hSRwgbw;!25j2al>T46M^#3PP{g*38I29L7roR zN~QsOt+R=8l%Zvb4T&afHGB}W&$c_Jz!8E;L)5Yl5^7YJkHx zlccTHUDuV5NZd{=>q^XFj1g7pqY2SwZJ}pb2zyerUH*e)LBO*qA8Y7;pBwwEW3W#X zH9 zk>I`3CCD5FT4&@ll8ZJvGu2L1X%eJKSU4%A<9Ydn@&CP~Xu{@?p|VPG?A`iTJ|mvC z$=J{IQB;=q3DU&OA4hF@-^A59Im-J4MW6Qm-Te+MzelZjpP;#yz=|Yg=`C>K8Sr2e zJ~POe_kEC_HS;6=xrO(P%Ss$c@Lc9+ke0$txsVM1K6t&wH@4X-+S<9{`?~xNxbqr? z$ovdy{5Sj;R*R>K9|6$oE0=wpKOv*Uf1(hXCur*@DygW0Df0xiJ^-sjDy^*_(qz1{ z-;1RCxiX||*L_@i(_ijSQs&2no(8|BQ+j~3 zzuNM=3cOE{zVXeo2d|?YeQ#&4&C!kLs08n?gIubtEVl8L|6_5Vky`r;D#QCGPOCy~ zva}y^wOXM&oJvt7XougbNT;6`$KpK41bL1L@*ET7IVQ++=@PV!75TafN{S>_a5(!L zy3&=|*MepFy8Qcgi~9&_KIuh_Ejh&Ja5>28pdFaAVzegiYS6_u+>jm2{T4v4jh7rv zhUtkAdeHZ4>#VxtJJE*oi)pbrr;JIW==3J(SD1I*Kxk>@`zd*3D#%?0N-FTBf@3Q1T?MC95T}CBPf4CGu0ZU-P6L*?rZ^@+ zh=NRjSd#xYvvZP2>L~og0$eOWfDl3mA%qY@2vNkwW1p+awv}a-y#yJ{$D{2kdskVB z5xlPKLuChA6x&yJi*Mu(NOIC^v^!kL9gy^d*J#d~Z;d9eC9)C1xETz@}+!# zM%}KrkurXM{5!}FU1g;WV&@<{Ql@tMp8Fj51dpnx5Yw_N%!3@=vfld~Wcx+~{k%c{ zyx%}Sav|C09rgePxXyV_7uR5UKeOJ?#WnbHw!ziTcbGpS!VT(MgZ2gXfCUI-V=zA# zH+L>_aYPvuNI5=j5ZzotSc8;9fs{jml;hI|JqL-&VEoNTpb{h*baBd|K+2&&%Ar8Y zNfphOsIxi#m5B3yAYK^6jb@w5?$IBMm#*d=*2zWXZ4gf&SCWKnd(2}LG$bknGVsq( zeZsmJEbpn>phxtF)0-S+V|^|)Er(|c(jfmHuJI{h%Gjp*eLrmOF#PA*i~o0MLNn#pmV>&t~H(Vo}!y=U%@5nT)U60_czu) z2Fpue`6f~bR5h)yUEk5>r^^0!>?bwvEmlG(fus{~ z?YVDuv~vtKuD_nyz8FHdxS`q;i`Q5Qp#&n4h;<*dYrTGneiyoM93!=`Ew;2XO;69j z&n+&FSOWdhdYz*yP+@Iv$j}u?+L^MoEyD_#B9f3YKe|BLyuRSS-Qe@kh!cbGH7EobR$7BNeOCo*hA#Z ziJSNnbqy`CJO*bs*cgnfLF95ccxoa7qK8PPZu zH87|n%iH4t?A66XBJ~C8MW(bwGzcMt5JCtcgb+8M0sGgXF1!~{*Z=?k07*qoM6N<$ Eg6?xq%>V!Z literal 0 HcmV?d00001 diff --git a/assets/images/bottom-card-image-03.png b/assets/images/bottom-card-image-03.png new file mode 100644 index 0000000000000000000000000000000000000000..fcf3a259fbe91421448da38c7d0187fe25d99765 GIT binary patch literal 2771 zcmV;^3M}=BP) z+{hKiKiMW50@+Mp0|^^4HMvVj@GODs8Um|%f{dSF+D|a;CusQz#(sjo^wm#RutlDegu(GSXPNhMj*r*rDmUjri}BO@at z{SaY<*c0hcq=&2D!__{5t$w*kH>>oONLQ=h3?o~C1el4m5Gikwu0{G(q!X+~9ce*~ z_M+ItnqzHsBOb)qo-n%9iBNZ;3}TQkE3U~$WlIKGuJBSSUx%P_>R|O7qn<>hXBg3P z3h8!iE-8WAi`GG9&ap@-?ACOJ(d}(OFOCXs(+gXmxhN)>NE1jgO#ki-Bg+?MdPx`P zUKkxy%RSs_kr>P`W{TayV0L|T+(8)h;?TZB^v4vVNJeqUr46C-NFRvq{?6)7ye(n& z0@bqR6UeXk2Clr!+44Hk@`diBYC%Y^I@bIfftSLbMln6lIS28T3|7_j;*2A#{Nlr0XcdAs@K@ z>;5vI;ag#4QENBILDu?F^qE6mvdRn1`PzHFhp<^F+gzk0)QR(_{7{H9vOQQ1ym4-67`inI4XobvX8>*Oq*L; z&lNm4{i%o|_RYunYvA!;MXdZ^_`rn~9axT2R9AM}8RT;XXF;*D&0!x^lfZ-7&+Xz6 zHOM$oa#nn*Qha@r2%C z*EuB8!KJ<3jVh^Uzd$p-?=eOKVGG2tC8#-vT%L`IXqSuMg+JzjCR)o1Ng%FlGh@#C z*6_O#pMN8TD|7N5{K&2M#gy&fTC=&bZT98=spTJHsF+IP3^kNq|4#M+nO?k0W!B0)>piJ;w^#C%uuxq@Y|NQgnof+A8%pW# z6s4X1teWRcY3cSB%r4N!%J!u^B`nmJZf-HSZ)r$%K(!(Y2-JP)zu*JM?;~3oq&`bV ze}ry9<_1yuGBP+og}-m(Cw16)b%96LzNr|7rmWBeQmul)?&h4Q9@bS-%TNeTy{aB? zd>Gk=giX|c0)dW6&=vmXCVV+&I)fucCH2KWsv$K&!qDK6qrd2n8;NRrcGdDHU7s2r zQ&>j9RFIuy7ruiPsmxjYYQ5cJR8NMFq9e=k2`rGZ$!*sJ5 zD)$zuizCQtXd)CV?cseLfu2fh3=m=|@r zbK(>*m={!i}xY`KRNIA4gxPg4z-baOh0oNbPOhm~xAX?vWQDP=}t3&eYwi6 z6MYmhM!cC|yF!h^bVLm4e!38gL`krP=4o}xDP2lMU7N%bLp-a*&;FQWgZfDm*yhm35Ge& zpn$|lpm$@seRagjIm^X5)C>8*&|ILanrolJEbP#_jHxiMdsgOfofMjnc!&bc4Cka6 zCiKDB0<9B=YcN#Htdp+Si=%Skso@y;>r>4Q>0p|DLmuEK2Q}&^HK%ZEV@ptdZtCIf z)PihQ5u>@aO)-2HXzto{?mQ_D4q2dUgwZ?6(9X4~?s4Ni4pku6uWtyp#uC2^n5NL+oh(piB8s3jFQoZd0onSZOs%gLl>y6CH2h&)#q_`vt5@#dw}tOn%dXw%V54vx#^xkMnBrsI0g(uwJhZDbhlkv zkgrwPSZK}(ZFaQo85lenszAkJNui2l?c;GJg1;zTk)nP*9o>pn#ktQ)dFljXsHZLu z{Tn}W$Wz>lI^u^z87b<*HU!EX^3Ze(Dk!-_UIw>Gz(a?`;b=e?qe{!}XB#ktGjLIt z60~62(M>d73&0VEFhyFR1(EUs+Q6}W$gj^=zs2kV8!mY`>Urgmha2`~7#SHE85s$X Z?*It%t;U3S%4Yi#D&FKv-PW|1(6={nK<{L2SxN zNVb7&2#Cnm$xb0i5812w7}X&l+eP*}HX%p@)fRP_w747+ZbFDBsSn#nbzu=%%;E3b zfB;L##-0OI7mlajrrJbqVoPKG_?xHhJ32f~Bqk_k`% zz+bAg9rPm1pRGS7yzi%4?_)s8(7gh)_tPoyUA-u3c zcwvR`!U}N>SBWDX;Ooz8czKe%{*&fGTHnN12Q_@Gx-bZ*zjdnZ7TivEUvi{F>XRGv z4MVaTecS1YLq*vIO{Q>&PgJfHRrQ2@MjrSYTezTUtICzniokUh8eihBim)Kn67~nZ zO@cn2>6weuT2$a_2>ZRR(cOa6_yMHQv@oSe+&gM_p1spd4&TpnbQ242yHuK52%l|=0Jt%Xb-4a&Gq)`m8la9CU2z#U(usI*6M$2E_ z5mv=}By1*(*CzV7A*}7*I$-GHyW+81aD#9#{IXwIzA30;_hsecEEx*gztFAYhp#&yInE6PO?l2lj`8i+BTEZW`~77nR}m?e}4h ze-PL$Y@2Qbh8C?)&ruxbsM#&-TjqvXt=}hi_3q!mqhDYW%RTnoT#AJ~_Q6ji;LoG& zotMD+kBPX(pkC(d3S?OG!piW%Zef=ltt_X+qus*(NHL}yNBh%G73g( zstREhUHgUA@zE(p2yX!Ow@2G}*7fi`n1gG-)|KTkHlYIp)ZV0t+(*FucShS;*wzO? z)6|q!C5~Xfuy<7l21=e9GrZE6*XpEz#Eo&R&YX&|Ftb*!cm`&G&Y*D4jl$zI@`6>$ zBIH<*Vc~c^VB<#iz2n!w?r+GCLhJHJSE>zi$9rk#5qWT-_^8(vTKJju8B?hCCgovx_u?{%d-zQQfBbqGT2`)i z@#z_u3rd$ zT)z-L6bRvk6=GZ{;MMmRs4gK{A*mj}9xH$k1wwdXg(xda%ZWXXbHiILdO-flZCfZy zSdMGsjw4~Ai#`NWgt9`xq%&UXs0d{V+nLaQ2zk==1tLRB4h0cLhgi2EUsu4D+3cNV z#MpFii6BG^1&r$~Awc#?%3|Rs#MOEBclvSM+)GR!ls-ZmS#h^f9ay}ysG?7+9~>1H zVtfdQklaw*+ku_HkDun4%1fbX&y2{{QNY?WcYl3FtcQZvL|EJtxG$Vlq7Dd<9Vt}7 z*kPIwzF7^Jb{u1XB=&NQT7$dr1fbKm!g6{40kQGtKf>b@)Bpeg07*qoM6N<$g2_
- +
@@ -49,7 +49,7 @@ -
+
imagem do primeiro card do topo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. @@ -71,6 +71,7 @@
+
@@ -81,6 +82,32 @@ alt="imagem de um computador" />
+ + +
+
+
+ imagem do primeiro card de baixo +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. +
+
+
+ imagem do segundo card de baixo +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. +
+
+
+ imagem do terceiro card de baixo +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. +
+
+
+ imagem do terceiro card de baixo +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum. +
+
+
+
diff --git a/styles/main.css b/styles/main.css index c92d583..d1a871f 100644 --- a/styles/main.css +++ b/styles/main.css @@ -104,6 +104,48 @@ body { width: 86%; } +/*bottom card*/ + +.bottom-cards { + margin-top: 140px; + background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%); +} + +.bottom-cards-wrapper { + display: grid; + grid-template-columns: repeat(2, 23%); + justify-content: center; + gap: 20px; + + position: relative; + top: -60px; + +} + +.bottom-card { + display: flex; + align-items: center; + flex-direction: column; + + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + padding: 36px 32px 66px; +} + +.bottom-card-image { + width: 24%; + display: block; +} + +.bottom-card-description { + margin-top: 15px; + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; + width: 86%; +} + @media screen and (max-width: 1024px) { /*top infocard*/ .top-infocard { @@ -154,6 +196,20 @@ body { .top-card-image { max-width: 120px; } + + /*bottom cards*/ + .bottom-cards { + padding: 26px; + } + + .bottom-cards-wrapper { + grid-template-columns: 1fr; + gap: 16px; + } + + .bottom-card-image { + max-width: 120px; + } } @media screen and (max-width: 414px) {