diff --git a/assets/imagens/bottom-infocard-image1.png b/assets/imagens/bottom-card-image1.png similarity index 100% rename from assets/imagens/bottom-infocard-image1.png rename to assets/imagens/bottom-card-image1.png diff --git a/assets/imagens/bottom-infocard-image2.png b/assets/imagens/bottom-card-image2.png similarity index 100% rename from assets/imagens/bottom-infocard-image2.png rename to assets/imagens/bottom-card-image2.png diff --git a/assets/imagens/bottom-infocard-image3.png b/assets/imagens/bottom-card-image3.png similarity index 100% rename from assets/imagens/bottom-infocard-image3.png rename to assets/imagens/bottom-card-image3.png diff --git a/assets/imagens/bottom-infocard-image4.png b/assets/imagens/bottom-card-image4.png similarity index 100% rename from assets/imagens/bottom-infocard-image4.png rename to assets/imagens/bottom-card-image4.png diff --git a/assets/imagens/bottom-infocard-image.png b/assets/imagens/bottom-infocard-image.png new file mode 100644 index 0000000..0594593 Binary files /dev/null and b/assets/imagens/bottom-infocard-image.png differ diff --git a/assets/imagens/top-infocard-image1.png b/assets/imagens/top-card-image1.png similarity index 100% rename from assets/imagens/top-infocard-image1.png rename to assets/imagens/top-card-image1.png diff --git a/assets/imagens/top-infocard-image2.png b/assets/imagens/top-card-image2.png similarity index 100% rename from assets/imagens/top-infocard-image2.png rename to assets/imagens/top-card-image2.png diff --git a/assets/imagens/top-infocard-image3.png b/assets/imagens/top-card-image3.png similarity index 100% rename from assets/imagens/top-infocard-image3.png rename to assets/imagens/top-card-image3.png diff --git a/assets/styles/main.css b/assets/styles/main.css index 2b864cd..45ec528 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap'); * { margin: 0; @@ -92,7 +92,7 @@ body { text-align: center; } -/* Cria cards bottom desktop e mobile*/ +/* Cria cards de baixo desktop e mobile*/ .bottom-card-image { display: block; margin-bottom: 14px; @@ -128,6 +128,34 @@ body { font-size: 16px; } +/*Cria bottom infocards desktop e mobile*/ +.bottom-infocard { + display: flex; + align-items: center; + justify-content: center; + padding: 142px 0 180px; +} + +.bottom-infocard-image { + margin-right: 40px; +} + +.bottom-infocard-text { + max-width: 550px; +} + +.bottom-infocard-title { + margin-bottom: 18px; + font-weight: 600; + font-size: 32px; + line-height: 1; +} + +.bottom-infocard-description { + font-size: 16px; + line-height: 24px; +} + /*MEDIAS QUERIES*/ @media screen and (max-width: 414px) { .main-banner-desktop, @@ -187,6 +215,25 @@ body { width: 100%; max-width: 240px; } + + .bottom-infocard { + flex-direction: column; + padding: 80px 0 136px; + } + + .bottom-infocard-image { + width: 100%; + max-width: 596px; + margin: 0 0 50px; + } + + .bottom-infocard-text { + padding: 0 26px; + } + + .bottom-infocard-title { + font-size: 24px; + } } @media screen and (min-width: 769px) and (max-width: 1200px) { @@ -206,4 +253,12 @@ body { max-width: 520px; margin-right: 70px; } + + .bottom-infocard-image { + max-width: 480px; + } + + .bottom-infocard-text { + max-width: 400px; + } } \ No newline at end of file diff --git a/index.html b/index.html index 7bdf019..279cb5d 100644 --- a/index.html +++ b/index.html @@ -45,7 +45,7 @@
- Imagem do Primeiro Card do Topo + Imagem do Primeiro Card do Topo

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

- Imagem do Segundo Card do Topo + Imagem do Segundo Card do Topo

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

- Imagem do Terceiro Card do Topo + Imagem do Terceiro Card do Topo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. @@ -77,38 +77,53 @@

- +
- Imagem do Primeiro Card de Baixo + 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 + 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 + 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 + 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.

+ + +
+ Banner Infocard de Baixo + +
+

Lorem ipsum dolor sit amet

+ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. + Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis. + Donec finibus turpis vitae lectus interdum rutrum vitae sed augue. +

+
+
\ No newline at end of file