diff --git a/assets/styles/main.css b/assets/styles/main.css index d10f1a1..2a856bc 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -62,7 +62,6 @@ body { .top-cards { gap: 21px; display: grid; - background: #F0F0F0; justify-content: center; grid-template-columns: repeat(3, max-content); } @@ -88,10 +87,17 @@ body { } .middle-banners { + background: #E0E0E0; + margin: 80px 0 62px; +} + +.middle-banners-wrapper { gap: 39px; display: flex; - padding: 80px 72px; + padding: 0 72px; justify-content: center; + position: relative; + top: 62px; } .middle-banner { @@ -104,6 +110,66 @@ body { height: 100%; } +.bottom-cards { + } + +.bottom-cards-wrapper { + display: grid; + grid-template-columns: repeat(4, max-content); + justify-content: center; + gap: 16px; + +} + +.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; + font-size: 16px; + line-height: 24px; + text-align: center; +} + +.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; +} + @media screen and (max-width: 414px) { .main-banner-desktop { display: none; diff --git a/index.html b/index.html index 05ff954..dfd5453 100644 --- a/index.html +++ b/index.html @@ -74,19 +74,66 @@
-
-
- Banner do Meio Um +
+
+
+ Banner do Meio Um +
+
+ Banner do Meio Dois +
-
- Banner do Meio Dois +
+ Banner do Meio Tres
-
- Banner do Meio Tres +
+ +
+
+
+ Imagem do Primeiro Card do 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 do 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 do 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 do 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. +

+
+