From 9d957c84911eab73106ddae58877439d5ae95ad0 Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Tue, 18 Oct 2022 15:32:06 -0300 Subject: [PATCH 1/4] feat: imagem adicionada. --- src/assets/svg/compras.svg | 12 ++++++++++++ src/assets/svg/moeda.svg | 6 +++--- src/assets/svg/shopping.svg | 16 ++++++++-------- 3 files changed, 23 insertions(+), 11 deletions(-) create mode 100644 src/assets/svg/compras.svg 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 @@ - - - - - - + + + + + + - - + + From aece71ee182edd7bc1056b85322a88a201f1cd88 Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Tue, 18 Oct 2022 15:32:20 -0300 Subject: [PATCH 2/4] imagem removida. --- src/assets/svg/bolsa.svg | 12 ------------ src/assets/svg/compra.svg | 7 ------- 2 files changed, 19 deletions(-) delete mode 100644 src/assets/svg/bolsa.svg delete mode 100644 src/assets/svg/compra.svg 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 @@ - - - - - - - From 43c7abe446da6e3829f5faaf16de062fa52d09f1 Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Tue, 18 Oct 2022 15:32:44 -0300 Subject: [PATCH 3/4] feat(home): criado estrutura HTML da section3. --- index.html | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) 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 From 4d0a25e138d7c7ca38acdc5ccd9ba8e9c7cb25d9 Mon Sep 17 00:00:00 2001 From: Luiz Felipe Silva Date: Tue, 18 Oct 2022 15:33:02 -0300 Subject: [PATCH 4/4] =?UTF-8?q?feat(home):=20criado=20estiliza=C3=A7=C3=A3?= =?UTF-8?q?o=20CSS=20da=20section3.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/style.css | 59 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 58 insertions(+), 1 deletion(-) 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; } }