From 92f061a3a765dbd2b46d288cfe45c824e61840e8 Mon Sep 17 00:00:00 2001 From: Savio Date: Mon, 10 Oct 2022 20:56:28 -0300 Subject: [PATCH] feat(home): Adiciona Cards do topo desktop e mobile --- assets/css/style.css | 37 +++++++++++++++++++++++++++ assets/imagens/top-card-image-01.png | Bin 0 -> 962 bytes assets/imagens/top-card-image-02.png | Bin 0 -> 2061 bytes assets/imagens/top-card-image-03.png | Bin 0 -> 3033 bytes index.html | 35 ++++++++++++++++++++++--- 5 files changed, 69 insertions(+), 3 deletions(-) create mode 100644 assets/imagens/top-card-image-01.png create mode 100644 assets/imagens/top-card-image-02.png create mode 100644 assets/imagens/top-card-image-03.png diff --git a/assets/css/style.css b/assets/css/style.css index 14ef12d..2aa69df 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -66,6 +66,36 @@ body { text-align: center; } +.top-cards { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; + justify-content: center; + margin: 0 22% 4%; +} + +.top-card { + display: flex; + flex-direction: column; + align-items: center; + background: #ffffff; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + +.top-card-image { + display: block; + margin-top: 10%; +} +.top-card-description { + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 150%; + /* or 150% */ + margin: 8%; + text-align: center; +} + @media screen and (max-width: 1023px) { .main-banner-desktop { display: none; @@ -89,6 +119,13 @@ body { .top-infocard-description { line-height: 24px; } + + .top-cards { + display: flex; + flex-direction: column; + gap: 24px; + margin: 0 32px 80px; + } } @media screen and (min-width: 1024px) { .main-banner-mobile { diff --git a/assets/imagens/top-card-image-01.png b/assets/imagens/top-card-image-01.png new file mode 100644 index 0000000000000000000000000000000000000000..8cf9fb5995fb2ae5d02eac4325d21066ba6fcac8 GIT binary patch literal 962 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 literal 0 HcmV?d00001 diff --git a/assets/imagens/top-card-image-03.png b/assets/imagens/top-card-image-03.png new file mode 100644 index 0000000000000000000000000000000000000000..11b00d411e8dc2d35f43e980aa63be6e840ea53e GIT binary patch literal 3033 zcmV;~3nui5P)X3 zQg6-ULW}hi<%h?|5N56H;WFcC6WJem4K{+gu;aNQmYk@od3F9&vVw@Z;q!I`_fEL) zZeV*cfH^+0(HVv1=Ts+@T`)~#8*^qt;acDx3HiBU!*T5GKCkxM4xF{l{ZqFMPw|lz z4w>33vchE+OapOSC5@3#YA^haw?Aq(_~T_587JsO;U)a(j7f(kX}2dFTZW_&T2{d@ zWKCGW)1vk)(vqk4Z#a?DK*4Yg^27V5ujLdY6G>4bOC6J%w6Y3@*LGYMj*(CTN5xwfX5hqzLuA#=8tK2S!%FvL+!8odddfKU<)g+oGkJ(Z`j zi%9j)xhNmLkPk2;LLqofue(Q&Z{`&9k?kaHqzjZ$FiS$-*A=eKb*!EI!t-^rxuK~wdhb6!N`IoWujnDM+ zU%eP$_rn9&;)GZ}`19#4#mA&2Ee!Td^dq#gX^hxr*;1C|CJc_d3JXXWqELwUx%T|> z>T_L9vLSM{l_D7jN^>!JQzng}nzbh!Q$}JgHzmB`co~MQeCHY5dgD25nfAvaUVQZ* zcz5T&Fvn?V8lfHrBQz4$v-GA+8siChivI&uVaIVU!VuDgJfRTtC)}<^(W@y=6zM8Q zGFsaI3iR4IWfsg`Rl%-rv2gfTzi;l~Nhl|en?JUQclXSFYsXW3-0go8j&;kHNib)H zygDRx+?Qa%(l z``7;r1OPwzb-SCW+{Pb2fi+oM!8H~c*!5q_koYADR3Pwrf*!PK%GpF`Rpm6F7 z&mX}pE}Zx8ELb-(4ev`73@c+_nI6Y&V+g3x_~NS{;P!7GDYb_L^asm!O#ikbC$K4B z7QqBUo~a5tVKkIr2-2Kae)Ml`%btYu+IOw3Wgbk(2Zv8%LU(Avs1OD9+V|$IwdTOF zt1yR7V>(Cnw^1dFkgQ6l%u|e7Q{!5NT)pGx6)_PnjB+RFhaL?;)PPlp#X6;lN#i0WU2*-4_To zEXjw6W{P?N&Yl@;bhaOdFeP$38=8+rjiDukrP3I&;jQfEa6`8VLqwBAf)ZQ)G>Vzl z5b7@zHAqM3M0YeFi@&4W2UsS-h&Ec;G1wb5G%{yz{qB*n{i5Rfn|tPk$&AJ3RR)E3 zo^Y&m8ncD$*oCJm%+1+N7!VJBePApc3IuKoT{v1Cr>Xf=tX%yurm}_0qODeHP59~2 zwFprF1E~FSijV8Ra{XUQ6Gg|Vci{Rj9>N%|Ejd$YML*a#*JYcG;UPN|J1`$B4GmC5 zF7l=lWw`am7x+-~iGF_A$rv5?U{Pbn7_#%@`a|V4l#2lI49sJ_JiSuuZ%bA<{O3=D z+LvB`mRG+Euz(tr^L&)j;nntsKYM89=o9#<*TQ>W(>eV$3`S&INKI)f<4jB+gR|zf zT0_*%?`-m4>S01SPIU9&-kHmqA`Dq=Y4FrHdu8mBp_(QJ0orLwo&C8>Q8cOTMWWj| zLLtP-fB{lMA<8Hi*(^qS5T5dk?ZtMuKex>5vd*-O3~5T|{+UKjG5TB#TKvqlP+r94 zaslGy4BGa~+zUH?RPfq+u8r+l&AGDw&Z%ZjQHFRKM!I{N&UslZSmxek@y9U4i&3>4 z+&}Giqa|)~Pz1c45vCV>bk;QCu!w9mS!P{KLfHjF$bPU7MNO3AJ(#b3e8O|)LN5xPvos9sz+v zgU%uha^Z;U9VZEcdUp(lCkO`hgRt@;1wejp50y~*FsOGxdK=?^C>~;;r`pqo;R%L8 zzK2Va)=~UMJ08>mnf9JGGlvgoH+Z8OOeTk6I6TA+)t2Tv$eaxoc^!suSqFpJF0TRN zL8@fS-nQaeq-hJi>*Z+xb^ly}ZaQy8w+*4I*+r&JRNMVp(}3O=R05eY45JHauXjHA zslpxmVfQhnc!-x0(tz6n;s>21BIu=$5c{AcRa8`ri)5sg%wN(gKq31&G_!pw#*3

JZL`j)+@0m(#?X74@qB#=gV z!gX=*g_;;|_XC4`E8l6;L_As=2*>Gx`@*pXglS4W#K!4Ha^a#{zaGW|)vOkZ zyU(H%-5X2YFO!s6hZ;|Ey+Utr4gdc?E4pNZhspg@o>7I9G)P;}3r@zs^_2WDd44Jx(I-&S%2$Cggi`HXt`)37NgvWP)kJoH~XdbfU?5x^9hC$oIR{ z?-)B-eB@6aY$CrBdKg^A(0wkVO4{Dou&VDVu1U3LU2%?&*@GUa&b%>$Ycz%P){9;o z+lG3IDiiV-A-`!dUv=mgozNW0MX5~56qQ~fq zqyhPTuN$08)}e*$@16POZv)IOvay%|W-~#PC^pTdeteP_<(Mn3*tN za_(|EQ>HCTMuCC{GNt1-jXv`IVFU925*4Hm9KLO_vP?=SO_-T5+4@UgEO^)j!!Q}4 z1TZsU>&UJsTb30(%%+S%E)-qRF)ZXSgPbzt>^ti}FST;Zp zt10s_>i@OY1cwi`>aP~05^Kg2vqxg!10ON%rf9`UCeDcbenB$Lf%8*d literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 494ddf4..b4d119e 100644 --- a/index.html +++ b/index.html @@ -40,14 +40,43 @@ dui.

- -
Banner do Infocard do Topo
- +
+
+ 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. +

+
+
+