-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
577 lines (469 loc) · 22.4 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
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
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
<!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="video.css"> -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/fontawesome.css">
<link rel="stylesheet" href="node_modules/bootstrap-icons/font/bootstrap-icons.css">
<title>Tascal Engineering</title>
</head>
<header>
<!-- NAVBAR -->
<section id="navbar"></section>
</header>
<body>
<!-- Intro Section -->
<section id="intro-section" class="container-fluid bdss text-center px-0"
style="padding-top: 7.5rem; padding-bottom: 2.5rem; height: 100vh;">
<div class="d-flex flex-column mx-5 h-100 align-content-around">
<div class="my-0 p-0 text-white">
<p>
<span class="badge bg-warning-subtle text-primary mx-1 ">New in Montenegro</span>
Electrical contractor with over 20 years in the market!
</p>
</div>
<div class="d-flex my-auto flex-row">
<div class="d-flex flex-column">
<div class="mb-auto d-none d-lg-block">
<img src="media/logo/[email protected]" alt="Tascal Engineering" class="img-fluid">
</div>
<div class="mb-auto d-md-block d-lg-none">
<img src="media/logo/[email protected]" alt="Tascal Engineering" class="img-fluid">
</div>
<div class="p-0">
<p class="lead display-6 text-start text-white">
Electrical installations and Automation.
</p>
</div>
</div>
<div class="m-auto d-none d-sm-block">
<img src="media/logo/[email protected]" alt="Tascal Engineering" class="img-fluid w-25">
</div>
</div>
<div class="p-2 ms-auto align-items-end">
<h5 class="text-dark fw-light text-start text-white">
Expertise in electrical engineering and automation for commercial construction and industry,
delivering
turnkey solutions from concept to completion. Trusted partner for consulting, design, programming,
installation,
and maintenance services.
</h5>
<button class="btn bg-info p-2 mt-5" type="button">
<a href="landing.html" class="text-decoration-none">
<p class=" fw-semibold fw-normal text-primary m-0">
<i class="fa fa-book"></i>    Learn more
</p>
</a>
</button>
</div>
</div>
</section>
<!-- SECTION SERVICES -->
<section id="SERVICES">
<!-- Wave -->
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#14253e" fill-opacity="1"
d="M0,288L26.7,272C53.3,256,107,224,160,192C213.3,160,267,128,320,133.3C373.3,139,427,181,480,181.3C533.3,181,587,139,640,101.3C693.3,64,747,32,800,42.7C853.3,53,907,107,960,112C1013.3,117,1067,75,1120,85.3C1173.3,96,1227,160,1280,170.7C1333.3,181,1387,139,1413,117.3L1440,96L1440,0L1413.3,0C1386.7,0,1333,0,1280,0C1226.7,0,1173,0,1120,0C1066.7,0,1013,0,960,0C906.7,0,853,0,800,0C746.7,0,693,0,640,0C586.7,0,533,0,480,0C426.7,0,373,0,320,0C266.7,0,213,0,160,0C106.7,0,53,0,27,0L0,0Z">
</path>
</svg> -->
<div class="container" style="margin-top: 5rem;">
<!-- HEAD -->
<div class="row">
<p class="display-4 fw-bold text-primary text-center">Our Services</p>
<div class="heading-line mb-5"></div>
</div>
<!-- HEAD 2 -->
<div class="row p-2 m-5">
<div class="col-md-6 align-self-center custom-border-right">
<div class="bg-white p-3">
<h2 class="fw-bold text-capitalize text-center">
Individual solutions <br><br>
complete turnkey projects
</h2>
</div>
</div>
<div class="col-md-6 align-self-center">
<div class="bg-white p-3 text-start">
<p class="lead fw-light">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur, quo quae, officiis
praesentium facere sit repellendus ab recusandae doloremque dolorem expedita quidem ea
veritatis distinctio sint pariatur adipisci id est?
</p>
</div>
</div>
</div>
<!-- ELECTRICAL DESIGN -->
<div class="row p-0 my-5">
<!-- LEFT TEXT -->
<div class="col-md-6 my-3 my-sm-0">
<div class="d-flex flex-column justify-content-center h-100">
<div class="container">
<div class="fa fa-bolt fs-1"></div>
<h2 class="display-5 fw-bold">Electrical Design</h2>
</div>
<div class="container my-4">
<p class="lead">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident cupiditate
dignissimos
aliquid necessitatibus maiores, tempore exercitationem autem assumenda maxime nemo ipsum
sint!
Assumenda eos odio animi impedit dolore tenetur qui.
</p>
<a href="/docs/5.3/getting-started/download/" class="customHover text-center my-4 fw-semibold ">
<span>More information</span>
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- RIGHT CAROUSEL -->
<div class="col-md-6 my-3 my-sm-0">
<div class="d-flex flex-column justify-content-center h-100">
<div id="carousel_0" class="carousel my-auto slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
aria-label="Slide 4"></button>
</div>
<div class="carousel-inner rounded-3 border border-4 border-primary shadow">
<div class="carousel-item active" data-bs-interval="1400">
<img src="media/carousel/Design/Asset [email protected]" class="img-fluid" alt="...">
</div>
<div class="carousel-item" data-bs-interval="1400">
<img src="media/carousel/Design/Asset [email protected]" class="img-fluid" alt="...">
</div>
<div class="carousel-item " data-bs-interval="1400">
<img src="media/carousel/Design/Asset [email protected]" class="img-fluid" alt="...">
</div>
<div class="carousel-item " data-bs-interval="1400">
<img src="media/carousel/Design/Asset [email protected]" class="img-fluid" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel_0" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel_0" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
<!-- INSTALLATION -->
<div class="row p-0 my-5">
<!-- LEFT CAROUSEL -->
<div class="col-md-6 my-3 my-sm-0 order-last order-md-first">
<div class="d-flex flex-column justify-content-center h-100">
<dv id="carousel_1" class="carousel slide carousel-fade my-auto" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
aria-label="Slide 4"></button>
</div>
<div class="carousel-inner rounded-3 border border-4 border-primary shadow">
<div class="carousel-item active" data-bs-interval="1500">
<img src="media/carousel/Installations/Asset [email protected]" class="img-fluid" alt="...">
</div>
<div class="carousel-item" data-bs-interval="1500">
<img src="media/carousel/Installations/Asset [email protected]" class="img-fluid" alt="...">
</div>
<div class="carousel-item " data-bs-interval="1500">
<img src="media/carousel/Installations/Asset [email protected]" class="img-fluid" alt="...">
</div>
<div class="carousel-item " data-bs-interval="1500">
<img src="media/carousel/Installations/Asset [email protected]" class="img-fluid" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel_1" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel_1" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</dv>
</div>
</div>
<!-- RIGHT TEXT -->
<div class="col-md-6 my-3 my-sm-0 order-first ">
<div class="d-flex flex-column justify-content-center order-md-last h-100">
<div class="container">
<i class="fa fa-bolt fs-1"></i>
<h2 class="display-5 fw-bold ">Installation</h2>
</div>
<div class="container">
<p class="lead">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident cupiditate
dignissimos
aliquid necessitatibus maiores, tempore exercitationem autem assumenda maxime nemo ipsum
sint!
Assumenda eos odio animi impedit dolore tenetur qui.
</p>
<a href="/docs/5.3/getting-started/download/" class="customHover text-center mt-4 fw-semibold ">
<span>Once in a lifetime solutions</span>
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
</div>
<!-- PROGRAMMING -->
<div class="row p-0 my-5 pb-5">
<!-- LEFT TEXT -->
<div class="col-md-6 my-3 my-sm-0">
<div class="d-flex flex-column justify-content-center h-100">
<div class="container">
<i class="fa fa-bolt fs-1"></i>
<h2 class="display-5 fw-bold ">Programming</h2>
</div>
<div class="container">
<p class="lead">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident cupiditate
dignissimos
aliquid necessitatibus maiores, tempore exercitationem autem assumenda maxime nemo ipsum
sint!
Assumenda eos odio animi impedit dolore tenetur qui.
</p>
<a href="/docs/5.3/getting-started/download/" class="customHover text-center mt-4 fw-semibold ">
<span>Programming in hotel industry</span>
<i class="fa fa-arrow-right"></i>
</a>
<br>
<br>
<a href="/docs/5.3/getting-started/download/" class="customHover text-center mt-4 fw-semibold ">
<span>Programming of industrial devices</span>
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</div>
<!-- RIGHT CAROUSEL -->
<div class="col-md-6 my-3 my-sm-0">
<div class="d-flex flex-column justify-content-center h-100">
<div id="carousel_2" class="carousel my-auto slide carousel-fade " data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
aria-label="Slide 1" class="active" aria-current="true"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
aria-label="Slide 4"></button>
</div>
<div class="carousel-inner rounded-3 border border-4 border-primary shadow">
<div class="carousel-item active" data-bs-interval="1300">
<img src="media/carousel/Programming/[email protected]" class="img-fluid" alt="...">
</div>
<div class="carousel-item" data-bs-interval="1300">
<img src="media/carousel/Programming/[email protected]" class="img-fluid" alt="...">
</div>
<div class="carousel-item " data-bs-interval="1300">
<img src="media/carousel/Programming/[email protected]" class="img-fluid" alt="...">
</div>
<div class="carousel-item " data-bs-interval="1300">
<img src="media/carousel/Programming/[email protected]" class="img-fluid" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carousel_2" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carousel_2" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- SECTION COMMISSIONING AND STARTUP -->
<section id="COMMISSIONING" class="bg-primary p-5">
<div class="container">
<!-- HEAD -->
<div class="row">
<p class="display-4 fw-bold text-white mt-5 text-center">Commissioning & System Startup</p>
<div class="heading-line-white mb-5"></div>
</div>
<!-- HEAD 2 -->
<div class="row p-2 m-5">
<div class="col-md-6 align-self-center my-auto px-4 custom-border-right">
<h4 class="fw-bold text-end text-white">
Our experience is a guarantee for top-notch commissioning and start-up procedures
</h4>
</div>
<div class="col-md-6 my-auto align-self-center px-4">
<p class="fw-light text-white-50">
Commissioning and start-up procedures are crucial for ensuring that control systems operate as intended
and meet client requirements.
</p>
</div>
<a href="/docs/5.3/getting-started/download/" class="customHover text-center mt-4 fw-semibold ">
<span>See how we can help you initialize your systems </span>
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</section>
<div class="b-custom-divider"></div>
<!-- SECTION MAINTENANCE -->
<section id="MAINTENANCE" class="bg-white p-5">
<div class="container mb-0">
<!-- HEAD -->
<div class="d-flex flex-row">
<div class="d-block mx-auto justify-c">
<p class="badge badge-info bg-secondary-subtle text-primary border border-secondary border-2 my-0 ">For
existing buildings</p>
<br>
<span class="display-4 fw-bold text-center">Maintenance <br></span>
</div>
</div>
<div class="heading-line mb-5"></div>
<!-- HEAD 2 -->
<div class="row p-2 m-5 mb-0">
<div class="col-md-6 align-self-center my-auto custom-border-right">
<div class="container h-100 my-auto"></div>
<h4 class="fw-bold text-end">
Minimize equipment downtime with regular inspection and maintenance.
</h4>
</div>
<div class="col-md-6 align-self-center my-auto">
<p class="fw-light text-primary">
We recommend regular scheduled maintenance, prioritizing critical equipment with more frequent inspections
and tests.
</p>
</div>
<a href="/docs/5.3/getting-started/download/" class="customHover text-center mt-4 fw-semibold ">
<span>See maintenance plans </span>
<i class="fa fa-arrow-right"></i>
</a>
</div>
</div>
</section>
<!-- SECTION PARTNERSHIPS -->
<section id="PARTNERSHIPS" class="my-5 py-5">
<!-- Content -->
<div class="container-fluid bg-primary my-5 py-5">
<!-- Text -->
<div class="container bg-primary mb-5 px-5">
<div class="row">
<p class="display-4 fw-bold text-white text-center">Our Partners</p>
<div class="heading-line-white mb-5"></div>
</div>
<div class="row">
<div class="col">
<p class="lead text-white">
Success is impossible without meaningfull relationships.
<br>
<br>
In the last 2 decades on the market we've had the opportunity to show how commited we are to
providing
uncompromising solutions and services. The work we've done in the domain of electrical engineering
has
resulted in the formal recognition by the industry leading vendors.
Our partners trust us to keep delivering uncompromosing results - <strong class="fw fw-semibold">Why
wouldn't
you?</strong>
</p>
<p>
<a href="/docs/5.3/getting-started/download/" class="customHover fw-semibold ">
<span>Read more about partnerships</span>
<i class="fa fa-arrow-right"></i>
</a>
</p>
<p>
<a href="/docs/5.3/getting-started/download/" class="customHover fw-semibold ">
<span>Request an inquiry</span>
<i class="fa fa-arrow-right"></i>
</a>
</p>
</div>
<div class="col">
<div class="row">
<div class="card border-0 shadow-lg m-1">
<div class="card-body p-0">
<img src="media/Partnerships/[email protected]" class="img-fluid grayscale " alt="Tascal Engineering">
</div>
<div class="card-footer bg-secondary text-center py-0 my-0 px-0">
<p class="fw text-center text-white py-0 my-1 fw-semibold">Solution Partner</p>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card border-0 shadow-lg m-1">
<div class="card-body p-0">
<img src="media/Partnerships/[email protected]" class="img-fluid grayscale " alt="Tascal Engineering">
</div>
<div class="card-footer bg-secondary text-center py-0 my-0 px-0">
<p class="fw text-center text-white py-0 my-1 fw-semibold">Registered Partner</p>
</div>
</div>
</div>
<div class="col">
<div class="card border-0 shadow-lg m-1">
<div class="card-body p-0">
<img src="media/Partnerships/[email protected]" class="img-fluid grayscale " alt="Tascal Engineering">
</div>
<div class="card-footer bg-secondary text-center py-0 my-0 px-0">
<p class="fw text-center text-white py-0 my-1 fw-semibold">Registered Partner</p>
</div>
</div>
</div>
</div>
<!-- Cards -->
<div class="container px-5 mb-4">
<div class="d-sm-flex flex-row">
<div class="card border-0 shadow-lg m-1">
<div class="card-body p-0">
<img src="media/Partnerships/[email protected]" class="img-fluid grayscale" alt="Tascal Engineering">
</div>
<div class="card-footer bg-secondary text-center py-0 my-0 px-0">
<p class="fw text-center text-white py-0 my-1 fw-semibold">Silver Partner</p>
</div>
</div>
<div class="card border-0 shadow-lg m-1">
<div class="card-body p-0">
<img src="media/Partnerships/[email protected]" class="img-fluid grayscale " alt="Tascal Engineering">
</div>
<div class="card-footer bg-secondary text-center py-0 my-0 px-0">
<p class="fw text-center text-white py-0 my-1 fw-semibold">Solution Partner </p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- More -->
<div class="container">
</div>
</div>
</section>
<!-- FOOTER SECTION -->
<!-- Footer -->
<!-- NAVBAR -->
<section id="footer"></section>
<script src="globals/navbar.js"></script>
<script src="globals/footer.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
</body>
</html>