Personalizar Pastel

This commit is contained in:
xFractu 2024-05-01 15:14:34 -06:00
parent 88327a4941
commit 8a43743bae
6 changed files with 687 additions and 19 deletions

View File

@ -10,10 +10,12 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.11.4", "@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5", "@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.15", "@mui/material": "^5.15.16",
"axios": "^1.6.8",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^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": { "devDependencies": {
"@types/react": "^18.2.66", "@types/react": "^18.2.66",
@ -1106,22 +1108,22 @@
} }
}, },
"node_modules/@mui/core-downloads-tracker": { "node_modules/@mui/core-downloads-tracker": {
"version": "5.15.15", "version": "5.15.16",
"resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.15.tgz", "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.16.tgz",
"integrity": "sha512-aXnw29OWQ6I5A47iuWEI6qSSUfH6G/aCsW9KmW3LiFqr7uXZBK4Ks+z8G+qeIub8k0T5CMqlT2q0L+ZJTMrqpg==", "integrity": "sha512-PTIbMJs5C/vYMfyJNW8ArOezh4eyHkg2pTeA7bBxh2kLP1Uzs0Nm+krXWbWGJPwTWjM8EhnDrr4aCF26+2oleg==",
"funding": { "funding": {
"type": "opencollective", "type": "opencollective",
"url": "https://opencollective.com/mui-org" "url": "https://opencollective.com/mui-org"
} }
}, },
"node_modules/@mui/material": { "node_modules/@mui/material": {
"version": "5.15.15", "version": "5.15.16",
"resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.15.tgz", "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.15.16.tgz",
"integrity": "sha512-3zvWayJ+E1kzoIsvwyEvkTUKVKt1AjchFFns+JtluHCuvxgKcLSRJTADw37k0doaRtVAsyh8bz9Afqzv+KYrIA==", "integrity": "sha512-ery2hFReewko9gpDBqOr2VmXwQG9ifXofPhGzIx09/b9JqCQC/06kZXZDGGrOTpIddK9HlIf4yrS+G70jPAzUQ==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.23.9", "@babel/runtime": "^7.23.9",
"@mui/base": "5.0.0-beta.40", "@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/system": "^5.15.15",
"@mui/types": "^7.2.14", "@mui/types": "^7.2.14",
"@mui/utils": "^5.15.14", "@mui/utils": "^5.15.14",
@ -1338,6 +1340,14 @@
"url": "https://opencollective.com/popperjs" "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": { "node_modules/@rollup/rollup-android-arm-eabi": {
"version": "4.14.3", "version": "4.14.3",
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.14.3.tgz", "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" "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": { "node_modules/available-typed-arrays": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", "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" "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": { "node_modules/babel-plugin-macros": {
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", "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", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
"integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==" "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": { "node_modules/concat-map": {
"version": "0.0.1", "version": "0.0.1",
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@ -2175,6 +2211,14 @@
"url": "https://github.com/sponsors/ljharb" "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": { "node_modules/doctrine": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@ -2815,6 +2859,25 @@
"integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==", "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
"dev": true "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": { "node_modules/for-each": {
"version": "0.3.3", "version": "0.3.3",
"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
@ -2824,6 +2887,19 @@
"is-callable": "^1.1.3" "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": { "node_modules/fs.realpath": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@ -3666,6 +3742,25 @@
"yallist": "^3.0.2" "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": { "node_modules/minimatch": {
"version": "3.1.2", "version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", "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", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" "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": { "node_modules/punycode": {
"version": "2.3.1", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@ -4088,6 +4188,36 @@
"node": ">=0.10.0" "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": { "node_modules/react-transition-group": {
"version": "4.4.5", "version": "4.4.5",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",

View File

@ -12,10 +12,12 @@
"dependencies": { "dependencies": {
"@emotion/react": "^11.11.4", "@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.5", "@emotion/styled": "^11.11.5",
"@mui/material": "^5.15.15", "@mui/material": "^5.15.16",
"axios": "^1.6.8",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^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": { "devDependencies": {
"@types/react": "^18.2.66", "@types/react": "^18.2.66",

View File

@ -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;

View File

@ -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

View File

@ -1,12 +1,25 @@
import React from 'react' import React from 'react';
import ReactDOM from 'react-dom/client' import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
//import LoginForm from './LoginForm.jsx' import { createRoot } from 'react-dom/client';
//import './index.css'
import AppInicio from './AppInicio.jsx' import AppInicio from './AppInicio.jsx'
import PersPastel1 from './PersPastel1.jsx'
ReactDOM.createRoot(document.getElementById('root')).render(
createRoot(document.getElementById('root')).render(
<React.StrictMode> <React.StrictMode>
{/*<LoginForm />*/} <Router>
<AppInicio/> <Routes>
<Route path = "/" element = {<AppInicio/>}/>
<Route path = "/personalizarPastel1" element = {<PersPastel1/>}/>
</Routes>
</Router>
</React.StrictMode>, </React.StrictMode>,
) );