diff --git a/assets/styles.css b/assets/styles.css index 942a1df..30e6e02 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -12,13 +12,12 @@ body { } /* HEADER E MAIN BANNER */ - .page__header { - width: 100%; + background: #000000; display: flex; justify-content: center; - background: #000000; padding: 1.87rem 0; + width: 100%; } .header__logo { @@ -36,26 +35,25 @@ body { /* TOP TEXTS */ - .top__text { - display: flex; align-items: center; - justify-content: center; + display: flex; flex-direction: column; - padding: 84px 30px 179px; gap: 72px; + justify-content: center; + padding: 84px 30px 179px; } .top__infocard-text { - width: 40%; margin: 0 auto; + width: 40%; } .top__infocard-subtitle { - text-transform: uppercase; - font-weight: 400; font-size: 32px; + font-weight: 400; text-align: center; + text-transform: uppercase; } .top__infocard-title, @@ -63,36 +61,39 @@ body { text-align: center; } +.top__infocard-image { + width: 100%; +} + .top__infocard-title { + font-size: 48px; + font-weight: 500; margin-bottom: 24px; text-transform: uppercase; - font-weight: 500; - font-size: 48px; } .top__infocard-description { - line-height: 24px; font-size: 16px; + line-height: 24px; } /* TOP CARDS */ - .top__cards { display: grid; - grid-template-columns: repeat(3, max-content); gap: 20px; + grid-template-columns: repeat(3, max-content); justify-content: center; width: 100% } .top__card { - display: flex; - flex-direction: column; align-items: center; - padding: 26px 26px 34px; background: #FFFFFF; box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + display: flex; + flex-direction: column; + padding: 26px 26px 34px; } .top__card-image { @@ -101,36 +102,35 @@ body { } .top__card-description { - max-width: 300px; font-size: 16px; line-height: 24px; + max-width: 300px; text-align: center; } /* BOTTOM CARDS */ - .bottom__cards { background: #E0E0E0; - padding: 0 72px; margin: 80px 0 191px; + padding: 0 72px; } .bottom__cards-container { - width: 100%; - position: relative; display: grid; + gap: 40px; + grid-template-columns: repeat(3, 1fr); justify-content: center; margin: 0 auto; - grid-template-columns: repeat(3, 1fr); transform: translateY(4rem); - gap: 40px; + position: relative; + width: 100%; } .bottom__card img { - width: 100%; height: auto; + width: 100%; } .bottom__card-image { @@ -143,23 +143,21 @@ body { /* BOTTOM INFOCARDS */ - .bottom__infocards { display: grid; - grid-template-columns: repeat(4, 1fr); gap: 16px; + grid-template-columns: repeat(4, 1fr); padding: 0 76px 108px; width: 100%; - } .bottom__infocard { - display: flex; - flex-direction: column; align-items: center; - padding: 33px 32px 65px; background: #FFFFFF; box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); + display: flex; + flex-direction: column; + padding: 33px 32px 65px; } .bottom__infocard-image { @@ -168,26 +166,25 @@ body { } .bottom__infocard-description { - max-width: 300px; font-size: 16px; + max-width: 300px; text-align: center; } /* BOTTOM BANNER CONTAINER */ - .bottom__banner-container { - display: flex; align-items: center; + display: flex; + flex-direction: column; justify-content: center; text-align: center; - flex-direction: column; } .bottom__banner-desktop { - width: 100%; - padding: 0 280px 116px; margin-top: 50px; + padding: 0 280px 116px; + width: 100%; } .bottom__banner-mobile { @@ -195,8 +192,8 @@ body { } .bottom__title { - font-weight: 600; font-size: 32px; + font-weight: 600; } .bottom__text { @@ -204,37 +201,36 @@ body { } .bottom__description { - font-size: 16px; line-height: 24px; + font-size: 16px; } /* FOOTER */ - .footer { - display: flex; - flex-direction: column; align-items: center; background: #000000; + display: flex; + flex-direction: column; padding: 38px 0; } .footer__icons { display: flex; + gap: 20px; list-style-type: none; margin-bottom: 16px; - gap: 20px; } .footer__text { - text-transform: uppercase; - line-height: 12px; - font-size: 10px; color: #BDBDBD; + font-size: 10px; + line-height: 12px; + text-transform: uppercase; } -/* ---------- MEDIAS QUERIES ---------- */ +/* ----- MEDIAS QUERIES ----- */ @media screen and (max-width: 1024px) { @@ -254,19 +250,19 @@ body { .bottom__banner-mobile { display: block; + width: 100%; } /* TOP TEXTS */ .top__text { - flex-direction: column; - padding: 88px 32px 90px; gap: 65px; + padding: 88px 32px 90px; } .top__infocard-text { - width: 100%; margin-right: 0; + width: 100%; } .top__infocard-subtitle { @@ -274,14 +270,10 @@ body { } .top__infocard-title { - margin-bottom: 20px; font-size: 28px; + margin-bottom: 20px; } - .top__infocard-image { - width: 100%; - max-width: 240px; - } .top__infocard-description { text-align: center; @@ -289,19 +281,16 @@ body { /* TOP CARDS */ - .top__infocards { - width: 100%; - } - .top__card-image { align-items: center; width: 34%; } - /* ---------- BOTTOM CARDS ---------- */ + + /* BOTTOM CARDS */ .bottom__cards { - padding: 0 24px; margin-bottom: 112px; + padding: 0 24px; } .bottom__cards-container { @@ -310,10 +299,6 @@ body { transform: translateY(2rem); } - .bottom__card img { - width: 100%; - } - .bottom__card-3 { grid-column: 1/3; } @@ -322,20 +307,17 @@ body { grid-row: 1; } - /* ---------- BOTTOM INFOCARDS ---------- */ + + /* BOTTOM INFOCARDS */ .bottom__infocards { display: grid; - grid-template-columns: repeat(3, max-content); gap: 20px; + grid-template-columns: repeat(3, max-content); justify-content: center; padding: 0 0; - width: 100%; } .bottom__infocard { - display: flex; - flex-direction: column; - align-items: center; padding: 26px 26px 34px; } @@ -344,7 +326,8 @@ body { width: 34%; } - /* ---------- BOTTOM BANNER CONTAINER ---------- */ + + /* BOTTOM BANNER CONTAINER */ .bottom__banner-container { display: flex; flex-direction: column-reverse; @@ -363,17 +346,15 @@ body { } .bottom__banner-mobile { - width: 100%; display: block; margin-bottom: 50px; + width: 100%; } - /* ---------- FOOTER ---------- */ + + /* FOOTER */ .page__footer { padding-bottom: 26px; - display: flex; - flex-direction: center; - align-items: center; } .footer__text { @@ -384,10 +365,13 @@ body { @media screen and (min-width: 769px) and (max-width: 1024px) { + + /* TOP CARDS */ .top__cards { grid-template-columns: repeat(2, 1fr); } + /* BOTTOM INFOCARDS */ .bottom__infocards { grid-template-columns: repeat(2, 1fr); } @@ -395,11 +379,14 @@ body { @media screen and (max-width: 1200px) { + + /* TOP CARDS */ .top__cards { grid-template-columns: 1fr; padding: 0 32px; } + /* BOTTOM INFOCARDS */ .bottom__infocards { grid-template-columns: 1fr; padding: 0 24px 98px; @@ -409,11 +396,10 @@ body { @media screen and (min-width: 2560px) { -/* TOP TEXTS */ - + /* TOP TEXTS */ .top__text { - padding: 84px 30px 179px; gap: 72px; + padding: 84px 30px 179px; } .top__infocard-subtitle { @@ -421,18 +407,17 @@ body { } .top__infocard-title { - margin-bottom: 48px; font-size: 96px; + margin-bottom: 48px; } .top__infocard-description { - line-height: 48px; font-size: 32px; + line-height: 48px; } -/* BOTTOM BANNER CONTAINER */ - + /* BOTTOM BANNER CONTAINER */ .bottom__title { font-size: 64px; } @@ -444,20 +429,17 @@ body { /* FOOTER */ - .footer__text { - - line-height: 24px; font-size: 20px; + line-height: 24px; } /* TOP CARDS */ - .top__cards { display: grid; - grid-template-columns: repeat(3, max-content); gap: 20px; + grid-template-columns: repeat(3, max-content); justify-content: center; width: 100% } @@ -472,15 +454,10 @@ body { line-height: 48px; } - + /* BOTTOM INFOCARDS */ - .bottom__infocard-description { - max-width: 300px; font-size: 32px; - + max-width: 300px; } -} - - - +} \ No newline at end of file diff --git a/index.html b/index.html index 6ce81b4..3c6591e 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -13,8 +14,8 @@ - +
@@ -22,118 +23,152 @@
- +
- Banner principal Desktop - Banner principal Mobile + Banner principal Desktop + Banner principal Mobile
- +

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.

-
Imagem de 3 monitores
-
+ - -
-
- Imagem de um shop icon do primeiro card do topo -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
-
- Imagem de um shopping bag do segundo card do topo -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
-
- Imagem de uma coin icon do terceiro card do topo -
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
-
-
+ +
+
+ Icon de um shop do primeiro card do topo +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras + euismod enim non dui fringilla interdum.
+
- -
-
-
- Imagem do primeiro card de baixo -
- -
- Imagem do segundo card de baixo -
- -
- Imagem do teceiro card de baixo -
-
-
+
+ Icon de uma bolsa de shopping do segundo card do topo +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras + euismod enim non dui fringilla interdum.
+
- -
-
- Icon de dinheiro do primeiro card de baixo -
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 uma mão com uma moeda do segundo card de baixo -
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 laptop do terceiro card de baixo -
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 celulara do quarto card de baixo -
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.

-
-
+
+ Icon de uma mão com uma moeda em cima do terceiro card do topo +
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 infocard de baixo - + +
+
+
+ Imagem do primeiro card de baixo
-
- -
- -

- Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00 +

+ Imagem do segundo card de baixo +
+ +
+ Imagem do teceiro card de baixo +
+ +
+ + +
+
+ Icon de dinheiro do primeiro card de baixo +
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 uma mão com uma moeda do segundo card de baixo +
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 laptop do terceiro card de baixo +
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 celulara do quarto card de baixo +
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 infocard de baixo desktop + Banner do infocard de baixo mobile +
+ + + + + \ No newline at end of file