From a5de746bd50130a5eaf0db37b92a02c567fe9bbd Mon Sep 17 00:00:00 2001 From: Emilly Date: Fri, 7 Oct 2022 19:01:56 -0300 Subject: [PATCH] adiciona os cards do topo desktop e mobile --- assets/imagens/styles/main.css | 51 ++++++++++++++++++++++++++++- assets/imagens/top-card-img-01.png | Bin 0 -> 1270 bytes assets/imagens/top-card-img-02.png | Bin 0 -> 1867 bytes assets/imagens/top-card-img-03.png | Bin 0 -> 2765 bytes index.html | 22 +++++++++++++ 5 files changed, 72 insertions(+), 1 deletion(-) create mode 100644 assets/imagens/top-card-img-01.png create mode 100644 assets/imagens/top-card-img-02.png create mode 100644 assets/imagens/top-card-img-03.png diff --git a/assets/imagens/styles/main.css b/assets/imagens/styles/main.css index 6443944..dccf0b1 100644 --- a/assets/imagens/styles/main.css +++ b/assets/imagens/styles/main.css @@ -57,12 +57,51 @@ font-size: 16px; line-height: 24px; } + .top-cards{ + display: grid; + grid-template-columns:repeat(3, max-content) ; + background: #FFFFFF; + justify-content: center; + padding: 74px 0; + gap: 20px + ; + } + + .top-card { + display: flex; + flex-direction: column; + align-items: center; + background: #FFFFFF; + padding: 26px 26px 34px; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + } + + .top-card-img { + display: block; + margin-bottom: 26px; + } + + .top-card-descricao{ + max-width: 300px; + font-size: 16px; + line-height: 24px; + text-align: center; + + } + @media screen and (max-width:414px){ .main-banner-desktop{ display: none; } } +@media screen and (max-width:768px) { + .top-cards{ + grid-template-columns: 1fr; + padding:36px 26px ; + } +} + @media screen and (max-width:992px) { .top-infocard{ flex-direction: column; @@ -98,9 +137,19 @@ line-height: 24px; } } +@media screen and (min-width:769px) and (max-width:1200px) { + .top-cards{ + grid-template-columns: repeat(2, max-content); + + } + + } + + @media screen and (min-width:415px){ .main-banner-mobile{ display: none; } -} \ No newline at end of file +} + diff --git a/assets/imagens/top-card-img-01.png b/assets/imagens/top-card-img-01.png new file mode 100644 index 0000000000000000000000000000000000000000..3b377c432e2a96ca9a0298aa8371e90963f1488c GIT binary patch literal 1270 zcmeAS@N?(olHy`uVBq!ia0vp^89 z9OUlAuIOrs(Gy6@>cK2Hsx9nbe z{nL%Q-T(Hl3OAkfYis=X`)kWq&Sw#D;!tb>6BD+#1U{;H_~yjTy1%pU=+#^7E(r7F zvM>8~=4MyfbF}S;bwew{BOz5vT7z_b<1l*y}QrA3xGhBumNE-+o^ty7~X^hiiVG zi@Yf_M|t6b36T%%9p%hE%vYX&dO=_R#N#R-<}1xFPY>s8u4dy^z)*wDY=-fJ%D)}d2ADCKi zb30#JlQ(Nt=ocCOm5+s=Bo-KRJ>03cj`xe(f^6%`6Uuk|?Oo*hmA*bTIp=aJ`ibDN zniiWiA7aE4?ZeLY8>lO$+t)R{uKrkOf0yHL?atF4vZ_yfgbh7h%{tPrN1T}H{-?M| zTkXY(%ncK}k2iVoUh?d_^x&NEzkT;M9=NYGci$J62k%|?xLEx?$??kKWyiyi2l+~d zK8Kw?pE;#_i8uR=%u6=07w3He&SGy1IjF3f-aZO7sIo(g-Z z`i*mE=L*Vy6}@JebvkTupWys|b-LP0|G3u(E6sY{9#LMS_`&_{e`d4qDfd^ncS>l* zybq{<$25BhPkpVup!1pg#)r$KeU#eLZ2PZDe_Q;$e{E^BWnu20o=Dy;LNC9%B%Srp zEf+X^;ZBi!^ZOe&d6O(w<*xY8V>^d0BjM&J^AqAPHMhCv&V2cw=l1r;iiT%4+P*r^ zb|fMCUzr0>x`2`_WAT#zmn}tEUPy;3)kPamQ2l&faKGwLE7iF&UANPiBGvtc4Sy6H zH`WKux$@gl?Dp$G>zNn-e|x`KC+qd&73=c%KmA`Gd!O~!=MTrW{#P_}3Y)M$I63Qo zp$gmk{SNkGv%fDDIAY*jFYOcC9$(yb&GNF=}N( zzjtn*;j@6>&g9+7yCS<&-oLsz*=K?6b<4%)eAg@LC{**YtNU&I{H^{Qs|wRcvE^88 zB`g@}cj)u~L;0F_=3JHjUi*$~_miW=|K|m~PiIPD`up>@(ER>=hn$}#ged+$ty(+9 zp&t;ucLK6TIv^w?x literal 0 HcmV?d00001 diff --git a/assets/imagens/top-card-img-02.png b/assets/imagens/top-card-img-02.png new file mode 100644 index 0000000000000000000000000000000000000000..5f2dd090b8b8a8d7f206bb9a826593ddc7076f86 GIT binary patch literal 1867 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 Twdslk00000NkvXXu0mjf4{}65 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 39be8a1..8be243e 100644 --- a/index.html +++ b/index.html @@ -44,6 +44,28 @@ Banner do infocard do top + +
+ +
+ imagem do primeiro card do topo +

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

+
+ +
+ imagem do segundo card do topo +

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

+
+ +
+ imagem do terceiro card do topo +

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

+
+ + +
+ +