From ccb926ed7935298aa367a186aa31be844f25f2db Mon Sep 17 00:00:00 2001 From: Debora-Carvalho Date: Thu, 13 Jun 2024 17:20:39 -0300 Subject: [PATCH] add cards de produtos --- css/home.css | 67 +++++++++++++++++++ home.html | 72 ++++++++++++++++++--- image/imageProdutos/p-milhoverde-quero.png | Bin 0 -> 193168 bytes 3 files changed, 131 insertions(+), 8 deletions(-) create mode 100644 image/imageProdutos/p-milhoverde-quero.png diff --git a/css/home.css b/css/home.css index 28460ae..3601785 100644 --- a/css/home.css +++ b/css/home.css @@ -246,6 +246,73 @@ main { display: block; } +/* ESTILIZAÇÃO CONTAINER DE CARDS DE PRODUTO */ +.container-card-produto { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + margin: 1rem; +} + +.card-produto { + display: flex; + flex-direction: column; + align-items: flex-start; + width: 18%; /* Ajuste conforme necessário para 5 produtos por linha */ + margin: 1rem 0.5rem; + text-align: left; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + border-radius: 10px; + overflow: hidden; + padding: 1rem; + background-color: #fff; +} + +.card-produto img { + width: 100%; + height: auto; + border-radius: 10px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.botao-favoritar { + position: relative; + top: -45px; + left: calc(100% - 40px); + background-color: #464444; + border: none; + border-radius: 50%; + width: 30px; + height: 30px; + display: flex; + justify-content: center; + align-items: center; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + cursor: pointer; +} + +.botao-favoritar i { + color: rgb(85, 84, 84); + font-size: 1rem; +} + +.nome-produto { + font-size: 1rem; + font-weight: bold; + margin: 1rem 0 0.5rem 0; +} + +.data-validade-produto { + color: red; + font-size: 0.9rem; + margin-bottom: 0.5rem; +} + +.preco-produto { + font-size: 1.1rem; + font-weight: bold; +} + diff --git a/home.html b/home.html index be01de7..69492f3 100644 --- a/home.html +++ b/home.html @@ -90,19 +90,75 @@

Limpeza

- Pão Integral Bauducco + Pão Integral Bauducco -

Pão Integral Bauducco

-

28/07/2024

-

R$ 2,00

+

Milho Verde Quero

+

12/07/2024

+

R$ 2,99

- + Pão Integral Bauducco -

-

-

+

Milho Verde Quero

+

12/07/2024

+

R$ 2,99

+
+ Pão Integral Bauducco + +

Milho Verde Quero

+

12/07/2024

+

R$ 2,99

+
+
+ Pão Integral Bauducco + +

Milho Verde Quero

+

12/07/2024

+

R$ 2,99

+
+
+ Pão Integral Bauducco + +

Milho Verde Quero

+

12/07/2024

+

R$ 2,99

+
+
+ Pão Integral Bauducco + +

Milho Verde Quero

+

12/07/2024

+

R$ 2,99

+
+
+ Pão Integral Bauducco + +

Milho Verde Quero

+

12/07/2024

+

R$ 2,99

+
+
+ Pão Integral Bauducco + +

Milho Verde Quero

+

12/07/2024

+

R$ 2,99

+
+
+ Pão Integral Bauducco + +

Milho Verde Quero

+

12/07/2024

+

R$ 2,99

+
+
+ Pão Integral Bauducco + +

Milho Verde Quero

+

12/07/2024

+

R$ 2,99

+