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/assets/styles/main.css b/assets/styles/main.css index f7c196b..8a98bf3 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -121,6 +121,33 @@ 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: 1px; +} + +.bottom-infocard-description{ + font-size: 16px; + line-height: 24px; +} + @media screen and (max-width: 414px) { .main-banner-desktop, @@ -180,6 +207,25 @@ body{ width: 100%; max-width: 240px; } + + .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 (min-width: 769px) and (max-width:1200px){ @@ -198,5 +244,13 @@ body{ .top-infocard-text{ max-width: 440px; } + + .bottom-infocard-image{ + max-width: 480px; + } + + .bottom-infocard-text{ + min-width: 400px; + } } diff --git a/index.html b/index.html index 6b79c64..e845d83 100644 --- a/index.html +++ b/index.html @@ -108,6 +108,20 @@ + +
+ Banner Infocard inferior + +
+

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

+
+