diff --git a/assets/styles/main.css b/assets/styles/main.css index 4d6ad8f..fbe0f30 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -151,11 +151,45 @@ body { text-align: center; } +/*Adiciona bottom infocard*/ +.bottom-infocard { + display: flex; + flex-direction: column; + align-items: center; + padding: 0px 72px 116px; +} + +.bottom-infocard-image { + max-width: 1360px; + width: 100%; + margin-top: 50px; +} + +.bottom-infocard-text { + max-width: 550px; +} + +.bottom-infocard-title { + font-weight: 600; + font-size: 32px; + line-height: 39px; + text-align: center; +} + +.bottom-infocard-description { + font-size: 16px; + line-height: 24px; + text-align: center; +} + /*Media Querie*/ @media screen and (max-width: 414px) { .main-banner { content: url('../imagens/main-banner-mobile.png'); } + .bottom-card-description { + font-size: 14px; + } } @media screen and (max-width:1776px) { @@ -175,6 +209,26 @@ body { grid-template-columns: 1fr; padding: 0 24px 98px; } + + .bottom-infocard { + flex-direction: column-reverse; + padding: 0 0 88px 0; + } + + .bottom-infocard-image { + content: url('../imagens/bottom-banner-mobile.png'); + margin: 0 0 50px 0; + } + + .bottom-infocard-title { + font-size: 24px; + line-height: 20px; + margin: 0 0 18px 0; + } + + .bottom-infocard-description { + padding: 0 30px 0; + } } @media screen and (max-width: 992px) { diff --git a/index.html b/index.html index fcb7970..618a409 100644 --- a/index.html +++ b/index.html @@ -121,6 +121,21 @@

+ + +
+
+

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 Infocard Inferior +
\ No newline at end of file