Menu Pasteles
This commit is contained in:
parent
726e494475
commit
ecb7e14a63
|
|
@ -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 */
|
||||
/* ********************************** */
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue