-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
402 lines (372 loc) · 19.9 KB
/
index.html
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
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
<!DOCTYPE html>
<html lang="es">
<head>
<!-- - meta Principales - -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- meta SEO -->
<title>Tienda Julieta</title>
<meta name="language" content="es">
<meta name="title" content="Tienda Julieta">
<meta name="generator" content="todointerconectado.com/tiendaJulieta">
<meta name="author" lang="en" content="Francisco Carusso | Todointerconectado">
<meta name="application-name" content="Todointerconectado">
<meta name="copyright" content="Copyright © todointerconectado.com">
<meta name="description" content="Desarrollamos una tienda de productos consumiendo una API RESET para el integrador final de Argentina Programa 4.0">
<meta name="keywords" content="frontend, html5, css3, javascript, API RESET, Bootstrap, francisco carusso, todointerconectado, front-end developer, programación">
<meta name="robots" content="index, follow">
<meta name="audience" content="all">
<meta name="category" content="tecnologías">
<meta itemprop="name" content="Todointerconectado">
<meta itemprop="telephone" content="+5491154120432">
<meta itemprop="image" content="https://todointerconectado.com/tiendaJulieta/assets/images/miniatura.png">
<!-- meta Facebook SEO: The Open Graph protocol -->
<meta property="og:title" content="Tienda Julieta">
<meta property="og:type" content="website">
<meta property="og:url" content="https://todointerconectado.com/tiendaJulieta">
<meta property="og:image" content="https://todointerconectado.com/tiendaJulieta/assets/images/miniatura.png">
<meta property="og:image:alt" content="Banner de portada de página">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="574">
<meta property="og:image:height" content="320">
<meta property="og:description" content="Desarrollamos una tienda de productos consumiendo una API RESET para el integrador final de Argentina Programa 4.0">
<meta property="og:site_name" content="Todointerconectado">
<!-- Languages -->
<meta content="es_ES" property="og:locale">
<meta content="en_US" property="og:locale:alternate">
<meta content="es_MX" property="og:locale:alternate">
<meta content="fr_FR" property="og:locale:alternate">
<meta content="fr_CA" property="og:locale:alternate">
<meta content="it_IT" property="og:locale:alternate">
<meta content="pt_BR" property="og:locale:alternate">
<meta content="hi_IN" property="og:locale:alternate">
<meta content="de_DE" property="og:locale:alternate">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Todointerconect">
<meta name="twitter:creator" content="@Todointerconect">
<meta name="twitter:title" content="Tienda Julieta">
<meta name="twitter:description" content="Desarrollamos una tienda de productos consumiendo una API RESET para el integrador final de Argentina Programa 4.0">
<meta property="twitter:url" content="https://todointerconectado.com/tiendaJulieta">
<meta name="twitter:image" content="https://todointerconectado.com/tiendaJulieta/assets/images/miniatura.png">
<!-- favicons icon -->
<link rel="shortcut icon" type="image/x-icon" href="./assets/favicons/favicon.ico">
<!-- Reset style Normalize -->
<link rel="stylesheet" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
<!-- Icons Fontawesome -->
<script src="https://kit.fontawesome.com/4600a4ff4e.js" crossorigin="anonymous"></script>
<!-- Bootstrap 5.3.0 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<!-- style sobre_nosotros -->
<link rel="stylesheet" href="./css/sobre_nosotros.css">
<!-- style quien_soy -->
<link rel="stylesheet" href="./css/quien_soy.css">
<!-- style galeria productos, API -->
<link rel="stylesheet" href="./css/style.css">
<!-- style from contacto -->
<link rel="stylesheet" href="./css/from_contacto.css">
<!-- style cotización -->
<link rel="stylesheet" href="./css/cotizacion.css">
<!-- footer -->
<link rel="stylesheet" href="./css/footer.css">
</head>
<body class="body">
<header class="header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container">
<a class="navbar-brand" href="https://todointerconectado.com/tiendaJulieta">
<img src="./assets/favicons/favicon.ico" alt="">
</a>
<button class="justify-content-end navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="justify-content-end collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#sobre_nosotros">Sobre nosotros</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#quien_soy">Quien Soy!</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#productos">Productos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#container_from_contacto">Contacto</a>
</li>
<li class="nav-item">
<a class="nav-link btn-azul" href="#cotizacion">Cotización</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="main">
<!-- Sobre nosotros -->
<section id="sobre_nosotros" class="sobre_nosotros">
<section class="sobre_nosotros_title_text">
<h1 class="sobre_nosotros_title"><span>Libera tu estilo! </span> Haz más cosas.</h1>
<p class="sobre_nosotros_text">
Julieta es una marca que inspira a las mujeres a encontrar su propio look. Buscamos acompañar a todas, en cualquier momento del día, y en diferentes ocasiones. Trabajamos con pasión para llevar a cabo este proyecto y generar un vínculo sostenible con quienes confían en nuestra marca.
</p>
<a href="#quien_soy" class="sobre_nosotros_btn">Quien soy!</a>
</section>
<figure class="sobre_nosotros_img">
<img src="./assets/images/mujer_en_el_living_con_la_pc.png" alt="mujer en el living con la pc">
</figure>
</section>
<!-- Quien soy! -->
<section class="quien_soy">
<div class="container quien_soy_text_y_img">
<section class="quien_soy_title_text">
<h2 id="quien_soy" class="quien_soy_title">Quien Soy!</h2>
<article class="quien_soy_text">
<p>
¡Hola! Soy Julieta, fundadora y CEO de TiendaJulieta. Me encanta la moda y la elegancia, y es por eso que me apasiona ayudar a las mujeres a sentirse seguras y hermosas en su propia piel a través de nuestra ropa.
</p>
<p>
Comencé mi carrera en la industria de la moda hace varios años, trabajando en varias marcas reconocidas antes de decidirme a crear mi propia tienda. Desde entonces, he estado trabajando arduamente para ofrecer a nuestras clientes las últimas tendencias y estilos únicos que realmente destacan.
</p>
<p>
En Landify, creemos que la ropa es mucho más que simplemente vestirse. Se trata de expresar tu personalidad y sentirte segura de ti misma. Por eso, trabajamos duro para ofrecer una amplia selección de prendas y accesorios para que puedas encontrar el look perfecto para cualquier ocasión.
</p>
<p>
¡Gracias por visitarnos y esperamos poder ayudarte a encontrar tu estilo!
</p>
</article>
</section>
<div class="quien_soy_container_img">
<div class="circle"></div>
<figure>
<img src="./assets/images/mujer_seccion_quien_soy.png">
</figure>
</div>
</div>
<div class="content_barra">
<section class="barra">
<ul class="container">
<li>
<i class="fa-regular fa-handshake"></i>
<span class="number">40+</span>
<span class="text">Clientes felices</span>
</li>
<li>
<i class="fa-solid fa-shop"></i>
<span class="number">+540K</span>
<span class="text">Productos vendidos</span>
</li>
<li>
<i class="fa-solid fa-face-grin-hearts"></i>
<span class="number">+263K</span>
<span class="text">Clientes regresan</span>
</li>
<li>
<i class="fa-solid fa-users-rays"></i>
<span class="number">+1.2M</span>
<span class="text">Comunidad</span>
</li>
</ul>
</section>
</div>
</section>
<!-- Se carga con JavaScrip desde una API -->
<div id="productos" class="container">
<h2 class="productos">Explora tu estilo con nuestros Productos</h2>
<section id="container_cards" class="row row-cols-4 g-3">
</section>
</div>
<!-- From de contacto -->
<div class="container">
<section id="container_from_contacto" class="container_from_contacto">
<h2 class="title_contacto">Formulario de Contacto</h2>
<form action="#" class="from" id="from_contacto">
<!-- Grupo: Nombre -->
<section class="from__grupo" id="grupo__name">
<label for="name" class="from__label"><span>*</span> Nombre y Apellido</label>
<div class="from__grupo-input">
<input type="text" class="from__input" name="name" id="name" required placeholder="Ej: Francisco Carusso">
<i class="from__validation-estado fa-sharp fa-solid fa-circle-xmark"></i>
</div>
<p class="from__input-error">
El nombre tiene que ser de 3 a 16 digitos y solo puede contener letras y espacios.
</p>
</section>
<!-- Grupo: teléfono -->
<section class="from__grupo" id="grupo__telefono">
<label for="telefono" class="from__label"><span>*</span> Telefono</label>
<div class="from__grupo-input">
<input type="number" class="from__input" name="telefono" id="telefono" min="0" max="99999999999999" required placeholder="Ej:01112345678">
<i class="from__validation-estado fa-sharp fa-solid fa-circle-xmark"></i>
</div>
<p class="from__input-error">
El teléfono solo puede contener números, entre 7 a 14 digitos.
</p>
</section>
<!-- Grupo: email -->
<section class="from__grupo from__grupo-email" id="grupo__email">
<label for="email" class="from__label"><span>*</span> Email</label>
<div class="from__grupo-input">
<input type="email" class="from__input" name="email" id="email" required placeholder="Ej: [email protected]">
<i class="from__validation-estado fa-sharp fa-solid fa-circle-xmark"></i>
</div>
<p class="from__input-error">
El email solo puede contener letra, números, puntos, guiones y guion bajo.
</p>
</section>
<!-- Mensaje del usuario -->
<section class="from__grupo from__grupo-textArea" id="grupo__name">
<label for="textArea" class="from__label">Deja tu mensaje</label>
<div class="from__grupo-input">
<textarea class="from__input from__input-textArea" name="textArea" id="textArea" placeholder="mensaje..."></textarea>
</div>
</section>
<!-- Mensaje de alerta -->
<article class="from__grupo from__mensaje" id="from__mensaje">
<p>
<i class="fa-solid fa-triangle-exclamation"></i>
<b>Error:</b> Por favor rellenar el formulario correctamente.
</p>
</article>
<!-- Grupo: Boton -->
<section class="from__grupo from__grupo-btn-enviar">
<button type="submit" class="from__btn">
Enviar
</button>
<p class="from_mensaje-exito" id="from_mensaje-exito">
Formulario enviado exitosamente!
</p>
</section>
</form>
</section>
</div>
<!-- From cotización -->
<div class="container">
<section id="cotizacion" class="conteiner_from_cotizacion">
<h2 class="cotizacion_title">Cotizaciones</h2>
<div class="container_input_cotizacion">
<label for="categoria">Categoria:</label>
<select name="categoria" id="categoria">
<optgroup label="Tipos de productos">
<option selected value="">Tipos de productos</option>
<option value="women's clothing">Ropa de mujer</option>
<option value="electronics">Electronica</option>
<option value="jewelery">joyería</option>
<option value="men's clothing">Ropa de hombre</option>
</optgroup>
</select>
</div>
<div id="cotizacion_resultado" class="cotizacion_resultado"></div>
</section>
</div>
</main>
<footer class="footer">
<section>
<ul class="footer_logo">
<li class="li_logo">
<a href="#">
<img src="./assets/favicons/favicon.ico" alt="logo tiendaJulieta">
</a>
</li>
<li class="li_text">
<p>
<span>Desarrollada por el equipo 1 del curso Desarrollo Web de Argentina Programa 4.0</span>
<span>Formado por: Francisco Carusso, Micaela Figueroa, Carlos Rojas.</span>
</p>
</li>
<li class="li_nav">
<ul class="footer_redes_sociales">
<li>
<a href="#">
<i class="fa-brands fa-instagram"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-youtube"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-linkedin-in"></i>
</a>
</li>
</ul>
</li>
</ul>
<ul class="footer_enlaces_rapidos">
<li>Enlaces Rápidos</li>
<li class="enlace_rapido">
<a href="#" alt="Portafolio">Portafolio</a>
</li>
<li class="enlace_rapido">
<a href="#" alt="Preguntas frecuentes">Preguntas frecuentes</a>
</li>
<li class="enlace_rapido">
<a href="#" alt="Acerca de">Acerca de</a>
</li>
<li class="enlace_rapido">
<a href="#" alt="Prensa">Prensa</a>
</li>
</ul>
<ul class="footer_servicios">
<li>Servicios</li>
<li class="enlace_rapido">
<a href="#productos" alt="Productos">Productos</a>
</li>
<li class="enlace_rapido">
<a href="#" alt="Seguro de calidad">Seguro de calidad</a>
</li>
<li class="enlace_rapido">
<a href="#cotización" alt="Cotización">Cotización</a>
</li>
</ul>
<ul class="footer_contacto">
<li>Contacto</li>
<li>
<i class="fa-regular fa-envelope"></i>
<a href="mailto:[email protected]">[email protected]</a>
</li>
<li>
<i class="fa-solid fa-mobile-screen-button"></i>
<a href="tel:+1154123456">+1154123456</a>
</li>
<li>
<div>
<label for="footer_mensaje">Mensaje</label>
<div class="input_icon">
<input id="footer_mensaje" type="text" placeholder="tu mensaje...">
<i class="correo-icono fa-brands fa-telegram"></i>
</div>
</div>
</li>
</ul>
</section>
<section class="footer_button">
<p>
<span>Todos los derechos reservados © 2023 TiendaJulieta</span>
<span>Términos & condiciones | Politicas de provacidad | Descargo de responsabilidad</span>
</p>
</section>
</footer>
<!-- script bootstrap 5.3.0 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<!-- Script para el API -->
<script src="./js/index.js" type="module"></script>
<!-- script from contacto -->
<script src="./js/from_contacto.js" type="module"></script>
<!-- script cotización -->
<script src="./js/cotizacion.js" type="module"></script>
</body>
</html>