-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
149 lines (127 loc) · 6.95 KB
/
Copy pathindex.html
File metadata and controls
149 lines (127 loc) · 6.95 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE HTML>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="es-es"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8 ie7" lang="es-es"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9 ie8" lang="es-es"><![endif]-->
<!--[if gt IE 8]> <html class="no-js ie9" lang="es-es"><![endif]-->
<html lang="es-es">
<head>
<meta charset="utf-8" />
<title>Tejidos y puntadas Valentina</title>
<meta name="description" content="Tejidos y puntadas Valentina" />
<meta name="keywords" content="tienda,Tejidos,puntadas,tejedores,crochet,lanas, Colombia, amigurumi, tutoriales" />
<meta name="generator" content="PrestaShop" />
<meta name="robots" content="index,follow" />
<meta name="viewport" content="width=device-width, minimum-scale=0.25, maximum-scale=1.6, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="icon" type="image/vnd.microsoft.icon" href="https://cdn-icons-png.flaticon.com/256/1467/1467388.png" />
<link rel="shortcut icon" type="image/x-icon" href="https://cdn-icons-png.flaticon.com/256/1467/1467388.png />
var CUSTOMIZE_TEXTFIELD = 1;
<div class="nav">
<div class="container">
<div class="row">
<nav><!-- Block user information module NAV -->
<div class="header_user_info">
<a class="login" href="iniciarsesion.html" rel="nofollow" title="Entrar a tu cuenta de cliente">
Iniciar sesión
</a>
</div>
<!-- /Block usmodule NAV -->
<!-- Block languages module -->
<!-- /Block languages module -->
<div id="contact-link" >
<a href="contacteconnosotros.html" title="Contacte con nosotros">Contacte con nosotros</a>
</div>
<span class="shop-phone">
<i class="icon-phone"></i>Llámanos ahora: <strong>3112632878</strong>
</span>
</nav>
<div>
<div class="container">
<div class="row">
<div id="header_logo">
<img class="logo img-responsive" src="Logo_Tejidos.jpg" alt="Tejidos y puntadas valentina" width="430" height="254"/>
</div>
</div>
<!-- Block search module TOP -->
<div id="search_block_top" class="col-sm-4 clearfix">
<input type="hidden" name="controller" value="search" />
<input type="hidden" name="orderby" value="position" />
<input type="hidden" name="orderway" value="desc" />
<input class="search_query form-control" type="text" id="search_query_top" name="search_query" placeholder="Buscar" value="" />
<button type="submit" name="submit_search" class="btn btn-default button-search">
<span>Buscar</span>
</button>
</form>
</div>
<style>
/*En este ejemplo, hemos utilizado CSS flexbox para que los cards se muestren horizontalmente en la clase .contenedor.
La propiedad flex-wrap: wrap permite que los cards se envuelvan a la siguiente línea cuando no caben en la pantalla,
y justify-content: space-between distribuye el espacio horizontalmente entre los elementos.
Además, hemos establecido un ancho fijo para cada card utilizando flex-basis para que ocupen aproximadamente un tercio
del ancho del contenedor, y hemos añadido un margen para separarlos.
Esto crea una disposición horizontal ordenada de los cards. Ajusta los valores según tus necesidades de diseño.
*/
/* Estilo para la clase "contenedor" */
.contenedor {
display: flex; /* Muestra los elementos hijos en línea (horizontalmente) */
flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea cuando no caben en la pantalla */
justify-content: space-between; /* Distribuye el espacio horizontalmente entre los elementos */
}
/* Estilo para los cards */
.card {
margin: 5px; /* Agrega un margen entre los cards */
border: 1px solid #c1c2ca;
padding: 16px;
border-radius: 20px;
}
.encabezado{
background: #279b9bd6;
margin-top: -21px;
height: 60px;
}
</style>
</head>
<body>
<div class="encabezado">
<a href="carritodecompra.html">
<svg id="Layer_1" viewBox="0 0 512 512" width="50px" style="margin-top: 15px; width: 40px;" xmlns="carrito_de_compra.jpg" data-name="Layer 1"><g fill-rule="evenodd"><path d="m503.429 255.337v-155.63a14.012 14.012 0 0 0 -14.04-14h-336.589l-4.695-30.7c-2.033-13.3-7.669-26.543-16.937-36.422a51.639 51.639 0 0 0 -37.98-16.585h-70.625a14 14 0 0 0 0 28h70.625c16.241 0 25.077 14.9 27.265 29.241l39.5 258.906-1.166.686a59.8 59.8 0 0 0 30.413 111.318h13.838l-2.315 3.177a48.318 48.318 0 0 0 39.142 76.672 48.413 48.413 0 0 0 48.335-48.354 47.909 47.909 0 0 0 -9.194-28.318l-2.315-3.177h97.109l-2.292 3.171a48.354 48.354 0 1 0 78.149-.271l-1.888-2.571 3.136-.579a13.994 13.994 0 0 0 -2.561-27.752h-259.144a31.811 31.811 0 0 1 -7.807-62.65l.243-.062h237.7a84.209 84.209 0 0 0 84.093-84.1z" fill="#e7f2ff"/><path d="m473.4 255.337a54.14 54.14 0 0 1 -54.066 54.1h-230.374l-29.533-193.728h313.973zm-62.7 224.663a18.355 18.355 0 1 1 18.352-18.352 18.355 18.355 0 0 1 -18.352 18.352zm-170.832 0a18.355 18.355 0 1 1 18.353-18.352 18.385 18.385 0 0 1 -18.356 18.352zm265.562-224.663v-155.63a16.012 16.012 0 0 0 -16.041-16h-334.868l-4.435-29c-2.17-14.512-8.4-27.83-17.456-37.487a53.639 53.639 0 0 0 -39.441-17.22h-70.625a16 16 0 0 0 0 32h70.625c15.569 0 23.353 14.833 25.288 27.542l39.3 257.568a61.8 61.8 0 0 0 31.423 115.041h9.9a50.316 50.316 0 0 0 40.765 79.849 50.414 50.414 0 0 0 50.335-50.354 49.893 49.893 0 0 0 -9.577-29.5h89.261a50.353 50.353 0 1 0 81.381-.284 15.993 15.993 0 0 0 -2.925-31.717h-259.14a29.811 29.811 0 0 1 -7.312-58.713h237.442a86.21 86.21 0 0 0 86.1-86.095z" fill="#2e58ff"/></g></svg>
</a>
</div>
<div class="contenedor"></div>
<script>
// Función para obtener datos de la API ficticia
async function obtenerProductos() {
try {
const response = await fetch('https://tienda-falsa.valengalleramos.repl.co/products');
if (!response.ok) {
throw new Error('Error en la solicitud');
}
const data = await response.json();
return data;
} catch (error) {
console.error('Error:', error);
return [];
}
}
document.addEventListener("DOMContentLoaded", async () => {
const contenedor = document.querySelector(".contenedor");
const prods = await obtenerProductos();
let productos = "";
prods.test.forEach((product) => {
localStorage.setItem(`product_${product.id}`, JSON.stringify(product));
productos += `
<div class="card" style="width: 18rem;">
<img src="${product.image}" style="width: 100px" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-text">${product.title}</h5>
<p class="card-text">${product.price}</p>
<a href="detalleproducto.html?id=${product.id}" class="btn btn-primary">Ver Detalle</a>
</div>
</div>
`;
});
contenedor.innerHTML = productos; // Agrega el contenido al elemento con la clase "contenedor"
});
</script>
</body>
</html>