Skip to content

Commit b372655

Browse files
CPetruzzoCPetruzzo
committed
Merge branch 'master' of https://github.com/CPetruzzo/DisenioWeb 
2 parents ddd60b3 + cae0a41 commit b372655

File tree

10 files changed

+411
-30
lines changed

10 files changed

+411
-30
lines changed

‎caropottery/caropottery.html‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Pottery Store</title>
8+
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<header>
14+
<div class="logo">Carma Pottery</div>
15+
<nav>
16+
<a href="#">Home</a>
17+
<a href="#">Shop</a>
18+
<a href="#">About</a>
19+
<a href="#">Contact</a>
20+
</nav>
21+
</header>
22+
23+
<div class="hero">
24+
<h1>Handmade Pottery</h1>
25+
<p>Discover the beauty of artisanal ceramics, crafted with love and care.</p>
26+
</div>
27+
28+
<div class="product-grid">
29+
<div class="product">
30+
<img src="images/POT1.jfif" alt="Placeholder Image">
31+
<h3>Product Name 1</h3>
32+
<p>Short description of the product.</p>
33+
<div class="price">$20.00</div>
34+
<button onclick="addToCart('Product Name 1', '$20.00')">Add to Cart</button>
35+
</div>
36+
<div class="product">
37+
<img src="images/POT2.jfif" alt="Placeholder Image">
38+
<h3>Product Name 2</h3>
39+
<p>Short description of the product.</p>
40+
<div class="price">$25.00</div>
41+
<button onclick="addToCart('Product Name 2', '$25.00')">Add to Cart</button>
42+
</div>
43+
<div class="product">
44+
<img src="images/POT3.jfif" alt="Placeholder Image">
45+
<h3>Product Name 3</h3>
46+
<p>Short description of the product.</p>
47+
<div class="price">$20.00</div>
48+
<button onclick="addToCart('Product Name 3', '$20.00')">Add to Cart</button>
49+
</div>
50+
<div class="product">
51+
<img src="images/POT4.jfif" alt="Placeholder Image">
52+
<h3>Product Name 4</h3>
53+
<p>Short description of the product.</p>
54+
<div class="price">$25.00</div>
55+
<button onclick="addToCart('Product Name 4', '$25.00')">Add to Cart</button>
56+
</div>
57+
<div class="product">
58+
<img src="images/POT5.jfif" alt="Placeholder Image">
59+
<h3>Product Name 5</h3>
60+
<p>Short description of the product.</p>
61+
<div class="price">$20.00</div>
62+
<button onclick="addToCart('Product Name 5', '$20.00')">Add to Cart</button>
63+
</div>
64+
<div class="product">
65+
<img src="images/POT6.jfif" alt="Placeholder Image">
66+
<h3>Product Name 6</h3>
67+
<p>Short description of the product.</p>
68+
<div class="price">$25.00</div>
69+
<button onclick="addToCart('Product Name 6', '$25.00')">Add to Cart</button>
70+
</div>
71+
</div>
72+
73+
<div class="cart" onclick="toggleCart()">
74+
<img src="https://cdn-icons-png.flaticon.com/512/126/126510.png" alt="Cart Icon">
75+
</div>
76+
77+
<div class="cart-panel" id="cartPanel">
78+
<div class="cart-header">Your Cart</div>
79+
<div class="cart-content" id="cartContent">
80+
<ul id="cart-items"></ul>
81+
</div>
82+
<div class="cart-footer">
83+
<p>Total: $<span id="cart-total">0.00</span></p>
84+
<button class="close-cart" onclick="toggleCart()">Close</button>
85+
</div>
86+
</div>
87+
88+
<footer>
89+
&copy; 2025 Pottery Store. All rights reserved.
90+
</footer>
91+
92+
<script>
93+
let cart = []; // Declarar el arreglo cart aquí
94+
95+
function toggleCart() {
96+
cartPanel.classList.toggle('open');
97+
}
98+
99+
function addToCart(productName, productPrice) {
100+
// Convertir el precio a número y agregar al carrito
101+
const price = parseFloat(productPrice.replace('$', ''));
102+
cart.push({ name: productName, price });
103+
104+
// Actualizar el carrito completo
105+
updateCart();
106+
}
107+
108+
function updateCart() {
109+
const cartItems = document.getElementById('cart-items');
110+
const cartTotal = document.getElementById('cart-total');
111+
112+
// Limpiar la lista de productos
113+
cartItems.innerHTML = '';
114+
let total = 0;
115+
116+
// Recorrer el arreglo cart y actualizar la lista
117+
cart.forEach((item, index) => {
118+
total += item.price;
119+
120+
const li = document.createElement('li');
121+
li.textContent = `${item.name} - $${item.price.toFixed(2)}`;
122+
123+
const removeButton = document.createElement('button');
124+
removeButton.textContent = 'Remove';
125+
removeButton.style.marginLeft = '10px';
126+
removeButton.onclick = () => {
127+
cart.splice(index, 1); // Eliminar del arreglo
128+
updateCart(); // Actualizar el carrito visual
129+
};
130+
131+
li.appendChild(removeButton);
132+
cartItems.appendChild(li);
133+
});
134+
135+
// Actualizar el total
136+
cartTotal.textContent = total.toFixed(2);
137+
}
138+
139+
</script>
140+
141+
</body>
142+
143+
</html>

‎caropottery/images/POT1.jfif‎

381 KB
Binary file not shown.

‎caropottery/images/POT2.jfif‎

408 KB
Binary file not shown.

‎caropottery/images/POT3.jfif‎

375 KB
Binary file not shown.

‎caropottery/images/POT4.jfif‎

494 KB
Binary file not shown.

‎caropottery/images/POT5.jfif‎

456 KB
Binary file not shown.

‎caropottery/images/POT6.jfif‎

360 KB
Binary file not shown.

‎caropottery/style.css‎

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,230 @@
1+
* {
2+
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
3+
}
4+
5+
body {
6+
font-family: Arial, sans-serif;
7+
margin: 0;
8+
padding: 0;
9+
background-color: #FFF100;
10+
color: #000;
11+
}
12+
13+
header {
14+
display: flex;
15+
justify-content: space-between;
16+
align-items: center;
17+
padding: 10px 20px;
18+
background-color: #FFF100;
19+
}
20+
21+
.logo {
22+
font-size: 24px;
23+
font-weight: bold;
24+
}
25+
26+
nav {
27+
display: flex;
28+
gap: 20px;
29+
}
30+
31+
nav a {
32+
text-decoration: none;
33+
color: #000;
34+
font-weight: bold;
35+
}
36+
37+
.hero {
38+
text-align: center;
39+
padding: 50px 20px;
40+
}
41+
42+
.hero h1 {
43+
font-size: 36px;
44+
}
45+
46+
.hero p {
47+
font-size: 18px;
48+
margin-top: 10px;
49+
}
50+
51+
.product-grid {
52+
display: grid;
53+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
54+
gap: 80px;
55+
padding: 20px;
56+
}
57+
58+
.product {
59+
background: linear-gradient(145deg, #f3f4f6, #e1e6eb);
60+
/* Fondo degradado para un toque elegante */
61+
padding: 20px;
62+
border-radius: 12px;
63+
/* Bordes más redondeados */
64+
text-align: center;
65+
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
66+
/* Sombra suave con mayor profundidad */
67+
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
68+
/* Animación suave */
69+
overflow: hidden;
70+
/* Para evitar que el contenido se desborde de los bordes redondeados */
71+
}
72+
73+
.product:hover {
74+
transform: translateY(-8px);
75+
/* Efecto de elevación más pronunciado */
76+
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
77+
/* Sombra más prominente al hacer hover */
78+
background: linear-gradient(145deg, #f0f1f4, #dbe0e6);
79+
/* Degradado más claro en hover */
80+
}
81+
82+
.product img {
83+
width: 100%;
84+
height: 270px;
85+
/* Ajustado el alto de la imagen para un mejor encuadre */
86+
object-fit: cover;
87+
border-radius: 8px;
88+
/* Bordes redondeados en las imágenes */
89+
background-color: #e6e6e6;
90+
/* Fondo para las imágenes */
91+
margin-bottom: 15px;
92+
/* Espacio entre la imagen y el texto */
93+
}
94+
95+
.product h3 {
96+
font-size: 20px;
97+
font-weight: bold;
98+
color: #333;
99+
/* Color de texto más oscuro para mayor legibilidad */
100+
margin-bottom: 10px;
101+
}
102+
103+
.product p {
104+
font-size: 16px;
105+
color: #777;
106+
/* Color más suave para la descripción */
107+
margin-bottom: 10px;
108+
}
109+
110+
.product .price {
111+
font-weight: bold;
112+
color: #e87b16;
113+
/* Un color cálido para resaltar el precio */
114+
font-size: 18px;
115+
margin-bottom: 20px;
116+
}
117+
118+
119+
.product button:hover {
120+
background-color: #333;
121+
/* Color oscuro al hacer hover */
122+
color: #e87b16;
123+
/* Color cálido en el texto al hacer hover */
124+
transform: scale(1.05);
125+
/* Leve aumento al hacer hover */
126+
}
127+
128+
.product button {
129+
background-color: #FFF100;
130+
border: 1px solid #000;
131+
padding: 10px 20px;
132+
cursor: pointer;
133+
font-weight: bold;
134+
transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
135+
}
136+
137+
.product button:hover {
138+
background-color: #000;
139+
color: #FFF100;
140+
border-color: #FFF100;
141+
transform: scale(1.05);
142+
}
143+
144+
footer {
145+
text-align: center;
146+
padding: 20px;
147+
background-color: #FFF100;
148+
margin-top: 20px;
149+
}
150+
151+
/* Cart styles */
152+
.cart {
153+
position: fixed;
154+
bottom: 20px;
155+
right: 20px;
156+
background-color: #fff;
157+
border: 1px solid #000;
158+
border-radius: 50%;
159+
width: 60px;
160+
height: 60px;
161+
display: flex;
162+
justify-content: center;
163+
align-items: center;
164+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
165+
cursor: pointer;
166+
transition: transform 0.3s ease, background-color 0.3s ease;
167+
}
168+
169+
.cart img {
170+
width: 30px;
171+
height: 30px;
172+
}
173+
174+
.cart:hover {
175+
background-color: #FFF100;
176+
transform: scale(1.1);
177+
}
178+
179+
.cart-panel {
180+
position: fixed;
181+
bottom: 0;
182+
right: 0;
183+
width: 300px;
184+
height: 400px;
185+
background-color: #fff;
186+
border: 1px solid #000;
187+
box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.2);
188+
transform: translateY(100%);
189+
transition: transform 0.3s ease;
190+
display: flex;
191+
flex-direction: column;
192+
}
193+
194+
.cart-panel.open {
195+
transform: translateY(0);
196+
}
197+
198+
.cart-header {
199+
padding: 10px;
200+
background-color: #FFF100;
201+
border-bottom: 1px solid #000;
202+
text-align: center;
203+
font-weight: bold;
204+
}
205+
206+
.cart-content {
207+
flex: 1;
208+
overflow-y: auto;
209+
padding: 10px;
210+
}
211+
212+
.cart-footer {
213+
padding: 10px;
214+
border-top: 1px solid #000;
215+
text-align: center;
216+
}
217+
218+
.close-cart {
219+
background-color: #000;
220+
color: #FFF100;
221+
border: none;
222+
padding: 10px;
223+
cursor: pointer;
224+
}
225+
226+
#cart-items {
227+
list-style: none;
228+
padding: 0;
229+
margin: 0;
230+
}

0 commit comments

Comments
 (0)