diff --git a/assets/images/bottom-info-card-image.png b/assets/images/bottom-info-card-image.png new file mode 100644 index 0000000..0594593 Binary files /dev/null and b/assets/images/bottom-info-card-image.png differ diff --git a/assets/styles/main.css b/assets/styles/main.css index 7baa209..52ae669 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -123,6 +123,52 @@ body { text-align: center; } +.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; +} + +.bottom-infocard { +flex-direction: column; +padding: 80px 0 136px; +} + +.bottom-infocard-image { + width: 100%; + max-width: 596px; + margin: 0 0 50px; +} + +.bottom-infocard-text { + padding: 0 26px; +} + +.bottom-infocard-title { + font-size: 24px; +} + @media screen and (max-width: 414px) { @@ -205,4 +251,12 @@ body { max-width: 520px; margin-right: 70px; } + + .bottom-infocard-image { + max-width: 480px; + } + + .bottom-infocard-text { + max-width: 400px; + } } \ No newline at end of file diff --git a/index.html b/index.html index 2c83fab..68a6795 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ M3 Landing Page - + @@ -127,6 +127,22 @@ - - + +
+ 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