-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
288 lines (283 loc) · 16.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
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Etiquetas SEO -->
<meta name="description" content="'Glam mates' es un emprendimiento dedicado a la venta de equipos de mate y que tiene como propósito lograr que las personas descubran una sensación de calidez y satisfacción">
<meta name="keywords" content="GLAM, MATES, MATE, YERBA, BOMBILLAS, SETS, EQUIPOS, ARGENTINA, ROSARIO, EQUIPOS DE MATE, MATE ARGENTINO, ACCESORIOS, DISEÑOS, CLASICO, GLAMOROSO, CALIDAD, MATE Y TERERE, MATES EN ROSARIO, ACCESORIOS PARA MATE EN ROSARIO, MATE CON AMIGOS">
<!-- Favicon -->
<link rel="icon" type="image/png" href="img/image-hero.png" sizes="16x16">
<!-- Open graph -->
<meta property="og:title" content="GLAM MATES | Cosas lindas y algo más"/>
<meta property="og:url" content="https://glammates.000webhostapp.com/"/>
<meta property="og:image" content="https://i.ibb.co/gt0cKGK/Logo-con-IG.jpg"/>
<meta property="og:description" content="Glam mates es un emprendimiento dedicado a la venta de equipos de mate que nació a inicios del año 2021. Desde sus comienzos, tiene como propósito lograr que las personas descubran la sensación de calidez y satisfacción que nuestros mates le pueden ofrecer.">
<meta property="og:locale" content="es_ES"/>
<meta property="og:type" content="website"/>
<!-- Font Family: Roboto + Roboto Slab -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!-- Font Awesome (para iconos redes)-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<!-- Css propio -->
<link rel="stylesheet" href="assets/css/style.css">
<title>GLAM MATES | HOME</title>
</head>
<body>
<header>
<!-- Menu de navegacion -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container px-5">
<a class="navbar-brand" href="#">GLAM MATES</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarScroll">
<ul class="navbar-nav text-center">
<li class="nav-item my-lg-2 mx-lg-2">
<a class="nav-link active" aria-current="page" href="#">Inicio</a>
</li>
<li class="nav-item my-lg-2 mx-lg-2">
<a class="nav-link" href="productos.html">Productos</a>
</li>
<li class="nav-item my-lg-2 mx-lg-2">
<a class="nav-link" href="quienesSomos.html">¿Quiénes somos?</a>
</li>
<li class="nav-item my-lg-2 ms-lg-2">
<a class="nav-link" href="https://instagram.com/glam.mates/" target="_blank"><i class="fab fa-instagram"></i> Contactar</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Hero -->
<section class="hero container-fluid pb-3">
<!-- Vector png -->
<div class="hero-shape d-none d-xl-flex">
</div>
<div class="container h-100 px-5">
<div class="row align-items-center justify-content-xl-between justify-content-center h-100">
<!-- Imagen hero -->
<div class="hero-img col-xl-5 col-12 mt-auto mt-xl-5 text-center text-xl-end">
<img class="img-fluid" src="img/image-hero.png" alt="Mate">
</div>
<!-- Texto hero -->
<div class="hero-text text-center text-xl-start col-xl-7 col-12 order-xl-first">
<h1 class="h3 d-md-none">Cosas lindas y algo más...</h1>
<h1 class="h2 d-none d-md-block d-xl-none">Cosas lindas y algo más...</h1>
<h1 class="display-4 d-none d-xl-flex">Cosas lindas y algo más...</h1>
</div>
</div>
</div>
<!-- Boton de bajar ↓ -->
<div class="row text-center">
<div>
<a class="text-black abajo h4 dropdown" href="#productosPopulares"><i class="fas fa-chevron-down"></i></a>
</div>
</div>
</section>
</header>
<!-- Contenido principal -->
<main class="bg-white">
<!-- Div para que al hacer click en el boton de "ir abajo" se posicione correctamente -->
<div id="productosPopulares" class="border border-white"></div>
<!-- Productos mas populares -->
<section class="container-fluid mt-section">
<!-- Contenedor -->
<div class="container">
<!-- titulo -->
<div class="row text-center">
<h2 class="h2">Productos <span class="text-primary-500">más populares</span></h2>
<hr class="line">
</div>
<!-- Galeria de imagenes -->
<div id="productsIndex" class="row mt-4 px-md-4 justify-content-center">
</div>
<!-- Boton "ver catalogo" -->
<div class="row mt-4 text-center">
<div>
<a class="btn btn-catalogo border-dark border-1 text-uppercase p text-neutral-900 p-3" href="productos.html" role="button">Ver catálogo <span class="ps-3">→</span></a>
</div>
</div>
</div>
</section>
<!-- Que dicen nuestros clientes -->
<section class="container-fluid mt-section">
<!-- contenedor -->
<div class="container">
<!-- Titulo -->
<div class="row text-center">
<h2 class="h2">Que dicen <span class="text-primary-500">nuestros clientes</span></h2>
<hr class="line">
</div>
<!-- Cards clientes -->
<div class="row mt-4 px-sm-5 px-0 px-lg-4 justify-content-center">
<!-- Cliente 1 -->
<div class="card cliente col-12 p-4 mb-3 my-lg-3 mx-lg-3">
<div class="row">
<div class="d-block m-auto">
<div class="d-flex">
<h5 class="h5 me-3">Romina</h5>
<ul class="list-inline mb-1 text-xs">
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
</ul>
</div>
<p class="p text-neutral-700">Excelente calidad y diseños únicos!! Los mate de eco cuero son mis favoritos 😍</p>
</div>
</div>
</div>
<!-- Cliente 2 -->
<div class="card cliente col-12 p-4 mb-3 my-lg-3 mx-lg-3">
<div class="row">
<div class="d-block m-auto">
<div class="d-flex">
<h5 class="h5 me-3">Alejandra</h5>
<ul class="list-inline mb-1 text-xs">
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
</ul>
</div>
<p class="p text-neutral-700">¡Amo los mates que venden! Siempre los elijo por la calidad y los diseños.</p>
</div>
</div>
</div>
<!-- Cliente 3 -->
<div class="card cliente col-12 p-4 mb-3 my-lg-3 mx-lg-3">
<div class="row">
<div class="d-block m-auto">
<div class="d-flex">
<h5 class="h5 me-3">Claudia</h5>
<ul class="list-inline mb-1 text-xs">
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
</ul>
</div>
<p class="p text-neutral-700">¡Me compré un set completo y no lo cambiaría por nada! Ideal para ir a cualquier lado y re cómodo 🧉</p>
</div>
</div>
</div>
<!-- Cliente 4 -->
<div class="card cliente col-12 p-4 mb-3 my-lg-3 mx-lg-3">
<div class="row">
<div class="d-block m-auto">
<div class="d-flex">
<h5 class="h5 me-3">Paola</h5>
<ul class="list-inline mb-1 text-xs">
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
<li class="list-inline-item m-0"><i class="fas fa-star"></i></li>
</ul>
</div>
<p class="p text-neutral-700">Me encantan las bombillas porque son súper originales!! Los mates de aluminio son los que más me gustan 😍</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Como hacer un pedido -->
<section class="container-fluid mt-section bg-dark">
<!-- Contenedor -->
<div class="container p-pedido">
<!-- Titulo -->
<div class="row text-center">
<h2 class="h2 text-white">¿Cómo hacer un pedido?</h2>
</div>
<!-- Pasos -->
<div class="row d-block d-md-flex text-center mt-pedido mb-5">
<div class="d-block col-md-4 mb-5 mb-lg-3">
<h3 class="mb-3"><span class="pasos text-primary-800">1</span></h3>
<p class="p text-white m-auto"> Explora nuestro <br> catálogo de productos </p>
</div>
<div class="d-block col-md-4 mb-5 mb-lg-3">
<h3 class="mb-3"><span class="pasos text-primary-800">2</span></h3>
<p class="p text-white m-auto"> Elegí el producto que <br> deseas comprar </p>
</div>
<div class="d-block col-md-4 mb-5 mb-lg-3">
<h3 class="mb-3"><span class="pasos text-primary-800">3</span></h3>
<p class="p text-white m-auto"> Contacta a Glam Mates <br> por Instagram </p>
</div>
</div>
</div>
</section>
<!-- Envios y metodos de pago -->
<section class="container-fluid mt-section">
<!-- Contenedor -->
<div class="container px-md-4">
<!-- Titulo -->
<div class="row text-center">
<h2 class="h2">Envios y <span class="text-primary-500">métodos de pago</span></h2>
<hr class="line">
</div>
<div class="row mt-5 px-4">
<!-- Frame google maps -->
<div class="col-lg-8 mb-3">
<iframe class="mapa" src="https://www.google.com/maps/d/u/0/embed?mid=1nUVyuFouFQoMyDZeHoMixTXqxyLISNw4" width="100%"></iframe>
<!-- Pie de frame: Puntos de encuentro -->
<div class="row mt-3">
<p>
<strong>Puntos de encuentro:</strong> Uriburu y Av. Lagos, Pellegrini y San Martin,
Pellegrini y Cafferata, Eva Perón y Provincias Unidas.
</p>
</div>
</div>
<!-- Detalle -->
<div class="d-md-flex d-lg-block col-lg-4 justify-content-center">
<div class="col-md-6 col-lg-12 card-metodos m-auto mb-3 d-flex align-items-center justify-content-center">
<div class="d-block text-center p-3">
<h3 class="mb-3"><span class="pasos text-primary-800"><i class="fas fa-dolly"></i></span></h3>
<h5>Métodos de envios</h5>
<p class="p m-auto"> - Puntos de encuentro en Rosario (Mapa) <br>
- Envio a domicilio con Cadete (Costo de envio a cargo del cliente) </p>
</div>
</div>
<div class="col-md-6 col-lg-12 card-metodos m-auto mb-3 d-flex align-items-center justify-content-center">
<div class="d-block text-center p-3">
<h3 class="mb-3"><span class="pasos text-primary-800"><i class="fas fa-wallet"></i></span></h3>
<h5>Métodos de pago</h5>
<p class="p m-auto"> - Transferencia bancaria <br>
- Pago en efectivo</p>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Footer -->
<footer class="container-fluid mt-5 bg-dark">
<div class="row text-center py-5">
<p class="text-white m-auto">GLAM MATES 2021 Todos los derechos reservados</p>
</div>
</footer>
<!-- JavaScript files-->
<!-- BOOTSTRAP JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js" integrity="sha384-W8fXfP3gkOKtndU4JGtKDvXbO53Wy8SZCQHczT5FMiiqmQfUpWbYdTil/SxwZgAN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script>
<script src="js/nav.js"></script>
<script src="js/index.js"></script>
<script>
//Para que los ultimos 2 productos no se muestren, excepto en pantallas grandes.
var productos = document.getElementsByClassName("producto");
productos[productos.length-1].classList.add("d-none","d-lg-flex");
productos[productos.length-2].classList.add("d-none","d-lg-flex");
</script>
</body>
</html>