diff --git a/assets/images/bottom-card-image01.svg b/assets/images/bottom-card-image01.svg new file mode 100644 index 0000000..23e32a4 --- /dev/null +++ b/assets/images/bottom-card-image01.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/assets/images/bottom-card-image02.svg b/assets/images/bottom-card-image02.svg new file mode 100644 index 0000000..aec80a4 --- /dev/null +++ b/assets/images/bottom-card-image02.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/assets/images/bottom-card-image03.svg b/assets/images/bottom-card-image03.svg new file mode 100644 index 0000000..a35b36f --- /dev/null +++ b/assets/images/bottom-card-image03.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/images/bottom-card-image04.svg b/assets/images/bottom-card-image04.svg new file mode 100644 index 0000000..be408ca --- /dev/null +++ b/assets/images/bottom-card-image04.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/styles/main.css b/assets/styles/main.css index 153e80a..e0bfbd2 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -85,17 +85,74 @@ body { text-align: center; } +.bottom-cards { + margin-top: 140px; + background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%); +} + +.bottom-cards-wrapper { + display: grid; + grid-template-columns: repeat(2, max-content); + justify-content: center; + gap: 20px; + position: relative; + top: -60px; +} + +.bottom-card { + display: flex; + flex-direction: column; + align-items: center; + padding: 36px 32px 66px; + background: #FFFFFF; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} + +.bottom-card-image { + display: block; + margin-bottom: 14px; +} + +.bottom-card-description { + max-width: 368px; + text-align: center; + font-size: 16px; + line-height: 24px; +} + @media screen and (max-width: 414px) { .main-banner-desktop, .middle-banner-desktop { display: none; } } +@media screen and (min-width:415px) { + .main-banner-mobile, .middle-banner-mobile { + display: none; + } +} + @media screen and (max-width: 768px) { .top-cards { grid-template-columns: 1fr; padding: 36px 26px; - } + } + + .bottom-cards { + margin-top: 114px; + padding: 0 26px; + + } + + .bottom-cards-wrapper { + grid-template-columns: 1fr; + gap: 16px; + + } + + .bottom-card-description { + font-size: 14px; + } } @media screen and (max-width: 992px) { @@ -124,18 +181,15 @@ body { } -@media screen and (min-width:415px) { - .main-banner-mobile, .middle-banner-mobile { - display: none; +@media screen and (min-width: 769px) and (max-width: 1200px) { + .top-cards { + grid-template-columns: repeat(2, max-content); } } -@media screen and (max-width:1024px) { - .top-infocard { - display: flex; - align-items: center; - justify-content: center; - padding: 80px 26px 96px; +@media screen and (min-width: 769px) and (max-width: 992px) { + .bottom-card-description { + max-width: 280px; } } @@ -146,8 +200,4 @@ body { } } -@media screen and (min-width: 769px) and (max-width: 1200px) { - .top-cards { - grid-template-columns: repeat(2, max-content); - } -} + diff --git a/index.html b/index.html index 5dbe5e1..4c39724 100644 --- a/index.html +++ b/index.html @@ -66,6 +66,26 @@ Banner do Meio Desktop Banner do Meio Mobile +
+
+
+ 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.

+
+
+
\ No newline at end of file