From 402571abd470599dc42ee382d408fd91db0f6bb2 Mon Sep 17 00:00:00 2001 From: unknown Date: Thu, 13 Oct 2022 19:56:54 -0300 Subject: [PATCH] fix: corrige o alinhamento de banner e textos acima do footer --- index.html | 73 +++++++++++---------------------- style/style.css | 105 +++++++++++++++++------------------------------- 2 files changed, 60 insertions(+), 118 deletions(-) diff --git a/index.html b/index.html index 8cc76a2..9f4cf36 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,7 @@ - + @@ -24,12 +23,10 @@
- +
- +
@@ -37,37 +34,28 @@

Lorem ipsum

Dolor sit amet

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras - euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit - amet velit. Nulla suscipit magna dui.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.

- Computadores alinhados. Um em cuma e dois embaixo, ligados por setas. + Computadores alinhados. Um em cuma e dois embaixo, ligados por setas.
icone de shopping -
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.
- icone de shopping bag (sacola de shoppin) com um escudo azul na frente. Simboliza compra segura -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Cras euismod enim non dui fringilla interdum.
+ icone de shopping bag (sacola de shoppin) com um escudo azul na frente. Simboliza compra segura +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
- icone de mão segurando uma moeda -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Cras euismod enim non dui fringilla interdum.
+ icone de mão segurando uma moeda +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@@ -78,20 +66,17 @@ @@ -102,33 +87,25 @@
Icone de cédulas. -
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.
+
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.
icone de mão segurando uma moeda -
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.
+
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.
icone de laptop aberto. -
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.
+
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.
icone de um smartphone -
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.
+
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.
@@ -136,20 +113,15 @@

Lorem ipsum dolor sit amet

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate - sapien non libero faucibus interdum. In eget tincidunt ipsum. - Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur - venenatis felis vitae sagittis venenatis. - Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis + felis vitae sagittis venenatis. Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.

- imagem de um oculos. de frente para uma tela de computador. + imagem de um oculos. de frente para uma tela de computador.
- imagem de um oculos. de frente para uma tela de computador. + imagem de um oculos. de frente para uma tela de computador.
@@ -161,7 +133,8 @@
  • icone do facebook
  • icone do youtube
    • - © Copyright 2020, Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00 + Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00 + diff --git a/style/style.css b/style/style.css index 594156c..e494c0a 100644 --- a/style/style.css +++ b/style/style.css @@ -5,6 +5,7 @@ font-family: 'Inter', sans-serif; } + /* variaveis de cores */ :root { @@ -15,6 +16,7 @@ --grey-footer: #BDBDBD; } + /* HEADER DA PAGINA */ header { @@ -28,6 +30,7 @@ header { img { display: block; + width: 100%; } .header-logo { @@ -45,6 +48,7 @@ img { display: none; } + /* AREA ABAIXO DO BANNER */ .container-midle-flex { @@ -56,7 +60,6 @@ img { } .container-midle-title { - font-weight: 500; font-size: 48px; line-height: 58px; @@ -68,7 +71,6 @@ img { font-size: 32px; line-height: 40px; text-transform: uppercase; - } .container-midle-paragraph { @@ -78,7 +80,6 @@ img { font-size: 16px; line-height: 24px; margin: 28px 28px 74px; - } .container-midle-img { @@ -88,6 +89,7 @@ img { display: block; } + /* GRID INFO CARD TRIPLE */ .container-cards { @@ -96,8 +98,7 @@ img { grid-template-rows: 1fr; gap: 0px 22px; grid-auto-flow: row; - grid-template-areas: - "card-1 card-2 card-3 card-4"; + grid-template-areas: "card-1 card-2 card-3 card-4"; justify-content: center; width: 100%; padding: 10% 22% 4%; @@ -105,8 +106,7 @@ img { .container-infocard { grid-template-columns: repeat(4, 1fr); - grid-template-areas: - "card-1 card-2 card-3 card-4"; + grid-template-areas: "card-1 card-2 card-3 card-4"; padding: 130px 72px; } @@ -154,10 +154,11 @@ img { font-size: 16px; line-height: 24px; text-align: center; - } + /* Banner Mosaico */ + .wrapper-banner { width: 100%; background-color: var(--grey); @@ -175,7 +176,6 @@ img { padding: 0 72px; transform: translateY(60px); z-index: 999; - } .mosaic-img1 { @@ -197,31 +197,36 @@ img { /* AREA BOTTON, ANTES DO FOOTER */ -.bottom-flex, -.bottom-text { + +.bottom-flex { display: flex; flex-direction: column; align-items: center; justify-content: center; + width: 70%; + margin: 0 auto; } +.bottom-text {} .bottom-subtitle { width: 100%; - max-width: 22%; + min-width: 30%; font-weight: 600; font-size: 32px; - margin: 0 40% 5px; + line-height: 24px; + text-align: center; } .bottom-paraphase { width: 100%; - max-width: 28%; - margin-bottom: 50px; + max-width: 40%; text-align: center; font-size: 16px; font-weight: 400; line-height: 24px; + margin: 0 auto; + margin-bottom: 50px; } .botton-img-mobile { @@ -234,15 +239,15 @@ footer { margin-top: 116px; background: var(--black); } -li{ - + +li { list-style: none; } .container-contact { display: flex; justify-content: center; -flex-direction: column; + flex-direction: column; } .contact { @@ -252,47 +257,42 @@ flex-direction: column; width: 30%; margin: 0 auto; } -.icon-contact{ + +.icon-contact { padding: 0 10px; width: 26px; height: 26px; } + .footer-text { color: var(--grey-footer); font-size: 10px; margin: 0 auto; margin-top: 18px; text-transform: uppercase; - } + /* Medias Queries*/ + @media screen and (min-width:2500px) { .container-cards { padding: 6% 30% 4%; } - - } @media screen and (max-width:1024px) { - /* BANNER MOBILE */ .banner-img-desktop { display: none; } - .banner-img-mobile { display: block; } - - /* AREA ABAIXO DO BANNER */ - .container-midle { width: 100%; } - /* AREA ABAIXO DO BANNER */ .container-midle-flex { display: flex; @@ -300,32 +300,26 @@ flex-direction: column; align-items: center; justify-content: center; } - .container-midle-title { font-size: 28px; line-height: 34px; } - .container-midle-subtitle { font-size: 20px; line-height: 24px; } - .container-midle-paragraph { - max-width: 86%; font-size: 16px; line-height: 24px; text-align: center; } - .container-midle-img { width: 58%; height: 58%; max-width: 240px; display: block; } - /* Area dos tres cards */ .container-cards { display: grid; @@ -333,44 +327,29 @@ flex-direction: column; grid-template-rows: repeat(3, 1fr); gap: 24px; grid-auto-flow: row; - grid-template-areas: - "card-1" - "card-2" - "card-3"; + grid-template-areas: "card-1" "card-2" "card-3"; justify-content: center; padding: 90px 32px 80px; } - .container-infocard { grid-template-rows: repeat(4, 1fr); - grid-template-areas: - "card-1" - "card-2" - "card-3" - "card-4"; + grid-template-areas: "card-1" "card-2" "card-3" "card-4"; } - .subtitle-card { max-width: 72%; margin: 0 auto; text-align: center; - } - /*REGIAO DO BANNER MOSAICO */ - .banner-mosaic { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: 2fr; - grid-template-areas: - "mosaic-img2 mosaic-img1" - "mosaic-img3 mosaic-img3"; + grid-template-areas: "mosaic-img2 mosaic-img1" "mosaic-img3 mosaic-img3"; gap: 24px 14px; padding: 0 24px; transform: translateY(32px); } - .img1, .img2 { width: 100%; @@ -378,26 +357,21 @@ flex-direction: column; min-width: 50%; min-height: 50%; } - .img3 { min-width: 90%; min-height: 90%; } - /* AREA BOTTON, ANTES DO FOOTER */ .botton-img-desktop { display: none; } - .botton-img-mobile { display: block; width: 100%; } - .bottom-paraphase { max-width: 84%; } - .bottom-subtitle { max-width: 76%; margin: 50px 50px 10px; @@ -405,30 +379,25 @@ flex-direction: column; line-height: 30px; text-align: center; } - .bottom-flex { flex-direction: column-reverse; } - /* FOOTER */ - -footer{ - padding: 32px 76px; -} - - .footer-text{ + footer { + padding: 32px 76px; + } + .footer-text { color: var(--grey-footer); font-size: 10px; min-width: 64%; margin-top: 10px; text-align: center; } - .contact{ + .contact { display: flex; flex-direction: row; width: 35%; margin: 0 auto; justify-content: space-around; - - } } +} \ No newline at end of file