diff --git a/assets/imagens/image-bottom-mobile.png b/assets/imagens/image-bottom-mobile.png new file mode 100644 index 0000000..f4e55c5 Binary files /dev/null and b/assets/imagens/image-bottom-mobile.png differ diff --git a/assets/imagens/image-bottom.png b/assets/imagens/image-bottom.png new file mode 100644 index 0000000..c4b49fc Binary files /dev/null and b/assets/imagens/image-bottom.png differ diff --git a/assets/style.css b/assets/style.css index e5218b8..40287bc 100644 --- a/assets/style.css +++ b/assets/style.css @@ -122,6 +122,41 @@ max-width: 432px; } +.section-2{ + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + max-width: 1360px; + margin: 0 auto; + text-align: center; + margin-bottom: 116px; +} + +.bottom-texts{ + margin-bottom: 50px; +} + +.section-2 .bottom-texts h2{ + font-family: 'Inter', sans-serif; + font-weight: 600; + font-size: 32px; + line-height: 39px; +} + +.section-2 .bottom-texts p { + max-width: 550px; + font-family: 'Inter', sans-serif; + font-weight: 400; + font-size: 16px; + line-height: 24px; +} + +.image-bottom{ + max-width: 1360px; + width: 100%; +} + @media screen and (max-width:1024px) { .main-title{ @@ -192,5 +227,37 @@ .card,.cards-bottom .card{ max-width: unset; } + + .section-2{ + flex-direction: column-reverse; + margin-bottom: 87px; + } + + .section-2 picture{ + width: 100%; + + } + + .bottom-texts{ + margin-top: 50px; + margin-bottom: unset; + padding: 0 32px; + } + + .bottom-texts h2{ + margin-bottom: 9px; + font-size: 24px; + line-height: 29px; + } + + .bottom-texts p { + font-size: 16px; + line-height: 24px; + } + + .image-bottom{ + max-height: 414px; + object-fit: cover; + } } diff --git a/index.html b/index.html index 8aa03df..b02b222 100644 --- a/index.html +++ b/index.html @@ -122,6 +122,24 @@ +
+
+

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

+
+ + + + imagem borrada de um oculos + +
+ + +