From e82cf95589a19a8cb409f52cf9a93ea302361b17 Mon Sep 17 00:00:00 2001 From: Victor Souza Date: Sun, 9 Oct 2022 11:37:27 -0300 Subject: [PATCH] Adiciona os cards de baixo desktop e mobile --- assest/bottom-card-image-01.png | Bin 0 -> 1214 bytes assest/bottom-card-image-02.png | Bin 0 -> 1295 bytes assest/bottom-card-image-03.png | Bin 0 -> 2759 bytes assest/bottom-card-image-04.png | Bin 0 -> 1574 bytes index.html | 34 +++++++++++++- main.css | 81 ++++++++++++++++++++++++++++---- 6 files changed, 104 insertions(+), 11 deletions(-) create mode 100644 assest/bottom-card-image-01.png create mode 100644 assest/bottom-card-image-02.png create mode 100644 assest/bottom-card-image-03.png create mode 100644 assest/bottom-card-image-04.png diff --git a/assest/bottom-card-image-01.png b/assest/bottom-card-image-01.png new file mode 100644 index 0000000000000000000000000000000000000000..a8768e0bff622dce758f62dbda56d35fa74c80fc GIT binary patch literal 1214 zcmV;v1VQ_WP)wK~#7F?VaCh z6G0Tlzg0m&)C!7G~JeFHrY*PcfTK;q}j}t&3rp&&YYc{1qdO85JCtcgb+dqA%qY@ zNRjc-8-dt_*a%3PtcrzVE%b;lwjvhMGPRj@g`b8!K8!eHAXyXazpp0P2Q}pDEG&Wr zwtbK<){Jcn#a@A=MS!FIdL5Qb;;^z!kSsV-&!;SRjQ2YsNES3=pM6__$dI5wjzfWR zMg?Z9vxR(wp?R?lm|=>Klktz)caIS;Lof(y!bEC`1=<+G!Ist3JB`^2ql2ZARZ8~HD$vJ4%c(#m@+<&adGi$ zI$I!Fu!$bvILL7*kmFDw$Du%ua|Zpg9%*#qqipP83Qs+&Fu5Q47s!O=<(u7edT%U~ zxj_B7xV5N)@=m>)zyRo7ptZ<{cW886HUhkfGXMR(38XE@+e@(eC^Hder4O#{ovay= zOrZ5>QEW@Zse!Xf+vv&Kl-9I?*HP+evZO7joB@Fik<`tp^y`M>AjiqIKqF}k5*#OY z0{Lg<;{I((xj!)094od^xe-W3n7Jv}=I=?beDy#S6>Rz%3QI1|y~)dRjd;|EaU7#( zQCOT8NQIfcj?&`1iz~A@it_@6KM($H{RQT~qEt99Q1t__Afn8D2JXKFmffB);Ui_7 z?}N0}O!qY1!g+j~Ld+yMPUBbtj`OXzD$3gGPuhM~S(}#RV4*@^GW)j()G-Y2T;l3DWp&!t)~F zyg*vNj*H3$vei^YS{s ze{awtxah^U)I${yy|hl+_~iTT-dx;cuZ2Gt#{g~tbejIexdbyWp>2WKVysLTs{I8CkG&Au%*)6wmXR&$o$CFkdUi1)VBzId zn1Vt;xFo;dIrmr+{}{waT!6p@2oORDA%qY@2qA`81nhHG*=1$FR`vp9D4%xrS7qzU zN(|stWgjcs(vsMwvMYQe*Fcs;&(W@NB-cRJ1kcgDCCOI@3F@NPMt$ZjBKS=5n7@~m zEuG&rkDu-S_Hu`=vRVhRaS$KPQ@4I!g&g>RfTCv*Y1tXZ!3y2H-h>?F`bL3$USmJq zuVEj(k=%60J-`6IG&lAm?9-dy-#OpM;u=EvjFIy_#*emoE>J%jv~RFm1hk08hG2Xy zZtNW8;)pRQka0rlAiBAXuml;00vU$_87HI;dIpk`-u|}`fl82U(8U>t0vU$_8HWNH zCs%K__BzY%ul6{<0|`Qqwl`Z)k94|Y@!Hh9#ymMHzXj<8@&!q_w!t`t*kfWsAVGM9 z>I3FQZ+@Su4!XnsaC#G?EY9y*(pCrzLF(nr_8g0hA!Cc``hHp5U;u95qF}%4Atb=Q z5AmE+hoe{cD$w8P#@>~P(Z%$3dtaq~iF}lmK!>iwEj69|K1DOzy@N~Cv38$Y-!Ghf z1k(#(`6hA*wD#;%V!zMt2asrWklyX*Pi%Ycd>7QQ$-Z;6(ewGjrnKb!gP9OZAZ-Mk z2ku+!>=1pG>mLWUPlgySuCMf@;uU5>EP+TOQauOVw?4nXeiM4_IYvuiTWqaonwFj* z%q>oiR093p`n*C{ptZBTp+Hw4ZHj+rZ7VQCPSKN)Gd_Baym5WeuU&9_U)-T%3TNBp z6X*F4-A>cKb8IjjviHTUQM}fti*d4tX1g0vU$_ z8HWNHX9{yvpXSZ>s=5VVA{RQM`t#xf1DLiz^>BBATx^HOwbR8JhXNUg0vU$_8HWNH zhXNTVhCrp~w*ql_9`HXWNv!9fHM*i`l+T~2rYm` zu#l_mV_ZXtTr6yis5aaqZ1%!XTVYz9bo$8+(g~x}SH`k_>M``@cZ%5!1?sp1t=MD4 z%&D9B7j+3OF+F-`H@FCfl^}9F9P%DB6v#Lf$T$?pI26b@6ler2Ve>6pr+oLq9qe8I z2D?|-Yz!u@u>$ES0BnugM|E)my9m;gZ=s9BJody`y?dHsE=b22Y`iQZDjpYOc#_J##%`|Og3DThT+8TCV1SJTlgSaq7J_L>)`W)omJzQlf zAA5@)sz9al`DBQritybYx_ID-~47gGXX|MMn*

GTmSP++H4I%b#4N%Vl~k()sddhLN>E0!&1ji#pZaC^}zsLt6JX$G@3ondr)E6|Ihid*->=4dX84u&F7I5Yge6O1fgl5xz4H>^5Fz>dk^8laLNrG`nmZQh zsqUnkAP`l$skDz?;`?ynG~dSmMD(?VkKi9boCwjL;X#x+=4Vh_HQnoL)d`^s#89}7 zDjdZF+e`PS`9!>6va+^rkmIeegx^Ld4tdEcPiyCE?s*GgGnclxNPDn}^ZR^Ph;u5$ zNzqLm#l)L@flu=3!XnL(r5xAJ*F>2i3q-vHOxj0XD%^P1C;1`n2x0TJM0N?@2hnt6m(OD{ivtPrX|)c?h#edZ3y zqP|J785r&gk<6Av;yjb~C6JygRDlkq?HNq2?bCd}i8%3hMQieB;;sDv{^Y_U$db%; zQi}S0uXu(Kqqqe1R`?Ed0#PZBl7fK8PL~j*}qO1}j{)@L>C{s0`j+-ACJvEQ#Flt2{OwpP^nC?Ux&&SrFa)g|v^t z>P(rtu%0t`aQGt;MZBj!&ffqJ{~}`LFW>_gRw^^rELz=sG7*H zYk%?+vp58~zWL8ZYx6tsfr-MB7>>&!_tmJP&;`o0Ig1D?fg|+d(|6tSZr>5b{fF=) z!hzvvhPsm3?0P?#=&UisoKQ+l#_@7vaDZ`(7LJ$MC?#Lejq#sRj29 z$GEf|oCPsyTQANZtlca%&flzV?|vKWAT}J6pC`B=L2i-jd#u0oAL4X!VLnc6qwV(o zhWX|VS)hMwb4LE1p|*Nu|NG)2&M)c>Sa0-QKU}pl5panV*f{bdVl z%5l#pd*~nRI)_Bs5w*c{L%$o1 zUh6v1Qtc?E-zl6v{Bb?c6R9|O3-*;!pbw?(#j}Pcko?m1JqCAbUHD$e?u!BfdEfJY z!3U1tMW#APewK{>3EhJ99iqREoM&KD-<`$s*bCP)|>JhJyE z^>Hosf)Y#H&&yvz9My9K!zh><#kd6TX(&|Z(5LN^7NdGHd=Tv!jwdjTQVOvrVTStW z;UjJC2N6euS=ObsWdA8#Uqf-Yu%1VjJo31S87fVR5G{yEvHDb1jBknm z&uv06gL)#dcKGs55Qs`5J+$1HmBKf?E(W>BOR=s-cP=3TIH(KeEj|-@PL?6OD-3FJ z9s?Vjx6~U9>U9W)vRDLz`u=9PMNny1t!zavhM_<9HTN}?MK(5yNu&gug=ofXm zb>fsT=oeJ7hvD6@Z@7mU#FrI&7VS2GkVi@3CtZZ!$a%T;!rs8GZh@g~7~ zg&KwFh!}EWt=GOyC}LSXToc=@th6$Z#Q2sC7_`em@})Wki=b zTGy?@6h-~gY}sf9eU&s9ArCOjaRwzMP71XfQ|+@6 zOXn;W>yR(x14DCx&MenHgkIR8eKMxX-1e-@;X1Ogi$Xj^fhL-BW*8>rTB^EdO&qSl zP_MI+uGfpBdf`}ejQsVX;)YZ(#l9gA@GA#3?kbMW;8w7xP%>#>M*nnaK_;t+(cIdO zFns1{?%GuDJS`6nS)dDq@pY1+ookcbRX@;n}vLRqw#49NE`-r$nVl1WvB-|T(Pe= z7k7ruqH;s)NK?3R27_y>avKDiU^C*-GqHyEqm5K=xax;RkxJJ}(H{){AMdUhvOsM_B7Z+yp5J$0-W1IOiUmU#sI4XS zO@jLKIJ?=d>!5AuOU8SOeHrxEsdn8n6w!}zHI4zpP_GL)Jl$=V7UXLcCgzHBLYp0} zdIknhhAI#Vp_&LBib%$9Jg!9W7o{s^u&<|6io_J>KCa}k3C3W@mgko-UEdWOt z!W3za7DUnuXamRkA-_Id{w!w~m~hF%VdvZ-57+F=FfuYSGBOe%UjtwDoqTVEuDAdI N002ovPDHLkV1f@@L&pFB literal 0 HcmV?d00001 diff --git a/assest/bottom-card-image-04.png b/assest/bottom-card-image-04.png new file mode 100644 index 0000000000000000000000000000000000000000..922f659f05eaaf57dac08a739d3d6f78d9643dfb GIT binary patch literal 1574 zcmV+>2HE+EP)pfGdjDF+K}QN%^-?F?4}B$BdZafjNa_XmvrkfJ1h8jhB;v&#rq6O(O_DY6dy zrB8N5mcjv^lAV+3mf0Cuf+fM;c?>^=yN(^8;Ukeh>=b^Bb{#u~FwxlK15_U}DNMW? zz)#p|9+Pz|*6opf4Pjzb$0vpMpkVf?xSuhEd5(4qJ3^uSM|}W6Iw=2|3EE47$$dSC zATi2b+h*9Air%{p0aj2x{4=y0{$tJx%M=7y!Of)D@)2qC-c)fLA&4u;t%_wF+(nxw z4xrEgRpN5|Nf4+_2n&J)aRsRg3mMrV+RYbeAnr~RcL(i;vt$awgs>n;5Lb{Ot{_2N zL4vq~1aSok;tFyLH;Gf-!CT6meADgV-hH#|FG}rxysq%&w!)(*gGIP&J;7uaEG7F4 zZNP}RPRHj4b>?u_x|*>CC(--3#1Xwd#ivmpHE5^jzS40n=mj}WM4qbW-jXwdyltF6 zJJA_!`;0ughXrU?%zdR53G$o-Jtk4MP`~>|(R&@xd!EsIC%7i<5%)wtB_X&(sSEpz zi>&6|$bWG;uAb;)n9?Na;yM=jj6QE`o)`NqE_=~M?yWJJWf$M;?O8AKS6mi0%FA69 zmVu_U>*1HUCLFj*Ts+b6M_lv86x8-mDK4-U#FgR_1NX&^Je`W* zU7Wiw?xm;0Wj~2t`w$i~_(xu;<3m`eRZ_GRF7cZ0+!xmr$7Qg@)(6zWzdgBZ<9&06 zW{n6h_|BKs!VxUMr@w4PAvx!8M(2U?d$2{yH-3n#jVIKld;jY7@jcj}KPpA_L)=GE z3e=Ci**{mWFP^zAgvS2pp+6<0{H3FMqvW{emrBCYB zEO6Fq=Xc1#wY+2ab^5FE1n!a*i=_P$*Th~ce{R;%<)IG#C2m|isW7GeS#hzCY&_^%x9u z1-(Va1-maU7llNW!qa&IIwKMLJKM|6{4m{osOtPe^AGldwtI=YbpJ3~xDT)0 z1FMUCr}>9c`1aXuem~;Dhdq4$)zPqNmBAtjCMW83xisDuypQ5DU5B~_L4vq~1aSok z;tCSP6(oo&NDx<$Ag&-mTtR}kf`m&M2of%3AV>%cf&_5|sR|36$=^r2X=I+9DsegU z-b1@-q)#q{1wn$if-JLxGDf-6u!k01rg2%~DpdE?@ipGp;O_;TCs@7KW-WGMu2jBxvx8 z)l9KS;tZ}&?Y9^T<%`*iX8>cAueaVdfn$_~Wm6C$8hgA4(-bO_lD&k#?N0?W>04Z} zj>nDdpdom2b$vsuhlc44Kh!6Y7O_1nkp$K8$#*+O{etMZiDs;ihqem8`4OgVouWbh Y2fAn4kBYRtkpKVy07*qoM6N<$g5j+A>i_@% literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 1204118..1fac40b 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@

- + logo M3
@@ -57,6 +57,38 @@ Banner do meio mobile +
+
+
+ Imagem do p rimeiro card de Baixo +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +

+
+ +
+ Imagem do segundo card de Baixo +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +

+
+ +
+ Imagem do terceiro card de Baixo +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +

+
+ +
+ Imagem do quarto card de Baixo +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. +

+
+
+
+
\ No newline at end of file diff --git a/main.css b/main.css index 87b4197..0c5b1ef 100644 --- a/main.css +++ b/main.css @@ -91,6 +91,43 @@ body { } +.bottom-cards { + margin-top: 140px; + background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%); + +} + +.bottom-cards-wrapper { + display: grid; + grid-template-columns: repeat(2, max-content); + justify-content: center; + gap: 20px ; + position:relative; + top:-60px +} + +.bottom-card { + display: flex; + flex-direction: column; + align-items: center; + padding: 36px 32px 66px; + background: #FFFFFF; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); + +} + +.bottom-card-image { + display: block; + margin-bottom: 14px; +} + +.bottom-card-description { + max-width: 368px; + font-size: 16px; + line-height: 24px; + text-align: center; +} + @media screen and (max-width: 414px) { .main-banner-desktop, .middle-banner-desktop { @@ -98,11 +135,31 @@ body { } } + +@media screen and (min-width:415px) { + .main-banner-mobile, .middle-banner-mobile { + display: none; + } +} + @media screen and (max-width: 768px) { .top-cards { grid-template-columns: 1fr; padding: 36px 26px; } + + .bottom-cards { + margin-top: 114px; + padding: 0 26px; + } + .bottom-cards-wrapper { + grid-template-columns: 1fr; + padding: 36px 26px; + } + + .bottom-card-description { + font-size: 14px; + } } @media screen and (max-width:992px) { @@ -128,6 +185,19 @@ 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: 769px) and (max-width: 992px) { + .bottom-card-description { + max-width: 280px; + } +} + + @media screen and (min-width: 993px) and (max-width: 1280px) { .top-infocard-text { max-width: 520px; @@ -135,15 +205,6 @@ body { } } -@media screen and (min-width: 769px) and (max-width: 1200px) { - .top-cards { - grid-template-columns: repeat(2, repeat); - } -} -@media screen and (min-width:415px) { - .main-banner-mobile, .middle-banner-mobile { - display: none; - } -} +