Personalizar Pastel
This commit is contained in:
xFractu
parent
88327a4941
commit
8a43743bae
|
|
@ -10,10 +10,12 @@
|
|||
"dependencies": {
|
||||
"@emotion/react": "^11.11.4",
|
||||
"@emotion/styled": "^11.11.5",
|
||||
"@mui/material": "^5.15.15",
|
||||
"@mui/material": "^5.15.16",
|
||||
"axios": "^1.6.8",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^5.1.0"
|
||||
"react-icons": "^5.1.0",
|
||||
"react-router-dom": "^6.23.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.66",
|
||||
|
|
@ -1106,22 +1108,22 @@
|
|||
}
|
||||
},
|
||||
"node_modules/@mui/core-downloads-tracker": {
|
||||
"version": "5.15.15",
|
||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz",
|
||||
"integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==",
|
||||
"version": "5.15.16",
|
||||
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.16.tgz",
|
||||
"integrity": "sha512-PTIbMJs5C/vYMfyJNW8ArOezh4eyHkg2pTeA7bBxh2kLP1Uzs0Nm+krXWbWGJPwTWjM8EhnDrr4aCF26+2oleg==",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material": {
|
||||
"version": "5.15.15",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz",
|
||||
"integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==",
|
||||
"version": "5.15.16",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.16.tgz",
|
||||
"integrity": "sha512-ery2hFReewko9gpDBqOr2VmXwQG9ifXofPhGzIx09/b9JqCQC/06kZXZDGGrOTpIddK9HlIf4yrS+G70jPAzUQ==",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.23.9",
|
||||
"@mui/base": "5.0.0-beta.40",
|
||||
"@mui/core-downloads-tracker": "^5.15.15",
|
||||
"@mui/core-downloads-tracker": "^5.15.16",
|
||||
"@mui/system": "^5.15.15",
|
||||
"@mui/types": "^7.2.14",
|
||||
"@mui/utils": "^5.15.14",
|
||||
|
|
@ -1338,6 +1340,14 @@
|
|||
"url": "https://opencollective.com/popperjs"
|
||||
}
|
||||
},
|
||||
"node_modules/@remix-run/router": {
|
||||
"version": "1.16.0",
|
||||
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz",
|
||||
"integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==",
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@rollup/rollup-android-arm-eabi": {
|
||||
"version": "4.14.3",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.3.tgz",
|
||||
|
|
@ -1856,6 +1866,11 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/asynckit": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
|
||||
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
|
||||
},
|
||||
"node_modules/available-typed-arrays": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
|
||||
|
|
@ -1871,6 +1886,16 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.6.8",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
|
||||
"integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.6",
|
||||
"form-data": "^4.0.0",
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/babel-plugin-macros": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
|
||||
|
|
@ -2022,6 +2047,17 @@
|
|||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
|
||||
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw=="
|
||||
},
|
||||
"node_modules/combined-stream": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
|
||||
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
|
||||
"dependencies": {
|
||||
"delayed-stream": "~1.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-map": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
||||
|
|
@ -2175,6 +2211,14 @@
|
|||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/delayed-stream": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
|
||||
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
|
||||
"engines": {
|
||||
"node": ">=0.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/doctrine": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
|
||||
|
|
@ -2815,6 +2859,25 @@
|
|||
"integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.15.6",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
|
||||
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
"url": "https://github.com/sponsors/RubenVerborgh"
|
||||
}
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"debug": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/for-each": {
|
||||
"version": "0.3.3",
|
||||
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
|
||||
|
|
@ -2824,6 +2887,19 @@
|
|||
"is-callable": "^1.1.3"
|
||||
}
|
||||
},
|
||||
"node_modules/form-data": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
|
||||
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
|
||||
"dependencies": {
|
||||
"asynckit": "^0.4.0",
|
||||
"combined-stream": "^1.0.8",
|
||||
"mime-types": "^2.1.12"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 6"
|
||||
}
|
||||
},
|
||||
"node_modules/fs.realpath": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
|
||||
|
|
@ -3666,6 +3742,25 @@
|
|||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-db": {
|
||||
"version": "1.52.0",
|
||||
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
|
||||
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/mime-types": {
|
||||
"version": "2.1.35",
|
||||
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
|
||||
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
|
||||
"dependencies": {
|
||||
"mime-db": "1.52.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
|
|
@ -4014,6 +4109,11 @@
|
|||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
|
||||
|
|
@ -4088,6 +4188,36 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "6.23.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz",
|
||||
"integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.16.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "6.23.0",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz",
|
||||
"integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==",
|
||||
"dependencies": {
|
||||
"@remix-run/router": "1.16.0",
|
||||
"react-router": "6.23.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=16.8",
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-transition-group": {
|
||||
"version": "4.4.5",
|
||||
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
|
||||
|
|
|
|||
|
|
@ -12,10 +12,12 @@
|
|||
"dependencies": {
|
||||
"@emotion/react": "^11.11.4",
|
||||
"@emotion/styled": "^11.11.5",
|
||||
"@mui/material": "^5.15.15",
|
||||
"@mui/material": "^5.15.16",
|
||||
"axios": "^1.6.8",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-icons": "^5.1.0"
|
||||
"react-icons": "^5.1.0",
|
||||
"react-router-dom": "^6.23.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.2.66",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,116 @@
|
|||
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;
|
||||
|
|
@ -0,0 +1,407 @@
|
|||
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;500;700&display=swap');
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Ubuntu';
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.container-title {
|
||||
padding: 30px;
|
||||
background-color: #eee;
|
||||
margin-bottom: 50px;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.container-img-1 {
|
||||
background-color: #f7f7f9;
|
||||
background-image: url('assets/pastel1.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: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.pastel-Type{
|
||||
font-size: 18px;
|
||||
font-weight: lighter;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
|
|
@ -1,12 +1,25 @@
|
|||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
//import LoginForm from './LoginForm.jsx'
|
||||
//import './index.css'
|
||||
import React from 'react';
|
||||
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
import AppInicio from './AppInicio.jsx'
|
||||
import PersPastel1 from './PersPastel1.jsx'
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
{/*<LoginForm />*/}
|
||||
<AppInicio/>
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route path = "/" element = {<AppInicio/>}/>
|
||||
<Route path = "/personalizarPastel1" element = {<PersPastel1/>}/>
|
||||
</Routes>
|
||||
</Router>
|
||||
</React.StrictMode>,
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue