Skip to content

Commit 71ae5ff

Browse files
yuliamontiyuliamonti
committed
Entrega Proyecto Final Monti, App Cosmética Natural, comisión 45060
1 parent 2958669 commit 71ae5ff

24 files changed

+542
-167
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313

1414
# misc
1515
.DS_Store
16+
.env
1617
.env.local
1718
.env.development.local
1819
.env.test.local

‎public/Imagenes/6600824.jpg

367 KB
Loading

‎public/Imagenes/_DSC3489-min.JPG

-656 KB
Binary file not shown.

‎public/Imagenes/_DSC3492-min.JPG

-494 KB
Binary file not shown.

‎public/Imagenes/_DSC3493-min.JPG

-438 KB
Binary file not shown.

‎public/Imagenes/combo-.jpg

2.99 MB
Loading

‎public/Imagenes/mascarilla-cacao-romero.JPG

729 KB
Loading

‎public/Imagenes/mascarilla-cacao.jpg

2.66 MB
Loading

‎public/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
88
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous" />
99
<title>Imperfecta Cosmética Natural</title>
10+
<link rel="icon" href="/public/Imagenes/logoimperfecta.png">
1011
</head>
1112

1213
<body>

‎src/App.css

+217-11
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,250 @@
11
html {
22
font-size: 62.5%;
33
box-sizing: border-box;
4-
background-color: rgb(210, 224, 185);
4+
background-color: #f2ede7;
55
}
6+
67
body {
78
font-size: 16px;
8-
color: grey;
9-
background-image: linear-gradient(to top, var(--rosaclaro) 0%, var(--grisclaro) 100%);
9+
color: rgb(89, 89, 89);
10+
background-color: #f2ede7;
1011

1112
}
12-
*, *:before, *:after {
13+
14+
*,
15+
*:before,
16+
*:after {
1317
box-sizing: inherit;
1418
font-family: Arial, Helvetica, sans-serif;
1519

1620
}
17-
a:-webkit-any-link {
18-
text-decoration: none;
21+
22+
a:hover {
1923
cursor: pointer;
2024
}
21-
h1, h2, h3 {
22-
font-weight: bold;
25+
26+
a,
27+
link {
28+
text-decoration: none;
2329
}
30+
2431
.container img {
2532
max-width: 100%;
33+
height: auto;
2634
}
35+
2736
.app {
28-
background-color: rgb(234, 230, 230);
29-
height: auto;
37+
background-color: rgb(234, 230, 230);
38+
height: auto;
3039
}
40+
3141
.app-logo img {
3242
width: 20rem;
3343
height: auto;
3444
pointer-events: none;
3545
}
3646

47+
.card img {
48+
width: clamp(20rem, 26vw, 43rem);
49+
height: auto;
50+
margin: 0 auto;
51+
}
52+
3753
.navBG {
3854
background-color: #7952b3;
3955
padding: 2rem;
4056
}
57+
4158
.navFooter {
4259
background-color: #7952b3;
4360
padding: 0;
44-
}
61+
}
62+
63+
.upper {
64+
text-transform: uppercase;
65+
}
66+
67+
.grid {
68+
display: grid;
69+
gap: 1rem;
70+
grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
71+
}
72+
73+
.contenedor {
74+
width: 95%;
75+
max-width: 120rem;
76+
margin: 0 auto;
77+
}
78+
79+
.cardMW {
80+
width: clamp(225px, 30vw, 600px);
81+
height: clamp(400px, 70vw, 650px);
82+
margin: 0 auto;
83+
border: 5px solid #7952b345;
84+
border-radius: 2rem;
85+
padding: 1rem;
86+
align-self: center;
87+
}
88+
89+
.formulario {
90+
width: clamp(300px, 40vw, 500px);
91+
margin: 0 auto;
92+
padding: 0.75rem;
93+
outline: none;
94+
display: block;
95+
background-color: #7952b346;
96+
text-align: center;
97+
}
98+
99+
.compraExitosa {
100+
color: #7952b3;
101+
width: min(500px, 100vw);
102+
height: min(650px, 125vw);
103+
display: flex;
104+
flex-direction: column;
105+
justify-content: center;
106+
align-items: center;
107+
}
108+
109+
.hero {
110+
display: grid;
111+
gap: 1rem;
112+
grid-template-columns: repeat(auto-fit, minmax(36rem, 1fr));
113+
height: min(550px, 130vw);
114+
padding-bottom: 20rem;
115+
116+
}
117+
118+
.grid-item {
119+
align-self: center;
120+
justify-self: center;
121+
}
122+
123+
.titleHero {
124+
font-size: 4vw;
125+
letter-spacing: 1px;
126+
}
127+
128+
.tipHero {
129+
font-size: 2vw;
130+
letter-spacing: .1px;
131+
}
132+
133+
.btn {
134+
color: #7952b3;
135+
text-transform: uppercase;
136+
font-weight: 600;
137+
border: 1px solid #7952b37e;
138+
border-radius: 1rem;
139+
width: clamp(13rem, 15vw, 20rem);
140+
}
141+
142+
.btnCont {
143+
width: 2.5rem;
144+
color: rgb(89, 89, 89);
145+
border: 1px solid #7952b37e;
146+
}
147+
148+
.btnForm {
149+
border: 1px solid #7952b37e;
150+
border-radius: 1rem;
151+
padding: 1rem;
152+
}
153+
154+
.btnCont:hover {
155+
background-color: #7952b346;
156+
color: rgb(35, 35, 35);
157+
}
158+
159+
.btnCont {
160+
width: 2.5rem;
161+
color: rgb(89, 89, 89);
162+
border: 1px solid #7952b37e;
163+
}
164+
165+
.btn:hover {
166+
background-color: #7952b346;
167+
color: rgb(35, 35, 35);
168+
}
169+
170+
@media (min-width: 1222px) {
171+
.grid {
172+
gap: 2rem;
173+
}
174+
175+
.cardMW {
176+
width: clamp(225px, 28vw, 600px);
177+
}
178+
}
179+
180+
@media (max-width: 768px) {
181+
p {
182+
font-size: 70%;
183+
}
184+
185+
.btn {
186+
font-size: 70%;
187+
}
188+
189+
.hero {
190+
padding-top: 5rem;
191+
}
192+
193+
.hero img {
194+
max-width: 65%;
195+
}
196+
197+
.card img {
198+
width: 95%;
199+
height: auto;
200+
margin: 0 auto;
201+
}
202+
}
203+
204+
@media (max-width: 350px) {
205+
.grid {
206+
grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
207+
208+
}
209+
210+
.hero {
211+
grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
212+
padding-top: 5rem;
213+
height: clamp(460px, 180vw, 700px);
214+
width: clamp(200px, 16vw, 70px);
215+
margin: 0 auto;
216+
}
217+
218+
.hero img {
219+
max-width: 100%;
220+
}
221+
222+
.cardMW {
223+
height: clamp(515px, 40vw, 650px);
224+
}
225+
226+
.card img {
227+
width: 90%;
228+
height: auto;
229+
margin: 0 auto;
230+
}
231+
232+
.logoCompra {
233+
max-width: 100%;
234+
}
235+
236+
.compraExitosa {
237+
color: #7952b3;
238+
width: min(200px, 100vw);
239+
height: auto;
240+
}
241+
.titleHero {
242+
font-size: 5.5vw;
243+
letter-spacing: 1px;
244+
}
245+
246+
.tipHero {
247+
font-size: 3.5vw;
248+
letter-spacing: .1px;
249+
}
250+
}

‎src/App.js

+11-8
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,35 @@
11
import { BrowserRouter, Routes, Route } from 'react-router-dom';
2-
import './App.css'
32
import Header from './components/header/Header';
43
import ItemListContainer from './components/main/ItemListContainer';
54
import ItemDetailContainer from './components/main/ItemDetailContainer';
65
import { Footer } from './components/footer/Footer';
76
import Cart from './components/cart/Cart';
8-
import CartProvider from './context/cartContext';
97
import Notfound from './components/error/notfound';
8+
import Form from './components/form/Form';
9+
import CartProvider from './context/cartContext';
10+
import './App.css'
11+
import Hero from './components/main/hero';
12+
1013

1114
function App() {
1215
return (
1316
<BrowserRouter>
1417
<CartProvider>
1518
<Header />
1619
<Routes>
17-
<Route path="/" element={<ItemListContainer />} />
20+
<Route path="/" element={<Hero/>} />
1821
<Route path="/header" element={<Header />} />
1922
<Route path="/footer" element={<Footer />} />
20-
<Route path="/category/:id" element={<ItemListContainer />} />
21-
<Route path="/item/:idProd" element={<ItemDetailContainer />} />
23+
<Route path="/categoria/:categoriaId" element={<ItemListContainer />} />
24+
<Route path="/detalle/:detalleId" element={<ItemDetailContainer />} />
2225
<Route path="/cart" element={<Cart />} />
23-
<Route path="*" element={<Notfound/>} />
26+
<Route path="/checkout" element={<Form />} />
27+
<Route path="*" element={<Notfound />} />
2428
</Routes>
2529
<Footer />
2630
</CartProvider>
2731
</BrowserRouter>
2832
)
2933
}
3034

31-
export default App;
32-
35+
export default App;

‎src/components/cart/Cart.jsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Link } from 'react-router-dom';
33
import Alert from 'react-bootstrap/Alert';
44
import { CartContext } from '../../context/cartContext';
55

6-
//Carrito con los productos seleccionados
76
function Cart() {
87
const { cart, clear, removeItem, totalPrecio } = useContext(CartContext);
98

@@ -17,7 +16,7 @@ function Cart() {
1716
);
1817

1918
return (
20-
<div className="card text-center mb-4 mt-4">
19+
<div className=" card text-center mb-4 mt-4 ">
2120
{cart.map((prod) => (
2221
<div key={prod.id}>
2322
<img src={prod.image} alt={prod.title} width={300} className='img-fluid'></img>
@@ -34,6 +33,8 @@ function Cart() {
3433
<h3 className="card-title bold mb-4 mt-4" >Total: ${totalPrecio()}</h3>
3534
<Link to='/' className="btn light lg btn-outline-secondary btn-lg rounded-2 mb-4 mx-auto"> Seguir Comprando </Link>
3635
<button onClick={clear} className="btn light lg btn-outline-secondary btn-lg rounded-2 mb-4 mx-auto" > Vaciar Carrito </button>
36+
<hr></hr>
37+
<Link to='/checkout' className="btn light lg btn-outline-secondary btn-lg rounded-2 mb-4 mx-auto"> Finalizar compra </Link>
3738
</div>
3839
);
3940
}

0 commit comments

Comments
 (0)