diff --git a/index.html b/index.html index fc2ee76..cdddb02 100644 --- a/index.html +++ b/index.html @@ -39,6 +39,32 @@ Computadores + +
+
+ Shopping + +

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

+
+ +
+ Bolsa de compras + +

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

+
+ +
+ Moeda + +

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

+
+
\ No newline at end of file diff --git a/src/assets/css/style.css b/src/assets/css/style.css index 4342ec4..867ff80 100644 --- a/src/assets/css/style.css +++ b/src/assets/css/style.css @@ -9,6 +9,11 @@ font-family: 'Inter', sans-serif; } +body { + background-color: #F0F0F0; + overflow-x: hidden; +} + header { width: 100%; height: 100px; @@ -58,6 +63,36 @@ header { margin-right: 124px; } +/* SECTION 3 */ + +.section3 { + padding: 74px 0; + display: grid; + /* O max-content preenche 100% do espaço disponível, no caso respeitando o tamanho dos card. */ + grid-template-columns: repeat(3, max-content); + justify-content: center; + gap: 20px; + background-color: #E5E5E5; + flex-wrap: wrap; +} + +.card { + text-align: center; + background-color: #FFFFFF; + padding: 34px 26px; + flex-direction: column; + box-shadow: 0px 4px 20px 0px #0000003B; +} + +.card img { + padding-bottom: 26px; +} + +.card p { + line-height: 24px; + max-width: 300px; +} + /* RESPONSIVIDADE -> NOTEBOOK */ @media screen and (min-width: 993px) and (max-width: 1280px) { @@ -66,6 +101,12 @@ header { } } +@media screen and (min-width: 769px) and (max-width: 1200px) { + .section3 { + grid-template-columns: repeat(2, max-content); + } +} + /* RESPONSIVIDADE -> TABLET */ @media screen and (max-width: 992px) { @@ -88,7 +129,23 @@ header { .container-img img { width: 100%; max-width: 240px; - margin: 67px 88px 157px 88px; + margin: 67px 0 157px 0; + } +} + +@media screen and (max-width: 768px) { + .section3 { + grid-template-columns: 1fr; + padding: 37px 0; + gap: 16px; + } + + .card { + margin: 0 32px; + } + + .card p { + max-width: none; } } diff --git a/src/assets/svg/bolsa.svg b/src/assets/svg/bolsa.svg deleted file mode 100644 index d330029..0000000 --- a/src/assets/svg/bolsa.svg +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - diff --git a/src/assets/svg/compra.svg b/src/assets/svg/compra.svg deleted file mode 100644 index a48f211..0000000 --- a/src/assets/svg/compra.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/src/assets/svg/compras.svg b/src/assets/svg/compras.svg new file mode 100644 index 0000000..2040b41 --- /dev/null +++ b/src/assets/svg/compras.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/assets/svg/moeda.svg b/src/assets/svg/moeda.svg index ea11a3d..463bc1d 100644 --- a/src/assets/svg/moeda.svg +++ b/src/assets/svg/moeda.svg @@ -1,6 +1,6 @@ - - - + + + diff --git a/src/assets/svg/shopping.svg b/src/assets/svg/shopping.svg index be82592..c38d0e3 100644 --- a/src/assets/svg/shopping.svg +++ b/src/assets/svg/shopping.svg @@ -1,13 +1,13 @@ - - - - - - + + + + + + - - + +