diff --git a/assets/imagens/bottom-banner-desktop.png b/assets/imagens/bottom-banner-desktop.png new file mode 100644 index 0000000..c4b49fc Binary files /dev/null and b/assets/imagens/bottom-banner-desktop.png differ diff --git a/assets/imagens/bottom-banner-mobile.png b/assets/imagens/bottom-banner-mobile.png new file mode 100644 index 0000000..f4e55c5 Binary files /dev/null and b/assets/imagens/bottom-banner-mobile.png differ diff --git a/assets/imagens/bottom-card-1.svg b/assets/imagens/bottom-card-1.svg new file mode 100644 index 0000000..1090b7b --- /dev/null +++ b/assets/imagens/bottom-card-1.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/imagens/bottom-card-2.svg b/assets/imagens/bottom-card-2.svg new file mode 100644 index 0000000..2d06e62 --- /dev/null +++ b/assets/imagens/bottom-card-2.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/imagens/bottom-card-3.svg b/assets/imagens/bottom-card-3.svg new file mode 100644 index 0000000..7d13645 --- /dev/null +++ b/assets/imagens/bottom-card-3.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/imagens/bottom-card-4.svg b/assets/imagens/bottom-card-4.svg new file mode 100644 index 0000000..b5c95ab --- /dev/null +++ b/assets/imagens/bottom-card-4.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/imagens/icon-facebook.svg b/assets/imagens/icon-facebook.svg new file mode 100644 index 0000000..061ff85 --- /dev/null +++ b/assets/imagens/icon-facebook.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/imagens/icon-instagram.svg b/assets/imagens/icon-instagram.svg new file mode 100644 index 0000000..9221bab --- /dev/null +++ b/assets/imagens/icon-instagram.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/imagens/icon-youtube.svg b/assets/imagens/icon-youtube.svg new file mode 100644 index 0000000..de6f9a7 --- /dev/null +++ b/assets/imagens/icon-youtube.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/imagens/top-card-imag-1.svg b/assets/imagens/top-card-imag-1.svg new file mode 100644 index 0000000..be82592 --- /dev/null +++ b/assets/imagens/top-card-imag-1.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/imagens/top-card-image-1.svg b/assets/imagens/top-card-image-1.svg deleted file mode 100644 index e5f7cff..0000000 --- a/assets/imagens/top-card-image-1.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/assets/imagens/top-card image-3.svg b/assets/imagens/top-card-image-3.svg similarity index 100% rename from assets/imagens/top-card image-3.svg rename to assets/imagens/top-card-image-3.svg diff --git a/assets/styles/main.css b/assets/styles/main.css index ed85398..896d5b3 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -10,13 +10,17 @@ body{ .page-header{ display: flex; justify-content: center; + text-align: center; padding: 29px 0; background-color: #000; } .header-logo{ - width: 12vw; - min-width: 226px; + width: 12%; } +.header-logo-image{ + width: 100%; +} +/* main-banner */ .main-banner-desktop{ width: 100%; display: block; @@ -24,6 +28,7 @@ body{ .main-banner-mobile{ display: none; } +/* top-infocard */ .top-infocard{ display: flex; flex-direction: column; @@ -34,12 +39,14 @@ body{ text-align: center; font-weight: 400; font-size: 32px; + line-height: 39px; text-transform: uppercase; } .top-infocard-title{ text-align: center; font-weight: 500; font-size: 48px; + line-height: 58px; text-transform: uppercase; padding: 0 0 28px; } @@ -56,25 +63,26 @@ body{ width: 16%; min-width: 239px; } +/* top-cards */ .top-cards{ - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 21px; + display: flex; justify-content: center; - padding: 178px 20% 80px; + gap: 21px; + padding: 178px 31px 50px; } .top-card{ display: flex; flex-direction: column; align-items: center; - padding: 26px 26px 36px; + padding: 36px 26px 26px; + gap: 27px; background: #FFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + width: 18%; + min-height: 287px; } .top-card-image{ - display: block; - min-width: 5vw; - margin-bottom: 30px; + width: 34%; } .top-card-description{ font-weight: 400; @@ -82,26 +90,164 @@ body{ line-height: 24px; text-align: center; } -.Banners-middle{ - display: grid; - grid-area: 1fr 1fr 1fr; - justify-content: center; - gap: 36px; +/* middle-banner */ +.middle-banner-wrapper{ background: #E0E0E0 } +.banners-middle{ + display: flex; + justify-content: center; + gap: 39px; + position: relative; + bottom: -62px; +} .middle-banner{ + justify-content: center; + width: 29%; +} +.middle-banner-image{ + width: 100%; +} +/* bottom-cards */ +.bottom-cards{ + display: flex; + justify-content: center; + padding: 191px 0 54px; + gap: 16px; +} +.bottom-figures-card{ + display: flex; + flex-direction: column; + align-items: center; + width: 23%; + padding: 35px 32px 65px; + gap: 17px; + min-height: 332px; + background: #FFF; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} +.bottom-figures-image{ + height: 100%; + width: 34%; +} +.bottom-figcapiton{ + text-align: center; + font-weight: 400; + font-size: 16px; + line-height: 24px; +} +/* bottom-banner */ +.bottom-banner{ + display: flex; + flex-direction: column; + align-items: center; + padding: 54px 0 106px; + gap: 50px; +} +.bottom-banner-text{ + width: 29%; + min-width: 550px; + text-align: center; +} +.bottom-banner-subtitle{ + font-weight: 600; + font-size: 32px; + line-height: 39px; +} +.bottom-banner-describition{ + font-weight: 400; + font-size: 16px; + line-height: 24px; +} +.bottom-banner-images{ + width: 71%; +} +.bottom-banner-desktop{ display: block; width: 100%; } +.bottom-banner-mobile{ + display: none; +} +/* footer */ +.page-footer{ + display: flex; + flex-direction: column; + align-items: center; + padding: 38px 0; + gap: 16px; + background: #000000; +} +.footer-icons{ + display: flex; + list-style: none; + justify-content: center; + gap: 16px; +} +.icons{ + width: 100%; +} +.icons-image{ + width: 5%; + min-width: 24px; +} +.footer-text{ + text-align: center; + font-weight: 400; + font-size: 10px; + line-height: 12px; + text-transform: uppercase; + color: #BDBDBD; +} + /* layout 4K */ @media screen and (min-width: 2500px) { .page-header{ padding: 58px } + .top-inforcard-subtitle{ + font-size: 64px; + line-height: 78px; + } + .top-infocard-title{ + font-size: 96px; + line-height: 116px; + } + .top-infocard-description{ + font-size: 32px; + line-height: 48px; + } + .top-card-description{ + font-size: 32px; + line-height: 48px; + } + .bottom-figcapiton{ + font-size: 32px; + line-height: 48px; + } + .bottom-banner-subtitle{ + font-size: 64px; + line-height: 78px; + } + .bottom-banner-text{ + min-width: 900px; + } + .bottom-banner-describition{ + font-size: 32px; + line-height: 48px; + } + .footer-text{ + font-size: 20px; + line-height: 24px; + } + .icons-image{ + min-width: 48px;} } - - -@media screen and (max-width: 1025px) { + /* layaut mobile */ +@media screen and (max-width: 1024px) { + .header-logo{ + width: 55%; + } .main-banner-desktop{ display: none; } @@ -112,34 +258,116 @@ body{ /* top infocard */ .top-inforcard-subtitle{ font-size: 20px; + line-height: 34px; } .top-infocard-title{ font-size: 28px; + line-height: 24px; } .top-infocard-text{ text-align: center; max-width: 86%; padding: 0 0 73px; } - .top-cards{ - padding: 90px 7%; - } -} - -@media screen and (max-width: 992px){ - .top-infocard-image{ - width: 34%; + .top-infocard-image { + width: 58%; } /* top-cards */ .top-cards{ - grid-template-columns: repeat(2, 1fr); + flex-direction: column; + align-items: center; + padding: 90px 0; + } + .top-card{ + width: 85%; + gap: 37px; + } + .top-card-image{ + width: 25%; + } + /* banners-middle */ + .banners-middle{ + display: grid; + grid-template-areas: + "b1 b2" + "b3 b3"; + justify-items: center; + padding: 0px 23px; + gap: 14px; + top: 32px; + } + .middle-banner{ + width: 100%; + } + .Banner1{ + grid-area: b1; + } + .Banner2{ + grid-area: b2; + } + .Banner3{ + grid-area: b3; + } + /* bottom-cards */ + .bottom-cards{ + flex-direction: column; + align-items: center; + padding: 96px 0 0; + } + .bottom-banner-text{ + width: 29%; + } + .bottom-figures-card{ + width: 89%; + } + /* bottom-banner */ + .bottom-banner{ + flex-direction: column-reverse; + padding: 98px 0 87px; + } + .bottom-banner-desktop{ + display: none; + } + .bottom-banner-mobile{ + display: block; + width: 100%; + } + .bottom-banner-images{ + width: 100%; + } + .bottom-banner-text{ + width: 85%; + min-width: 0; + } + .bottom-banner-subtitle{ + font-size: 24px; + line-height: 29px; + margin-bottom: 9px; + } + /* footer-text */ + .page-footer{ + padding: 32px 0; + } + .footer-text{ + width: 63%; } } - -@media screen and (max-width: 540px) { - .top-cards{ - grid-template-columns: 1fr; - padding: 90px 26px 80px; - gap: 24px; +@media screen and (max-width: 413px) { + .top-card { + width: 95%; + padding: 36px 7px 26px; + } + .top-infocard-text { + max-width: 87%; + } + .banners-middle { + padding: 0px 10px; + } + .bottom-figures-card { + width: 95%; + padding: 35px 16px 65px; + } + .bottom-banner-text { + width: 90%; } } \ No newline at end of file diff --git a/index.html b/index.html index d1a9dc0..b2bfda7 100644 --- a/index.html +++ b/index.html @@ -18,8 +18,8 @@
@@ -45,26 +45,109 @@ Imagem-do-infocard-do-topo -
+
- Primeira-card-do-topo + Primeira-card-do-topo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
Segundo-card-do-topo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
- Terceiro-card-do-topo + Terceiro-card-do-topo
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
+ -
- Primeira-imagem-do-meio - Segunda-imagem-do-meio - Terceira-imagem-do-meio -
+
+
+
+ Segunda-imagem-do-meio +
+
+ Segunda-imagem-do-meio +
+
+ Segunda-imagem-do-meio +
+
+
+ +
+
+ Primeira-imagem-abaixo-dinheiro +
+ 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. +
+
+ +
+ Primeira-imagem-abaixo-dinheiro +
+ 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. +
+
+ +
+ Primeira-imagem-abaixo-dinheiro +
+ 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. +
+
+ +
+ Primeira-imagem-abaixo-dinheiro +
+ 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

+

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.

+
+
+ Banner-do-fundo + Banner-do-fundo +
+
+ + \ No newline at end of file