diff --git a/assets/image/bottom-card-image1.svg b/assets/image/bottom-card-image1.svg
new file mode 100644
index 0000000..1090b7b
--- /dev/null
+++ b/assets/image/bottom-card-image1.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
diff --git a/assets/image/bottom-card-image2.svg b/assets/image/bottom-card-image2.svg
new file mode 100644
index 0000000..2d06e62
--- /dev/null
+++ b/assets/image/bottom-card-image2.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/assets/image/bottom-card-image3.svg b/assets/image/bottom-card-image3.svg
new file mode 100644
index 0000000..7d13645
--- /dev/null
+++ b/assets/image/bottom-card-image3.svg
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
diff --git a/assets/image/bottom-card-image4.svg b/assets/image/bottom-card-image4.svg
new file mode 100644
index 0000000..b5c95ab
--- /dev/null
+++ b/assets/image/bottom-card-image4.svg
@@ -0,0 +1,6 @@
+
+
diff --git a/assets/styles/main.css b/assets/styles/main.css
index 9f38ef2..2d274ab 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -120,6 +120,36 @@ body {
width: 100%;
}
+.bottom-cards {
+ padding-top: 130px;
+ display: grid;
+ grid-template-columns: repeat(4, max-content);
+ justify-content: center;
+ gap: 16px;
+}
+
+.bottom-card {
+ background: #FFFFFF;
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+ padding-top: 26px;
+}
+
+.bottom-card-image {
+ max-width: 102px;
+ display: block;
+ margin: 0 auto;
+
+}
+
+.bottom-card-description {
+ margin: 0 auto;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 24px;
+ text-align: center;
+ padding: 28px 26px 28px 26px;
+ max-width: 300px;
+}
@media screen and (max-width: 414px) {
@@ -132,7 +162,7 @@ body {
}
- }
+}
@media screen and (max-width: 768px) {
.top-infocard-subtitle {
@@ -193,10 +223,18 @@ body {
.middle-banner-image.c {
grid-area: c;
width: 100%;
- }
-
+ }
+ .bottom-cards {
+ grid-template-columns: 1fr;
+ padding: 0 32px;
+ margin-top: 190px;
+
+ }
}
+
+
+
@media screen and (max-width: 290px) {
.top-infocard-title {
font-size: 26px;
@@ -207,7 +245,7 @@ body {
.top-cards {
grid-template-columns: repeat(2, max-content);
}
+ .bottom-cards {
+ grid-template-columns: repeat(2, max-content);
+ }
}
-
-
-
diff --git a/index.html b/index.html
index e063aa7..3fc8582 100644
--- a/index.html
+++ b/index.html
@@ -79,6 +79,34 @@
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
+
+
+
+ 
+ 
+ 
+