diff --git a/assets/imagens/bottom-infocard-img-dk.png b/assets/imagens/bottom-infocard-img-dk.png new file mode 100644 index 0000000..87b48a2 Binary files /dev/null and b/assets/imagens/bottom-infocard-img-dk.png differ diff --git a/assets/imagens/bottom-infocard-img-mb.png b/assets/imagens/bottom-infocard-img-mb.png new file mode 100644 index 0000000..5399732 Binary files /dev/null and b/assets/imagens/bottom-infocard-img-mb.png differ diff --git a/assets/styles/main.css b/assets/styles/main.css index 00ec5a4..98011d6 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -2,7 +2,7 @@ { margin: 0; padding: 0; - box-sizing: border-box; + /*box-sizing: border-box;*/ } body @@ -169,9 +169,34 @@ body } +.bottom-infocard{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} +.bottom-infocard-image{ + width: 100%; + max-width: 1360px; +} +.bottom-infocard-text{ + text-align: center; + max-width: 550px; + margin-bottom: 50px; +} +.bottom-infocard-title{ + line-height: 1; + font-size: 32px; + font-weight: 600px; +} + +.bottom-infocard-description{ + font-size: 16px; + line-height: 24px; +} @@ -205,6 +230,30 @@ body } } +@media screen and (max-width: 768px) +{ + .dk { + display: none; + } + + .mb { + margin-bottom: 50px; + } +} + +@media screen and (min-width: 769px) +{ + .mb { + display: none; + } +} + +@media screen and (max-width: 1500px) and (min-width: 769px) { + .dk { + max-width: 740px; + } +} + @media screen and (max-width: 768px) { .top-infocard @@ -270,6 +319,7 @@ body .bottom-cards-wrapper{ flex-direction: column; } + } @media screen and (min-width: 769px) and (max-width: 1200px){ @@ -417,4 +467,16 @@ body margin: 20px 0; } +} + +@media screen and (max-width: 580px) +{ + .bottom-infocard-title{ + font-size: 24px; + line-height: 29px; + } + + .bottom-infocard-description{ + max-width: 350px; + } } \ No newline at end of file diff --git a/index.html b/index.html index 03adfb7..0f5533e 100644 --- a/index.html +++ b/index.html @@ -121,6 +121,25 @@ + +
+ + 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. +

+
+ + Banner do Infocard de Baixo + +
+