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 @@ Banner inforcard + +
+
+ Primeira imagem shop card +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod + enim non + dui fringilla interdum.
+
+ +
+ Segunda imagem shop card +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod + enim non + dui fringilla interdum.
+
+ +
+ Terceira imagem shop card +
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod + enim non + dui fringilla interdum.
+
+
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); +}