diff --git a/assets/css/style.css b/assets/css/style.css index d16a1e6..7be28b2 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -127,7 +127,7 @@ body { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; - margin: 0 auto 72px; + margin: 0 auto 0; width: 92%; } @@ -153,10 +153,41 @@ body { text-align: center; } +.bottom-infocard { + display: flex; + flex-direction: column; + align-items: center; + padding: 108px 280px 0px; +} + +.bottom-infocard-text { + margin-bottom: 50px; + max-width: 41%; +} + +.bottom-infocard-subtitle { + font-weight: 600; + font-size: 32px; + line-height: 39px; + text-align: center; +} +.bottom-infocard-description { + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; +} +.bottom-banner-desktop { + width: 100%; +} + @media screen and (max-width: 1024px) { .main-banner-desktop { display: none; } + .bottom-banner-desktop { + display: none; + } .top-infocard { padding: 73px 32px 90px; margin: 0 auto 0; @@ -211,9 +242,28 @@ body { .bottom-card-description { font-size: 14px; } + .bottom-infocard { + flex-direction: column-reverse; + margin: 0; + padding: 0; + width: 100%; + } + .bottom-infocard-text { + margin-top: 50px; + max-width: 100%; + margin: 50px 32px 88px; + } + .bottom-infocard-subtitle { + font-size: 24px; + line-height: 29px; + margin-bottom: 9px; + } } @media screen and (min-width: 1024px) { .main-banner-mobile { display: none; } + .bottom-banner-mobile { + display: none; + } } diff --git a/assets/imagens/bottom-infocard-image-desktop.png b/assets/imagens/bottom-infocard-image-desktop.png new file mode 100644 index 0000000..74d0711 Binary files /dev/null and b/assets/imagens/bottom-infocard-image-desktop.png differ diff --git a/assets/imagens/bottom-infocard-image-mobile.png b/assets/imagens/bottom-infocard-image-mobile.png new file mode 100644 index 0000000..50df8d7 Binary files /dev/null and b/assets/imagens/bottom-infocard-image-mobile.png differ diff --git a/index.html b/index.html index ef0892b..6c06211 100644 --- a/index.html +++ b/index.html @@ -146,6 +146,24 @@ +
+
+

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