diff --git a/assets/images/card1.png b/assets/images/card1.png new file mode 100644 index 0000000..31a541b Binary files /dev/null and b/assets/images/card1.png differ diff --git a/assets/images/card2.png b/assets/images/card2.png new file mode 100644 index 0000000..97f8ad4 Binary files /dev/null and b/assets/images/card2.png differ diff --git a/assets/images/card3.png b/assets/images/card3.png new file mode 100644 index 0000000..a5e458f Binary files /dev/null and b/assets/images/card3.png differ diff --git a/assets/images/product1.png b/assets/images/product1.png new file mode 100644 index 0000000..5041a6a Binary files /dev/null and b/assets/images/product1.png differ diff --git a/assets/images/product2.png b/assets/images/product2.png new file mode 100644 index 0000000..f7ed233 Binary files /dev/null and b/assets/images/product2.png differ diff --git a/assets/images/product3.png b/assets/images/product3.png new file mode 100644 index 0000000..0bbb48c Binary files /dev/null and b/assets/images/product3.png differ diff --git a/assets/styles/css/main.css b/assets/styles/css/main.css index 6a8e2c1..8bd1ba8 100644 --- a/assets/styles/css/main.css +++ b/assets/styles/css/main.css @@ -68,22 +68,56 @@ margin-bottom: 180px; } -@media screen and (min-width: 415px) { - .banner__img__mobile { - display: none; +.cards { + display: grid; + grid-template-columns: repeat(3, max-content); + gap: 20px; + justify-content: center; +} + +.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; +} + +.card__img { + display: block; + margin-bottom: 26px; +} + +.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%; + max-width: 240px; + } + + .cards { + grid-template-columns: repeat(2, max-content); + } + + .card__description { + max-width: 230px; } } -@media screen and (max-width: 414px) { +@media screen and (max-width: 768px) { .header__logo { width: 54%; } - .banner__img__desktop { - display: none; - } - .home-destaque__text { padding: 0 28px; } @@ -101,20 +135,37 @@ .home-destaque__text__description { text-align: center; } - + .home-destaque__img { width: 58%; + max-width: 240px; + } + + .cards { + grid-template-columns: 1fr; + padding: 0 28px; } } +@media screen and (min-width: 415px) { + .banner__img__mobile { + display: none; + } +} + + +@media screen and (max-width: 414px) { + .banner__img__desktop { + display: none; + } +} + + @media screen and (max-width: 300px) { .home-destaque__text__title{ font-size: 26px; } -} - -@media screen and (min-width:414px) and (max-width:768px ) { - .home-destaque__img { - width: 58%; + .cards__card{ + max-width: 235px; } -} \ No newline at end of file +} diff --git a/assets/styles/css/reset.css b/assets/styles/css/reset.css index 7849c3d..5d8fe9b 100644 --- a/assets/styles/css/reset.css +++ b/assets/styles/css/reset.css @@ -26,6 +26,7 @@ body { line-height: 1; font-family: 'Inter', sans-serif; color: #000; + background: #e5e5e5; } ol, ul { list-style: none; diff --git a/index.html b/index.html index 12da012..4733955 100644 --- a/index.html +++ b/index.html @@ -35,6 +35,29 @@ +
+
+ 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.

+
+
+ + +