diff --git a/assets/style/main.css b/assets/style/main.css index ac82621..b0b69d4 100644 --- a/assets/style/main.css +++ b/assets/style/main.css @@ -98,7 +98,8 @@ body { justify-items: center; gap: 40px; margin: 0 72px; - + position: relative; + bottom: -62px; } .middle-cards { @@ -119,6 +120,35 @@ body { } +.bottom-cards { + display: grid; + grid-template-columns: repeat(4, 1fr); + padding: 0 72px; + gap: 16px; + justify-content: center; +} + +.bottom-card { + display: flex; + flex-direction: column; + align-items: center; + background: #FFF; + padding: 35px 32px 65px; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15); +} + +.bottom-card-image { + display: block; + margin-bottom: 14px; +} + +.bottom-card-description { + font-weight: 400; + font-size: 16px; + line-height: 24px; + text-align: center; + max-width: 368px; +} .page-footer { display: flex; diff --git a/index.html b/index.html index adf12ec..01519c8 100644 --- a/index.html +++ b/index.html @@ -74,7 +74,33 @@ - + +
+
+ Imagem 01 do 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 02 do 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 03 do 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 04 do 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.

+
+ +