diff --git a/assets/imgs/coin-card.png b/assets/imgs/coin-card.png
new file mode 100644
index 0000000..11b00d4
Binary files /dev/null and b/assets/imgs/coin-card.png differ
diff --git a/assets/imgs/shop-card.png b/assets/imgs/shop-card.png
new file mode 100644
index 0000000..8cf9fb5
Binary files /dev/null and b/assets/imgs/shop-card.png differ
diff --git a/assets/imgs/shopping-bag-card.png b/assets/imgs/shopping-bag-card.png
new file mode 100644
index 0000000..0d27090
Binary files /dev/null and b/assets/imgs/shopping-bag-card.png differ
diff --git a/index.html b/index.html
index 37341b6..d732dad 100644
--- a/index.html
+++ b/index.html
@@ -30,6 +30,29 @@
+
+
+
+
+
+
+
+
diff --git a/style/colors.css b/style/colors.css
index 92f47e4..5dc316b 100644
--- a/style/colors.css
+++ b/style/colors.css
@@ -1,3 +1,5 @@
:root {
--black: #000;
+ --white: #fff;
+ --bg-light-gray: #e5e5e5;
}
diff --git a/style/main.css b/style/main.css
index 21fb3a2..e01c787 100644
--- a/style/main.css
+++ b/style/main.css
@@ -12,7 +12,7 @@
align-items: center;
flex-direction: column;
justify-content: center;
- padding: 73px 0;
+ padding: 73px 0 178px;
}
.main .container-infocard-text {
@@ -40,15 +40,37 @@
line-height: 24px;
}
-@media (max-width: 720px) {
- .main-banner .banner-desktop {
- display: none;
- }
- .main-banner .banner-mobile {
- display: block;
- }
+.main .top-cards {
+ display: grid;
+ grid-template-columns: repeat(3, max-content);
+ gap: 21px;
+ align-items: center;
+ justify-content: center;
+ padding-bottom: 80px;
}
+.main .top-card {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+ padding: 26px 26px 34px;
+ background-color: var(--white);
+}
+
+.main .card-img {
+ display: block;
+ margin-bottom: 26px;
+}
+
+.main .card-description {
+ max-width: 300px;
+ text-align: center;
+ line-height: 24px;
+ font-size: 16px;
+}
+
+/* Top-infocard */
@media (max-width: 900px) {
.main .top-infocard {
padding: 73px 29px 90px;
@@ -70,9 +92,43 @@
.main .infocard-description {
text-align: center;
}
+}
+@media (max-width: 414px) {
.main .infocard-img {
max-width: 244px;
width: 100%;
}
}
+
+/*Top-cards*/
+
+@media (max-width: 1150px) {
+ .main .top-cards {
+ grid-template-columns: repeat(2, 1fr);
+ padding: 0 26px;
+ }
+
+ .main .card-3 {
+ grid-column-start: 1;
+ grid-column-end: 3;
+ }
+}
+
+@media (max-width: 768px) {
+ .main .top-cards {
+ grid-template-columns: 1fr;
+ padding: 36px 26px;
+ }
+}
+
+/* Banner-desktop / Banner-mobile*/
+
+@media (max-width: 720px) {
+ .main-banner .banner-desktop {
+ display: none;
+ }
+ .main-banner .banner-mobile {
+ display: block;
+ }
+}
diff --git a/style/reset.css b/style/reset.css
index 7ca5042..058d325 100644
--- a/style/reset.css
+++ b/style/reset.css
@@ -4,3 +4,7 @@
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
+
+body {
+ background-color: var(--bg-light-gray);
+}