-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
410 lines (402 loc) · 15.2 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
403
404
405
406
407
408
409
410
<!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" />
<meta name="description" content="descripcion de la pagia" />
<link rel="stylesheet" href="./css/styles.css" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<title>FrandOn</title>
</head>
<body>
<header>
<div class="wrapperHeader">
<section class="brandContainer">
<img src="./assets/img/Logo.svg" alt="Logo" />
</section>
<section class="menuContainer">
<button class="menuButton" onclick="toggleMenu()" id="menuButton">
<div class="menuToggle">
<i></i>
</div>
</button>
<nav class="menuContent">
<ul class="menu" id="menu">
<li class="menuItem"><a href="#">Home</a></li>
<li class="menuItem"><a href="#about">About Us</a></li>
<li class="menuItem"><a href="#services">Services</a></li>
<li class="menuItem"><a href="#faqs">FAQs</a></li>
<li class="menuItem"><a href="#whyus">Why Us</a></li>
<li class="menuItem"><a href="#contact">Contacto</a></li>
</ul>
</nav>
</section>
</div>
</header>
<div class="wrapperMain">
<main>
<section class="bannerContainer" id="banner">
<div
class="
swiper
mySwiper
swiper-initialized swiper-horizontal swiper-pointer-events
"
>
<div
class="swiper-wrapper"
id="swiper-wrapper-4394c8439eb7d512"
aria-live="polite"
style="
transition-duration: 0ms;
transform: translate3d(-960px, 0px, 0px);
"
>
<div class="swiper-slide" role="group" aria-label="1 / 3">
<img src="./assets/img/WEB-SLIDER-1.jpg" alt="Truck Image 1" />
</div>
<div class="swiper-slide" role="group" aria-label="2 / 3">
<img src="./assets/img/WEB-SLIDER-2.jpg" alt="Truck Image 2" />
</div>
<div class="swiper-slide" role="group" aria-label="3 / 3">
<img src="./assets/img/WEB-SLIDER-3.jpg" alt="Truck Image 3" />
</div>
</div>
<span
class="swiper-notification"
aria-live="assertive"
aria-atomic="true"
></span>
</div>
<div class="bannerDescription">
<h1>
<span>Moving.</span>
<span>Transporting.</span>
<span>Logistic.</span>
</h1>
<h2>We’re a worldwide transport and logistic company</h2>
<a href="#form" class="button">Contact Us</a>
</div>
</section>
<section class="aboutContainer wow" id="about">
<div class="aboutDescription">
<h2 class="title">About Us</h2>
<p>
FrandOn is committed to maximizing the efficiency of your freight
management operations. Our network design engineers work with you
to set up your network for speed and flexibility by selecting and
analyzing facility locations and integrating them into your supply
chain.
</p>
</div>
<div class="aboutImg">
<img src="./assets/img/ABOUT-US.jpg" alt="About Us Image" />
</div>
</section>
<section class="servicesContainer wow" id="services">
<h3>HELP WE HELP YOU</h3>
<h2 class="title">Services</h2>
<div class="cardContainer">
<div class="cardGeneral cardService">
<img src="./assets/img/service-1.jpg" alt="Card1" />
<h3>The 2020 Challenge</h3>
<p>
Managing freight requires more than simply matching shipments to
carriers. Today’s supply chain is more complex, variable and
demanding. With high delivery expectations, multiple carriers,
capacity fluctuations and service compliance – all areas where
costly disruptions can occur – freight management is more
critical than ever.
</p>
</div>
<div class="cardGeneral cardService">
<img src="./assets/img/service-2.jpg" alt="Card1" />
<h3>Our Solutions</h3>
<p>
FrandoOn freight management solutions provide visibility and
control over your network, create the most efficient routes to
move product, and help you get the most from carriers. What
makes FrandoOn different is our ability to focus on and affect
the entire freight management process, including tactical
planning and procurement, as well as accounting functionality.
</p>
</div>
<div class="cardGeneral cardService">
<img src="./assets/img/service-3.jpg" alt="Card1" />
<h3>Improve Your Rol</h3>
<p>
By leveraging our full portfolio of transportation solutions,
FrandoOn also evaluates mode selection, backhaul opportunities
and consolidation prospects and allows us to create a customized
solution for you. By consistently seeking out new ways to
improve your supply chain and freight management operations, we
can create a strong ROI by capitalizing on cost savings, cost
avoidance and cost mitigation to build a continuous improvement
strategy for the future.
</p>
</div>
</div>
</section>
<section class="faqsContainer wow" id="faqs">
<h2 class="title">FAQs</h2>
<div class="faqsContent">
<button class="faqsTitle">
Do you offer volumen discount?
<img
style="width: 20px"
src="./assets/icon/plus.svg"
alt="plus"
/>
</button>
<p class="faqsDescription">We do! For accounts over 50 trips/yr.</p>
</div>
<div class="faqsContent">
<button class="faqsTitle">
Do you offer unnatended services?
<img
style="width: 20px"
src="./assets/icon/plus.svg"
alt="plus"
/>
</button>
<p class="faqsDescription">
Absolutely! We are looking to free your time, just let us know
your terms and we'll reporting as needed.
</p>
</div>
<div class="faqsContent">
<button class="faqsTitle">
Who drives your truck?
<img
style="width: 20px"
src="./assets/icon/plus.svg"
alt="plus"
/>
</button>
<p class="faqsDescription">
Our team! We don't let third parties handle our responsabilities,
we have a large and experience team to properly handle your
freight.
</p>
</div>
<div class="faqsContent">
<button class="faqsTitle">
Do you do contracts?
<img
style="width: 20px"
src="./assets/icon/plus.svg"
alt="plus"
/>
</button>
<p class="faqsDescription">
Nope! We believe in freedom, quality and customer satisfaction
before money.
</p>
</div>
</section>
<section class="whyusContainer wow" id="whyus">
<h2 class="title">Why Us</h2>
<div class="cardContainer">
<div class="cardGeneral cardwhyus">
<img src="./assets/img/expert.svg" alt="Expert Icon" />
<h3>Expert</h3>
<p>Our board off expert will assure you get only the best.</p>
</div>
<div class="cardGeneral cardwhyus">
<img src="./assets/img/risk.svg" alt="Risk Management Icon" />
<h3>Risk Management</h3>
<p>
Full peice of mind. We will find a best solution to keep your
freight safe.
</p>
</div>
<div class="cardGeneral cardwhyus">
<img src="./assets/img/budged.svg" alt="Budged Icon" />
<h3>Budged Control</h3>
<p>No surprises here! Clear pricing from day one.</p>
</div>
<div class="cardGeneral cardwhyus">
<img src="./assets/img/insurance.svg" alt="Insurance Icon" />
<h3>Insurance3</h3>
<p>We always have a backup plan, no loose ends.</p>
</div>
</div>
</section>
<section class="quotesContainer wow">
<p>
“We always have a back up plan, no loose ends. Full peace of mind,
we will find a best solutoin to keep your freight safe.”
</p>
<p>Frand On</p>
</section>
<section class="contactContainer wow" id="contact">
<div class="instructionsContainer">
<h2 class="title">Request a Free Quote</h2>
<p class="instructionsInfo">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Laboriosam impedit sed nihil recusandae similique quos,
perspiciatis tempora incidunt eum sunt.
</p>
<section class="instruction">
<div>
<img src="./assets/icon/check-circle.svg" alt="Check Icon" />
</div>
<div>
<h4>Licensed & Insured</h4>
<p>Contacts us now to get a free consultation</p>
</div>
</section>
<section class="instruction">
<div>
<img src="./assets/icon/comments.svg" alt="Comment Icon" />
</div>
<div>
<h4>Free Consultation</h4>
<p>Contacts us now to get a free consultation</p>
</div>
</section>
</div>
<div class="formContainer">
<form action="registro.php" method="POST" id="form">
<input
type="text"
name="name"
id="name"
placeholder="First Name"
/>
<input
type="location"
name="address"
id="address"
placeholder="Address"
/>
<input type="phone" name="phone" id="phone" placeholder="Phone" />
<textarea
name="message"
cols="30"
rows="10"
placeholder="Type Your Message"
></textarea>
<button type="submit" class="button submit">Send</button>
</form>
</div>
</section>
<section class="benefitContainer wow">
<h2 class="title">Benefits</h2>
<div class="benefitContent">
<div class="benefit benefit1">
<img src="./assets/img/mini-carousel-1.svg" alt="Benefit 1" />
</div>
<div class="benefit benefit2">
<img src="./assets/img/mini-carousel-2.svg" alt="Benefit 2" />
</div>
<div class="benefit benefit3">
<img src="./assets/img/mini-carousel-3.svg" alt="Benefit 3" />
</div>
<div class="benefit benefit4">
<img src="./assets/img/mini-carousel-4.svg" alt="Benefit 4" />
</div>
<div class="benefit benefit5">
<img src="./assets/img/mini-carousel-5.svg" alt="Benefit 5" />
</div>
</div>
</section>
</main>
<footer class="wow">
<div class="footerBrand">
<img src="./assets/img/Logo.svg" alt="Logo" />
</div>
<section class="infoFooterContainer">
<div class="addressContainer">
<h3 class="title">Contact</h3>
<section class="itemFooter">
<div>
<img
src="./assets/icon/map-marker-alt.svg"
alt="Location Icon"
/>
<p>20 Street Name, Suite 151, Texas, United States</p>
</div>
</section>
<section class="itemFooter">
<div>
<img src="./assets/icon/phone-alt.svg" alt="Phone Icon" />
<p>111-222-3333</p>
</div>
</section>
<section class="itemFooter">
<div>
<img src="./assets/icon/mail-bulk.svg" alt="Mail Icon" />
<p>companyname@yourmail.com</p>
</div>
</section>
<section class="itemFooter">
<div>
<img src="./assets/icon/clock.svg" alt="Clock Icon" />
<p>Mon - Fri | 9am - 6pm</p>
</div>
</section>
</div>
<div class="rrssContainer">
<h3 class="title">Follow</h3>
<section class="itemFooter">
<div>
<a href="https://www.facebook.com">
<img src="./assets/icon/facebook-f.svg" alt="Facebook Icon" />
<p>Facebook</p>
</a>
</div>
</section>
<section class="itemFooter">
<div>
<a href="https://www.twitter.com">
<img src="./assets/icon/twitter.svg" alt="Twitter Icon" />
<p>Twitter</p>
</a>
</div>
</section>
<section class="itemFooter">
<div>
<a href="https://www.linkedin.com">
<img
src="./assets/icon/linkedin-in.svg"
alt="Linkedin Icon"
/>
<p>Linkedin</p>
</a>
</div>
</section>
<section class="itemFooter">
<div>
<a href="https://www.youtube.com">
<img src="./assets/icon/youtube.svg" alt="Youtube Icon" />
<p>Youtube</p>
</a>
</div>
</section>
</div>
</section>
<div class="firmContainer">
<p>All Right Reserve</p>
</div>
</footer>
</div>
<script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="./js/main.js"></script>
<script src="./js/wow/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>