PastelesRutas
This commit is contained in:
parent
f1cf6d70bc
commit
2b8c95c661
|
|
@ -44,6 +44,18 @@ function App() {
|
|||
navigate("/");
|
||||
};
|
||||
|
||||
const redirectToChocolate = ()=>{
|
||||
navigate("/Pasteles/ChocolateBlanco")
|
||||
};
|
||||
|
||||
const redirectToMoka = ()=>{
|
||||
navigate("/Pasteles/PastelMoka")
|
||||
};
|
||||
|
||||
const redirectToChocolate2 = ()=>{
|
||||
navigate("/Pasteles/PastelChocolate")
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<body>
|
||||
|
|
@ -114,11 +126,11 @@ function App() {
|
|||
<div class="container-categories">
|
||||
<div class="card-category category-moca">
|
||||
<p>Pasteles Personalizados</p>
|
||||
<span>Ver más</span>
|
||||
<span onClick={redirectPersonalizarPastelArcoiris}>Ver más</span>
|
||||
</div>
|
||||
<div class="card-category category-expreso">
|
||||
<p>Pasteles en linea </p>
|
||||
<span>Ver más</span>
|
||||
<span onClick={redirectToPasteles}>Ver más</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -129,8 +141,7 @@ function App() {
|
|||
|
||||
<div class="container-options">
|
||||
<span class="active">Destacados</span>
|
||||
<span>Más recientes</span>
|
||||
<span>Mejores Vendidos</span>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="container-products">
|
||||
|
|
@ -140,12 +151,7 @@ function App() {
|
|||
<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>
|
||||
|
|
@ -158,8 +164,8 @@ function App() {
|
|||
<i class="fa-regular fa-star"></i>
|
||||
</div>
|
||||
<h3>Pastel Chocolate Blanco</h3>
|
||||
<span class="add-cart">
|
||||
<LuShoppingBasket className="icono-basket-card"/>
|
||||
<span class="add-cart" onClick={redirectToChocolate}>
|
||||
<FaRegEye className="icono-eye"/>
|
||||
</span>
|
||||
<p class="price">$603<span>$670</span></p>
|
||||
</div>
|
||||
|
|
@ -173,12 +179,7 @@ function App() {
|
|||
/>
|
||||
<span class="discount">-30%</span>
|
||||
<div class="button-group">
|
||||
<span>
|
||||
<FaRegEye className="icono-eye"/>
|
||||
</span>
|
||||
<span>
|
||||
<CiHeart className="icono-heart"/>
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -191,8 +192,9 @@ function App() {
|
|||
<i class="fa-regular fa-star"></i>
|
||||
</div>
|
||||
<h3>Pastel de Moka</h3>
|
||||
<span class="add-cart">
|
||||
<LuShoppingBasket className="icono-basket-card"/>
|
||||
|
||||
<span class="add-cart" onClick={redirectToMoka}>
|
||||
<FaRegEye className="icono-eye"/>
|
||||
</span>
|
||||
<p class="price">$560 <span>$800</span></p>
|
||||
</div>
|
||||
|
|
@ -206,12 +208,7 @@ function App() {
|
|||
/>
|
||||
|
||||
<div class="button-group">
|
||||
<span>
|
||||
<FaRegEye className="icono-eye"/>
|
||||
</span>
|
||||
<span>
|
||||
<CiHeart className="icono-heart"/>
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -224,8 +221,8 @@ function App() {
|
|||
<i class="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h3>Pastel de Chocolate</h3>
|
||||
<span class="add-cart">
|
||||
<LuShoppingBasket className="icono-basket-card"/>
|
||||
<span class="add-cart" onClick={redirectToChocolate2}>
|
||||
<FaRegEye className="icono-eye"/>
|
||||
</span>
|
||||
<p class="price">$350</p>
|
||||
</div>
|
||||
|
|
@ -235,12 +232,7 @@ function App() {
|
|||
<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>
|
||||
|
|
@ -254,7 +246,7 @@ function App() {
|
|||
</div>
|
||||
<h3>Pastel de Zanahoria</h3>
|
||||
<span class="add-cart" >
|
||||
<LuShoppingBasket className="icono-basket-card"/>
|
||||
<FaRegEye className="icono-eye"/>
|
||||
</span>
|
||||
<p class="price">$450</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -40,10 +40,34 @@ function AppPasteles() {
|
|||
};
|
||||
|
||||
const redirectInicio = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
const redirectToChocolate = ()=>{
|
||||
navigate("/Pasteles/ChocolateBlanco")
|
||||
};
|
||||
|
||||
const redirectToMoka = ()=>{
|
||||
navigate("/Pasteles/PastelMoka")
|
||||
};
|
||||
|
||||
const redirectToChocolate2 = ()=>{
|
||||
navigate("/Pasteles/PastelChocolate")
|
||||
};
|
||||
|
||||
const redirectToPastelZanahoria = ()=>{
|
||||
navigate("/Pasteles/PastelZanahoria")
|
||||
};
|
||||
|
||||
const redirectToPastelFrambuesa = ()=>{
|
||||
navigate("/Pasteles/PastelFrambuesa")
|
||||
};
|
||||
|
||||
const redirectToPastelCajeta = ()=>{
|
||||
navigate("/Pasteles/PastelCajeta")
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<body>
|
||||
|
|
@ -121,15 +145,10 @@ function AppPasteles() {
|
|||
|
||||
<div class="card-product">
|
||||
<div class="container-img">
|
||||
<img src={PastelEditado1} alt="Cafe Irish" />
|
||||
<img src={PastelEditado1} alt="Pastel Chocolate Blanco" />
|
||||
<span class="discount">-10%</span>
|
||||
<div class="button-group">
|
||||
<span>
|
||||
<FaRegEye className="icono-eye"/>
|
||||
</span>
|
||||
<span>
|
||||
<CiHeart className="icono-heart"/>
|
||||
</span>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -143,27 +162,20 @@ function AppPasteles() {
|
|||
</div>
|
||||
<h3 className='heading-3'>Pastel Chocolate Blanco</h3>
|
||||
|
||||
<span class="add-cart">
|
||||
<LuShoppingBasket className="icono-basket-card"/>
|
||||
<span class= "add-cart" onClick={redirectToChocolate}>
|
||||
<FaRegEye className="icono-eye" />
|
||||
</span>
|
||||
<p class="price">$603<span>$670</span></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-product1">
|
||||
<div class="card-product">
|
||||
<div class="container-img">
|
||||
<img
|
||||
src={PastelEditado2}
|
||||
alt="Cafe incafe-ingles.jpg"
|
||||
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>
|
||||
|
|
@ -176,8 +188,8 @@ function AppPasteles() {
|
|||
<i class="fa-regular fa-star"></i>
|
||||
</div>
|
||||
<h3>Pastel de Moka</h3>
|
||||
<span class="add-cart">
|
||||
<LuShoppingBasket className="icono-basket-card"/>
|
||||
<span class="add-cart" onClick={redirectToMoka}>
|
||||
<FaRegEye className="icono-eye" />
|
||||
</span>
|
||||
<p class="price">$560 <span>$800</span></p>
|
||||
</div>
|
||||
|
|
@ -189,14 +201,7 @@ function AppPasteles() {
|
|||
src={PastelEditado3}
|
||||
alt="Cafe Australiano"
|
||||
/>
|
||||
|
||||
<div class="button-group">
|
||||
<span>
|
||||
<FaRegEye className="icono-eye"/>
|
||||
</span>
|
||||
<span>
|
||||
<CiHeart className="icono-heart"/>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -209,8 +214,8 @@ function AppPasteles() {
|
|||
<i class="fa-solid fa-star"></i>
|
||||
</div>
|
||||
<h3>Pastel de Chocolate</h3>
|
||||
<span class="add-cart">
|
||||
<LuShoppingBasket className="icono-basket-card"/>
|
||||
<span class="add-cart" onClick={redirectToChocolate2}>
|
||||
<FaRegEye className="icono-eye" />
|
||||
</span>
|
||||
<p class="price">$350</p>
|
||||
</div>
|
||||
|
|
@ -220,12 +225,8 @@ function AppPasteles() {
|
|||
<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>
|
||||
|
|
@ -238,8 +239,8 @@ function AppPasteles() {
|
|||
<i class="fa-regular fa-star"></i>
|
||||
</div>
|
||||
<h3>Pastel de Zanahoria</h3>
|
||||
<span class="add-cart">
|
||||
<LuShoppingBasket className="icono-basket-card"/>
|
||||
<span class="add-cart" onClick={redirectToPastelZanahoria}>
|
||||
<FaRegEye className="icono-eye" />
|
||||
</span>
|
||||
<p class="price">$450</p>
|
||||
</div>
|
||||
|
|
@ -250,12 +251,8 @@ function AppPasteles() {
|
|||
<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>
|
||||
|
|
@ -268,8 +265,8 @@ function AppPasteles() {
|
|||
<i class="fa-regular fa-star"></i>
|
||||
</div>
|
||||
<h3>Pastel Frambuesa</h3>
|
||||
<span class="add-cart">
|
||||
<LuShoppingBasket className="icono-basket-card"/>
|
||||
<span class="add-cart" onClick={redirectToPastelFrambuesa}>
|
||||
<FaRegEye className="icono-eye" />
|
||||
</span>
|
||||
<p class="price">$300 </p>
|
||||
</div>
|
||||
|
|
@ -283,12 +280,8 @@ function AppPasteles() {
|
|||
/>
|
||||
<span class="discount">-22%</span>
|
||||
<div class="button-group">
|
||||
<span>
|
||||
<FaRegEye className="icono-eye"/>
|
||||
</span>
|
||||
<span>
|
||||
<CiHeart className="icono-heart"/>
|
||||
</span>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -300,9 +293,9 @@ function AppPasteles() {
|
|||
<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"/>
|
||||
<h3>Pastel de Cajeta</h3>
|
||||
<span class="add-cart" onClick={redirectToPastelCajeta}>
|
||||
<FaRegEye className="icono-eye" />
|
||||
</span>
|
||||
<p class="price">$390 <span>$500</span></p>
|
||||
</div>
|
||||
|
|
@ -311,111 +304,11 @@ function AppPasteles() {
|
|||
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,580 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;500;700&display=swap');
|
||||
|
||||
|
||||
|
||||
|
||||
.main-pers-pastel {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
margin-bottom: 80px;
|
||||
font-family: 'Ubuntu';
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
margin-top: 20px;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.titulo-Pastel{
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
/* ********************************** */
|
||||
/* HEADER */
|
||||
/* ********************************** */
|
||||
.container-hero {
|
||||
background-color: var(--background-color);
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.customer-support {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.customer-support i {
|
||||
font-size: 3.3rem;
|
||||
}
|
||||
|
||||
.content-customer-support {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.container-logo i {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.container-logo h1 a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
font-size: 3rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.container-user {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.container-user .fa-user {
|
||||
font-size: 3rem;
|
||||
color: var(--primary-color);
|
||||
padding-right: 2.5rem;
|
||||
border-right: 1px solid #e2e2e2;
|
||||
}
|
||||
|
||||
.container-user .fa-basket-shopping {
|
||||
font-size: 3rem;
|
||||
color: var(--primary-color);
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.content-shopping-cart {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* ************* NAVBAR ************* */
|
||||
.container-navbar {
|
||||
background-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.navbar .fa-bars {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.menu {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
|
||||
}
|
||||
|
||||
.menu li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.menu a {
|
||||
text-decoration: none;
|
||||
font-size: 1.3rem;
|
||||
color: var(--dark-color);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.menu a::after {
|
||||
content: '';
|
||||
width: 1.5rem;
|
||||
height: 1px;
|
||||
background-color: #fff;
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 50%);
|
||||
opacity: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.menu a:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.menu a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 2rem;
|
||||
background-color: #fff;
|
||||
height: 4.4rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.search-form input {
|
||||
outline: none;
|
||||
font-family: inherit;
|
||||
border: none;
|
||||
width: 25rem;
|
||||
font-size: 1.4rem;
|
||||
padding: 0 2rem;
|
||||
color: #777;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-form input::-webkit-search-cancel-button {
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.search-form .btn-search {
|
||||
border: none;
|
||||
background-color: var(--primary-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.btn-search i {
|
||||
font-size: 2rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.container-title {
|
||||
padding: 30px;
|
||||
background-color: #eee;
|
||||
margin-bottom: 50px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.chocolate-blanco {
|
||||
background-color: #f7f7f9;
|
||||
background-image: url('/assets/pastel-zarza.jpg');
|
||||
flex: 1;
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
padding-top: 60.4%;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.container-info-product {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.container-price {
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.container-price span {
|
||||
font-size: 24px;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.container-details-product {
|
||||
padding: 30px 0;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
.opcionesPers{
|
||||
|
||||
}
|
||||
|
||||
.textPersPastel{
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pastel-Type{
|
||||
font-size: 18px;
|
||||
font-weight: 900;
|
||||
font-weight: lighter;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pastel-Type1{
|
||||
font-size: 18px;
|
||||
font-weight: lighter;
|
||||
margin-bottom: 10px;
|
||||
color: #8B374A;
|
||||
}
|
||||
|
||||
.botones-pastel{
|
||||
display: flex;
|
||||
gap: 4;
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
|
||||
.boton-1{
|
||||
margin-right: 10px;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 14px 28px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
background-color: #8B374A
|
||||
}
|
||||
|
||||
.boton-1:hover {
|
||||
background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
|
||||
}
|
||||
|
||||
.boton-1:active {
|
||||
transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */
|
||||
}
|
||||
|
||||
.boton-2{
|
||||
margin-right: 10px;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 14px 28px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
background-color: #8B374A
|
||||
}
|
||||
|
||||
.boton-2:hover {
|
||||
background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
|
||||
}
|
||||
|
||||
.boton-2:active {
|
||||
transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */
|
||||
}
|
||||
|
||||
.boton-3{
|
||||
margin-right: 10px;
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 14px 28px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
background-color: #8B374A
|
||||
}
|
||||
|
||||
.boton-3:hover {
|
||||
background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
|
||||
}
|
||||
|
||||
.boton-3:active {
|
||||
transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */
|
||||
}
|
||||
|
||||
.boton-4{
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 14px 28px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
background-color: #8B374A
|
||||
}
|
||||
|
||||
.boton-4:hover {
|
||||
background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
|
||||
}
|
||||
|
||||
.boton-4:active {
|
||||
transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */
|
||||
}
|
||||
|
||||
.label-text-pers{
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
font-weight: lighter;
|
||||
margin-bottom: 10px;
|
||||
|
||||
}
|
||||
|
||||
.input-text-pers{
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
margin-bottom: 10px;
|
||||
text-indent: 5px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
width: 100px;
|
||||
color: #222;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.form-group select {
|
||||
width: 300px;
|
||||
border: none;
|
||||
padding: 12px 15px;
|
||||
background-color: #f7f7f7;
|
||||
outline: none;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.btn-clean {
|
||||
border: none;
|
||||
background: none;
|
||||
color: #666;
|
||||
margin-left: 120px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-clean:hover {
|
||||
color: #1bbeb4;
|
||||
}
|
||||
|
||||
.container-add-cart {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding-bottom: 30px;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
}
|
||||
|
||||
.container-quantity {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input-quantity {
|
||||
background-color: #f7f7f7;
|
||||
border: none;
|
||||
padding: 10px;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.input-quantity:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.input-quantity::-webkit-inner-spin-button,
|
||||
.input-quantity::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
|
||||
.fa-chevron-down:hover {
|
||||
color: #1bbeb4;
|
||||
}
|
||||
|
||||
.fa-chevron-up:hover {
|
||||
color: #1bbeb4;
|
||||
}
|
||||
|
||||
.btn-add-to-cart{
|
||||
border: none;
|
||||
color: white;
|
||||
padding: 14px 28px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
background-color: #8B374A
|
||||
}
|
||||
|
||||
.btn-add-to-cart:hover {
|
||||
background-color: #4b1e29; /* Cambia el color al pasar el cursor sobre el botón */
|
||||
}
|
||||
|
||||
.btn-add-to-cart:active {
|
||||
transform: scale(0.90); /* Reduce ligeramente el tamaño del botón cuando se hace clic */
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container-description,
|
||||
.container-additional-information,
|
||||
.container-reviews {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.title-description,
|
||||
.title-additional-information,
|
||||
.title-reviews {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.title-description h4,
|
||||
.title-additional-information h4,
|
||||
.title-reviews h4 {
|
||||
font-weight: 300;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.text-description,
|
||||
.text-additional-information,
|
||||
.text-reviews {
|
||||
font-size: 13px;
|
||||
color: #252525;
|
||||
line-height: 22px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
.container-social {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid #e4e4e4;
|
||||
}
|
||||
|
||||
.container-social span {
|
||||
font-weight: 300;
|
||||
color: #252525;
|
||||
}
|
||||
|
||||
.container-buttons-social {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container-buttons-social a:link,
|
||||
.container-buttons-social a:visited {
|
||||
color: #666;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.container-buttons-social a:hover {
|
||||
color: #1bbeb4;
|
||||
}
|
||||
|
||||
.container-related-products h2 {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.card-list-products {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.card {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-img {
|
||||
background: transparent;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-img img {
|
||||
height: 400px;
|
||||
object-fit: cover;
|
||||
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.info-card {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.text-product {
|
||||
color: #252525;
|
||||
font-weight: 300;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.text-product h3{
|
||||
color: inherit;
|
||||
font-weight: inherit;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.text-product h3:hover{
|
||||
color: #1bbeb4;
|
||||
}
|
||||
|
||||
.text-product p{
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.text-product p:hover{
|
||||
color: #1bbeb4;
|
||||
}
|
||||
|
||||
footer {
|
||||
padding: 30px;
|
||||
background-color: #eee;
|
||||
margin-top: 50px;
|
||||
color: #222;
|
||||
}
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
import { RiCustomerService2Fill } from "react-icons/ri";
|
||||
import { FaUser } from "react-icons/fa";
|
||||
import { LuShoppingBasket } from "react-icons/lu";
|
||||
import { FaMagnifyingGlass } from "react-icons/fa6";
|
||||
import { CiHeart } from "react-icons/ci";
|
||||
import { FaRegEye } from "react-icons/fa";
|
||||
import { CiShare2 } from "react-icons/ci";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import './ChocolateBlanco.css';
|
||||
|
||||
|
||||
function ChocolateBlanco() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const redirectPersonalizarPastelArcoiris = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/PersonalizarPastel/PastelArcoiris");
|
||||
};
|
||||
|
||||
const redirectToPedidos = () => {
|
||||
navigate("/Pedidos");
|
||||
|
||||
};
|
||||
|
||||
const redirectToPasteles = () => {
|
||||
navigate("/Pasteles");
|
||||
};
|
||||
|
||||
const redirectInicio = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<header>
|
||||
|
||||
<div className="container-hero">
|
||||
<div className="container hero">
|
||||
<div className="customer-support">
|
||||
<RiCustomerService2Fill className="icono-cliente" />
|
||||
<div className="content-customer-support">
|
||||
|
||||
<span className="text">Soporte al cliente</span>
|
||||
<span className="number">123-456-7890</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-logo">
|
||||
<i className="fa-solid fa-mug-hot"></i>
|
||||
<h1 className="logo"><a href="/">Pasteleria RAPI</a></h1>
|
||||
</div>
|
||||
|
||||
<div className="container-user">
|
||||
<FaUser className="icono-User"/>
|
||||
<LuShoppingBasket className="icono-basket"/>
|
||||
<div className="content-shopping-cart">
|
||||
<span className="text">Carrito</span>
|
||||
<span className="number">(0)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="container-navbar">
|
||||
<nav className="navbar container">
|
||||
<i className="fa-solid fa-bars"></i>
|
||||
<ul className="menu">
|
||||
<li><a href="#" onClick={redirectInicio}>Inicio</a></li>
|
||||
<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
|
||||
<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
|
||||
<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
</ul>
|
||||
|
||||
<form className="search-form">
|
||||
<input type="search" placeholder="Buscar..." />
|
||||
<button className="btn-search">
|
||||
<FaMagnifyingGlass className="icono-lupa" />
|
||||
</button>
|
||||
</form>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
<main className = "main-pers-pastel">
|
||||
<div className="container-img-2" >
|
||||
{}
|
||||
</div>
|
||||
<div className="container-info-product">
|
||||
<div className="container-price">
|
||||
|
||||
<h1 className="titulo-Pastel">Pastel De Chocolate</h1>
|
||||
<i className="fa-solid fa-angle-right"></i>
|
||||
</div>
|
||||
|
||||
<div className="container-details-product">
|
||||
<div className="form-group">
|
||||
<div className="OpcionesPers">
|
||||
<h2 className="textPersPastel">Precio:</h2><p className="pastel-Type1">$400</p>
|
||||
|
||||
<h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1">Grande</p>
|
||||
|
||||
<div className="mb-4">
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-add-cart">
|
||||
<button className="btn-add-to-cart">
|
||||
<i className="fa-solid fa-plus"></i>
|
||||
Añadir al carrito
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="container-description">
|
||||
<div className="title-description">
|
||||
<h4>Descripción</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-description">
|
||||
<p>
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
||||
Laboriosam iure provident atque voluptatibus reiciendis quae
|
||||
rerum, maxime placeat enim cupiditate voluptatum, temporibus
|
||||
quis iusto. Enim eum qui delectus deleniti similique? Lorem,
|
||||
ipsum dolor sit amet consectetur adipisicing elit. Sint autem
|
||||
magni earum est dolorem saepe perferendis repellat ipsam
|
||||
laudantium cum assumenda quidem quam, vero similique? Iusto
|
||||
officiis quod blanditiis iste?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-additional-information">
|
||||
<div className="title-additional-information">
|
||||
<h4>Información adicional</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-additional-information hidden">
|
||||
<p>-----------</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-reviews">
|
||||
<div className="title-reviews">
|
||||
<h4>Reseñas</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-reviews hidden">
|
||||
<p>-----------</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-social">
|
||||
<span>Compartir</span>
|
||||
<div className="container-buttons-social">
|
||||
<a href="#"><i className="fa-solid fa-envelope"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-facebook"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-twitter"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-instagram"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-pinterest"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container container-footer">
|
||||
<div class="menu-footer">
|
||||
<div class="contact-info">
|
||||
<p class="title-footer">Información de Contacto</p>
|
||||
<ul>
|
||||
<li>
|
||||
Avenida Xalapa
|
||||
</li>
|
||||
<li>Teléfono: 2288520821</li>
|
||||
<li>EmaiL: cdgn_17@hotmail.com</li>
|
||||
</ul>
|
||||
<div class="social-icons">
|
||||
<span class="facebook">
|
||||
<i class="fa-brands fa-facebook-f"></i>
|
||||
</span>
|
||||
<span class="twitter">
|
||||
<i class="fa-brands fa-twitter"></i>
|
||||
</span>
|
||||
<span class="youtube">
|
||||
<i class="fa-brands fa-youtube"></i>
|
||||
</span>
|
||||
<span class="pinterest">
|
||||
<i class="fa-brands fa-pinterest-p"></i>
|
||||
</span>
|
||||
<span class="instagram">
|
||||
<i class="fa-brands fa-instagram"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="information">
|
||||
<p class="title-footer">Información</p>
|
||||
<ul>
|
||||
<li><a href="#">Acerca de Nosotros</a></li>
|
||||
<li><a href="#">Información de Entrega</a></li>
|
||||
<li><a href="#">Politicas de Privacidad</a></li>
|
||||
<li><a href="#">Términos y condiciones</a></li>
|
||||
<li><a href="#">Contactános</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="my-account">
|
||||
<p class="title-footer">Mi cuenta</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="#">Mi cuenta</a></li>
|
||||
<li><a href="#">Pedidos</a></li>
|
||||
<li><a href="#">Boletín</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="copyright">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChocolateBlanco;
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
import { RiCustomerService2Fill } from "react-icons/ri";
|
||||
import { FaUser } from "react-icons/fa";
|
||||
import { LuShoppingBasket } from "react-icons/lu";
|
||||
import { FaMagnifyingGlass } from "react-icons/fa6";
|
||||
import { CiHeart } from "react-icons/ci";
|
||||
import { FaRegEye } from "react-icons/fa";
|
||||
import { CiShare2 } from "react-icons/ci";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import './ChocolateBlanco.css';
|
||||
|
||||
|
||||
function PastelCajeta() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const redirectPersonalizarPastelArcoiris = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/PersonalizarPastel/PastelArcoiris");
|
||||
};
|
||||
|
||||
const redirectToPedidos = () => {
|
||||
navigate("/Pedidos");
|
||||
|
||||
};
|
||||
|
||||
const redirectToPasteles = () => {
|
||||
navigate("/Pasteles");
|
||||
};
|
||||
|
||||
const redirectInicio = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<header>
|
||||
|
||||
<div className="container-hero">
|
||||
<div className="container hero">
|
||||
<div className="customer-support">
|
||||
<RiCustomerService2Fill className="icono-cliente" />
|
||||
<div className="content-customer-support">
|
||||
|
||||
<span className="text">Soporte al cliente</span>
|
||||
<span className="number">123-456-7890</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-logo">
|
||||
<i className="fa-solid fa-mug-hot"></i>
|
||||
<h1 className="logo"><a href="/">Pasteleria RAPI</a></h1>
|
||||
</div>
|
||||
|
||||
<div className="container-user">
|
||||
<FaUser className="icono-User"/>
|
||||
<LuShoppingBasket className="icono-basket"/>
|
||||
<div className="content-shopping-cart">
|
||||
<span className="text">Carrito</span>
|
||||
<span className="number">(0)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="container-navbar">
|
||||
<nav className="navbar container">
|
||||
<i className="fa-solid fa-bars"></i>
|
||||
<ul className="menu">
|
||||
<li><a href="#" onClick={redirectInicio}>Inicio</a></li>
|
||||
<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
|
||||
<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
|
||||
<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
</ul>
|
||||
|
||||
<form className="search-form">
|
||||
<input type="search" placeholder="Buscar..." />
|
||||
<button className="btn-search">
|
||||
<FaMagnifyingGlass className="icono-lupa" />
|
||||
</button>
|
||||
</form>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
<main className = "main-pers-pastel">
|
||||
<div className="container-img-7" >
|
||||
{}
|
||||
</div>
|
||||
<div className="container-info-product">
|
||||
<div className="container-price">
|
||||
|
||||
<h1 className="titulo-Pastel">Pastel De Chocolate</h1>
|
||||
<i className="fa-solid fa-angle-right"></i>
|
||||
</div>
|
||||
|
||||
<div className="container-details-product">
|
||||
<div className="form-group">
|
||||
<div className="OpcionesPers">
|
||||
<h2 className="textPersPastel">Precio:</h2><p className="pastel-Type1">$400</p>
|
||||
|
||||
<h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1">Grande</p>
|
||||
|
||||
<div className="mb-4">
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-add-cart">
|
||||
<button className="btn-add-to-cart">
|
||||
<i className="fa-solid fa-plus"></i>
|
||||
Añadir al carrito
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="container-description">
|
||||
<div className="title-description">
|
||||
<h4>Descripción</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-description">
|
||||
<p>
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
||||
Laboriosam iure provident atque voluptatibus reiciendis quae
|
||||
rerum, maxime placeat enim cupiditate voluptatum, temporibus
|
||||
quis iusto. Enim eum qui delectus deleniti similique? Lorem,
|
||||
ipsum dolor sit amet consectetur adipisicing elit. Sint autem
|
||||
magni earum est dolorem saepe perferendis repellat ipsam
|
||||
laudantium cum assumenda quidem quam, vero similique? Iusto
|
||||
officiis quod blanditiis iste?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-additional-information">
|
||||
<div className="title-additional-information">
|
||||
<h4>Información adicional</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-additional-information hidden">
|
||||
<p>-----------</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-reviews">
|
||||
<div className="title-reviews">
|
||||
<h4>Reseñas</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-reviews hidden">
|
||||
<p>-----------</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-social">
|
||||
<span>Compartir</span>
|
||||
<div className="container-buttons-social">
|
||||
<a href="#"><i className="fa-solid fa-envelope"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-facebook"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-twitter"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-instagram"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-pinterest"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container container-footer">
|
||||
<div class="menu-footer">
|
||||
<div class="contact-info">
|
||||
<p class="title-footer">Información de Contacto</p>
|
||||
<ul>
|
||||
<li>
|
||||
Avenida Xalapa
|
||||
</li>
|
||||
<li>Teléfono: 2288520821</li>
|
||||
<li>EmaiL: cdgn_17@hotmail.com</li>
|
||||
</ul>
|
||||
<div class="social-icons">
|
||||
<span class="facebook">
|
||||
<i class="fa-brands fa-facebook-f"></i>
|
||||
</span>
|
||||
<span class="twitter">
|
||||
<i class="fa-brands fa-twitter"></i>
|
||||
</span>
|
||||
<span class="youtube">
|
||||
<i class="fa-brands fa-youtube"></i>
|
||||
</span>
|
||||
<span class="pinterest">
|
||||
<i class="fa-brands fa-pinterest-p"></i>
|
||||
</span>
|
||||
<span class="instagram">
|
||||
<i class="fa-brands fa-instagram"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="information">
|
||||
<p class="title-footer">Información</p>
|
||||
<ul>
|
||||
<li><a href="#">Acerca de Nosotros</a></li>
|
||||
<li><a href="#">Información de Entrega</a></li>
|
||||
<li><a href="#">Politicas de Privacidad</a></li>
|
||||
<li><a href="#">Términos y condiciones</a></li>
|
||||
<li><a href="#">Contactános</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="my-account">
|
||||
<p class="title-footer">Mi cuenta</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="#">Mi cuenta</a></li>
|
||||
<li><a href="#">Pedidos</a></li>
|
||||
<li><a href="#">Boletín</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="copyright">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default PastelCajeta;
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
import { RiCustomerService2Fill } from "react-icons/ri";
|
||||
import { FaUser } from "react-icons/fa";
|
||||
import { LuShoppingBasket } from "react-icons/lu";
|
||||
import { FaMagnifyingGlass } from "react-icons/fa6";
|
||||
import { CiHeart } from "react-icons/ci";
|
||||
import { FaRegEye } from "react-icons/fa";
|
||||
import { CiShare2 } from "react-icons/ci";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import './ChocolateBlanco.css';
|
||||
|
||||
|
||||
function PastelChocolate() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const redirectPersonalizarPastelArcoiris = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/PersonalizarPastel/PastelArcoiris");
|
||||
};
|
||||
|
||||
const redirectToPedidos = () => {
|
||||
navigate("/Pedidos");
|
||||
|
||||
};
|
||||
|
||||
const redirectToPasteles = () => {
|
||||
navigate("/Pasteles");
|
||||
};
|
||||
|
||||
const redirectInicio = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<header>
|
||||
|
||||
<div className="container-hero">
|
||||
<div className="container hero">
|
||||
<div className="customer-support">
|
||||
<RiCustomerService2Fill className="icono-cliente" />
|
||||
<div className="content-customer-support">
|
||||
|
||||
<span className="text">Soporte al cliente</span>
|
||||
<span className="number">123-456-7890</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-logo">
|
||||
<i className="fa-solid fa-mug-hot"></i>
|
||||
<h1 className="logo"><a href="/">Pasteleria RAPI</a></h1>
|
||||
</div>
|
||||
|
||||
<div className="container-user">
|
||||
<FaUser className="icono-User"/>
|
||||
<LuShoppingBasket className="icono-basket"/>
|
||||
<div className="content-shopping-cart">
|
||||
<span className="text">Carrito</span>
|
||||
<span className="number">(0)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="container-navbar">
|
||||
<nav className="navbar container">
|
||||
<i className="fa-solid fa-bars"></i>
|
||||
<ul className="menu">
|
||||
<li><a href="#" onClick={redirectInicio}>Inicio</a></li>
|
||||
<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
|
||||
<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
|
||||
<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<form className="search-form">
|
||||
<input type="search" placeholder="Buscar..." />
|
||||
<button className="btn-search">
|
||||
<FaMagnifyingGlass className="icono-lupa" />
|
||||
</button>
|
||||
</form>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
<main className = "main-pers-pastel">
|
||||
<div className="container-img-4" >
|
||||
|
||||
</div>
|
||||
<div className="container-info-product">
|
||||
<div className="container-price">
|
||||
|
||||
<h1 className="titulo-Pastel">Pastel De Chocolate</h1>
|
||||
<i className="fa-solid fa-angle-right"></i>
|
||||
</div>
|
||||
|
||||
<div className="container-details-product">
|
||||
<div className="form-group">
|
||||
<div className="OpcionesPers">
|
||||
<h2 className="textPersPastel">Personaliza tu pastel</h2>
|
||||
<div className="mb-4">
|
||||
<p className="pastel-Type">Tipo de Pastel</p>
|
||||
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-add-cart">
|
||||
<button className="btn-add-to-cart">
|
||||
<i className="fa-solid fa-plus"></i>
|
||||
Añadir al carrito
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="container-description">
|
||||
<div className="title-description">
|
||||
<h4>Descripción</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-description">
|
||||
<p>
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
||||
Laboriosam iure provident atque voluptatibus reiciendis quae
|
||||
rerum, maxime placeat enim cupiditate voluptatum, temporibus
|
||||
quis iusto. Enim eum qui delectus deleniti similique? Lorem,
|
||||
ipsum dolor sit amet consectetur adipisicing elit. Sint autem
|
||||
magni earum est dolorem saepe perferendis repellat ipsam
|
||||
laudantium cum assumenda quidem quam, vero similique? Iusto
|
||||
officiis quod blanditiis iste?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-additional-information">
|
||||
<div className="title-additional-information">
|
||||
<h4>Información adicional</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-additional-information hidden">
|
||||
<p>-----------</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-reviews">
|
||||
<div className="title-reviews">
|
||||
<h4>Reseñas</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-reviews hidden">
|
||||
<p>-----------</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-social">
|
||||
<span>Compartir</span>
|
||||
<div className="container-buttons-social">
|
||||
<a href="#"><i className="fa-solid fa-envelope"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-facebook"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-twitter"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-instagram"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-pinterest"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container container-footer">
|
||||
<div class="menu-footer">
|
||||
<div class="contact-info">
|
||||
<p class="title-footer">Información de Contacto</p>
|
||||
<ul>
|
||||
<li>
|
||||
Avenida Xalapa
|
||||
</li>
|
||||
<li>Teléfono: 2288520821</li>
|
||||
<li>EmaiL: cdgn_17@hotmail.com</li>
|
||||
</ul>
|
||||
<div class="social-icons">
|
||||
<span class="facebook">
|
||||
<i class="fa-brands fa-facebook-f"></i>
|
||||
</span>
|
||||
<span class="twitter">
|
||||
<i class="fa-brands fa-twitter"></i>
|
||||
</span>
|
||||
<span class="youtube">
|
||||
<i class="fa-brands fa-youtube"></i>
|
||||
</span>
|
||||
<span class="pinterest">
|
||||
<i class="fa-brands fa-pinterest-p"></i>
|
||||
</span>
|
||||
<span class="instagram">
|
||||
<i class="fa-brands fa-instagram"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="information">
|
||||
<p class="title-footer">Información</p>
|
||||
<ul>
|
||||
<li><a href="#">Acerca de Nosotros</a></li>
|
||||
<li><a href="#">Información de Entrega</a></li>
|
||||
<li><a href="#">Politicas de Privacidad</a></li>
|
||||
<li><a href="#">Términos y condiciones</a></li>
|
||||
<li><a href="#">Contactános</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="my-account">
|
||||
<p class="title-footer">Mi cuenta</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="#">Mi cuenta</a></li>
|
||||
<li><a href="#">Pedidos</a></li>
|
||||
<li><a href="#">Boletín</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="copyright">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default PastelChocolate;
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
import { RiCustomerService2Fill } from "react-icons/ri";
|
||||
import { FaUser } from "react-icons/fa";
|
||||
import { LuShoppingBasket } from "react-icons/lu";
|
||||
import { FaMagnifyingGlass } from "react-icons/fa6";
|
||||
import { CiHeart } from "react-icons/ci";
|
||||
import { FaRegEye } from "react-icons/fa";
|
||||
import { CiShare2 } from "react-icons/ci";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import './ChocolateBlanco.css';
|
||||
|
||||
|
||||
function PastelFrambuesa() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const redirectPersonalizarPastelArcoiris = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/PersonalizarPastel/PastelArcoiris");
|
||||
};
|
||||
|
||||
const redirectToPedidos = () => {
|
||||
navigate("/Pedidos");
|
||||
|
||||
};
|
||||
|
||||
const redirectToPasteles = () => {
|
||||
navigate("/Pasteles");
|
||||
};
|
||||
|
||||
const redirectInicio = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<header>
|
||||
|
||||
<div className="container-hero">
|
||||
<div className="container hero">
|
||||
<div className="customer-support">
|
||||
<RiCustomerService2Fill className="icono-cliente" />
|
||||
<div className="content-customer-support">
|
||||
|
||||
<span className="text">Soporte al cliente</span>
|
||||
<span className="number">123-456-7890</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-logo">
|
||||
<i className="fa-solid fa-mug-hot"></i>
|
||||
<h1 className="logo"><a href="/">Pasteleria RAPI</a></h1>
|
||||
</div>
|
||||
|
||||
<div className="container-user">
|
||||
<FaUser className="icono-User"/>
|
||||
<LuShoppingBasket className="icono-basket"/>
|
||||
<div className="content-shopping-cart">
|
||||
<span className="text">Carrito</span>
|
||||
<span className="number">(0)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="container-navbar">
|
||||
<nav className="navbar container">
|
||||
<i className="fa-solid fa-bars"></i>
|
||||
<ul className="menu">
|
||||
<li><a href="#" onClick={redirectInicio}>Inicio</a></li>
|
||||
<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
|
||||
<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
|
||||
<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
</ul>
|
||||
|
||||
<form className="search-form">
|
||||
<input type="search" placeholder="Buscar..." />
|
||||
<button className="btn-search">
|
||||
<FaMagnifyingGlass className="icono-lupa" />
|
||||
</button>
|
||||
</form>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
<main className = "main-pers-pastel">
|
||||
<div className="container-img-6" >
|
||||
{}
|
||||
</div>
|
||||
<div className="container-info-product">
|
||||
<div className="container-price">
|
||||
|
||||
<h1 className="titulo-Pastel">Pastel De Chocolate</h1>
|
||||
<i className="fa-solid fa-angle-right"></i>
|
||||
</div>
|
||||
|
||||
<div className="container-details-product">
|
||||
<div className="form-group">
|
||||
<div className="OpcionesPers">
|
||||
<h2 className="textPersPastel">Precio:</h2><p className="pastel-Type1">$400</p>
|
||||
|
||||
<h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1">Grande</p>
|
||||
|
||||
<div className="mb-4">
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-add-cart">
|
||||
<button className="btn-add-to-cart">
|
||||
<i className="fa-solid fa-plus"></i>
|
||||
Añadir al carrito
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="container-description">
|
||||
<div className="title-description">
|
||||
<h4>Descripción</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-description">
|
||||
<p>
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
||||
Laboriosam iure provident atque voluptatibus reiciendis quae
|
||||
rerum, maxime placeat enim cupiditate voluptatum, temporibus
|
||||
quis iusto. Enim eum qui delectus deleniti similique? Lorem,
|
||||
ipsum dolor sit amet consectetur adipisicing elit. Sint autem
|
||||
magni earum est dolorem saepe perferendis repellat ipsam
|
||||
laudantium cum assumenda quidem quam, vero similique? Iusto
|
||||
officiis quod blanditiis iste?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-additional-information">
|
||||
<div className="title-additional-information">
|
||||
<h4>Información adicional</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-additional-information hidden">
|
||||
<p>-----------</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-reviews">
|
||||
<div className="title-reviews">
|
||||
<h4>Reseñas</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-reviews hidden">
|
||||
<p>-----------</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-social">
|
||||
<span>Compartir</span>
|
||||
<div className="container-buttons-social">
|
||||
<a href="#"><i className="fa-solid fa-envelope"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-facebook"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-twitter"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-instagram"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-pinterest"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container container-footer">
|
||||
<div class="menu-footer">
|
||||
<div class="contact-info">
|
||||
<p class="title-footer">Información de Contacto</p>
|
||||
<ul>
|
||||
<li>
|
||||
Avenida Xalapa
|
||||
</li>
|
||||
<li>Teléfono: 2288520821</li>
|
||||
<li>EmaiL: cdgn_17@hotmail.com</li>
|
||||
</ul>
|
||||
<div class="social-icons">
|
||||
<span class="facebook">
|
||||
<i class="fa-brands fa-facebook-f"></i>
|
||||
</span>
|
||||
<span class="twitter">
|
||||
<i class="fa-brands fa-twitter"></i>
|
||||
</span>
|
||||
<span class="youtube">
|
||||
<i class="fa-brands fa-youtube"></i>
|
||||
</span>
|
||||
<span class="pinterest">
|
||||
<i class="fa-brands fa-pinterest-p"></i>
|
||||
</span>
|
||||
<span class="instagram">
|
||||
<i class="fa-brands fa-instagram"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="information">
|
||||
<p class="title-footer">Información</p>
|
||||
<ul>
|
||||
<li><a href="#">Acerca de Nosotros</a></li>
|
||||
<li><a href="#">Información de Entrega</a></li>
|
||||
<li><a href="#">Politicas de Privacidad</a></li>
|
||||
<li><a href="#">Términos y condiciones</a></li>
|
||||
<li><a href="#">Contactános</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="my-account">
|
||||
<p class="title-footer">Mi cuenta</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="#">Mi cuenta</a></li>
|
||||
<li><a href="#">Pedidos</a></li>
|
||||
<li><a href="#">Boletín</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="copyright">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default PastelFrambuesa;
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
import { RiCustomerService2Fill } from "react-icons/ri";
|
||||
import { FaUser } from "react-icons/fa";
|
||||
import { LuShoppingBasket } from "react-icons/lu";
|
||||
import { FaMagnifyingGlass } from "react-icons/fa6";
|
||||
import { CiHeart } from "react-icons/ci";
|
||||
import { FaRegEye } from "react-icons/fa";
|
||||
import { CiShare2 } from "react-icons/ci";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import './ChocolateBlanco.css';
|
||||
|
||||
|
||||
function PastelMoka() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const redirectPersonalizarPastelArcoiris = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/PersonalizarPastel/PastelArcoiris");
|
||||
};
|
||||
|
||||
const redirectToPedidos = () => {
|
||||
navigate("/Pedidos");
|
||||
|
||||
};
|
||||
|
||||
const redirectToPasteles = () => {
|
||||
navigate("/Pasteles");
|
||||
};
|
||||
|
||||
const redirectInicio = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<header>
|
||||
|
||||
<div className="container-hero">
|
||||
<div className="container hero">
|
||||
<div className="customer-support">
|
||||
<RiCustomerService2Fill className="icono-cliente" />
|
||||
<div className="content-customer-support">
|
||||
|
||||
<span className="text">Soporte al cliente</span>
|
||||
<span className="number">123-456-7890</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-logo">
|
||||
<i className="fa-solid fa-mug-hot"></i>
|
||||
<h1 className="logo"><a href="/">Pasteleria RAPI</a></h1>
|
||||
</div>
|
||||
|
||||
<div className="container-user">
|
||||
<FaUser className="icono-User"/>
|
||||
<LuShoppingBasket className="icono-basket"/>
|
||||
<div className="content-shopping-cart">
|
||||
<span className="text">Carrito</span>
|
||||
<span className="number">(0)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="container-navbar">
|
||||
<nav className="navbar container">
|
||||
<i className="fa-solid fa-bars"></i>
|
||||
<ul className="menu">
|
||||
<li><a href="#" onClick={redirectInicio}>Inicio</a></li>
|
||||
<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
|
||||
<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
|
||||
<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
<form className="search-form">
|
||||
<input type="search" placeholder="Buscar..." />
|
||||
<button className="btn-search">
|
||||
<FaMagnifyingGlass className="icono-lupa" />
|
||||
</button>
|
||||
</form>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
<main className = "main-pers-pastel">
|
||||
<div className="container-img-3" >
|
||||
|
||||
</div>
|
||||
<div className="container-info-product">
|
||||
<div className="container-price">
|
||||
|
||||
<h1 className="titulo-Pastel">Pastel De Moka</h1>
|
||||
<i className="fa-solid fa-angle-right"></i>
|
||||
</div>
|
||||
|
||||
<div className="container-details-product">
|
||||
<div className="form-group">
|
||||
<div className="OpcionesPers">
|
||||
<h2 className="textPersPastel">Personaliza tu pastel</h2>
|
||||
<div className="mb-4">
|
||||
<p className="pastel-Type">Tipo de Pastel</p>
|
||||
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-add-cart">
|
||||
<button className="btn-add-to-cart">
|
||||
<i className="fa-solid fa-plus"></i>
|
||||
Añadir al carrito
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="container-description">
|
||||
<div className="title-description">
|
||||
<h4>Descripción</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-description">
|
||||
<p>
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
||||
Laboriosam iure provident atque voluptatibus reiciendis quae
|
||||
rerum, maxime placeat enim cupiditate voluptatum, temporibus
|
||||
quis iusto. Enim eum qui delectus deleniti similique? Lorem,
|
||||
ipsum dolor sit amet consectetur adipisicing elit. Sint autem
|
||||
magni earum est dolorem saepe perferendis repellat ipsam
|
||||
laudantium cum assumenda quidem quam, vero similique? Iusto
|
||||
officiis quod blanditiis iste?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-additional-information">
|
||||
<div className="title-additional-information">
|
||||
<h4>Información adicional</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-additional-information hidden">
|
||||
<p>-----------</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-reviews">
|
||||
<div className="title-reviews">
|
||||
<h4>Reseñas</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-reviews hidden">
|
||||
<p>-----------</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-social">
|
||||
<span>Compartir</span>
|
||||
<div className="container-buttons-social">
|
||||
<a href="#"><i className="fa-solid fa-envelope"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-facebook"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-twitter"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-instagram"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-pinterest"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container container-footer">
|
||||
<div class="menu-footer">
|
||||
<div class="contact-info">
|
||||
<p class="title-footer">Información de Contacto</p>
|
||||
<ul>
|
||||
<li>
|
||||
Avenida Xalapa
|
||||
</li>
|
||||
<li>Teléfono: 2288520821</li>
|
||||
<li>EmaiL: cdgn_17@hotmail.com</li>
|
||||
</ul>
|
||||
<div class="social-icons">
|
||||
<span class="facebook">
|
||||
<i class="fa-brands fa-facebook-f"></i>
|
||||
</span>
|
||||
<span class="twitter">
|
||||
<i class="fa-brands fa-twitter"></i>
|
||||
</span>
|
||||
<span class="youtube">
|
||||
<i class="fa-brands fa-youtube"></i>
|
||||
</span>
|
||||
<span class="pinterest">
|
||||
<i class="fa-brands fa-pinterest-p"></i>
|
||||
</span>
|
||||
<span class="instagram">
|
||||
<i class="fa-brands fa-instagram"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="information">
|
||||
<p class="title-footer">Información</p>
|
||||
<ul>
|
||||
<li><a href="#">Acerca de Nosotros</a></li>
|
||||
<li><a href="#">Información de Entrega</a></li>
|
||||
<li><a href="#">Politicas de Privacidad</a></li>
|
||||
<li><a href="#">Términos y condiciones</a></li>
|
||||
<li><a href="#">Contactános</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="my-account">
|
||||
<p class="title-footer">Mi cuenta</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="#">Mi cuenta</a></li>
|
||||
<li><a href="#">Pedidos</a></li>
|
||||
<li><a href="#">Boletín</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="copyright">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default PastelMoka;
|
||||
|
|
@ -0,0 +1,245 @@
|
|||
import React, { useState } from "react";
|
||||
|
||||
import { RiCustomerService2Fill } from "react-icons/ri";
|
||||
import { FaUser } from "react-icons/fa";
|
||||
import { LuShoppingBasket } from "react-icons/lu";
|
||||
import { FaMagnifyingGlass } from "react-icons/fa6";
|
||||
import { CiHeart } from "react-icons/ci";
|
||||
import { FaRegEye } from "react-icons/fa";
|
||||
import { CiShare2 } from "react-icons/ci";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import './ChocolateBlanco.css';
|
||||
|
||||
|
||||
function PastelZanahoria() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const redirectPersonalizarPastelArcoiris = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/PersonalizarPastel/PastelArcoiris");
|
||||
};
|
||||
|
||||
const redirectToPedidos = () => {
|
||||
navigate("/Pedidos");
|
||||
|
||||
};
|
||||
|
||||
const redirectToPasteles = () => {
|
||||
navigate("/Pasteles");
|
||||
};
|
||||
|
||||
const redirectInicio = () => {
|
||||
// Redirige a la página del hotel cuando se hace clic en el botón
|
||||
navigate("/");
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<header>
|
||||
|
||||
<div className="container-hero">
|
||||
<div className="container hero">
|
||||
<div className="customer-support">
|
||||
<RiCustomerService2Fill className="icono-cliente" />
|
||||
<div className="content-customer-support">
|
||||
|
||||
<span className="text">Soporte al cliente</span>
|
||||
<span className="number">123-456-7890</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-logo">
|
||||
<i className="fa-solid fa-mug-hot"></i>
|
||||
<h1 className="logo"><a href="/">Pasteleria RAPI</a></h1>
|
||||
</div>
|
||||
|
||||
<div className="container-user">
|
||||
<FaUser className="icono-User"/>
|
||||
<LuShoppingBasket className="icono-basket"/>
|
||||
<div className="content-shopping-cart">
|
||||
<span className="text">Carrito</span>
|
||||
<span className="number">(0)</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="container-navbar">
|
||||
<nav className="navbar container">
|
||||
<i className="fa-solid fa-bars"></i>
|
||||
<ul className="menu">
|
||||
<li><a href="#" onClick={redirectInicio}>Inicio</a></li>
|
||||
<li><a href="#" onClick={redirectToPasteles} >Pasteles</a></li>
|
||||
<li><a href="#" onClick={redirectPersonalizarPastelArcoiris}>Personalizar Pastel</a></li>
|
||||
<li><a href="/Pedidos" onClick={redirectToPedidos}>Pedidos</a></li>
|
||||
<li><a href="#">Blog</a></li>
|
||||
</ul>
|
||||
|
||||
<form className="search-form">
|
||||
<input type="search" placeholder="Buscar..." />
|
||||
<button className="btn-search">
|
||||
<FaMagnifyingGlass className="icono-lupa" />
|
||||
</button>
|
||||
</form>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
<main className = "main-pers-pastel">
|
||||
<div className="container-img-5" >
|
||||
{}
|
||||
</div>
|
||||
<div className="container-info-product">
|
||||
<div className="container-price">
|
||||
|
||||
<h1 className="titulo-Pastel">Pastel De Chocolate</h1>
|
||||
<i className="fa-solid fa-angle-right"></i>
|
||||
</div>
|
||||
|
||||
<div className="container-details-product">
|
||||
<div className="form-group">
|
||||
<div className="OpcionesPers">
|
||||
<h2 className="textPersPastel">Precio:</h2><p className="pastel-Type1">$400</p>
|
||||
|
||||
<h2 className="textPersPastel">Tamaño:</h2><p className="pastel-Type1">Grande</p>
|
||||
|
||||
<div className="mb-4">
|
||||
</div>
|
||||
<div className="mb-6">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-add-cart">
|
||||
<button className="btn-add-to-cart">
|
||||
<i className="fa-solid fa-plus"></i>
|
||||
Añadir al carrito
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="container-description">
|
||||
<div className="title-description">
|
||||
<h4>Descripción</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-description">
|
||||
<p>
|
||||
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
|
||||
Laboriosam iure provident atque voluptatibus reiciendis quae
|
||||
rerum, maxime placeat enim cupiditate voluptatum, temporibus
|
||||
quis iusto. Enim eum qui delectus deleniti similique? Lorem,
|
||||
ipsum dolor sit amet consectetur adipisicing elit. Sint autem
|
||||
magni earum est dolorem saepe perferendis repellat ipsam
|
||||
laudantium cum assumenda quidem quam, vero similique? Iusto
|
||||
officiis quod blanditiis iste?
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-additional-information">
|
||||
<div className="title-additional-information">
|
||||
<h4>Información adicional</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-additional-information hidden">
|
||||
<p>-----------</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-reviews">
|
||||
<div className="title-reviews">
|
||||
<h4>Reseñas</h4>
|
||||
<i className="fa-solid fa-chevron-down"></i>
|
||||
</div>
|
||||
<div className="text-reviews hidden">
|
||||
<p>-----------</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container-social">
|
||||
<span>Compartir</span>
|
||||
<div className="container-buttons-social">
|
||||
<a href="#"><i className="fa-solid fa-envelope"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-facebook"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-twitter"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-instagram"></i></a>
|
||||
<a href="#"><i className="fa-brands fa-pinterest"></i></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="container container-footer">
|
||||
<div class="menu-footer">
|
||||
<div class="contact-info">
|
||||
<p class="title-footer">Información de Contacto</p>
|
||||
<ul>
|
||||
<li>
|
||||
Avenida Xalapa
|
||||
</li>
|
||||
<li>Teléfono: 2288520821</li>
|
||||
<li>EmaiL: cdgn_17@hotmail.com</li>
|
||||
</ul>
|
||||
<div class="social-icons">
|
||||
<span class="facebook">
|
||||
<i class="fa-brands fa-facebook-f"></i>
|
||||
</span>
|
||||
<span class="twitter">
|
||||
<i class="fa-brands fa-twitter"></i>
|
||||
</span>
|
||||
<span class="youtube">
|
||||
<i class="fa-brands fa-youtube"></i>
|
||||
</span>
|
||||
<span class="pinterest">
|
||||
<i class="fa-brands fa-pinterest-p"></i>
|
||||
</span>
|
||||
<span class="instagram">
|
||||
<i class="fa-brands fa-instagram"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="information">
|
||||
<p class="title-footer">Información</p>
|
||||
<ul>
|
||||
<li><a href="#">Acerca de Nosotros</a></li>
|
||||
<li><a href="#">Información de Entrega</a></li>
|
||||
<li><a href="#">Politicas de Privacidad</a></li>
|
||||
<li><a href="#">Términos y condiciones</a></li>
|
||||
<li><a href="#">Contactános</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="my-account">
|
||||
<p class="title-footer">Mi cuenta</p>
|
||||
|
||||
<ul>
|
||||
<li><a href="#">Mi cuenta</a></li>
|
||||
<li><a href="#">Pedidos</a></li>
|
||||
<li><a href="#">Boletín</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<div class="copyright">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default PastelZanahoria;
|
||||
|
|
@ -207,6 +207,67 @@
|
|||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.container-img-2 {
|
||||
background-color: #f7f7f9;
|
||||
background-image: url('assets/Edicion21.jpg');
|
||||
flex: 1;
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
padding-top: 60.4%;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
.container-img-3 {
|
||||
background-color: #f7f7f9;
|
||||
background-image: url('assets/Edicion12.jpg');
|
||||
flex: 1;
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
padding-top: 60.4%;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
.container-img-4 {
|
||||
background-color: #f7f7f9;
|
||||
background-image: url('assets/Edicion13.jpg');
|
||||
flex: 1;
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
padding-top: 60.4%;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
.container-img-5 {
|
||||
background-color: #f7f7f9;
|
||||
background-image: url('assets/Edicion14.jpg');
|
||||
flex: 1;
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
padding-top: 60.4%;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.container-img-6 {
|
||||
background-color: #f7f7f9;
|
||||
background-image: url('assets/Edicion15.jpg');
|
||||
flex: 1;
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
padding-top: 60.4%;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.container-img-7 {
|
||||
background-color: #f7f7f9;
|
||||
background-image: url('assets/Edicion16.jpg');
|
||||
flex: 1;
|
||||
width: 55%;
|
||||
height: 100%;
|
||||
padding-top: 60.4%;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.imgPastel{
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 132 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 183 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 140 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 123 KiB |
|
|
@ -6,7 +6,12 @@ import PersPastel1 from './PersPastel1.jsx'
|
|||
import Pedidos from './Pedidos.jsx'
|
||||
import Pasteles from './Pasteles.jsx'
|
||||
import LoginForm from './LoginForm.jsx';
|
||||
|
||||
import ChocolateBlanco from './Pasteles/ChocolateBlanco.jsx';
|
||||
import PastelMoka from './Pasteles/PastelMoka.jsx';
|
||||
import PastelChocolate from './Pasteles/PastelChocolate.jsx';
|
||||
import PastelZanahoria from './Pasteles/PastelZanahoria.jsx';
|
||||
import PastelFrambuesa from './Pasteles/PastelFrambuesa.jsx';
|
||||
import PastelCajeta from './Pasteles/PastelCajeta.jsx';
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
|
|
@ -17,6 +22,12 @@ createRoot(document.getElementById('root')).render(
|
|||
<Route path = "/Pedidos" element = {<Pedidos/>}/>
|
||||
<Route path = "/Pasteles" element = {<Pasteles/>}/>
|
||||
<Route path = "/Login" element = {<LoginForm/>}/>
|
||||
<Route path = "/Pasteles/ChocolateBlanco" element = {<ChocolateBlanco/>}/>
|
||||
<Route path = "/Pasteles/PastelMoka" element = {<PastelMoka/>}/>
|
||||
<Route path = "/Pasteles/PastelChocolate" element = {<PastelChocolate/>}/>
|
||||
<Route path = "/Pasteles/PastelZanahoria" element = {<PastelZanahoria/>}/>
|
||||
<Route path = "/Pasteles/PastelFrambuesa" element = {<PastelFrambuesa/>}/>
|
||||
<Route path = "/Pasteles/PastelCajeta" element = {<PastelCajeta/>}/>
|
||||
</Routes>
|
||||
</Router>
|
||||
</React.StrictMode>,
|
||||
|
|
|
|||
Loading…
Reference in New Issue