-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
497 lines (391 loc) · 21 KB
/
index.html
File metadata and controls
497 lines (391 loc) · 21 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
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
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="css/estilos.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<!-- Libreria JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
<title>UTZ Box</title>
</head>
<body>
<!-- ------------------------header-------------------------------------- -->
<!-- ---------------------------------------------------------------------- -->
<header id="closeHeader" class="container-fluid d-flex ">
<nav class=" container d-flex w-100 justify-content-between ">
<div class="logo text-center">
<img src="imgs/logo/UTZ-Box-05.png" width="100%" alt="">
</div>
<ul class="d-flex">
<li class="p-1" > <a href="#quickStart" >Quick start</a></li>
<li class="p-1" > <a href="#shipping" > Shipping</a></li>
<li class="p-1" > <a href="#aboutus" >About Us</a></li>
<li class="p-1" > <a href="#" id="openLogin">Log in/Sign Up</a></li>
</ul>
</nav>
</header>
<!-- ------------------------portada-------------------------------------- -->
<!-- ---------------------------------------------------------------------- -->
<div class="seccion-portada ">
<div >
<img src="imgs/carrousel/portada.png" class="img-fluid" width="100%" alt="">
</div>
</div>
<!-- ------------------------login-------------------------------------- -->
<!-- ---------------------------------------------------------------------- -->
<div id="login" >
<i class="text-white fas fa-times"></i>
<div class="w-50 h-50 border border-2 container__login d-flex justify-content-center align-items-center">
<div class="row">
<div class="text-center border border-bottom-0 border-top-0 col-6">
<h3 class="m-3">Log In</h3>
<input type="text" class="form-control mt-2" placeholder="email"> <br>
<input type="text" class="form-control" placeholder="password" > <br>
<a href="#" class="btn btn-info">Log In</a> <br><hr>
<span>Or Log in with</span> <br> <br>
<p class="fab fa-google"></p>
</div>
<div class="text-center border border-bottom-0 border-top-0 col-6">
<h3 class="m-3">Sign Up</h3>
<input type="text" class="form-control " placeholder="email"> <br>
<input type="text" class="form-control" placeholder="password"> <br>
<a href="#" class="btn btn-info">Sign Up</a><br> <hr>
<span>Or Sign Up with</span> <br> <br>
<i class="fab fa-google fs-1"></i>
</div>
</div>
</div>
</div>
<!-- ------------------------seccion ABOUT-------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------------------- -->
<div id="aboutus" class="m-3">
<div class="seccion container-fluid ">
<h1 class="text-center p-2 ">Who we are</h1>
<div class="container h-75 d-flex align-items-center">
<div class="row d-flex align-items-center">
<div class="col-12 col-lg-3 col-xl-4">
<img src="imgs/logo/UTZ-Box-01.png" width="100%" alt="">
</div>
<div class="col-12 col-lg-9 col-xl-8">
<p class="text-justify">
UTZ BOX is the most efficient and innovative
company of national and international
logistics for small packages in Guatemala. We
focus on you and your logistical needs, bringing to you a service menu that will help
you focus on your growth, with ease of mind in
your chain of distribution and the export process. All of our services are designed based
on the needs that you and many other of our customers have voiced to us thus far.
</p>
</div>
</div>
</div>
</div>
<div class="seccion container-fluid">
<h1 class="text-center ">Our Mission</h1>
<div class="container h-75 d-flex align-items-center">
<div class="row d-flex align-items-center">
<div class="col-12 col-md-6 col-lg-8 col-xl-8">
<p class="text-justify">
Make your life easier. We will expedite
your logistical processes and provide you with the best service and prices in the market. Keeping always in mind that your customer is the most important thing to
you. What follows is an explanation of how the UTZ BOX world works.
</p>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-4">
<img src="imgs/carrousel/misionUTZ.png" class="rounded" width="100%" alt="">
</div>
</div>
</div>
</div>
</div>
<!-- ------------------------seccion quick start-------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------------------- -->
<div id="quickStart">
<div class="seccion seccion-xs container-fluid d-flex align-lg-items-center " >
<div class="card-info container d-flex flex-column align-items-center justify-xl-content-center">
<h1 class="text-center p-2"> Getting Started with UTZ Box</h1>
<div class="row d-flex justify-content-between">
<div class="card-tile col-12 col-md-5 col-lg-5 col-xl-3">
<h4>I ship Personal Items</h4>
<p class="text-justify">
Perhaps you want to downsize your luggage or ship out your
purchases?
This service helps you accelerate the dispatch of your packages,
or schedule a delivery for when you’re going to be home. This
service will make sure you get your things on time.
</p>
</div>
<div class="card-tile col-12 col-md-5 col-lg-5 col-xl-3">
<h4>I ship Frequently</h4>
<p class="text-justify">
Has it been difficult for you to find a comfortable price to
send something outside of Guatemala?
This service is for you!
Our E commerce services ensure you always get the best
rates selected from our suppliers rates. Based on your
volume and frequency you can access different discounts
that adjust to your shipping demands.
</p>
</div>
<div class="card-tile col-12 col-md-12 col-lg-12 col-xl-3">
<h4>I ship Over 32Kg</h4>
<p class="text-justify">
You are going to love this new service!
At UTZ BOX we are constantly searching for new ways to
increase our service options for you, and that is why we are now
introducting this new service! Now all shipments over 32kg
addressed to the United States have a new price-sheet that will
help you reduce costs while maintaining your delivery and
service standards in both quality and time.
</p>
</div>
</div>
</div>
</div>
<div class="seccion container-fluid d-flex flex-column justify-content-around">
<h1 class="text-center ">Where can I send my packages and how long will it take</h1>
<div class="container">
<div class="table-responsive">
<table class="table table-sm text-center">
<thead>
<tr>
<th scope="col" >Zone</th>
<th scope="col" >UTZ Express</th>
<th scope="col" >UTZ Ecommerce</th>
<th scope="col" >UTZ Wholesale</th>
</tr>
</thead>
<tbody>
<tr>
<td>US</td>
<td colspan="3">3-5 days</td>
</tr>
<tr>
<td> Central America</td>
<td colspan="2" rowspan="5"> 5 days </td>
</tr>
<tr>
<td>Canada</td>
</tr>
<tr>
<td>
Mexico
</td>
</tr>
<tr>
<td>South America</td>
</tr>
<tr>
<td>Caribbean</td>
</tr>
<tr>
<td>Europe</td>
<td> 5-7</td>
</tr>
<tr>
<td>Asia</td>
</tr>
<tr>
<td>Rest of World</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="seccion container-fluid d-flex align-items-center">
<div class="container">
<h1 class="text-center p-2 mb-5">How do I make my products reach UTZ Box</h1>
<div class="row d-flex justify-content-around">
<div class="card-tile col-12 col-md-5 col-lg-6 col-xl-5">
<p>
<h3>Drop Off</h3>
You can come drop off your package at our office
located at:
<address> 9na Calle Poniente # 17
Residencial El Rosario House 7A
Antigua Guatemala, Sacatepequez</address>
</p>
</div>
<div class="card-tile col-12 col-md-5 col-lg-6 col-xl-5">
<p>
<h3>Pick-up</h3>
You can request a Pick-Up at:
box@utz.gt or call 7832-0766
Each pick-up has a cost according to its distance, and it
will be included in your final invoice.
<!-- Packages within Antigua Perimeter .....................................$3 - $6.50
Packages 1-30 pounds (standard regions) .................................$6.50
Packages 1-30 pounds (Far-off regions) ....................................$8.50
Extra pound after 30 pounds (per pound) .................................$0.25 -->
</p>
</div>
</div>
</div>
</div>
</div>
<!-- ------------------------seccion shipping-------------------------------------------------- -->
<!-- ---------------------------------------------------------------------------------------------- -->
<div id="shipping">
<div class="seccion seccion-shipping seccion-md">
<h1 class="text-center p-2"> How Much does it Cost?</h1>
<div id="cotizador" class="container">
<div class="row">
<div class="col-6 col-md-6 col-lg-6 col-xl-4">
<h5>Ship From</h5>
<label for="country" class="form-label">Country</label>
<select name="country-from" id="country-from" class="custom-select">
<option value="Guatemala" selected>Guatemala</option>
</select>
<label for="city" class="form-label">City</label>
<select name="city-from" id="city-from" class="custom-select">
<option value="Alta Verapaz">Alta Verapaz</option>
<option value="Baja Verapaz">Baja Verapaz</option>
<option value="Chimaltenago"> Chimaltenago</option>
<option value="Chiquimula">Chiquimula</option>
<option value="Guatemala">Guatemala</option>
<option value="Quetzaltenango">Quetzaltenango</option>
<option value="Totonicapán">Totonicapán</option>
<option value="Sololá">Sololá</option>
<option value="Sacatepequez" selected>Sacatepequez</option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
<!-- cargar basado en la selecion de la ciudad -->
<!-- ------------------------------------------ -->
<label for="province" class="form-label">Province</label>
<select name="province-from" id="province-from" class="custom-select">
<option value=""></option>
</select>
<label for="village-from" class="form-label">Village</label>
<input id="village-from" type="text" class="form-control">
</div>
<div class="col-6 col-md-6 col-lg-6 col-xl-4">
<h5>Ship To</h5>
<label for="country-to">Country</label>
<select name="country-to" id="country-to" class="custom-select">
<option value="">US</option>
<option value="">Mexico</option>
<option value="">Canada</option>
<option value="">South America</option>
<option value="">Europe</option>
</select>
<!-- cargar basado en la selecion del pais -->
<!-- ------------------------------------------ -->
<label for="city-to">City </label>
<select name="city-to" id="city-to" class="custom-select">
<option value="">NY</option>
<option value="">UT</option>
</select>
<label for="postal-code">Postal Code</label>
<input type="text" id="postal-code" class="form-control">
</div>
<div class="mt-2 col-12 col-md-6 col-lg-6 col-xl-4">
<h5>Package</h5>
<label for="weight">Weight</label>
<input type="text" name="weight" id="weight" class="form-control">
<label for="width">Width</label>
<input type="text" id="width" class="form-control">
<label for="height">Height</label>
<input type="text" class="form-control" id="height">
<label for="large">Large</label>
<input type="text" id="large" class="form-control">
</div>
</div>
<h5 class="text-center mt-5">Send Me the Price </h5>
<div class="row">
<div class="col-12 col-md-4 col-lg-4 col-xl-4">
<label for="email">Email</label>
<input type="text" class="form-control" id="email">
</div>
<div class="col-12 col-md-4 col-lg-4 col-xl-4">
<label for="Whatsapp">Whatsapp</label>
<input type="text" class="form-control" id="whatsapp">
</div>
<div class="col-12 col-md-4 col-lg-4 col-xl-4">
<label for="name">Name y Surename</label>
<input type="text" class="form-control" id="name">
</div>
</div>
</div>
<div class="text-center mt-5">
<a href="#" class="btn btn-info">Calculate</a>
</div>
<div class="disclaimer mt-5" >
<p class="text-center">
<small >
Price may vary at final package and logistics within Guatemala (just an example)
for Ecommerce and Whole sale prices please please sign up or contact sales
</small>
</p>
</div>
</div>
<div class="seccion seccion-xs">
<h1 class="text-center p-3">It is important to know that there are 3 weights to your package.</h1>
<div class="h-75 container">
<div class="row h-100 d-flex align-items-around justify-content-between">
<div class="card-tile p-2 col-12 col-md-5 col-lg-5 col-xl-5">
<h3>Real Weight</h3>
<p class="text-justify">Real weight is the one obtained through
normal scales. It is necessary that you use
a scale with a minimum error margin and
that you make sure the weight is in
Kilograms.
.</p>
</div>
<div class="card-tile p-2 col-12 col-md-5 col-lg-5 col-xl-5">
<h3>Volumetric Weight</h3>
<p class="text-justify">Volumetric weight is based on the
box's dimensions in which your
product is in. It is an international
standardized formula. Make sure
that the dimensions you are using
(Length, Width, Height) are in
centimeters.</p>
</div>
<div class="card-tile p-2 col-12 col-md-12 col-lg-12 col-xl-12">
<h3> Billable Weight</h3>
<p class="text-justify">The billable weight is obtained from the prior 2 weights, the highest of
them will be the weight that will be used to set your rate.</p>
</div>
</div>
</div>
</div>
<div class="seccion d-flex align-items-center">
<div class="container ">
<h1 class="text-center">Real Time Examples</h1>
<p class="mt-3">María wants to send a Huipil. After packing it, she weighs it on a scale
and the scale reads 1.35 Kg (Real Weight). After that, she takes all measures of the box in centimeters and uses the Volumetric Weight
formula to find her second weight which is 2.2 Kg (Volumetric Weight), so María will have to use the 2.2 Kilos as her preliminary billable weight.
</p>
<p class="mt-3">
María In the case of Maria, her package is 2.2 Kg, therefore with the round-up, her final weight will be 2.5 Kg. Now she will be able to find her price in our pricesheet.
</p>
</div>
</div>
</div>
<footer class="bg-dark text-center p-5">
© Page created and powered by DreamTech 2021
</footer>
<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="js/core.js"></script>
</body>
</html>