From 99d1cd71e068754d06b5c18ff27e16ccca33ad48 Mon Sep 17 00:00:00 2001 From: matheusjardimgarcia Date: Thu, 13 Oct 2022 08:16:25 -0300 Subject: [PATCH] finalizando meuprojeto. --- assets/css/style.css | 211 +++++++++++++++++++++++++-------------- assets/images/Group.png | Bin 0 -> 1758 bytes assets/images/laptop.png | Bin 0 -> 1317 bytes assets/images/money.png | Bin 0 -> 1344 bytes index.html | 19 ++-- 5 files changed, 149 insertions(+), 81 deletions(-) create mode 100644 assets/images/Group.png create mode 100644 assets/images/laptop.png create mode 100644 assets/images/money.png diff --git a/assets/css/style.css b/assets/css/style.css index 9feca72..6ff854e 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1,9 +1,10 @@ -*{ - margin:0; - padding:0; +* { + margin: 0; + padding: 0; box-sizing: border-box; } -.page-header{ + +.page-header { display: flex; width: 100%; height: 101px; @@ -13,84 +14,135 @@ align-items: center; background: #000000; } -.header-logo{ + +.header-logo { width: 100%; height: 43px; } -.main-banner{ + +.main-banner { width: 100%; height: auto; } -@media screen and (max-width: 414px){ - .desktop-hidden{ + +@media screen and (max-width: 414px) { + .desktop-hidden { display: none; } - .div-image-pc{ + + .div-image-pc { margin: 15% 0; } - .image-pc{ - width: 50%; -} - .infoboxes-sub-wrapper{ - width: 100%; - flex-direction: column; - } - .div-infobox{ - - width: 96%; - height: 70%; - } - .imagem-note-wrapper{ - width: 100%; - flex-direction: column; - } - .image-note-mobile{ + + .image-pc { width: 50%; + } + + .infoboxes-sub-wrapper { + width: 100%; + flex-direction: column; + } + + .div-infobox { + gap: 6%; + width: 100%; + height: 80%; + } + + .imagem-note-wrapper { + width: 100%; + flex-direction: column; + } + + .image-note-mobile { + width: 50%; + gap: 2%; + margin: 0.3% 0; flex-direction: row; display: flex; } - .imagem-note{ + + .imagem-note { width: 96%; height: 70%; } + + .footer-image { + margin: 5%; + } + + .text-footer { + margin: 5%; + display: flex; + justify-content: center; + align-items: center; + margin-top: -20px; + text-transform: uppercase; + line-height: 12px; + font-size: 10px; + color: #bdbdbd; + } } + @media screen and (min-width: 415px) { - .mobile-hidden{ + .mobile-hidden { display: none; } - .div-image-pc{ + + .div-image-pc { margin: 5% 0; } - .image-pc{ + + .image-pc { width: 15%; } - .infoboxes-sub-wrapper{ + + .infoboxes-sub-wrapper { width: 70%; + height: 10%; flex-direction: row; margin: 5% 0; } - .div-infobox{ - width: 40%; + + .div-infobox { + width: 100%; margin: 5% 0; } - .image-note-desktop{ + + .image-note-desktop { width: 100%; flex-direction: row; display: flex; + gap: 2%; } - .imagem-note{ + + .imagem-note { display: flex; flex-direction: row; width: 100%; } + + .text-footer { + margin: 3% 0; + display: flex; + justify-content: center; + align-items: center; + margin-top: -20px; + text-transform: uppercase; + line-height: 12px; + font-size: 10px; + color: #bdbdbd; + } } -.div-title{ - margin: 5% 0; + +.div-title { + margin: 15% 0; display: flex; flex-direction: column; align-items: center; } -.title-one{ + +.title-one { width: 100%; font-family: 'Inter'; font-style: normal; @@ -101,7 +153,8 @@ text-align: center; color: #000000; } -.title-two{ + +.title-two { width: 100%; font-family: 'Inter'; font-style: normal; @@ -112,7 +165,8 @@ text-align: center; color: #000000; } -.title-three{ + +.title-three { width: 80%; font-family: 'Inter'; font-style: normal; @@ -123,26 +177,30 @@ color: #000000; } -.div-image-pc{ + +.div-image-pc { width: 100%; display: flex; align-items: center; justify-content: center; } -.infoboxes-wrapper{ + +.infoboxes-wrapper { margin: 5% 0; display: flex; width: 100%; justify-content: space-around; gap: 2%; } -.infoboxes-sub-wrapper{ + +.infoboxes-sub-wrapper { display: flex; justify-content: center; align-items: center; gap: 2%; } -.div-infobox{ + +.div-infobox { flex-direction: column; display: flex; align-items: center; @@ -154,26 +212,32 @@ line-height: 24px; text-align: center; color: #000000; - box-shadow: 0 0 8px #E0E0E0;; + box-shadow: 0 0 8px #E0E0E0; + ; } -.infobox-image{ + +.infobox-image { display: flex; - width: 35%; + width: 35%; } -.imagem-note-wrapper{ - gap: 10%; + +.imagem-note-wrapper { margin: 5% 0; display: flex; width: 100%; justify-content: space-around; - background-color: #E0E0E0;; + background-color: #E0E0E0; + ; } -.imagem-note{ + +.imagem-note { width: 100%; margin: 5% 0; } -.page-footer{ + +.page-footer { + margin: 5% 0; list-style: none; flex-direction: row; display: flex; @@ -191,43 +255,44 @@ background: #000000; } -.page-footer{ +.page-footer { flex-direction: column; display: flex; align-items: center; justify-content: center; color: #000000; } -.text-footer{ - text-transform: uppercase; - line-height: 12px; - font-size: 10px; - color: #bdbdbd ; -} -.icones-footer{ + +.icones-footer { display: flex; list-style: none; margin-bottom: 16px; } -.footer-li{ + +.footer-li { margin: 0 8px } @media screen and (min-width: 415px) { - .footer-image{ - margin-left: 10%; - display:flex; - justify-content: center; - align-items: center; - width: 80%; - } -} -@media screen and (max-width: 414px){ - .footer-image{ + .footer-image { margin-left: 10%; - display:flex; + display: flex; justify-content: center; align-items: center; width: 80%; - } + } +} + +@media screen and (max-width: 414px) { + .footer-image { + margin-left: 10%; + display: flex; + justify-content: center; + align-items: center; + width: 80%; + } +} + +.icones-footer { + margin: 2% 0; } \ No newline at end of file diff --git a/assets/images/Group.png b/assets/images/Group.png new file mode 100644 index 0000000000000000000000000000000000000000..2edf5fb79506f89e3dda7a347f42152462ba9173 GIT binary patch literal 1758 zcmV<41|j*0P)1*p-)EkA=4EGr z?s(FsrL9Q&Pns~)=)2EJo4|l^r7gfL@t)Ue7?8lDPY$lTKuK*H8RBARh?=>$HN;n) zQ__Z|m0%w9y~m|pM7+2spqMfSTwOB2MW^%BpqQ1&0q2lUJajsc2SvCs2Xm2M$Z0aE znO@{TE66t#SC#)>2c6zoN4}{>9xG{-otUx)EQxVoQGyj#5yhA?3ho{(iHH-n1T%YC zT46(hBCN2AhzkYt(k78#Txp9?Oq{Tk$KFJKVaNa*3KU_5RfH8*5ms15SYZ`mg;j(V zRuM()07_o1w03{p6QVfG{C_=hX9?K7KYY@^U2z> zKa5U<@Ye1Hjl%mk=65-Ta}Tc^toQK=`H8VF9Id%hggL>n(6@(ng9$l&D#}gn*NS7S zm44ou3t@MStxh(BK+d)bWh+~RgDH99YIFjh=k>-5TR3uKhC7%Jy-PL1Z3g~|GxqzI zqkqN8(P8vBIuB@aIyCrQ3i)LoacS6qc(0AVqESB<@bc zJ!hP-)KFz!{d*zAOk9Izl(6&zS`C#>$e6p%n;ok&jS{xW11;C=GO*ETreKV)g(KI? zD)ZE&Fjknt=*rWS&m50s&J=V;h6Ja$=V|OWLRjkmQ*sW?VeHwm0V9MJoK3(4q}R&a z)}wz-2?ZVuK{%lkXg_S&8V2O)gn`2&LpVPEaz}anpC*3%`5qc;9ElOF2KJ=(!t%g5 z%vkat?7qGWKYhI)rM>Z$bm_MTIQH4!NQ?{z`0$Tm?Lz@`gohM3d}w!9QHk;QUPM|H zeC`<#W78Q9B#-P>)vsNDgtQQXm$VmFh;-sBi8}W2pSW3`PQ&#C#vJ`U)>N#p3Xn0jVSupAybJmm(_dIQBv*xD$h5m^ zKvrO$umO8?Q+r{Z0>1{65NKfe9sNDle^{(Sq!VY)e!34=zk6d-8Fh7U%n!$oA#9UY z4b#8zsvc~>5sAYAby?4TvM;t^cqL#hhV+AM1PGC z*1s~cm^2*FSV6Qq+os*EO^WP(&!YNvo&Gmw8K+=kh5;2M;LP+beEH37ys~GrKi#>@ zQ|Z$3X7IFT86zxTFP?XHH_I}wb&&uPFwJp+HXFT_FsDl^8!^XWTCOw~5cQ4TN*Fa( z(2BK8{RPJT!r)XkdMjbv5+fZJ!)-)xRDxgMx)d!pZHbXqi#8~(@~b1Ush}~!hAa9+ z8Jf@%b@@=&m~V`*I(e%Ub*7i7gb~8(;;ljsut-rSrKqR3daV(8tQOuXu*jSK$!P1} z4ef;`Z*6kF-0L;uNnoNO)1IoF7OBhp=S0$u#Ip~_Vn98<<&mX+-ln~Q<852!cQr=V@L7d8<5Jev1Tqxx=N zgD}DJp;^#%!L%57XwSIAg~uE=Dn%>d(O;u%=m3QOzkH#zp##X8--12Hr!Va>^XL8~w#zueSDAaQv zp~rfW@(R?8?nWNhp$He9H~h^)+(AL>CNf(`u@E`f0`dttOw@^vLm}mu16GhPNL0!` zl&^vzHr_OB1)U+Fj!NMIX35Ag5C8xG07*qoM6N<$f-BfT A>Hq)$ literal 0 HcmV?d00001 diff --git a/assets/images/laptop.png b/assets/images/laptop.png new file mode 100644 index 0000000000000000000000000000000000000000..6dff7a4597211d5380d784408e0153a0794489cd GIT binary patch literal 1317 zcmV+=1={+FP)gpCi2qA#~er#07wiHi%tdPc8t&zUaAGV@+ymg9Js@tD`>iDz_DS`b_dz zzNe+t(K7zJ{M*VkHkH*jh@AufXqme0`?AZ4cg{&~F%G0=hZqMcNWHArT~2a+qrg7u ze%uP$1(_AmdOV71qe>7R}^0A#8bep}<*Or(TgHAuWL^xq|`pOjZ z;abbvU6xs}JzCl2^#OH$LeXw$!|o$zu1fXQq4E^d!xg2qyaoMg5ZNCNd5;+iWE=`) z913I{3S=A#Gy+ax^DSFLzI)*Y_Wu7h$~^Y9!HcUbL3k1XnNj2*VR|rqMg)W}w zF%o0-?y0J|ARLFV?Lo3dxlw1|*qcuh6!V1Yq$tLJLQDj6r(IUpaEmwy8fI>|s>Mc^ zg^6{?UL!7o20g3^6wB@0A^wbY!3YFWw4g$cE!9mQF_y5goPfZ18|0#eroAjd7_?ox zg`F2c2|BbvT$myr0!I&h4s!1vt}+#mtwj%2pw#&?-h3L;nE$5@WW8Fc52TwL9>I3+ z^|IR0)a4YAq0kE9z5!ZIsvesvb>^IuqR6CKfiGAOMYYhBrjxl|>ngYNN}x(X0kJ@u z+xKufa026j!x`}eP?U=UiBss7)*%BxYdtT>U$ODfD z9v4AzSP49~!v;is!hj6NfD&d5{#<7Z$ry$vrIz7OQ*1P6H#oLx09+yHMU~)>)Y=Yc zxeq6s)sog}C~QE|2aSQtH@zgS)upgI7j%sVwz=>_b3svf9RAAxWX(1Q{zb78<{t@wD`+E559IcwsG~FGP1<@fZm<@6IZ`3 zW9rk}IPv!Hm@obfQ{^qoM#PNogXF3izqE-Ivcv4el?1~@eg(~^);>bLJdd8XyLN)y|!t2pv2NG6f3p0JpB?@-@Y0Azj@=3FnlHGtzs51=0+e}&3_ zc}Syvy_q8au3vt82lI=~M_Ll%`1EGq!<6%s=BpVwM`?;{hx@%0c^@QC=#7sykQCCl zm^?~M#3GjT6EgS^gGctBvVCM9Mo&Ll{knX22P>=p;?_n5X<&Rn^1{oguo(%kwzHS! z==Bf&KpGf74+=BNisBekC2B1$ted)tOAF(hxNA4=R6}a#s+j-bF47_qg9KTRb8l=T zi?|kNI0j@m24pw}WH<(7xb^~4`OAQH9aK-DsFb>#Q{GKPtgT_TxAgoK{nr%?{buL( z7v`*t-}FK$lr76Uzq53#`lgLwZ9e!BrgCRZ+{%ltcdzi8>cNiynyebmPsciKQ6vnz zrW{>!fqhowuD>d99tCSs|Czaue|nWlyn90M|(1mp&`y$p(j6L=hIk}rdVBI+klGTM-vpe}-< zA|o?9ur2g3-9i8EA)VElK}hl|(%k!BJD^^0b;%M@s1=yq-(k1goH?L472&TCxM2?n z{)#jken=yrD9P0#Yj^C|iHL}Zh=_=Yh=_=YsLp>WD_`S`8q2r<0000
Banner Principal Desktop - Banner Principal Mobile + Banner Principal Mobile
@@ -52,7 +53,7 @@ interdum.
- Logo da compra + Logo da compra Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@@ -92,26 +93,26 @@
- Logo da loja online + Logo da loja online 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.
- Logo da compra segura + Logo da compra segura 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.
- Logo da compra + Logo da compra 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.
- Logo da compra + Logo da compra 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. @@ -133,8 +134,9 @@
- Banner Principal Desktop - + Banner Principal Desktop +