diff --git a/assets/Styles/main.css b/assets/Styles/main.css index b299463..741fe4d 100644 --- a/assets/Styles/main.css +++ b/assets/Styles/main.css @@ -161,6 +161,33 @@ body{ } +.bottom-infocard{ + display: flex; + align-items: center; + justify-content: center; + padding: 142px 0 180px; +} + +.bottom-infocard-image{ + margin-right: 40px; +} + +.bottom-infocard-text{ + max-width: 550px; +} + +.bottom-infocard-title{ + margin-bottom: 18px; + font-weight: 600; + font-size: 32px; + line-height: 1; +} + +.bottom-infocard-description{ + font-size: 16px; + line-height: 24px; +} + @media screen and (max-width: 992px) { .top-infocard{ flex-direction: column; @@ -184,6 +211,25 @@ body{ width: 100%; max-width: 240px; } + + .bottom-infocard{ + flex-direction: column; + padding: 80px 0 136px; + } + + .bottom-infocard-image{ + max-width: 596; + width: 100%; + margin: 0 0 50px; + } + + .bottom-infocard-text{ + padding: 0 26px; + } + + .bottom-infocard-title{ + font-size: 24px; + } } @@ -192,6 +238,14 @@ body{ max-width: 520px; margin-right: 70px; } + + .bottom-infocard-image{ + max-width: 480px; + } + + .bottom-infocard-text{ + max-width: 400px; + } } @media screen and (max-width: 1280) { diff --git a/assets/images/bottom-infocard-image.png b/assets/images/bottom-infocard-image.png new file mode 100644 index 0000000..ee68371 Binary files /dev/null and b/assets/images/bottom-infocard-image.png differ diff --git a/index.html b/index.html index 50d0f76..4518c5c 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ M3 Landing Page - + @@ -119,6 +119,18 @@ + +
+ 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