diff --git a/assets/images/bottom-infocard-image.png b/assets/images/bottom-infocard-image.png
new file mode 100644
index 0000000..21e1dae
Binary files /dev/null and b/assets/images/bottom-infocard-image.png differ
diff --git a/assets/styles/main.css b/assets/styles/main.css
index b1ccace..e182c36 100644
--- a/assets/styles/main.css
+++ b/assets/styles/main.css
@@ -122,6 +122,36 @@ body {
text-align: center;
}
+.bottom-infocard {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 142px 0 180px;
+}
+
+.bottom-infocard-image {
+ margin-right: 40px;
+}
+
+
+.bottom-infocard-text{
+ max-width: 550px;
+}
+
+.bottom-infocard-title {
+ margin-bottom: 18px;
+ line-height: 1;
+ font-weight: 600;
+ font-size: 32px;
+}
+
+.bottom-infocard-description {
+ font-size: 16px;
+ line-height: 24px;
+}
+
+
+/* MEDIAS QUERIES */
@media screen and (max-width: 414px) {
.main-banner-desktop,
@@ -182,8 +212,30 @@ body {
width: 100%;
max-width: 240px;
}
+
+ .bottom-infocard {
+ flex-direction: column;
+ padding: 80px 0 136px;
+ }
+
+ .bottom-infocard-image {
+ width: 100%;
+ max-width: 596px;
+ margin: 0 0 50px;
+ }
+
+ .bottom-infocard-title {
+ font-size: 24px;
+ }
+
+ .bottom-infocard-text {
+ padding: 0 26px;
+ }
}
+
+
+
@media screen and (min-width: 769px ) and (max-width: 1200px) {
.top-cards {
grid-template-columns: repeat(2, max-content);
@@ -203,6 +255,14 @@ body {
max-width: 520px;
margin-right: 70px;
}
+
+ .bottom-infocard-image {
+ max-width: 480px;
+ }
+
+ .bottom-infocard-text {
+ max-width: 400px;
+ }
}
diff --git a/index.html b/index.html
index 1888683..f73e83d 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
+