natalia.cancino
/
FrontPastel
1
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
frontend/src/AppInicio.css
View File

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

3
frontend/src/AppInicio.jsx
View File

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

300
frontend/src/Pasteles.jsx
View File

@ -110,7 +110,307 @@ function AppPasteles() {
</section> </section>
<section className="container top-products"> <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>