From c8ea05a5804cacc0a0c9e37019efc7c69e8f3d49 Mon Sep 17 00:00:00 2001 From: Patrick Date: Wed, 12 Oct 2022 12:40:23 -0300 Subject: [PATCH] adicionando os cards de baixo desktop e mobile com pequenas alteracoes --- assents/imagens/bottom-card-01.png | Bin 0 -> 1220 bytes assents/imagens/bottom-card-02.png | Bin 0 -> 1294 bytes assents/imagens/bottom-card-03.png | Bin 0 -> 2771 bytes assents/imagens/bottom-card-04.png | Bin 0 -> 1580 bytes index.html | 34 +++++++++++ main.styles/style.css | 90 ++++++++++++++++++++++++++--- 6 files changed, 115 insertions(+), 9 deletions(-) create mode 100644 assents/imagens/bottom-card-01.png create mode 100644 assents/imagens/bottom-card-02.png create mode 100644 assents/imagens/bottom-card-03.png create mode 100644 assents/imagens/bottom-card-04.png diff --git a/assents/imagens/bottom-card-01.png b/assents/imagens/bottom-card-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/assents/imagens/bottom-card-03.png b/assents/imagens/bottom-card-03.png new file mode 100644 index 0000000000000000000000000000000000000000..fcf3a259fbe91421448da38c7d0187fe25d99765 GIT binary patch literal 2771 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 + +
+ +
+
+ imagem do segundo card topo +

+ 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 topo +

+ 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 topo +

+ 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 topo +

+ 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. +

+
+
+ +
diff --git a/main.styles/style.css b/main.styles/style.css index 2c6dcf9..cc728a0 100644 --- a/main.styles/style.css +++ b/main.styles/style.css @@ -18,7 +18,7 @@ display: block; } -/*///////////// SECTION 01 + @media desktop e mobile /////////////////// */ +/*///////////// SECTION 01 e 02 com banner /////////////////// */ .main-banner, .middle-banner { @@ -105,6 +105,49 @@ } +/*/////////// Bottom Area com imagens e background//////////////*/ + +.bottom-cards { + margin-top: 140px; + background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%); + + +} + +.bottom-card-wrapper { + position: relative; + top: -60px; + + display: grid; + grid-template-columns: repeat(2, max-content); + + justify-content: center; + gap: 20px; +} + +.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; + text-align: center; + line-height: 24px; + font-size: 16px; + +} + /*///////////////// ABAIXO DE 414PX /////////////////*/ @media screen and (max-width: 414px){ @@ -114,6 +157,16 @@ } } +/*///////////////// ABAIXO DE 415PX /////////////////*/ + +@media screen and (min-width: 415px ) { + .main-banner-mobile, + .middle-banner-mobile{ + display: none; + } + +} + /*///////////////// ACIMA DE 768PX /////////////////*/ @media screen and (max-width: 768px) { @@ -121,7 +174,21 @@ grid-template-columns: 1fr; padding: 36px 26px; } + + .bottom-cards{ + padding: 0 16px; + margin-top: 114px; + } + .bottom-card-wrapper{ + grid-template-columns: 1fr; + gap: 16px; + } + + .bottom-card-description{ + font-size: 14px; + + } } /*///////////////// ACIMA DE 992PX /////////////////*/ @@ -164,20 +231,25 @@ } } +@media screen and (min-width: 769px) and (max-width: 992px) { + + .bottom-card-description{ + max-width: 280px; + } +} + @media screen and (min-width: 769px) and (max-width: 1200px) { .top-cards { grid-template-columns: repeat(2 , max-content); } -} -/*///////////////// ABAIXO DE 415PX /////////////////*/ - -@media screen and (min-width: 415px ) { - .main-banner-mobile, - .middle-banner-mobile{ - display: none; + .bottom-card-wrapper{ + grid-template-columns: repeat(2 , max-content); } - + + } + +