diff --git a/assets/images/infocard-footer-image-01.png b/assets/images/infocard-footer-image-01.png
new file mode 100644
index 0000000..26c3a4d
Binary files /dev/null and b/assets/images/infocard-footer-image-01.png differ
diff --git a/assets/images/infocard-footer-image-02.png b/assets/images/infocard-footer-image-02.png
new file mode 100644
index 0000000..e45d017
Binary files /dev/null and b/assets/images/infocard-footer-image-02.png differ
diff --git a/assets/images/infocard-footer-image-03.png b/assets/images/infocard-footer-image-03.png
new file mode 100644
index 0000000..5b0b3f4
Binary files /dev/null and b/assets/images/infocard-footer-image-03.png differ
diff --git a/assets/images/infocard-footer-image-04.png b/assets/images/infocard-footer-image-04.png
new file mode 100644
index 0000000..57fe413
Binary files /dev/null and b/assets/images/infocard-footer-image-04.png differ
diff --git a/assets/images/retangulo-footer-image-desktop.png b/assets/images/retangulo-footer-image-desktop.png
new file mode 100644
index 0000000..309a140
Binary files /dev/null and b/assets/images/retangulo-footer-image-desktop.png differ
diff --git a/assets/images/retangulo-footer-image-mobile.png b/assets/images/retangulo-footer-image-mobile.png
new file mode 100644
index 0000000..b3ddd7b
Binary files /dev/null and b/assets/images/retangulo-footer-image-mobile.png differ
diff --git a/assets/styles/main.css b/assets/styles/main.css
index 63cf5bb..58fad92 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -21,7 +21,7 @@ body{
display: block;
}
-.main-banner {
+.main-banner, .footer-banner {
width: 100%;
display: block;
}
@@ -114,22 +114,77 @@ body{
margin-top: 62px;
}
-/* .middle-banner-image img {
- width: 100%;
-} */
+.footer-cards {
+ display: grid;
+ grid-template-columns: repeat(4, max-content);
+ gap: 16px;
+ justify-content: center;
+
+ padding-bottom: 108px;
+ padding-top: 192px;
+}
+
+.footer-card {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background: #FFFFFF;
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+
+ padding: 36px 32px 64px;
+}
+
+.footer-card-image {
+ display: block;
+ margin-bottom: 16px;
+}
+
+.footer-card-description {
+ max-width: 367px;
+ text-align: center;
+ line-height: 24px;
+ font-size: 16px;
+}
+
+.section-footer {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+
+ padding-bottom: 116px;
+}
+
+.section-footer-text{
+ width: 28%;
+ text-align: center;
+}
+
+.section-footer-title {
+ font-weight: 600;
+ font-size: 32px;
+ line-height: 39px;
+}
+
+.section-footer-description {
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+
+ padding-bottom: 50px;
+}
/* RESPONSIVIDADE */
-
@media screen and (max-width: 414px) {
- .main-banner-desktop {
+ .main-banner-desktop, .section-footer-image-desktop {
display: none;
}
}
@media screen and (min-width: 415px) {
- .main-banner-mobile, .middle-banner-mobile {
+ .main-banner-mobile, .middle-banner-mobile, .section-footer-image-mobile {
display: none;
}
}
@@ -146,7 +201,6 @@ body{
}
-
@media screen and (max-width: 1024px) {
.top-infocard-text {
width: 100%;
@@ -168,9 +222,31 @@ body{
width: 100%;
max-width: 240px;
}
+
+ .section-footer {
+ flex-direction: column-reverse;
+ }
+
+ .footer-banner {
+ padding-bottom: 50px;
+ }
+
+ .section-footer-text{
+ width: 100%;
+ text-align: center;
+
+ padding: 0 32px;
+ }
+
+ .section-footer-title {
+ font-size: 24px;
+ line-height: 29px;
+
+ padding-bottom: 8px;
+ }
}
-@media screen and (max-width: 2040px) {
+@media screen and (max-width: 1919px) {
.middle-banner {
max-height: 398px;
}
@@ -179,6 +255,24 @@ body{
width: 420px;
margin-top: 46px;
}
+
+ .footer-cards {
+ display: grid;
+ grid-template-columns: repeat(2, max-content);
+ }
+}
+
+@media screen and (max-width: 968px){
+ .footer-cards {
+ grid-template-columns: 1fr;
+ padding: 80px 24px 98px;
+ justify-content: center;
+ }
+
+ .footer-card-description {
+ max-width: 302px;
+ font-size: 14px;
+ }
}
@media screen and (max-width: 1530px) {
@@ -216,7 +310,7 @@ body{
.banner-grid-3 {
grid-area: banner-grid-3;
- margin-top: 24px;
+ margin-top: 18px;
}
.middle-banner-image {
diff --git a/index.html b/index.html
index 0529ac7..91ab90a 100644
--- a/index.html
+++ b/index.html
@@ -64,5 +64,49 @@
+
+
+
+
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+