diff --git a/assets/style/main.css b/assets/style/main.css index bcfd086..8f11dac 100644 --- a/assets/style/main.css +++ b/assets/style/main.css @@ -116,14 +116,55 @@ body { width: 100%; } +.infocards-bottom { + display: grid; + justify-content: center; + grid-template-columns: repeat(4,432px); + gap: 16px; + padding: 192px 72px 0 72px; +} + +.infocard-bottom { + height: 332px; + background: #FFFFFF; + box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); +} + +.infocards-bottom-image { + margin: 0 auto; + display: block; + padding-top: 35px; +} + +.infocards-bottom-text { + font-size: 16px; + line-height: 24px; + text-align: center; + padding-top: 15px; +} + + @media screen and (min-width: 769px) and (max-width: 1270px) { .second-infocard { grid-template-columns: repeat(2, 350px); } + + .infocards-bottom { + display: grid; + grid-template-columns: repeat(2, 368px); + max-width: 368px; + width: 100%; + align-items: center; + justify-content: center; + margin: 0 auto; + } + + + } -@media screen and (max-width: 768px) { +@media screen and (max-width:768px){ .first-infocard-title { font-size: 28px; line-height: 34px; @@ -179,11 +220,37 @@ body { column-gap: 14px; } - + + .infocards-bottom { + display: grid; + grid-template-columns: repeat(1, 368px); + max-width: 368px; + width: 100%; + align-items: center; + justify-content: center; + margin: 0 auto; + } + + .infocards-bottom-text { + font-size: 14px; + max-width: 302px; + margin: 0 auto; + } } @media screen and (max-width: 415px) { .image-main-desktop { content: url(../imagem/banner-main-mobile.png); } + + .infocards-bottom { + display: grid; + grid-template-columns: repeat(1, max-content); + max-width: 368px; + width: 100%; + align-items: center; + justify-content: center; + margin: 0 auto; + + } } \ No newline at end of file diff --git a/index.html b/index.html index 8e1c15d..43ad370 100644 --- a/index.html +++ b/index.html @@ -105,7 +105,7 @@
- Icone de uma loja + Icone de um calular
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.