diff --git a/assets/images/bottom-infocard-image.png b/assets/images/bottom-infocard-image.png new file mode 100644 index 0000000..0594593 Binary files /dev/null and b/assets/images/bottom-infocard-image.png differ diff --git a/assets/styles/main.css b/assets/styles/main.css index 0e0b554..6ef44ab 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -30,11 +30,11 @@ body { align-items: center; justify-content: center; padding: 80px 0 96px; + gap: 124px; } .top-infocard-text { max-width: 40%; - margin-right: 124px; } .top-infocard-subtitle { @@ -81,8 +81,8 @@ body { .top-card-description { max-width: 85%; text-align: center; - font-size: 16px; line-height: 24px; + font-size: 16px; } .bottom-cards { @@ -119,8 +119,32 @@ body { .bottom-card-description { max-width: 85%; text-align: center; - font-size: 16px; line-height: 24px; + font-size: 16px; +} + +.bottom-infocard { + display: flex; + align-items: center; + justify-content: center; + padding: 142px 0 180px; + gap: 40px; +} + +.bottom-infocard-text { + max-width: 29%; +} + +.bottom-infocard-title { + margin-bottom: 18px; + line-height: 32px; + font-size: 32px; + font-weight: 600; +} + +.bottom-infocard-description { + line-height: 24px; + font-size: 16px; } @media screen and (max-width: 340px) { @@ -134,8 +158,8 @@ body { } .top-card-description { - font-size: 14px; line-height: 22px; + font-size: 14px; } .bottom-card { @@ -145,6 +169,11 @@ body { .bottom-card-image { max-width: 25%; } + + .bottom-infocard-description { + line-height: 20px; + font-size: 14px; + } } @media screen and (max-width: 1024px) { @@ -204,6 +233,25 @@ body { max-width: 82%; font-size: 14px; } + + .bottom-infocard { + flex-direction: column; + padding: 80px 0 135px; + } + + .bottom-infocard-image { + width: 100%; + margin: 0 0 50px; + } + + .bottom-infocard-text { + max-width: 85%; + } + + .bottom-infocard-title { + line-height: 24px; + font-size: 24px; + } } @media screen and (min-width: 1025px) { @@ -215,10 +263,7 @@ body { @media screen and (min-width: 2500px) { .top-infocard { padding: 160px 0 192px; - } - - .top-infocard-text { - margin-right: 10%; + gap: 248; } .top-infocard-subtitle { @@ -254,8 +299,8 @@ body { } .top-card-description { - font-size: 32px; line-height: 48px; + font-size: 32px; } .bottom-cards { @@ -281,7 +326,27 @@ body { } .bottom-card-description { - font-size: 32px; line-height: 48px; + font-size: 32px; + } + + .bottom-infocard { + padding: 284px 0 360px; + gap: 80px; + } + + .bottom-infocard-image { + width: 1200px; + } + + .bottom-infocard-title { + margin-bottom: 32px; + line-height: 64px; + font-size: 64px; + } + + .bottom-infocard-description { + line-height: 48px; + font-size: 32px; } } \ No newline at end of file diff --git a/index.html b/index.html index 9a69baa..5828c82 100644 --- a/index.html +++ b/index.html @@ -10,10 +10,10 @@ M3 Landing Page + + - - - + @@ -49,28 +49,22 @@
- 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.
-
@@ -92,34 +86,49 @@
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.
- +
Imagem 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.
-
+
Imagem 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.
-
+
Imagem 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.
-
+ +
+
+ Banner do Infocard de Baixo +
+ +
+

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