diff --git a/assets/styles.css/main.css b/assets/styles.css/main.css index ed60892..cc2efa9 100644 --- a/assets/styles.css/main.css +++ b/assets/styles.css/main.css @@ -24,7 +24,7 @@ body { .top-infocard { display: flex; justify-content: center; - padding: 73px 0 0; + padding: 3.80vw 0 0; } .top-infocard-text { @@ -63,20 +63,20 @@ body { } .top-infocard-image { - padding: 73px 0 89px 0; + padding: 3.80vw 0 4.63vw 0; } .top-card-image { display: block; - margin-bottom: 26px; + margin-bottom: 1.40vw; } .top-cards { background: #FFFFFF; grid-template-columns: repeat(3, max-content); - padding: 90px 0 80px; + padding: 3.125vw 0 4.166vw; display: grid; - gap: 20px; + gap: 1.09vw; justify-content: center; } @@ -180,6 +180,11 @@ body { line-height: 24px; } +.bottom-banner-image { + width: 100%; + padding: 2.6vw 14.583vw 6.04vw; +} + @media screen and (max-width: 414px) { .main-banner-desktop { display: none; diff --git a/index.html b/index.html index 1a0b40b..f4aa2c6 100644 --- a/index.html +++ b/index.html @@ -1,160 +1,168 @@ - - - + + + - - - + + + - M3 Desafio 1 + M3 Desafio 1 - + - - + + - -
- - - -
+ +
+ + + +
-
-
- Banner principal desktop - Banner principal mobile -
+
+
+ Banner principal desktop + Banner principal mobile +
-
-
-

Lorem ipsum

-

Dolor sit amet

+
+
+

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. -

-
- Primeira infocard do topo -
-
+

+ 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. +

+
+ Primeira infocard do topo +
+
-
-
- Imagem do Primeiro card 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. -

-
-
- -
-
-
- Primeiro banner do Meio +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. +

-
- Segundo banner do meio +
+ Imagem do Segundo card do Topo + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. +

-
- Terceiro banner do meio +
+ Imagem do Terceiro card do Topo + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla + interdum. +

-
-
+
-
-
- image01-bottomcard +
+
+
+ Primeiro banner do Meio +
-

- 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. -

+
+ Segundo banner do meio +
+ +
+ Terceiro banner do meio +
+
+
+ +
+
+ image01-bottomcard + +

+ 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. +

+
+ +
+ image02-bottomcard + +

+ 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. +

+
+ +
+ image03-bottomcard + +

+ 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. +

+
+ +
+ image04-bottomcard + +

+ 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 de baixo
-
- image02-bottomcard - -

- 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. -

-
- -
- image03-bottomcard - -

- 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. -

-
- -
- image04-bottomcard - -

- 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. -

-
-
-
- + +
+ \ No newline at end of file