116 lines
4.2 KiB
React
116 lines
4.2 KiB
React
|
import React, { useState } from "react";
|
||
|
|
import './PersPastelStyle.css';
|
||
|
|
|
||
|
|
function Pastel() {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="container-title">Pastel</div>
|
||
|
|
<main>
|
||
|
|
<div className="container-img-1">
|
||
|
|
{/* Contenido de tu contenedor de imagen */}
|
||
|
|
</div>
|
||
|
|
<div className="container-info-product">
|
||
|
|
<div className="container-price">
|
||
|
|
<span>Pastel Arcoiris</span>
|
||
|
|
<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 className="botones-pastel">
|
||
|
|
<button className="boton-1">
|
||
|
|
Vanilla Rainbow Cake
|
||
|
|
</button>
|
||
|
|
<button className="boton-2">
|
||
|
|
Confetti Cake
|
||
|
|
</button>
|
||
|
|
<button className="boton-3">
|
||
|
|
Black & White Cake with Chocolate Fudge
|
||
|
|
</button>
|
||
|
|
<button className="boton-4">
|
||
|
|
Chocolate Fudge Cake
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="mb-6">
|
||
|
|
<p className="label-text-pers">Inscription (30 Character Limit)</p>
|
||
|
|
<input className="input-text-pers"
|
||
|
|
type="text"
|
||
|
|
id="inscription"
|
||
|
|
name="inscription"
|
||
|
|
placeholder="Enter your text"
|
||
|
|
maxLength="30"
|
||
|
|
/>
|
||
|
|
</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>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default Pastel;
|