diff --git a/assets/images/top-card-image-1.svg b/assets/images/top-card-image-1.svg new file mode 100644 index 0000000..c38d0e3 --- /dev/null +++ b/assets/images/top-card-image-1.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/images/top-card-image-2.svg b/assets/images/top-card-image-2.svg new file mode 100644 index 0000000..2040b41 --- /dev/null +++ b/assets/images/top-card-image-2.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/assets/images/top-card-image-3.svg b/assets/images/top-card-image-3.svg new file mode 100644 index 0000000..463bc1d --- /dev/null +++ b/assets/images/top-card-image-3.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/assets/styles/main.css b/assets/styles/main.css index 1a8c47c..61330ec 100644 --- a/assets/styles/main.css +++ b/assets/styles/main.css @@ -55,7 +55,35 @@ body { line-height: 24px; } +.top-cards{ + padding: 74px 0; + background: #F0F0F0; + display: grid; + grid-template-columns: repeat(3, max-content); /*divide em 3, e cada espaço o tamanho do card. OU 1f=1 fraçao (poderia ser 1f, 1f, 1f)*/ + gap: 20px; /*espaçamento entre eles*/ + justify-content: center; +} +.top-card{ + display: flex; + flex-direction: column; /*alinhar por coluna*/ + align-items: center; + background: #FFFFFF; + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); + padding: 26px 26px 34px; +} + +.top-card-image{ + display: block; /*mexer com tamanho pading de imagem*/ + margin-bottom: 26px; +} + +.top-card-description{ + max-width: 300px; + font-size: 16px; + line-height: 24px; + text-align: center; +} @media screen and (max-width: 414px) { /*esse pixel pq é o tamanho maximo da imagem banner mobile*/ @@ -64,6 +92,13 @@ body { } } +@media screen and (max-width: 768px) { + .top-cards{ + grid-template-columns: 1fr; /*uma coluna unica ocupa todo o espaço*/ + padding: 36px 26px; + } +} + @media screen and (max-width: 992px) { .top-infocard{ flex-direction: column; @@ -96,6 +131,12 @@ body { } } +@media screen and (min-width: 769px) and (max-width: 1200px) { + .top-cards{ + grid-template-columns: repeat(2, max-content); /*limitar ate 2 colunas / tb da pra testar usando 1fr*/ + } +} + @media screen and (min-width: 415px) { /*esse pixel pq é o tamanho maximo da imagem banner mobile*/ .main-banner-mobile{ diff --git a/index.html b/index.html index ac989dc..0f52bf4 100644 --- a/index.html +++ b/index.html @@ -41,6 +41,26 @@ Banner infocard + +
+
+ Icone 1 + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+ +
+ Icone 2 + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+ +
+ Icone 3 + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

+
+
\ No newline at end of file