Menu Pasteles

This commit is contained in:
Cesar.Gomez 2024-05-06 16:09:31 -06:00
parent 726e494475
commit ecb7e14a63
3 changed files with 326 additions and 4 deletions

View File

@ -31,6 +31,13 @@ html {
font-size: 3rem;
}
.heading-2{
text-align: left;
font-weight: 700;
font-size: 3rem;
color: #000000;
}
/* ********************************** */
/* HEADER */
/* ********************************** */
@ -412,8 +419,9 @@ html {
/* Products */
.container-products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
gap: 3rem;
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
gap: 5rem;
margin-bottom: 30px;
}
.card-product {
@ -423,6 +431,17 @@ html {
cursor: pointer;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
border-radius: 30px;
margin-top: 10px;
}
.card-product1 {
background-color: #fff;
padding: 2rem 3rem;
border-radius: 0.5rem;
cursor: pointer;
box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
border-radius: 30px;
margin-top: 10px;
}
.container-img {
@ -563,6 +582,10 @@ html {
margin-left: 0.5rem;
}
.heading-3{
}
/* ********************************** */
/* GALLERY */
/* ********************************** */

View File

@ -69,8 +69,7 @@ function App() {
<FaUser className="icono-User"/>
<LuShoppingBasket className="icono-basket"/>
<div class="content-shopping-cart">
<span class="text">Carrito</span>
<span class="number">(0)</span>
</div>
</div>
</div>

View File

@ -110,7 +110,307 @@ function AppPasteles() {
</section>
<section className="container top-products">
<section class="container top-products">
<h1 class="heading-2"><strong>Productos en linea:</strong> </h1>
<div class="container-options">
</div>
<div class="container-products">
<div class="card-product">
<div class="container-img">
<img src={PastelEditado1} alt="Cafe Irish" />
<span class="discount">-10%</span>
<div class="button-group">
<span>
<FaRegEye className="icono-eye"/>
</span>
<span>
<CiHeart className="icono-heart"/>
</span>
</div>
</div>
<div class="content-card-product">
<div class="stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<h3 className='heading-3'>Pastel Chocolate Blanco</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
</span>
<p class="price">$603<span>$670</span></p>
</div>
</div>
<div class="card-product1">
<div class="container-img">
<img
src={PastelEditado2}
alt="Cafe incafe-ingles.jpg"
/>
<span class="discount">-30%</span>
<div class="button-group">
<span>
<FaRegEye className="icono-eye"/>
</span>
<span>
<CiHeart className="icono-heart"/>
</span>
</div>
</div>
<div class="content-card-product">
<div class="stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<h3>Pastel de Moka</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
</span>
<p class="price">$560 <span>$800</span></p>
</div>
</div>
<div class="card-product">
<div class="container-img">
<img
src={PastelEditado3}
alt="Cafe Australiano"
/>
<div class="button-group">
<span>
<FaRegEye className="icono-eye"/>
</span>
<span>
<CiHeart className="icono-heart"/>
</span>
</div>
</div>
<div class="content-card-product">
<div class="stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<h3>Pastel de Chocolate</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
</span>
<p class="price">$350</p>
</div>
</div>
<div class="card-product">
<div class="container-img">
<img src={PastelEditado4} alt="Moka" />
<div class="button-group">
<span>
<FaRegEye className="icono-eye"/>
</span>
<span>
<CiHeart className="icono-heart"/>
</span>
</div>
</div>
<div class="content-card-product">
<div class="stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<h3>Pastel de Zanahoria</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
</span>
<p class="price">$450</p>
</div>
</div>
<div class="card-product">
<div class="container-img">
<img src={PastelEditado5} alt="Cafe Irish" />
<span class="discount">-13%</span>
<div class="button-group">
<span>
<FaRegEye className="icono-eye"/>
</span>
<span>
<CiHeart className="icono-heart"/>
</span>
</div>
</div>
<div class="content-card-product">
<div class="stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<h3>Pastel Frambuesa</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
</span>
<p class="price">$300 </p>
</div>
</div>
<div class="card-product">
<div class="container-img">
<img
src={PastelEditado6}
alt="Cafe incafe-ingles.jpg"
/>
<span class="discount">-22%</span>
<div class="button-group">
<span>
<FaRegEye className="icono-eye"/>
</span>
<span>
<CiHeart className="icono-heart"/>
</span>
</div>
</div>
<div class="content-card-product">
<div class="stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<h3>Pastel de Moka</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
</span>
<p class="price">$390 <span>$500</span></p>
</div>
</div>
</div>
<div class="container-products">
<div class="card-product">
<div class="container-img">
<img
src={PastelEditado3}
alt="Cafe Australiano"
/>
<span class="discount">-22%</span>
<div class="button-group">
<span>
<FaRegEye className="icono-eye"/>
</span>
<span>
<CiHeart className="icono-heart"/>
</span>
</div>
</div>
<div class="content-card-product">
<div class="stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</div>
<h3>Pastel de Chocolate</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
</span>
<p class="price">$3.20</p>
</div>
</div>
<div class="card-product">
<div class="container-img">
<img src={PastelEditado4} alt="Moka" />
<div class="button-group">
<span>
<FaRegEye className="icono-eye"/>
</span>
<span>
<CiHeart className="icono-heart"/>
</span>
</div>
</div>
<div class="content-card-product">
<div class="stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<h3>Pastel de Zanahoria</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
</span>
<p class="price">$450</p>
</div>
</div>
<div class="card-product">
<div class="container-img">
<img
src={PastelEditado6}
alt="Cafe incafe-ingles.jpg"
/>
<span class="discount">-22%</span>
<div class="button-group">
<span>
<FaRegEye className="icono-eye"/>
</span>
<span>
<CiHeart className="icono-heart"/>
</span>
</div>
</div>
<div class="content-card-product">
<div class="stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-regular fa-star"></i>
<i class="fa-regular fa-star"></i>
</div>
<h3>Pastel de Moka</h3>
<span class="add-cart">
<LuShoppingBasket className="icono-basket-card"/>
</span>
<p class="price">$390 <span>$500</span></p>
</div>
</div>
</div>
</section>