-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
939 lines (843 loc) · 64 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
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
<!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">
<!--Fonts-->
<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=PT+Sans:wght@400;700&family=Playfair+Display:wght@400;700;900&family=Roboto:wght@300;700&display=swap"
rel="stylesheet">
<!--styles-->
<link rel="stylesheet" href="./css/main.css">
<!--favicon-->
<link rel="icon" type="favicon" href="./img/favicon.png">
<title>Hapag-Lloyd</title>
</head>
<body>
<div class="wrapper">
<!--header-->
<header class="header">
<div class="container">
<a href="#" class="logo">
<img src="./img/logo.png" alt="logo">
</a>
<nav class="header__nav">
<div class="header__hamb">
<div class="header__hamb-line header__hamb-line--top"></div>
<div class="header__hamb-line header__hamb-line--middle"></div>
<div class="header__hamb-line header__hamb-line--bottom"></div>
</div>
<ul class="header__nav-container">
<li class="header__nav-item">
<a href="#" class="header__nav-link">
Home
</a>
</li>
<li class="header__nav-item">
<a href="#" class="header__nav-link">
Service & Information
</a>
</li>
<li class="header__nav-item">
<a href="#" class="header__nav-link">
Our Company
</a>
</li>
<li class="header__nav-item">
<a href="#" class="header__nav-link">
Our Business Suit
</a>
</li>
<li class="header__nav-item">
<a href="#" class="header__nav-link">
Our Business Suit
</a>
</li>
<li class="header__nav-item">
<button id="btnLogin" class="btn header__nav-btn">
Login
</button>
</li>
</ul>
</nav>
</div>
</header>
<main class="main">
<!--hero-->
<section class="hero">
<div class="container">
<div class="hero__descr">
<h1 class="title hero__title">
Online Business Suit
</h1>
<a href="#more" class="hero__link">
Learn more
</a>
</div>
<a class="scroll-link">
<svg class=" mouse" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 76 130"
preserveAspectRatio="xMidYMid meet">
<g fill="none" fill-rule="evenodd">
<rect width="70" height="118" x="1.5" y="1.5" stroke="#FFF" stroke-width="3" rx="36" />
<circle class="scroll" cx="36.5" cy="31.5" r="4.5" fill="#FFF" />
</g>
</svg>
</a>
</div>
</section>
<!--Global trade-->
<section class="global-trade">
<div class="container">
<h2 class="h2 section-title global-trade__title">
Find your nearest Office & Local Info
</h2>
<p class="subtitle global-trade__subtitle">
Around the Globe
</p>
<div class="global-trade__form-row">
<form class="form__card">
<div class="form__card-descr">
<svg width="23" height="22" viewBox="0 0 23 22" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_53_40)">
<path
d="M4.86273 0C5.04507 0 5.21994 0.0724328 5.34887 0.201364C5.4778 0.330295
5.55023 0.505164 5.55023 0.6875V1.375H16.5502V0.6875C16.5502 0.505164
16.6227 0.330295 16.7516 0.201364C16.8805 0.0724328 17.0554 0 17.2377
0C17.4201 0 17.5949 0.0724328 17.7239 0.201364C17.8528 0.330295 17.9252
0.505164 17.9252 0.6875V1.375H19.3002C20.0296 1.375 20.729 1.66473 21.2448
2.18046C21.7605 2.69618 22.0502 3.39565 22.0502 4.125V19.25C22.0502 19.9793
21.7605 20.6788 21.2448 21.1945C20.729 21.7103 20.0296 22 19.3002
22H2.80023C2.07089 22 1.37141 21.7103 0.855688 21.1945C0.339963
20.6788 0.0502319 19.9793 0.0502319 19.25V4.125C0.0502319 3.39565
0.339963 2.69618 0.855688 2.18046C1.37141 1.66473 2.07089 1.375 2.80023 1.375H4.17523V0.6875C4.17523 0.505164 4.24766 0.330295 4.3766 0.201364C4.50553 0.0724328 4.6804 0 4.86273 0V0ZM2.80023 2.75C2.43556 2.75 2.08582 2.89487 1.82796 3.15273C1.5701 3.41059 1.42523 3.76033 1.42523 4.125V19.25C1.42523 19.6147 1.5701 19.9644 1.82796 20.2223C2.08582 20.4801 2.43556 20.625 2.80023 20.625H19.3002C19.6649 20.625 20.0146 20.4801 20.2725 20.2223C20.5304 19.9644 20.6752 19.6147 20.6752 19.25V4.125C20.6752 3.76033 20.5304 3.41059 20.2725 3.15273C20.0146 2.89487 19.6649 2.75 19.3002 2.75H2.80023Z"
fill="#777777" />
<path
d="M3.48773 5.5C3.48773 5.31766 3.56016 5.1428 3.6891 5.01386C3.81803 4.88493 3.9929 4.8125 4.17523 4.8125H17.9252C18.1076 4.8125 18.2824 4.88493 18.4114 5.01386C18.5403 5.1428 18.6127 5.31766 18.6127 5.5V6.875C18.6127 7.05734 18.5403 7.2322 18.4114 7.36114C18.2824 7.49007 18.1076 7.5625 17.9252 7.5625H4.17523C3.9929 7.5625 3.81803 7.49007 3.6891 7.36114C3.56016 7.2322 3.48773 7.05734 3.48773 6.875V5.5ZM15.1752 10.3125C15.1752 10.1302 15.2477 9.9553 15.3766 9.82636C15.5055 9.69743 15.6804 9.625 15.8627 9.625H17.2377C17.4201 9.625 17.5949 9.69743 17.7239 9.82636C17.8528 9.9553 17.9252 10.1302 17.9252 10.3125V11.6875C17.9252 11.8698 17.8528 12.0447 17.7239 12.1736C17.5949 12.3026 17.4201 12.375 17.2377 12.375H15.8627C15.6804 12.375 15.5055 12.3026 15.3766 12.1736C15.2477 12.0447 15.1752 11.8698 15.1752 11.6875V10.3125ZM11.0502 10.3125C11.0502 10.1302 11.1227 9.9553 11.2516 9.82636C11.3805 9.69743 11.5554 9.625 11.7377 9.625H13.1127C13.2951 9.625 13.4699 9.69743 13.5989 9.82636C13.7278 9.9553 13.8002 10.1302 13.8002 10.3125V11.6875C13.8002 11.8698 13.7278 12.0447 13.5989 12.1736C13.4699 12.3026 13.2951 12.375 13.1127 12.375H11.7377C11.5554 12.375 11.3805 12.3026 11.2516 12.1736C11.1227 12.0447 11.0502 11.8698 11.0502 11.6875V10.3125ZM4.17523 14.4375C4.17523 14.2552 4.24766 14.0803 4.3766 13.9514C4.50553 13.8224 4.6804 13.75 4.86273 13.75H6.23773C6.42007 13.75 6.59494 13.8224 6.72387 13.9514C6.8528 14.0803 6.92523 14.2552 6.92523 14.4375V15.8125C6.92523 15.9948 6.8528 16.1697 6.72387 16.2986C6.59494 16.4276 6.42007 16.5 6.23773 16.5H4.86273C4.6804 16.5 4.50553 16.4276 4.3766 16.2986C4.24766 16.1697 4.17523 15.9948 4.17523 15.8125V14.4375ZM8.30023 14.4375C8.30023 14.2552 8.37266 14.0803 8.5016 13.9514C8.63053 13.8224 8.8054 13.75 8.98773 13.75H10.3627C10.5451 13.75 10.7199 13.8224 10.8489 13.9514C10.9778 14.0803 11.0502 14.2552 11.0502 14.4375V15.8125C11.0502 15.9948 10.9778 16.1697 10.8489 16.2986C10.7199 16.4276 10.5451 16.5 10.3627 16.5H8.98773C8.8054 16.5 8.63053 16.4276 8.5016 16.2986C8.37266 16.1697 8.30023 15.9948 8.30023 15.8125V14.4375Z"
fill="#777777" />
</g>
<defs>
<clipPath id="clip0_53_40">
<rect width="22" height="22" fill="white"
transform="translate(0.0502319)" />
</clipPath>
</defs>
</svg>
<h4 class="form__card-title">
Schedules
</h4>
</div>
<div class="fieldset">
<input type="date" id="start" name="trip-start" value="2023-05-20" min="2023-05-20"
max="2024-05-20" required>
<input type="date" id="to" name="trip-to" value="2023-05-20" min="2023-05-20"
max="2024-05-20" required>
<button class="btn form__btn">
Discover More
</button>
</div>
</form>
<form class="form__card">
<div class="form__card-descr">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_94_27)">
<path
d="M11 4.10669C10.3074 4.10669 9.63042 4.31206 9.05458 4.69683C8.47873 5.08159 8.02991 5.62848 7.76488 6.26833C7.49985 6.90817 7.4305 7.61224 7.56561 8.2915C7.70073 8.97075 8.03423 9.59469 8.52395 10.0844C9.01366 10.5741 9.6376 10.9076 10.3169 11.0427C10.9961 11.1779 11.7002 11.1085 12.34 10.8435C12.9799 10.5784 13.5268 10.1296 13.9115 9.55378C14.2963 8.97793 14.5017 8.30092 14.5017 7.60836C14.5017 6.67966 14.1327 5.78899 13.476 5.1323C12.8194 4.47561 11.9287 4.10669 11 4.10669ZM11 9.8878C10.5492 9.8878 10.1085 9.75411 9.73361 9.50365C9.35875 9.25318 9.06659 8.89718 8.89407 8.48066C8.72154 8.06415 8.6764 7.60583 8.76435 7.16366C8.8523 6.72149 9.0694 6.31533 9.38819 5.99655C9.70697 5.67776 10.1131 5.46066 10.5553 5.37271C10.9975 5.28476 11.4558 5.3299 11.8723 5.50242C12.2888 5.67495 12.6448 5.96711 12.8953 6.34196C13.1458 6.71682 13.2794 7.15752 13.2794 7.60836C13.2778 8.21184 13.037 8.79006 12.6097 9.21622C12.1823 9.64238 11.6035 9.88169 11 9.88169V9.8878Z"
fill="#777777" />
<path
d="M18.1928 8.24378C17.7781 8.23225 17.3669 8.16441 16.9706 8.04211V8.39045C16.9706 10.8716 15.4917 13.0777 14.41 14.691L14.19 15.0149C13.1389 16.5916 11.7456 18.3577 10.9939 19.2316C10.2728 18.3577 8.84889 16.5916 7.79778 15.0149L7.59 14.6666C6.50833 13.0532 5.02333 10.8471 5.02333 8.366C5.02704 7.33842 5.29589 6.32919 5.80389 5.43596C6.31188 4.54272 7.04182 3.79571 7.92307 3.2672C8.80433 2.73869 9.80707 2.44658 10.8343 2.41912C11.8615 2.39166 12.8784 2.62978 13.7867 3.11045C13.8353 2.69026 13.9423 2.27889 14.1044 1.88823C13.007 1.3582 11.7928 1.11621 10.576 1.18505C9.35924 1.25388 8.18001 1.63128 7.14938 2.28169C6.11874 2.93211 5.2706 3.83414 4.68484 4.90284C4.09907 5.97154 3.79495 7.17175 3.80111 8.39045C3.80111 11.2443 5.40222 13.6338 6.57555 15.3754L6.78944 15.6932C7.95684 17.3852 9.20918 19.0169 10.5417 20.5821L11.0061 21.126L11.4706 20.5821C12.8029 19.0167 14.0552 17.385 15.2228 15.6932L15.4367 15.3693C16.6039 13.6277 18.205 11.2443 18.205 8.39045C18.1989 8.34156 18.1928 8.29267 18.1928 8.24378V8.24378Z"
fill="#777777" />
<path
d="M18.3333 6.7222C20.0209 6.7222 21.3889 5.35418 21.3889 3.66664C21.3889 1.9791 20.0209 0.611084 18.3333 0.611084C16.6458 0.611084 15.2778 1.9791 15.2778 3.66664C15.2778 5.35418 16.6458 6.7222 18.3333 6.7222Z"
fill="#777777" />
</g>
<defs>
<clipPath id="clip0_94_27">
<rect width="22" height="22" fill="white" />
</clipPath>
</defs>
</svg>
<h4 class="form__card-title">
Tracking
</h4>
</div>
<div class="fieldset">
<input type="text" name="tracking"
placeholder="Enter a Container -/ Booking - or B/L -Number" maxlength="20" size="20"
required>
<button class="btn form__btn">
Discover More
</button>
</div>
</form>
<form class="form__card">
<div class="form__card-descr">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3"
d="M5.5 18.3334V3.66675H11.9167V7.33342H16.5V18.3334H5.5ZM10.0833 17.4167H11.9167V16.5001H12.8333C13.3375 16.5001 13.75 16.0876 13.75 15.5834V12.8334C13.75 12.3292 13.3375 11.9167 12.8333 11.9167H10.0833V11.0001H13.75V9.16675H11.9167V8.25008H10.0833V9.16675H9.16667C8.6625 9.16675 8.25 9.57925 8.25 10.0834V12.8334C8.25 13.3376 8.6625 13.7501 9.16667 13.7501H11.9167V14.6667H8.25V16.5001H10.0833V17.4167Z"
fill="#777777" />
<path
d="M12.8334 1.83325H5.50002C4.49169 1.83325 3.66669 2.65825 3.66669 3.66659V18.3333C3.66669 19.3416 4.49169 20.1666 5.50002 20.1666H16.5C17.5084 20.1666 18.3334 19.3416 18.3334 18.3333V7.33325L12.8334 1.83325ZM5.50002 18.3333V3.66659H11.9167V7.33325H16.5V18.3333H5.50002ZM10.0834 17.4166H11.9167V16.4999H12.8334C13.3375 16.4999 13.75 16.0874 13.75 15.5833V12.8333C13.75 12.3291 13.3375 11.9166 12.8334 11.9166H10.0834V10.9999H13.75V9.16658H11.9167V8.24992H10.0834V9.16658H9.16669C8.66252 9.16658 8.25002 9.57908 8.25002 10.0833V12.8333C8.25002 13.3374 8.66252 13.7499 9.16669 13.7499H11.9167V14.6666H8.25002V16.4999H10.0834V17.4166Z"
fill="#777777" />
</svg>
<h4 class="form__card-title">
Quick Quotes
</h4>
</div>
<div class="fieldset">
<input type="text" name="tracking"
placeholder="Your shipping quote in 30 seconds." maxlength="20" size="20" required>
<button class="btn form__btn">
Discover More
</button>
</div>
</form>
<form class="form__card">
<div class="form__card-descr">
<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path opacity="0.3"
d="M17.2975 3.66675C16.0417 4.75758 13.75 5.61008 11 5.61008C8.25 5.61008 5.95833 4.75758 4.7025 3.66675H17.2975Z"
fill="#777777" />
<path
d="M12.8333 10.0833V7.33325C17.0133 6.80159 20.1667 4.49159 20.1667 1.83325H1.83334C1.83334 4.49159 4.98667 6.80159 9.16667 7.33325V10.0833C5.79334 10.7524 1.83334 13.3924 1.83334 20.1666H7.33334V18.3333H3.78584C4.63834 12.0724 9.88167 11.7333 11 11.7333C12.1183 11.7333 17.3617 12.0724 18.2142 18.3333H14.6667V20.1666H20.1667C20.1667 13.3924 16.2067 10.7524 12.8333 10.0833ZM17.2975 3.66659C16.0417 4.75742 13.75 5.60992 11 5.60992C8.25 5.60992 5.95834 4.75742 4.7025 3.66659H17.2975ZM11 20.1666C9.99167 20.1666 9.16667 19.3416 9.16667 18.3333C9.16667 17.8291 9.36834 17.3708 9.7075 17.0408C10.4408 16.3074 14.6667 14.6666 14.6667 14.6666C14.6667 14.6666 13.0258 18.8924 12.2925 19.6258C11.9625 19.9649 11.5042 20.1666 11 20.1666Z"
fill="#777777" />
</svg>
<h4 class="form__card-title">
VGM - Verified Gross Mass
</h4>
</div>
<div class="fieldset">
<input type="text" id="tracking" name="tracking"
placeholder="Submit your VGM data online." maxlength="20" size="20" required>
<button class="btn form__btn">
Discover More
</button>
</div>
</form>
</div>
</div>
</section>
<!--Block main-->
<section class="block-main">
<div class="container">
<h2 class="h2 section-title block-main__title">
Find your nearest Office & Local Info
</h2>
<p class="subtitle block-main__subtitle">
Around the Globe
</p>
<div class="block-main__descr">
<div class="block-main__descr-left">
<h3 class="h3 block-main__descr-title">
Offices & Local Info
</h3>
<a class="block-main__descr-link link--hover">
Discover More
</a>
</div>
<img src="./img/block-main.jpg" class="block-main__descr-right" alt="photo" width="200">
</div>
</div>
</section>
<!--Blog-->
<section class="blog">
<div class="container">
<h2 class="h2 section-title blog__title">
Latest news: only one click away!
</h2>
<p class="subtitle blog__subtitle">
Latest news: only one click away!
</p>
<div class="blog__row">
<div class="blog__card">
<a href="#">
<img src="./img/card-1.jpg" alt="photo" class="blog__card-img">
</a>
<div class="blog__card-info">
<p class="blog__card-tag">
TECHNOLOGY
</p>
<p class="blog__card-time">
12 HOURS AGO
</p>
</div>
<a href="#" class="blog__card-title">
Going against the grain, AngelPad kills its demo
</a>
<div class="blog__card-creator">
<img src="./img/Avatar.jpg" alt="avatar" class="blog__card-creator-img">
<div class="blog__card-creator-row">
<p class="blog__card-creator-title">
Andreas Petersen
</p>
<p class="blog__card-creator-subtitle">
Author at Panoply Store
</p>
</div>
</div>
</div>
<div class="blog__card">
<a href="#">
<img src="./img/card-2.jpg" alt="photo" class="blog__card-img">
</a>
<div class="blog__card-info">
<p class="blog__card-tag">
TECHNOLOGY
</p>
<p class="blog__card-time">
11 HOURS AGO
</p>
</div>
<a href="#" class="blog__card-title">
Lawyaw uses AI to help lawyers draft faster
</a>
<div class="blog__card-creator">
<img src="./img/Avatar-2.jpg" alt="avatar" class="blog__card-creator-img">
<div class="blog__card-creator-row">
<p class="blog__card-creator-title">
Emily Jørgensen
</p>
<p class="blog__card-creator-subtitle">
Author at Panoply Store
</p>
</div>
</div>
</div>
<div class="blog__card">
<a href="#">
<img src="./img/card-3.jpg" alt="photo" class="blog__card-img">
</a>
<div class="blog__card-info">
<p class="blog__card-tag">
TECHNOLOGY
</p>
<p class="blog__card-time">
11 HOURS AGO
</p>
</div>
<a href="#" class="blog__card-title">
Tumblr confirms 84 accounts linked
</a>
<div class="blog__card-creator">
<img src="./img/Avatar-3.jpg" alt="avatar" class="blog__card-creator-img">
<div class="blog__card-creator-row">
<p class="blog__card-creator-title">
Filippa Hansen
</p>
<p class="blog__card-creator-subtitle">
Author at Panoply Store
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Company-->
<section class="company" id="more">
<div class="container">
<h2 class="h2 section-title company__title">
Hapag-Lloyd in Numbers
</h2>
<p class="subtitle company__subtitle">
Our Company
</p>
<div class="company__content">
<h3 class="h3 company__content-title">
As the 1st largest container carrier, One offers an expeditious and reliable network across
the major trade lanes of the world.
</h3>
<div class="company__row">
<div class="company__item">
<svg class="company__item-img" width="45" height="45" viewBox="0 0 45 45" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M23.025 20.3875C21.6191 20.3727 20.249 19.9423 19.0872 19.1504C17.9254 18.3586 17.0238 17.2407 16.4961 15.9375C15.9683 14.6344 15.8378 13.2042 16.1211 11.8271C16.4045 10.4499 17.0889 9.1874 18.0883 8.19844C19.0877 7.20948 20.3573 6.5383 21.7373 6.2694C23.1173 6.00051 24.5461 6.14592 25.8436 6.68732C27.1412 7.22873 28.2496 8.14194 29.0292 9.31195C29.8089 10.482 30.2249 11.8565 30.225 13.2625C30.2118 15.1611 29.4466 16.977 28.097 18.3125C26.7475 19.648 24.9236 20.3941 23.025 20.3875ZM23.025 8.63749C22.1136 8.65227 21.2269 8.93603 20.4762 9.45314C19.7256 9.97024 19.1445 10.6976 18.8059 11.5439C18.4673 12.3902 18.3863 13.3177 18.5732 14.2099C18.76 15.102 19.2063 15.9191 19.856 16.5584C20.5057 17.1978 21.3299 17.6309 22.2249 17.8033C23.12 17.9758 24.046 17.8799 24.8868 17.5278C25.7275 17.1756 26.4455 16.5829 26.9504 15.824C27.4554 15.0652 27.7249 14.174 27.725 13.2625C27.7118 12.0269 27.21 10.8469 26.3293 9.98021C25.4486 9.11356 24.2606 8.63081 23.025 8.63749Z"
fill="white" />
<path
d="M23.025 20.3875C21.6191 20.3727 20.249 19.9423 19.0872 19.1504C17.9254 18.3586 17.0239 17.2407 16.4961 15.9375C15.9683 14.6344 15.8378 13.2042 16.1212 11.8271C16.4045 10.4499 17.0889 9.1874 18.0883 8.19844C19.0877 7.20948 20.3573 6.5383 21.7373 6.2694C23.1174 6.00051 24.5461 6.14592 25.8437 6.68732C27.1412 7.22873 28.2496 8.14194 29.0292 9.31195C29.8089 10.482 30.2249 11.8565 30.225 13.2625C30.2118 15.1611 29.4466 16.977 28.097 18.3125C26.7475 19.648 24.9236 20.3941 23.025 20.3875ZM23.025 8.63749C22.1136 8.65227 21.2269 8.93603 20.4762 9.45314C19.7256 9.97024 19.1445 10.6976 18.8059 11.5439C18.4673 12.3902 18.3864 13.3177 18.5732 14.2099C18.76 15.102 19.2063 15.9191 19.856 16.5584C20.5057 17.1978 21.3299 17.6309 22.2249 17.8033C23.12 17.9758 24.046 17.8799 24.8868 17.5278C25.7275 17.1756 26.4455 16.5829 26.9504 15.824C27.4554 15.0652 27.7249 14.174 27.725 13.2625C27.7118 12.0269 27.21 10.8469 26.3293 9.98022C25.4486 9.11356 24.2606 8.63081 23.025 8.63749ZM27.3875 22.0625C21.8432 21.0977 16.1354 21.9758 11.1375 24.5625C10.7827 24.7595 10.4889 25.0502 10.2883 25.403C10.0877 25.7557 9.98795 26.1569 10 26.5625V31.0125C10 31.344 10.1317 31.662 10.3661 31.8964C10.6005 32.1308 10.9185 32.2625 11.25 32.2625C11.5815 32.2625 11.8995 32.1308 12.1339 31.8964C12.3683 31.662 12.5 31.344 12.5 31.0125V26.725C17.1346 24.3995 22.405 23.6617 27.5 24.625L27.3875 22.0625Z"
fill="white" />
<path
d="M41.25 27.5H32.875V25.65C32.875 25.3185 32.7433 25.0005 32.5089 24.7661C32.2745 24.5317 31.9565 24.4 31.625 24.4C31.2935 24.4 30.9755 24.5317 30.7411 24.7661C30.5067 25.0005 30.375 25.3185 30.375 25.65V27.5H21.25C20.9185 27.5 20.6005 27.6317 20.3661 27.8661C20.1317 28.1005 20 28.4185 20 28.75V41.25C20 41.5815 20.1317 41.8995 20.3661 42.1339C20.6005 42.3683 20.9185 42.5 21.25 42.5H41.25C41.5815 42.5 41.8995 42.3683 42.1339 42.1339C42.3683 41.8995 42.5 41.5815 42.5 41.25V28.75C42.5 28.4185 42.3683 28.1005 42.1339 27.8661C41.8995 27.6317 41.5815 27.5 41.25 27.5ZM40 40H22.5V30H30.375V30.5125C30.375 30.844 30.5067 31.162 30.7411 31.3964C30.9755 31.6308 31.2935 31.7625 31.625 31.7625C31.9565 31.7625 32.2745 31.6308 32.5089 31.3964C32.7433 31.162 32.875 30.844 32.875 30.5125V30H40V40Z"
fill="white" />
<path
d="M27.2625 34.275H34.7125V36.025H27.2625V34.275ZM13.55 15.3C10.0893 15.3579 6.68862 16.2134 3.6125 17.8C3.27795 17.9767 2.99772 18.241 2.80177 18.5647C2.60582 18.8883 2.50151 19.2591 2.5 19.6375V23.5125C2.5 23.844 2.6317 24.162 2.86612 24.3964C3.10054 24.6308 3.41848 24.7625 3.75 24.7625C4.08152 24.7625 4.39946 24.6308 4.63388 24.3964C4.8683 24.162 5 23.844 5 23.5125V19.8875C7.93912 18.4245 11.1932 17.7076 14.475 17.8C14.0456 17.0166 13.7339 16.1742 13.55 15.3ZM41.3875 17.7875C38.6286 16.3403 35.5965 15.4885 32.4875 15.2875C32.3044 16.1602 31.9971 17.0021 31.575 17.7875C34.5038 17.8576 37.3809 18.5747 40 19.8875V23.5125C40 23.844 40.1317 24.162 40.3661 24.3964C40.6005 24.6308 40.9185 24.7625 41.25 24.7625C41.5815 24.7625 41.8995 24.6308 42.1339 24.3964C42.3683 24.162 42.5 23.844 42.5 23.5125V19.6375C42.5008 19.257 42.3975 18.8836 42.2015 18.5575C42.0054 18.2315 41.7239 17.9652 41.3875 17.7875ZM13.325 13.2625V12.425C12.3458 12.2939 11.4548 11.7903 10.8376 11.0189C10.2204 10.2474 9.92444 9.26769 10.0114 8.28356C10.0984 7.29944 10.5616 6.38678 11.3045 5.73556C12.0475 5.08435 13.013 4.74476 14 4.7875C15.0266 4.78564 16.0134 5.18483 16.75 5.89999C17.3999 5.36397 18.1136 4.91052 18.875 4.55C18.0245 3.57206 16.8977 2.87479 15.643 2.55008C14.3883 2.22537 13.0647 2.28846 11.8466 2.73105C10.6284 3.17363 9.57302 3.97492 8.81941 5.02931C8.0658 6.0837 7.64937 7.3417 7.625 8.6375C7.65123 10.2234 8.26775 11.7426 9.35413 12.8984C10.4405 14.0541 11.9187 14.7633 13.5 14.8875C13.394 14.352 13.3354 13.8083 13.325 13.2625ZM30.9625 2.2875C30.1035 2.28768 29.2531 2.45913 28.4612 2.7918C27.6692 3.12447 26.9515 3.6117 26.35 4.225C27.1951 4.53121 27.9942 4.95179 28.725 5.475C29.3086 5.06991 29.9911 4.83079 30.6999 4.78313C31.4087 4.73548 32.1171 4.88107 32.7496 5.2044C33.3822 5.52772 33.9151 6.01665 34.2916 6.61905C34.6681 7.22145 34.8741 7.91474 34.8875 8.625C34.8796 9.35454 34.6653 10.0669 34.2693 10.6797C33.8733 11.2925 33.3119 11.7806 32.65 12.0875C32.7003 12.4729 32.7253 12.8613 32.725 13.25C32.7217 13.7525 32.6799 14.2539 32.6 14.75C33.9617 14.3999 35.1695 13.6095 36.0354 12.5017C36.9013 11.3939 37.3766 10.031 37.3875 8.625C37.371 6.93413 36.686 5.3185 35.4822 4.13104C34.2783 2.94358 32.6534 2.28081 30.9625 2.2875Z"
fill="white" />
</svg>
<h4 class="h4 company__item-title">
13900
</h4>
<p class="company__item-subtitle">
Employees
</p>
</div>
<div class="company__item">
<svg class="company__item-img" width="39" height="39" viewBox="0 0 39 39" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M3.7875 29.4C3.97149 29.8625 4.33167 30.2329 4.78878 30.4298C5.2459 30.6267 5.76253 30.634 6.225 30.45C6.68747 30.266 7.05791 29.9058 7.25482 29.4487C7.45173 28.9916 7.45899 28.475 7.275 28.0125L5.175 22.725L17.625 19.9688V28.875C17.625 29.3723 17.8225 29.8492 18.1742 30.2008C18.5258 30.5525 19.0027 30.75 19.5 30.75C19.9973 30.75 20.4742 30.5525 20.8258 30.2008C21.1775 29.8492 21.375 29.3723 21.375 28.875V19.9688L33.825 22.725L31.725 28.0125C31.6337 28.2415 31.5884 28.4862 31.5917 28.7327C31.5951 28.9792 31.647 29.2226 31.7445 29.449C31.8421 29.6754 31.9833 29.8803 32.1601 30.0521C32.3369 30.2239 32.5459 30.3591 32.775 30.45C32.9958 30.5373 33.2313 30.5818 33.4687 30.5812C33.8443 30.5816 34.2112 30.4692 34.5221 30.2586C34.833 30.048 35.0735 29.7489 35.2125 29.4L38.1187 22.0688C38.2185 21.8152 38.2618 21.5429 38.2456 21.2709C38.2294 20.9989 38.1541 20.7337 38.025 20.4937C37.8997 20.2547 37.7243 20.0455 37.5107 19.8804C37.2971 19.7154 37.0504 19.5984 36.7875 19.5375L30.75 18.2063V10.125C30.75 9.62772 30.5525 9.15081 30.2008 8.79918C29.8492 8.44754 29.3723 8.25 28.875 8.25H25.125V2.625C25.125 2.12772 24.9275 1.65081 24.5758 1.29917C24.2242 0.947544 23.7473 0.75 23.25 0.75H15.75C15.2527 0.75 14.7758 0.947544 14.4242 1.29917C14.0725 1.65081 13.875 2.12772 13.875 2.625V8.25H10.125C9.62772 8.25 9.1508 8.44754 8.79917 8.79918C8.44754 9.15081 8.25 9.62772 8.25 10.125V18.2063L2.2125 19.5C1.94955 19.5609 1.70286 19.6779 1.48929 19.8429C1.27571 20.008 1.10029 20.2172 0.974997 20.4563C0.845865 20.6962 0.770582 20.9614 0.754392 21.2334C0.738201 21.5054 0.781491 21.7777 0.881247 22.0312L3.7875 29.4ZM17.625 4.5H21.375V8.25H17.625V4.5ZM12 12H27V17.3625L19.9125 15.75H19.0875L12 17.3625V12ZM35.8312 33.15C35.1734 33.3516 34.5434 33.6351 33.9562 33.9937C33.3589 34.343 32.6794 34.5271 31.9875 34.5271C31.2955 34.5271 30.6161 34.343 30.0187 33.9937C28.7199 33.261 27.2538 32.876 25.7625 32.876C24.2712 32.876 22.8051 33.261 21.5062 33.9937C20.9007 34.339 20.2158 34.5206 19.5187 34.5206C18.8217 34.5206 18.1367 34.339 17.5312 33.9937C16.2312 33.2645 14.7656 32.8815 13.275 32.8815C11.7844 32.8815 10.3188 33.2645 9.01875 33.9937C8.42143 34.343 7.74194 34.5271 7.05 34.5271C6.35805 34.5271 5.67856 34.343 5.08125 33.9937C4.49406 33.6351 3.86413 33.3516 3.20625 33.15C2.95676 33.0613 2.69132 33.0264 2.4274 33.0477C2.16347 33.069 1.90705 33.146 1.675 33.2735C1.44296 33.401 1.24056 33.5763 1.08112 33.7877C0.921687 33.9991 0.808836 34.2418 0.749997 34.5C0.61002 34.9749 0.663546 35.4859 0.898896 35.9214C1.13425 36.357 1.53231 36.6818 2.00625 36.825C2.3838 36.9273 2.74401 37.0853 3.075 37.2938C4.21257 37.9613 5.50606 38.317 6.825 38.325C8.19487 38.3253 9.54042 37.963 10.725 37.275C11.46 36.8696 12.2856 36.6569 13.125 36.6569C13.9644 36.6569 14.79 36.8696 15.525 37.275C16.7012 37.9476 18.0326 38.3013 19.3875 38.3013C20.7424 38.3013 22.0738 37.9476 23.25 37.275C23.985 36.8696 24.8106 36.6569 25.65 36.6569C26.4894 36.6569 27.315 36.8696 28.05 37.275C29.2121 37.9686 30.5403 38.3348 31.8937 38.3348C33.2472 38.3348 34.5753 37.9686 35.7375 37.275C36.0685 37.0665 36.4287 36.9085 36.8062 36.8062C37.0558 36.7558 37.2924 36.655 37.5017 36.5101C37.711 36.3652 37.8886 36.1792 38.0237 35.9634C38.1588 35.7476 38.2485 35.5066 38.2874 35.255C38.3263 35.0034 38.3136 34.7465 38.25 34.5C38.1904 34.2463 38.0786 34.0077 37.9216 33.7996C37.7647 33.5915 37.5661 33.4184 37.3385 33.2914C37.1109 33.1643 36.8593 33.0862 36.5998 33.0618C36.3402 33.0375 36.0785 33.0675 35.8312 33.15Z"
fill="white" />
</svg>
<h4 class="h4 company__item-title">
300
</h4>
<p class="company__item-subtitle">
vessels
</p>
</div>
<div class="company__item">
<svg class="company__item-img" width="45" height="45" viewBox="0 0 45 45" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M12.1875 15.2063C10.5188 15.2063 9.16875 13.8563 9.16875 12.1875C9.16875 11.3869 9.4868 10.619 10.0529 10.0529C10.619 9.4868 11.3869 9.16875 12.1875 9.16875C13.8562 9.16875 15.2062 10.5188 15.2062 12.1875C15.2062 12.9881 14.8882 13.756 14.3221 14.3221C13.756 14.8882 12.9881 15.2063 12.1875 15.2063ZM12.1875 3.75C7.5 3.75 3.75 7.5 3.75 12.1875C3.75 18.5063 12.1875 27.8625 12.1875 27.8625C12.1875 27.8625 20.625 18.5063 20.625 12.1875C20.625 7.5 16.875 3.75 12.1875 3.75ZM32.8125 15.2063C32.0119 15.2063 31.244 14.8882 30.6779 14.3221C30.1118 13.756 29.7938 12.9881 29.7938 12.1875C29.7938 11.7911 29.8718 11.3985 30.0235 11.0323C30.1752 10.666 30.3976 10.3332 30.6779 10.0529C30.9582 9.7726 31.291 9.55024 31.6573 9.39854C32.0235 9.24683 32.4161 9.16875 32.8125 9.16875C33.2089 9.16875 33.6015 9.24683 33.9677 9.39854C34.334 9.55024 34.6668 9.7726 34.9471 10.0529C35.2274 10.3332 35.4498 10.666 35.6015 11.0323C35.7532 11.3985 35.8313 11.7911 35.8313 12.1875C35.8313 12.9881 35.5132 13.756 34.9471 14.3221C34.381 14.8882 33.6131 15.2063 32.8125 15.2063ZM32.8125 3.75C28.125 3.75 24.375 7.5 24.375 12.1875C24.375 18.5063 32.8125 27.8625 32.8125 27.8625C32.8125 27.8625 41.25 18.5063 41.25 12.1875C41.25 7.5 37.5 3.75 32.8125 3.75ZM32.8125 30C30.4312 30 28.3125 31.5 27.525 33.75H17.475C16.9782 32.3467 15.9453 31.1976 14.6027 30.5544C13.2602 29.9112 11.7174 29.8265 10.3125 30.3188C9.61422 30.5634 8.971 30.9433 8.41963 31.4367C7.86826 31.9302 7.41954 32.5274 7.09914 33.1943C6.77873 33.8613 6.59291 34.5848 6.55231 35.3236C6.5117 36.0624 6.61711 36.802 6.8625 37.5C7.36606 38.907 8.40589 40.0575 9.7549 40.7004C11.1039 41.3433 12.6525 41.4263 14.0625 40.9313C15.6562 40.3688 16.875 39.0938 17.475 37.5H27.5437C28.575 40.425 31.8 41.9625 34.6875 40.9313C35.3879 40.6891 36.0336 40.3109 36.5874 39.8184C37.1411 39.326 37.5922 38.7289 37.9145 38.0616C38.2368 37.3943 38.4241 36.6699 38.4656 35.9299C38.5071 35.19 38.402 34.4492 38.1562 33.75C37.35 31.5 35.2125 30 32.8125 30ZM32.8125 38.4375C32.0666 38.4375 31.3512 38.1412 30.8238 37.6137C30.2963 37.0863 30 36.3709 30 35.625C30 34.8791 30.2963 34.1637 30.8238 33.6363C31.3512 33.1088 32.0666 32.8125 32.8125 32.8125C33.5584 32.8125 34.2738 33.1088 34.8012 33.6363C35.3287 34.1637 35.625 34.8791 35.625 35.625C35.625 36.3709 35.3287 37.0863 34.8012 37.6137C34.2738 38.1412 33.5584 38.4375 32.8125 38.4375Z"
fill="white" />
</svg>
<h4 class="h4 company__item-title">
15.5 m
</h4>
<p class="company__item-subtitle">
TEU
</p>
</div>
</div>
</div>
</div>
</section>
<!--Block-Career-->
<section class="block-career">
<div class="container">
<h2 class="h2 section-title block-career__title">
Working at Hapag-Lloyd
</h2>
<p class="subtitle block-career__subtitle">
Career
</p>
<div class="block-career__descr">
<div class="block-career__descr-left">
<h3 class="h3 block-career__descr-title">
Career opportunities across the globe
</h3>
<a class="block-career__descr-link link--hover">
Find a job
</a>
</div>
<img src="./img/Block-Career.jpg" class="block-career__descr-right" alt="photo" width="200">
</div>
</div>
</section>
<!--contact-->
<a href="tel:" class="contact-us">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path
d="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z" />
</svg>
</a>
</main>
<!--footer-->
<footer class="footer">
<div class="container">
<!--footer-nav-->
<nav class="footer__nav">
<div class="footer__nav-col">
<h5 class="h5 footer__nav-title">
Services & Information
<span class="link--arrow">
<svg width="18px" height="18px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
fill="#000000">
<polyline fill="none" id="Left" points="15.5 5 8.5 12 15.5 19" stroke="#ffffff"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
</svg>
</span>
</h5>
<ul class="footer__nav-container">
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Offices & Local Info
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Route Finder
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Containers
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Vessels
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Operational updates
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Contact
</a>
</li>
</ul>
</div>
<div class="footer__nav-col">
<h5 class="h5 footer__nav-title">
Online Business Suit
<span class="link--arrow">
<svg width="18px" height="18px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
fill="#000000">
<polyline fill="none" id="Left" points="15.5 5 8.5 12 15.5 19" stroke="#ffffff"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
</svg>
</span>
</h5>
<ul class="footer__nav-container">
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Offices & Local Info
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Route Finder
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Containers
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Vessels
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Operational updates
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Contact
</a>
</li>
</ul>
</div>
<div class="footer__nav-col">
<h5 class="h5 footer__nav-title">
Career
<span class="link--arrow">
<svg width="18px" height="18px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
fill="#000000">
<polyline fill="none" id="Left" points="15.5 5 8.5 12 15.5 19" stroke="#ffffff"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
</svg>
</span>
</h5>
<ul class="footer__nav-container">
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Offices & Local Info
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Route Finder
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Containers
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Vessels
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Operational updates
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Contact
</a>
</li>
</ul>
</div>
<div class="footer__nav-col">
<h5 class="h5 footer__nav-title">
Press
<span class="link--arrow">
<svg width="18px" height="18px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
fill="#000000">
<polyline fill="none" id="Left" points="15.5 5 8.5 12 15.5 19" stroke="#ffffff"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
</svg>
</span>
</h5>
<ul class="footer__nav-container">
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Offices & Local Info
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Route Finder
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Containers
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Vessels
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Operational updates
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Contact
</a>
</li>
</ul>
</div>
<div class="footer__nav-col">
<h5 class="h5 footer__nav-title">
Investor Relation
<span class="link--arrow">
<svg width="18px" height="18px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
fill="#000000">
<polyline fill="none" id="Left" points="15.5 5 8.5 12 15.5 19" stroke="#ffffff"
stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polyline>
</svg>
</span>
</h5>
<ul class="footer__nav-container">
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Offices & Local Info
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Route Finder
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Containers
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Vessels
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Operational updates
</a>
</li>
<li class="footer__nav-iteam">
<a href="#" class="footer__nav-link">
Contact
</a>
</li>
</ul>
</div>
</nav>
<!--footer-social-->
<div class="footer__social">
<h5 class="footer__social-title">
Find us on
</h5>
<ul class="footer__social-row">
<li class="footer__social-iteam">
<a href="#" class="footer__social-link">
<svg width="23" height="25" viewBox="0 0 23 25" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M23 12.585C23 6.38553 18.0747 1.36011 12 1.36011C5.92249 1.3615 0.997238 6.38553 0.997238 12.5864C0.997238 18.1877 5.02049 22.8311 10.2785 23.6733V15.8298H7.48724V12.5864H10.2812V10.1114C10.2812 7.29886 11.9244 5.7455 14.4365 5.7455C15.641 5.7455 16.8991 5.96442 16.8991 5.96442V8.72533H15.5117C14.1464 8.72533 13.7201 9.59125 13.7201 10.4795V12.585H16.7699L16.2831 15.8284H13.7187V23.6719C18.9767 22.8297 23 18.1863 23 12.585Z"
fill="#F8F8F8" />
</svg>
</a>
</li>
<li class="footer__social-iteam">
<a href="#" class="footer__social-link">
<svg width="22" height="23" viewBox="0 0 22 23" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11 0.868652C5.20156 0.868652 0.5 5.63655 0.5 11.5168C0.5 17.3971 5.20156 22.1649 11 22.1649C16.7984 22.1649 21.5 17.3971 21.5 11.5168C21.5 5.63655 16.7984 0.868652 11 0.868652ZM16.0461 8.89517C16.0531 9.00688 16.0531 9.12334 16.0531 9.23743C16.0531 12.7266 13.4328 16.7458 8.64453 16.7458C7.16797 16.7458 5.79922 16.3108 4.64609 15.5621C4.85703 15.5859 5.05859 15.5954 5.27422 15.5954C6.49297 15.5954 7.61328 15.1771 8.50625 14.4688C7.3625 14.445 6.40156 13.6845 6.07344 12.6387C6.47422 12.6981 6.83516 12.6981 7.24766 12.5911C6.65873 12.4698 6.12939 12.1454 5.74957 11.6732C5.36974 11.2009 5.16286 10.6098 5.16406 10.0004V9.96711C5.50859 10.1644 5.91406 10.2856 6.33828 10.3022C5.98166 10.0612 5.6892 9.73469 5.48682 9.35159C5.28445 8.96849 5.17841 8.54067 5.17813 8.10607C5.17813 7.61406 5.30469 7.16485 5.53203 6.77505C6.18571 7.5911 7.0014 8.25852 7.92609 8.73394C8.85078 9.20936 9.86377 9.48213 10.8992 9.53453C10.5312 7.74004 11.8531 6.2878 13.4422 6.2878C14.1922 6.2878 14.8672 6.60629 15.343 7.11969C15.9312 7.00798 16.4937 6.78455 16.9953 6.48507C16.8008 7.09592 16.393 7.61169 15.8516 7.93731C16.3766 7.88027 16.8828 7.73291 17.3516 7.52612C16.9977 8.05378 16.5547 8.52201 16.0461 8.89517Z"
fill="#F8F8F8" />
</svg>
</a>
</li>
<li class="footer__social-iteam">
<a href="#" class="footer__social-link">
<svg width="22" height="23" viewBox="0 0 22 23" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_100_14)">
<path
d="M12.7633 11.3304L10.2927 10.1614C10.0771 10.0599 9.9 10.1736 9.9 10.4157V12.6178C9.9 12.8598 10.0771 12.9736 10.2927 12.8721L12.7622 11.703C12.9789 11.6004 12.9789 11.4331 12.7633 11.3304ZM11 0.807739C5.1678 0.807739 0.440002 5.60225 0.440002 11.5167C0.440002 17.4312 5.1678 22.2257 11 22.2257C16.8322 22.2257 21.56 17.4312 21.56 11.5167C21.56 5.60225 16.8322 0.807739 11 0.807739ZM11 15.8673C5.5946 15.8673 5.5 15.3731 5.5 11.5167C5.5 7.66038 5.5946 7.1662 11 7.1662C16.4054 7.1662 16.5 7.66038 16.5 11.5167C16.5 15.3731 16.4054 15.8673 11 15.8673Z"
fill="#F8F8F8" />
</g>
<defs>
<clipPath id="clip0_100_14">
<rect width="22" height="22.3104" fill="white"
transform="translate(0 0.361572)" />
</clipPath>
</defs>
</svg>
</a>
</li>
<li class="footer__social-iteam">
<a href="#" class="footer__social-link">
<svg width="22" height="23" viewBox="0 0 22 23" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M11 8.0316C9.10766 8.0316 7.56336 9.59769 7.56336 11.5167C7.56336 13.4358 9.10766 15.0019 11 15.0019C12.8923 15.0019 14.4366 13.4358 14.4366 11.5167C14.4366 9.59769 12.8923 8.0316 11 8.0316ZM21.3073 11.5167C21.3073 10.0735 21.3202 8.6434 21.2403 7.20281C21.1604 5.52953 20.784 4.04449 19.5774 2.8209C18.3683 1.5947 16.9065 1.2156 15.2565 1.13455C13.8334 1.0535 12.4231 1.06657 11.0026 1.06657C9.57945 1.06657 8.16922 1.0535 6.74867 1.13455C5.09867 1.2156 3.6343 1.59732 2.42773 2.8209C1.21859 4.0471 0.844764 5.52953 0.764842 7.20281C0.684921 8.64601 0.697811 10.0761 0.697811 11.5167C0.697811 12.9573 0.684921 14.3901 0.764842 15.8307C0.844764 17.5039 1.22117 18.989 2.42773 20.2126C3.63687 21.4388 5.09867 21.8179 6.74867 21.8989C8.1718 21.98 9.58203 21.9669 11.0026 21.9669C12.4257 21.9669 13.8359 21.98 15.2565 21.8989C16.9065 21.8179 18.3709 21.4362 19.5774 20.2126C20.7866 18.9864 21.1604 17.5039 21.2403 15.8307C21.3228 14.3901 21.3073 12.9599 21.3073 11.5167ZM11 16.8791C8.07383 16.8791 5.71226 14.4842 5.71226 11.5167C5.71226 8.54928 8.07383 6.15439 11 6.15439C13.9262 6.15439 16.2877 8.54928 16.2877 11.5167C16.2877 14.4842 13.9262 16.8791 11 16.8791ZM16.5043 7.18712C15.8211 7.18712 15.2694 6.62762 15.2694 5.93477C15.2694 5.24193 15.8211 4.68243 16.5043 4.68243C17.1875 4.68243 17.7392 5.24193 17.7392 5.93477C17.7394 6.09929 17.7076 6.26224 17.6456 6.41427C17.5836 6.56631 17.4927 6.70445 17.378 6.82078C17.2633 6.93711 17.127 7.02935 16.9771 7.09221C16.8272 7.15508 16.6665 7.18733 16.5043 7.18712Z"
fill="#F8F8F8" />
</svg>
</a>
</li>
<li class="footer__social-iteam">
<a href="#" class="footer__social-link">
<svg width="22" height="23" viewBox="0 0 22 23" fill="none"
xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_100_20)">
<path
d="M11 0.807739C5.1678 0.807739 0.440002 5.60225 0.440002 11.5167C0.440002 17.4312 5.1678 22.2257 11 22.2257C16.8322 22.2257 21.56 17.4312 21.56 11.5167C21.56 5.60225 16.8322 0.807739 11 0.807739ZM8.415 15.9554H6.2766V8.97669H8.415V15.9554ZM7.3326 8.11997C6.6572 8.11997 6.2205 7.63472 6.2205 7.03457C6.2205 6.42215 6.6704 5.9514 7.3601 5.9514C8.0498 5.9514 8.4722 6.42215 8.4854 7.03457C8.4854 7.63472 8.0498 8.11997 7.3326 8.11997ZM16.225 15.9554H14.0866V12.0879C14.0866 11.1877 13.7764 10.5764 13.0031 10.5764C12.4124 10.5764 12.0615 10.9902 11.9064 11.3884C11.8492 11.5301 11.8349 11.7309 11.8349 11.9306V15.9543H9.6954V11.2022C9.6954 10.3309 9.6679 9.6025 9.6393 8.97558H11.4972L11.5951 9.94497H11.638C11.9196 9.48983 12.6093 8.81829 13.7632 8.81829C15.1701 8.81829 16.225 9.77429 16.225 11.8291V15.9554Z"
fill="#F8F8F8" />
</g>
<defs>
<clipPath id="clip0_100_20">
<rect width="22" height="22.3104" fill="white"
transform="translate(0 0.361572)" />
</clipPath>
</defs>
</svg>
</a>
</li>
</ul>
</div>
<!--footer-copyright-->
<div class="footer__copyright">
<ul class="footer__copyright-row">
<li class="footer__copyright-iteam">
<a href="#" class="footer__copyright-link">
Terms and Conditions
</a>
</li>
<li class="footer__copyright-iteam">
<a href="#" class="footer__copyright-link">
Terms of Use Website
</a>
</li>
<li class="footer__copyright-iteam">
<a href="#" class="footer__copyright-link">
Terms of Transport
</a>
</li>
<li class="footer__copyright-iteam">
<a href="#" class="footer__copyright-link">
Terms of Purchase
</a>
</li>
<li class="footer__copyright-iteam">
<a href="#" class="footer__copyright-link">
Imprint Privacy Terms
</a>
</li>
<li class="footer__copyright-iteam">
<a href="#" class="footer__copyright-link">
PR BD Business Licence
</a>
</li>
<li class="footer__copyright-iteam">
<a href="#" class="footer__copyright-link">
Cookie Settings
</a>
</li>
</ul>
<h6 class="footer__copyright-title">
© Hapag-Lloyd AG
</h6>
</div>
</div>
</footer>
<div class="modal">
<div class="form-login">
<div class="form-login__close">X</div>
<h2>Login</h2>
<input class="inp" type="text" placeholder="Name">
<input class="inp" type="password" placeholder="Password">
<button class="btn modal__btn">Login</button>
</div>
</div>
</div>
<script>
let menuButton = document.querySelector('.header__hamb')
let acc = document.querySelectorAll('.footer__nav-col')
let header = document.querySelector('.header')
menuButton.onclick = () => {
document.querySelector('.header__nav').classList.toggle('active')
}
window.addEventListener('scroll', () => {
const scrollTop = window.pageYOffset
const scrollTrigger = 1
if (scrollTop > scrollTrigger) {
header.classList.add('with-shadow')
} else {
header.classList.remove('with-shadow')
}
});
acc.forEach(item => {
item.addEventListener('click', toggle)
})
function toggle() {
this.classList.toggle("active")
}
document.addEventListener("DOMContentLoaded", function () {
const sectionTitle = document.querySelectorAll('.section-title')
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('show')
}
})
}, { threshold: 0.5 })
sectionTitle.forEach(title => {
observer.observe(title)
})
})
document.querySelector('#btnLogin').onclick = () => {
document.querySelector('.modal').classList.add('visible')
}
document.querySelector('.form-login__close').onclick = () => {
document.querySelector('.modal').classList.remove('visible')
}
document.querySelector('.modal__btn').onclick = () => {
window.location.reload()
}
</script>
</body>
</html>