diff --git a/assets/images/Fotter-image.png b/assets/images/bottom-inforcard-image.png similarity index 100% rename from assets/images/Fotter-image.png rename to assets/images/bottom-inforcard-image.png diff --git a/assets/styles/main.css b/assets/styles/main.css index 464ab0a..051df7e 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -102,7 +102,29 @@ body{ line-height: 24px; font-size: 16px; } - +.bottom-infocard{ + display: flex; + align-items: center; + justify-content: center; + padding: 7% 0 9%; +} +.bottom-infocard-image{ + margin-right: 40px; +} +.bottom-infocard-text{ + max-width: 28%; +} +.bottom-infocard-title{ + margin-bottom: 18px; + font-weight: 600; + font-size: 32px; + line-height: 20px; +} +.bottom-infocard-description{ + font-weight: 400; + font-size: 16px; + line-height: 24px; +} @media screen and (min-width:2500px) { @@ -192,9 +214,21 @@ body{ width: 100%; max-width: 240px; } - + .bottom-infocard{ + flex-direction: column; + padding: 80px 0 136px; + } + .bottom-infocard-image{ + width: 100%; + max-width: 650px; + margin: 0 0 50px; + } + .bottom-infocard-text{ + max-width: 95%; + padding: 0 5px; } + @media screen and (max-width: 768px) { .top-cards{ grid-template-columns: 1fr; @@ -214,9 +248,10 @@ body{ .bottom-card-description{ font-size: 14px; } - .bottom-card-wrapper { + .bottom-card-wrapper { padding: 0 5%; } - -} - + .bottom-infocard-title{ + font-size: 24px; + } +}} \ No newline at end of file diff --git a/index.html b/index.html index 5638512..a96c365 100644 --- a/index.html +++ b/index.html @@ -1,7 +1,7 @@ - + @@ -11,7 +11,7 @@ M3 Landing Page - + @@ -26,7 +26,7 @@
- Main-banner-desktop + Banner do topo
@@ -59,7 +59,7 @@
- middler-banner-desktop + Banner do meio
@@ -98,6 +98,20 @@ +
+ +
+ Imagem Infocard do fundo + +
+

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

+