diff --git a/assets/images/bottom-card1.png b/assets/images/bottom-card1.png new file mode 100644 index 0000000..d05d4bb Binary files /dev/null and b/assets/images/bottom-card1.png differ diff --git a/assets/images/bottom-card2.png b/assets/images/bottom-card2.png new file mode 100644 index 0000000..e9414fd Binary files /dev/null and b/assets/images/bottom-card2.png differ diff --git a/assets/images/bottom-card3.png b/assets/images/bottom-card3.png new file mode 100644 index 0000000..66be1e8 Binary files /dev/null and b/assets/images/bottom-card3.png differ diff --git a/assets/images/bottom-card4.png b/assets/images/bottom-card4.png new file mode 100644 index 0000000..2013cf8 Binary files /dev/null and b/assets/images/bottom-card4.png differ diff --git a/assets/styles/css/main.css b/assets/styles/css/main.css index 9636062..758b353 100644 --- a/assets/styles/css/main.css +++ b/assets/styles/css/main.css @@ -117,6 +117,37 @@ display: block; } +.bottom-cards { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + justify-content: center; + margin-top: 190px; + padding: 0 72px; +} + +.bottom-cards__card{ + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + padding: 36px 26px 26px; +} + +.bottom-card__img { + display: block; + margin-bottom: 26px; +} + +.bottom-card__description { + padding: 0 25px 27px; + text-align: center; + max-width: 300px; +} + @media screen and (min-width: 769px) and (max-width: 1200px) { .home-destaque__img { width: 58%; @@ -127,9 +158,13 @@ grid-template-columns: repeat(2, max-content); } - .card__description { + .card__description, .bottom-card__description { max-width: 230px; } + + .bottom-cards{ + grid-template-columns: repeat(2, 1fr); + } } @media screen and (max-width: 768px) { @@ -161,7 +196,7 @@ max-width: 240px; } - .cards { + .cards, .bottom-cards { grid-template-columns: 1fr; padding: 0 28px; } @@ -203,7 +238,7 @@ .home-destaque__text__title{ font-size: 26px; } - .cards__card{ + .cards__card, .bottom-cards__card{ max-width: 235px; } } diff --git a/index.html b/index.html index 6435366..f0c9bac 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,10 @@
- + + + +
@@ -58,6 +61,25 @@ +
+
+ Imagem do Card 1 +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+ Imagem do Card 2 +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+ Imagem do Card 3 +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+ Imagem do Card 4 +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
+