Skip to content

Commit

Permalink
add cards de produtos
Browse files Browse the repository at this point in the history
  • Loading branch information
@Debora-Carvalho
Debora-Carvalho committed Jun 13, 2024
1 parent 4f75bec commit ccb926e
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 8 deletions.
67 changes: 67 additions & 0 deletions css/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}




Expand Down
72 changes: 64 additions & 8 deletions home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,19 +90,75 @@ <h3>Limpeza</h3>
</div>
<div class="container-card-produto">
<div class="card-produto">
<img src="image/imageProdutos/p-pão-bauducco.png" alt="Pão Integral Bauducco">
<img src="image/imageProdutos/p-milhoverde-quero.png" alt="Pão Integral Bauducco">
<button class="botao-favoritar"><i class="fa-regular fa-heart"></i></button>
<h4 class="nome-produto">Pão Integral Bauducco</h4>
<p class="data-validade-produto">28/07/2024</p>
<p class="preco-produto">R$ 2,00</p>
<h4 class="nome-produto">Milho Verde Quero</h4>
<p class="data-validade-produto">12/07/2024</p>
<p class="preco-produto">R$ 2,99</p>
</div>
<div class="card-produto">
<img src="" alt="">
<img src="image/imageProdutos/p-milhoverde-quero.png" alt="Pão Integral Bauducco">
<button class="botao-favoritar"><i class="fa-regular fa-heart"></i></button>
<h4 class="nome-produto"></h4>
<p class="data-validade-produto"></p>
<p class="preco-produto"></p>
<h4 class="nome-produto">Milho Verde Quero</h4>
<p class="data-validade-produto">12/07/2024</p>
<p class="preco-produto">R$ 2,99</p>
</div>
<div class="card-produto">
<img src="image/imageProdutos/p-milhoverde-quero.png" alt="Pão Integral Bauducco">
<button class="botao-favoritar"><i class="fa-regular fa-heart"></i></button>
<h4 class="nome-produto">Milho Verde Quero</h4>
<p class="data-validade-produto">12/07/2024</p>
<p class="preco-produto">R$ 2,99</p>
</div>
<div class="card-produto">
<img src="image/imageProdutos/p-milhoverde-quero.png" alt="Pão Integral Bauducco">
<button class="botao-favoritar"><i class="fa-regular fa-heart"></i></button>
<h4 class="nome-produto">Milho Verde Quero</h4>
<p class="data-validade-produto">12/07/2024</p>
<p class="preco-produto">R$ 2,99</p>
</div>
<div class="card-produto">
<img src="image/imageProdutos/p-milhoverde-quero.png" alt="Pão Integral Bauducco">
<button class="botao-favoritar"><i class="fa-regular fa-heart"></i></button>
<h4 class="nome-produto">Milho Verde Quero</h4>
<p class="data-validade-produto">12/07/2024</p>
<p class="preco-produto">R$ 2,99</p>
</div>
<div class="card-produto">
<img src="image/imageProdutos/p-milhoverde-quero.png" alt="Pão Integral Bauducco">
<button class="botao-favoritar"><i class="fa-regular fa-heart"></i></button>
<h4 class="nome-produto">Milho Verde Quero</h4>
<p class="data-validade-produto">12/07/2024</p>
<p class="preco-produto">R$ 2,99</p>
</div>
<div class="card-produto">
<img src="image/imageProdutos/p-milhoverde-quero.png" alt="Pão Integral Bauducco">
<button class="botao-favoritar"><i class="fa-regular fa-heart"></i></button>
<h4 class="nome-produto">Milho Verde Quero</h4>
<p class="data-validade-produto">12/07/2024</p>
<p class="preco-produto">R$ 2,99</p>
</div>
<div class="card-produto">
<img src="image/imageProdutos/p-milhoverde-quero.png" alt="Pão Integral Bauducco">
<button class="botao-favoritar"><i class="fa-regular fa-heart"></i></button>
<h4 class="nome-produto">Milho Verde Quero</h4>
<p class="data-validade-produto">12/07/2024</p>
<p class="preco-produto">R$ 2,99</p>
</div>
<div class="card-produto">
<img src="image/imageProdutos/p-milhoverde-quero.png" alt="Pão Integral Bauducco">
<button class="botao-favoritar"><i class="fa-regular fa-heart"></i></button>
<h4 class="nome-produto">Milho Verde Quero</h4>
<p class="data-validade-produto">12/07/2024</p>
<p class="preco-produto">R$ 2,99</p>
</div>
<div class="card-produto">
<img src="image/imageProdutos/p-milhoverde-quero.png" alt="Pão Integral Bauducco">
<button class="botao-favoritar"><i class="fa-regular fa-heart"></i></button>
<h4 class="nome-produto">Milho Verde Quero</h4>
<p class="data-validade-produto">12/07/2024</p>
<p class="preco-produto">R$ 2,99</p>
</div>
</div>
</main>
<footer>
Expand Down
Binary file added image/imageProdutos/p-milhoverde-quero.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ccb926e

Please sign in to comment.