diff --git a/assets/imgs/background-bottom.png b/assets/imgs/background-bottom.png deleted file mode 100644 index 42190a3..0000000 Binary files a/assets/imgs/background-bottom.png and /dev/null differ diff --git a/assets/imgs/banner-final.png b/assets/imgs/banner-final.png new file mode 100644 index 0000000..7a674f6 Binary files /dev/null and b/assets/imgs/banner-final.png differ diff --git a/index.html b/index.html index ae0082a..71350da 100644 --- a/index.html +++ b/index.html @@ -118,6 +118,19 @@ + \ No newline at end of file diff --git a/styles/main.css b/styles/main.css index 1ceacab..6ad4c81 100644 --- a/styles/main.css +++ b/styles/main.css @@ -166,6 +166,50 @@ color: #000000; } +/* seção final com título, texto e imagem */ +.banner-final { + width: 100%; + padding: 36px 7% 116px 7%; +} + +.banner-final figure { + max-width: 1360px; + height: 484px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; + margin: auto; +} + +.banner-final figure img { + width: 100%; + height: 276px; + object-fit: cover; + object-position: 25% 55%; +} + +.banner-final figure .banner-final-text h3 { + font-weight: 600; + font-size: 32px; + line-height: 39px; + text-align: center; + color: #000000; +} + +.banner-final .banner-final-text figcaption { + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; + color: #000000; + margin-bottom: 50px; + max-width: 550px; + width: 100%; + text-align: center; +} + @media screen and (max-width: 1025px) { .background-main figure img { height: 100%; @@ -289,25 +333,77 @@ gap: 16px; } + .first-bottom-card figure img, .second-bottom-card figure img, .three-bottom-card figure img, .four-bottom-card figure img { + margin-bottom: 15px; + } + + .banner-final { + width: 100%; + padding: 0; + } + + .banner-final figure { + max-width: 414px; + width: 100%; + height: auto; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column-reverse; + position: relative; + margin: auto; + } + + .banner-final figure img { + width: 100%; + height: auto; + margin-bottom: 50px; + } + + .banner-final-text { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + } + + .banner-final figure .banner-final-text h3 { + font-weight: 600; + font-size: 24px; + line-height: 29px; + margin-bottom: 9px; + } + + .banner-final .banner-final-text figcaption { + margin-bottom: 87px; + max-width: 350px; + width: 100%; + } + } -@media screen and (max-width: 281px){ - .cards-macbook { - height: auto; +@media screen and (max-width: 281px) { + .cards-macbook { + height: auto; } .cards-macbook-container { height: auto; top: 32px; } - - .first-bottom-card figure, .second-bottom-card figure, .three-bottom-card figure, .four-bottom-card figure { - height: auto; + + .first-bottom-card figure, .second-bottom-card figure, .three-bottom-card figure, .four-bottom-card figure { + height: auto; } .bottom-cards { max-height: 1640px; } + + .banner-final .banner-final-text figcaption { + margin-bottom: 87px; + padding: 0 32px 0 32px; + } } @media screen and (min-width: 2500px) {