diff --git a/assets/css/style.css b/assets/css/style.css index 34cae35..d16a1e6 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -122,12 +122,43 @@ body { .mb-imagens { width: 100%; } -@media screen and (max-width: 1023px) { + +.bottom-cards { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px; + margin: 0 auto 72px; + width: 92%; +} + +.bottom-card { + display: flex; + flex-direction: column; + align-items: center; + background: #ffffff; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); +} + +.bottom-card-image { + display: block; + margin-top: 35px; +} + +.bottom-card-description { + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 24px; + margin: 15px 32px 65px; + text-align: center; +} + +@media screen and (max-width: 1024px) { .main-banner-desktop { display: none; } .top-infocard { - padding: 73px 0 90px; + padding: 73px 32px 90px; margin: 0 auto 0; } .top-inforcard-text { @@ -146,7 +177,7 @@ body { } .top-infocard-description { line-height: 24px; - margin-bottom: 66px; + margin-bottom: 0; } .top-cards { @@ -167,6 +198,19 @@ body { column-gap: 14px; margin: 0 24px 0; } + + .bottom-cards { + display: flex; + flex-direction: column; + justify-content: center; + gap: 16px; + margin: 0 auto 98px; + width: 88%; + } + + .bottom-card-description { + font-size: 14px; + } } @media screen and (min-width: 1024px) { .main-banner-mobile { diff --git a/assets/imagens/bottom-card-image-01.png b/assets/imagens/bottom-card-image-01.png new file mode 100644 index 0000000..b6d81cf Binary files /dev/null and b/assets/imagens/bottom-card-image-01.png differ diff --git a/assets/imagens/bottom-card-image-02.png b/assets/imagens/bottom-card-image-02.png new file mode 100644 index 0000000..a239b00 Binary files /dev/null and b/assets/imagens/bottom-card-image-02.png differ diff --git a/assets/imagens/bottom-card-image-03.png b/assets/imagens/bottom-card-image-03.png new file mode 100644 index 0000000..e5d0f23 Binary files /dev/null and b/assets/imagens/bottom-card-image-03.png differ diff --git a/assets/imagens/bottom-card-image-04.png b/assets/imagens/bottom-card-image-04.png new file mode 100644 index 0000000..ad9f3c1 Binary files /dev/null and b/assets/imagens/bottom-card-image-04.png differ diff --git a/index.html b/index.html index c7637fa..ef0892b 100644 --- a/index.html +++ b/index.html @@ -34,8 +34,6 @@ - -

Lorem ipsum

@@ -101,6 +99,52 @@
+
+
+ Imagem do Primeiro Card de Baixo +
+

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

+
+
+
+ Imagem do Segundo Card de Baixo +
+

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

+
+
+
+ Imagem do Terceiro Card de Baixo +
+

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

+
+
+
+ Imagem do Quarto Card de Baixo +
+

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

+
+
+