-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
842 lines (813 loc) · 30.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
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
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="Odkryj profesjonalne aranżacje ogrodów, które przekształcą Twoją przestrzeń na zieloną oazę. Oferujemy kreatywne rozwiązania i fachową wiedzę."
/>
<title>GiardDesign - Gardening Services</title>
<link
rel="apple-touch-icon"
sizes="180x180"
href="./src/assets/ico/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./src/assets/ico/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="./src/assets/ico/favicon-16x16.png"
/>
<link
href="https://unpkg.com/[email protected]/css/boxicons.min.css"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;1,500&display=swap"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap"
/>
</head>
<link rel="stylesheet" href="./src/sass/main.scss" />
<body>
<!-- Modale i popupy -->
<div class="pop-up">
<div class="pop-up_img">
<button class="mark"><i class="bx bx-x"></i></button>
<button class="button next"><i class="bx bxs-right-arrow"></i></button>
<button class="button prev"><i class="bx bxs-left-arrow"></i></button>
</div>
</div>
<div
class="loading fixed items-center justify-center w-full h-full bg-white z-[100] gap-8"
>
<img
src="./src/assets/img/load.svg"
alt="loading icon"
class="h-24 w-24 animate-spin"
/>
<p class="text-2xl text-green">Loading...</p>
</div>
<div
class="cookie-modal fixed justify-center items-center p-8 w-full h-full bg-black/80 z-[90]"
>
<div
class="flex flex-col gap-10 p-8 max-w-[100rem] max-h-[90vh] overflow-y-scroll md:overflow-y-auto bg-white"
>
<p class="text-[2.2rem] font-bold">Wiadomośc do rekrutera</p>
<article class="text-[1.4rem] flex flex-col gap-4">
<p>
Na wstępię chcę podziękować za możliwość udziału w kolejnym etapie
rekrutacji. Chciałbym podzielić się moimi spostrzeżeniami i uwagami
dotyczących projektu.
</p>
<h4 aria-hidden="true" class="text-[1.8rem] font-medium">
Tailwind CSS & SASS
</h4>
<p>
Na wstępie poruszę temat Tailwind CSS i Sass'a. Cały projekt został
oparty o tailwind CSS, lecz w pewnych momentach użyłem sass'a aby
zrobić customowe klasy (w dalszym ciągu oparte o klasy tailwind) w
celu wykożystnia zasady DRY oraz do JS. Nie byłem do końca pewien,
którego podejścia oczekiwaliście. Nastawionego na same klasy
tailwind w pliku HTML lub klasy tailwind ze wsparciem Sassa, aby
uniknąc powtórzeń kodu albo samego Sassa opartego na tailwind
klasach. Tego nie byłem pewien więc zastosowałem oba rozwiązania.
</p>
<h4 aria-hidden="true" class="text-[1.8rem] font-medium">
Galeria zdjęć
</h4>
<p>
Posiadam jeszcze zastrzeżenia do galerii zdjęć, ponieważ używając
biblioteki <strong>Masnory.js</strong> nie byłem w stanie
wyśrodkować zdjęć między przejściem kolumn z uwagi na to, że biblioteka pozycjonuje je absolutnie. Przez co są cały czas ustawione do lewej strony.
</p>
<h4 aria-hidden="true" class="text-[1.8rem] font-medium">Karty</h4>
<p>
Miałem również dylemat z sekcją <q>Oferta</q>, gdyż w zadaniu było
aby element był klikalny i nie do końca rozumiem co mieliście na
myśli, czy po prostu dać hover na element i dac cursor-pointer, czy
zrobić z całej karty link. Odrzuciłem te podejście z uwagi, iż w
karcie już znajduje się jeden link i dodałem tylko cursor-pointer.
</p>
<h4 aria-hidden="true" class="text-[1.8rem] font-medium">
Podsumowanie
</h4>
<p>
W całym projekcie lwią część pisałem sam, oprócz biblioteki AOS do
animacji na scrolla. Dodałem pare komponentów od siebie aby lepiej
zaprezentować swoją wiedzę. Dużą uwagę poświęciłem na <q>SEO</q>,
<q>Ułatwieniu dostępu</q> oraz optymalizacji.
</p>
<p class="text-[1.5rem]">Zapraszam do obejrzenia projektu!</p>
</article>
<button
class="cookie-btn px-8 py-4 bg-green w-max text-white text-[1.4rem] rounded-custom-28 transition-transform duration-300 hover:scale-90 "
>
Przeczytano
</button>
</div>
</div>
<!-- Nawigacja -->
<nav
class="p-[2rem] shadow-lg fixed md:py-[2.4rem] md:px-[2.4rem] w-full bg-white z-50"
>
<div class="wrapper flex justify-between items-center">
<a href="#"
><img src="./src/assets/img/main-logo.svg" alt="logo firmy"
/></a>
<button
aria-label="przycik do otwierania nawigacji"
class="burger p-4 flex flex-col gap-[.5rem] md:hidden"
>
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</button>
<ul
class="nav-list absolute md:flex flex-col items-center top-[7.6rem] left-0 w-full text-[1.4rem] md:static md:flex-row md:w-max md:gap-[4.8rem]"
>
<li class="nav-item">
<div class="relative">
<a class="dropdown-btn flex gap-[.5rem] cursor-pointer"
>Oferta
<img
class="nav-arrow h-[2.1rem] w-[1.2rem]"
src="./src/assets/img/vectors/black_arrow_down_vector.svg"
alt="czarna strzalka pokazująca możliwość rozwijania treści"
/>
</a>
<ul
class="dropdown bg-white absolute -bottom-[14rem] left-1/2 -translate-x-1/2 flex flex-col p-4 gap-8 z-[1000]"
>
<li class="nav-item"><a href="#offer">Projekty</a></li>
<li class="nav-item"><a href="#offer">Wizualizacje</a></li>
<li class="nav-item"><a href="#offer">Realizacje</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a href="#company">O firmie</a>
</li>
<li class="nav-item">
<a href="#projects">Realizacje</a>
</li>
<li class="nav-item">
<a href="#contact">Kontakt</a>
</li>
<li class="nav-item">
<div class="search h-[2.4rem] w-[2.4rem] relative overflow-hidden">
<div class="relative left-[4rem] w-[21rem] h-full">
<input
type="text"
placeholder="Szukaj..."
class="search-input absolute w-full h-full border-b-[1px] border-b-black/20 p-2 outline-none"
/>
</div>
<svg
class="search-icon absolute left-[1.2rem] top-1/2 -translate-x-[50%] -translate-y-[50%] cursor-pointer"
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
aria-label="przycisk otwierający pole wyszukiwania"
viewBox="0 0 24 24"
fill="none"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 2.25C5.71979 2.25 2.25 5.71979 2.25 10C2.25 14.2802 5.71979 17.75 10 17.75C11.87 17.75 13.5853 17.0877 14.9242 15.9848L20.4697 21.5303L20.5538 21.6029C20.8474 21.8208 21.2641 21.7966 21.5303 21.5303C21.8232 21.2374 21.8232 20.7626 21.5303 20.4697L15.9848 14.9242C17.0877 13.5853 17.75 11.87 17.75 10C17.75 5.71979 14.2802 2.25 10 2.25ZM10 3.75C13.4518 3.75 16.25 6.54822 16.25 10C16.25 13.4518 13.4518 16.25 10 16.25C6.54822 16.25 3.75 13.4518 3.75 10C3.75 6.54822 6.54822 3.75 10 3.75Z"
fill="#111111"
/>
</svg>
</div>
</li>
</ul>
</div>
</nav>
<!-- Header -->
<header class="relative pt-[7.6rem] md:pt-[6.9rem] overflow-hidden">
<div class="slider flex bg-beige transition-transform duration-1000">
<div class="slider-item">
<div class="slider-container">
<div class="slider-content">
<div class="slider-text">
<h1 class="slider-heading">
Nowoczesna<br />
aranżacja <br />
Twojego ogrodu
</h1>
<p class="slider-desc paragraph">
Marka GiardDesign to wieloletnie doświadczenie i wysoka
estetyka realizacji. Oferujemy kompleksowy zakres usług z
indywidualnym podejściem do każdego projektu.
</p>
</div>
<div class="slider-buttons">
<a
href="#contact"
class="link primary"
aria-label="link do sekcji kontakt"
>Skontaktuj się z nami</a
>
<a
href="#projects"
class="link secondary flex gap-2 items-center"
aria-label="link do sekcji projekty"
>Zobacz nasze realizacje
<img
src="./src/assets/img/vectors/green_down_vector.svg"
alt="zdjecię zielonej strzałki w doł"
/></a>
</div>
</div>
</div>
<div class="slider-img-box">
<img
src="./src/assets/img/header/header1.png"
alt="zdjecie realizacji"
/>
</div>
</div>
<div class="slider-item">
<div class="slider-container">
<div class="slider-content">
<div class="slider-text">
<h2 class="slider-heading">
Innowacyjne<br />
podejście do <br />
naszego klienta
</h2>
<p class="slider-desc paragraph">
Nasz wykwalifikowany zespół wraz z ich doświadczeniem,
podchodzą do każdego klienta indywidualnie. Jesteśmy otwarci
na pomysły klientów oraz chętnie doradzimy.
</p>
</div>
<div class="slider-buttons">
<a
href="#contact"
class="link primary"
aria-label="link do sekcji kontakt"
tabindex="-1"
>Skontaktuj się z nami</a
>
<a
href="#projects"
class="link secondary flex gap-2 items-center"
aria-label="link do sekcji projekty"
tabindex="-1"
>Zobacz nasze realizacje
<img
src="./src/assets/img/vectors/green_down_vector.svg"
alt="zdjecię zielonej strzałki w doł"
/></a>
</div>
</div>
</div>
<div class="slider-img-box">
<img
src="./src/assets/img/header/header2.jpg"
alt="zdjcie realizacji"
/>
</div>
</div>
<div class="slider-item">
<div class="slider-container">
<div class="slider-content">
<div class="slider-text">
<h2 class="slider-heading">
Mistrzowskie <br />
poczucie <br />
stylu oraz smaku
</h2>
<p class="slider-desc paragraph">
Od lat projektujey i wykonujemy majestatyczne ogrody.
Wygraliśmy wiele konkursów ogrodniczych w tym
<q>Garden US</q>. Z nami twój ogród zmieni się nie do
poznania.
</p>
</div>
<div class="slider-buttons">
<a
href="#contact"
class="link primary"
aria-label="link do sekcji kontakt"
tabindex="-1"
>Skontaktuj się z nami</a
>
<a
href="#projects"
class="link secondary flex gap-2 items-center"
aria-label="link do sekcji projekty"
tabindex="-1"
>Zobacz nasze realizacje<img
src="./src/assets/img/vectors/green_down_vector.svg"
alt="zdjecię zielonej strzałki w doł"
/></a>
</div>
</div>
</div>
<div class="slider-img-box">
<img
src="./src/assets/img/header/header3.jpg"
alt="zdjecie realizacji"
/>
</div>
</div>
<div class="slider-item">
<div class="slider-container">
<div class="slider-content">
<div class="slider-text">
<h2 class="slider-heading">
Najtańszy <br />
dystrybutor <br />
na terenie Polski
</h2>
<p class="slider-desc paragraph">
Nasz ceny są niższe od konkurencyjnych firm na terenie
północnej Polski. Sami hodujemy kwiaty, przez co ceny są
bardzo atrakcyjne. Posiadamy wszystkie niezbędne certyfikaty i
zaświadczenia.
</p>
</div>
<div class="slider-buttons">
<a
href="#contact"
aria-label="link do sekcji kontakt"
class="link primary"
tabindex="-1"
>Skontaktuj się z nami</a
>
<a
href="#projects"
aria-label="link do sekcji z projektami"
class="link secondary flex gap-2 items-center"
tabindex="-1"
>Zobacz nasze realizacje
<img
src="./src/assets/img/vectors/green_down_vector.svg"
alt="zdjecie naszego ogrodu"
/></a>
</div>
</div>
</div>
<div class="slider-img-box">
<img
src="./src/assets/img/header/header4.jpg"
alt="zdjecie ogrodu"
/>
</div>
</div>
</div>
<div class="dots absolute bottom-[10.5rem] right-16 flex gap-4"></div>
<div
class="absolute bottom-0 right-0 flex gap-[3.2rem] bg-gray px-[3.2rem] py-[2.4rem]"
>
<button
class="slider-prev transition-transform hover:scale-125"
aria-label="przycik do przewijania karuzeli do tylu"
>
<img
src="./src/assets/img/vectors/header_left_vector.svg"
alt="lewy przycik do przewijania karuzeli do tyłu"
/>
</button>
<button
class="slider-next transition-transform hover:scale-125"
aria-label="przycik do przewijania karuzeli do tylu"
>
<img
src="./src/assets/img/vectors/header_right_vector.svg"
alt="prawy przycisk do przyijania karuzeli do przodu"
/>
</button>
</div>
</header>
<!-- Main -->
<main>
<!-- Sekcja z kartami -->
<section class="pt-48 pb-64 px-8 bg-gray" id="offer">
<div class="wrapper flex flex-col gap-[9.6rem]">
<div class="parallax flex flex-col gap-[1.6rem] lg:pl-32">
<h2 class="subheading text-green">Oferta</h2>
<div class="flex flex-col gap-[3.2rem]">
<p class="heading text-black">
<span class="heading-first-part">Działamy</span>
<span class="heading-second-part">kompleksowo</span>
</p>
<p class="paragraph text-black">
Oferujemy kompletną obsługę inwestycji terenów zielonych.
Projektujemy nowoczesne ogrody <br />
przydomowe oraz rezydencjonalne. Stworzymy dla Ciebie projekt,
zwizualizujemy go i wcielimy <br />
w życie, a na każdym etapie posłużymy radą i wieloletnim
doświadczeniem.
</p>
</div>
</div>
<ul class="flex flex-col gap-[6.4rem] items-center lg:flex-row">
<li
class="card group/card"
data-aos="zoom-in"
data-aos-offset="100"
data-aos-once="true"
data-aos-duration="600"
>
<div class="flex flex-col gap-[3.2rem]">
<img
src="./src/assets/img/card-icons/card-icon(1).png"
class="w-16 h-16"
alt="ikona długopisu"
/>
<div class="flex flex-col gap-[1.2rem]">
<h3 class="card-heading group-hover/card:text-green">
Projekty
</h3>
<p class="text-[1.4rem] text-black">
Zaprojektujemy Twój ogród w nowoczesnym stylu i z najlepszym
wykorzystaniem istniejącej przestrzeni.
</p>
</div>
</div>
<a href="#" class="card-btn"
>Dowiedz się więcej<img
src="./src/assets/img/vectors/green_right_vector.svg"
alt="zielona strzalka w prawo"
/></a>
</li>
<li
class="card group/card"
data-aos="zoom-in"
data-aos-delay="250"
data-aos-offset="100"
data-aos-once="true"
data-aos-duration="600"
>
<div class="flex flex-col gap-[3.2rem]">
<img
src="./src/assets/img/card-icons/card-icon(2).png"
class="w-[4rem] h-[4rem] object-contain"
alt="ikona oka"
/>
<div class="flex flex-col gap-[1.2rem]">
<h3 class="card-heading group-hover/card:text-green">
Wizualizacje
</h3>
<p class="text-[1.4rem]">
Przedstawimy Ci projekty koncepcyjne w postaci wirtualnego
spaceru animowanego w technologii 3D.
</p>
</div>
</div>
<a href="#" class="card-btn"
>Dowiedz się więcej<img
src="./src/assets/img/vectors/green_right_vector.svg"
alt="zielona strzalka w prawo"
/></a>
</li>
<li
class="card group/card"
data-aos="zoom-in"
data-aos-delay="500"
data-aos-offset="100"
data-aos-once="true"
data-aos-duration="600"
>
<div class="flex flex-col gap-[3.2rem]">
<img
src="./src/assets/img/card-icons/card-icon(3).png"
class="w-[4rem] h-[4rem]"
alt="ikona gwiazdek"
/>
<div class="flex flex-col gap-[1.2rem]">
<h3 class="card-heading group-hover/card:text-green">
Realizacje
</h3>
<p class="text-[1.4rem]">
Zrealizujemy Twoje marzenie przy użyciu najnowszych
rozwiązań i zaawansowanych technologii.
</p>
</div>
</div>
<div>
<a href="#projects" class="card-btn"
>Zobacz nasze realizacje<img
src="./src/assets/img/vectors/green_right_vector.svg"
alt="zielona strzalka w prawo"
/></a>
</div>
</li>
</ul>
</div>
</section>
<!-- Sekcja o firmie -->
<section
class="flex flex-col-reverse bg-green overflow-hidden lg:flex-row lg:gap-[6.4rem] lg:items-center"
id="company"
>
<div class="lg:w-[50%] lg:h-[72rem]">
<img
class="max-h-[40rem] lg:max-h-[72rem] lg:h-full w-full object-cover object-center"
src="./src/assets/img/realization-photo.png"
alt="zdjecie naszego najwiekszego projektu"
/>
</div>
<div
class="flex flex-col gap-[7.2rem] px-8 py-16 lg:w-[57.9rem] lg:pl-[7.6rem] lg:px-a lg:pr-[2rem] 2xl:pl-[9.6] 2xl:pr-0"
data-aos="fade-left"
data-aos-once="true"
data-aos-duration="800"
data-aos-offset="200"
>
<div class="flex flex-col gap-[1.6rem]">
<h2 class="subheading text-gray">O firmie</h2>
<div class="flex flex-col gap-[3.2rem]">
<p class="text-gray heading">
<span class="heading-first-part">Tworzymy <br />z</span>
<span class="heading-second-part">pasją</span>
</p>
<p class="paragraph text-gray">
Każdy projekt to nowe wyzwanie. Dlatego nasz zespół tworzą
wykwalifikowani projektanci oraz architekci, których zadaniem
jest rozpoznanie i realizacja potrzeb każdego Klienta. Nasza
specjalizacja to przestrzenie nowoczesne, które charakteryzuje
minimalizm, geometria i elegancka prostota. Tworzymy ogrody
małoobsługowe, dostosowane do współczesnego trybu życia.
</p>
</div>
</div>
<a href="#company" class="link secondary-gray flex gap-2 items-center"
>Poznaj nas bliżej
<img
src="./src/assets/img/vectors/white_right_vector.svg"
alt="biała strzałka w prawo"
/></a>
</div>
</section>
<!-- Galeria -->
<section
class="relative overflow-hidden flex flex-col gap-[9.6rem] bg-beige px-8 pt-[12rem] pb-[4.4rem]"
id="projects"
>
<div class="wrapper w-full md:pl-[8rem] flex flex-col gap-[1.6rem]">
<h2 class="subheading text-green">Realizacje</h2>
<p class="heading text-black">
<span class="heading-first-part">Nasze</span>
<span class="heading-second-part">projekty</span>
</p>
</div>
<div class="gallery-ctn overflow-hidden">
<div class="gallery relative mx-auto my-0 max-w-[1440px]">
<div class="gallery-item">
<img
class="w-full"
src="./src/assets/img/projects/project0.png"
alt="zdjęcie naszej realizacji"
/>
</div>
<div class="gallery-item">
<img
class="w-full"
src="./src/assets/img/projects/project1.png"
alt="zdjęcie naszej realizacji"
/>
</div>
<div class="gallery-item">
<img
class="w-full"
src="./src/assets/img/projects/project2.png"
alt="zdjęcie naszej realizacji"
/>
</div>
<div class="gallery-item">
<img
class="w-full"
src="./src/assets/img/projects/project3.png"
alt="zdjęcie naszej realizacji"
/>
</div>
<div class="gallery-item">
<img
class="w-full"
src="./src/assets/img/projects/project4.png"
alt="zdjęcie naszej realizacji"
/>
</div>
<div class="gallery-item">
<img
class="w-full"
src="./src/assets/img/projects/project5.png"
alt="zdjęcie naszej realizacji"
/>
</div>
<div class="gallery-item">
<img
class="w-full"
src="./src/assets/img/projects/project6.png"
alt="zdjęcie naszej realizacji"
/>
</div>
<div class="gallery-item">
<img
class="w-full"
src="./src/assets/img/projects/project7.png"
alt="zdjęcie naszej realizacji"
/>
</div>
<div class="gallery-item">
<img
class="w-full"
src="./src/assets/img/projects/project8.png"
alt="zdjęcie naszej realizacji"
/>
</div>
<div class="gallery-item">
<img
class="w-full"
src="./src/assets/img/projects/project9.png"
alt="zdjęcie naszej realizacji"
/>
</div>
<div class="gallery-item">
<img
class="w-full"
src="./src/assets/img/projects/project10.png"
alt="zdjęcie naszej realizacji"
/>
</div>
<div class="gallery-item">
<img
class="w-full"
src="./src/assets/img/projects/project11.png"
alt="zdjęcie naszej realizacji"
/>
</div>
<div class="gallery-item">
<img
class="w-full"
src="./src/assets/img/projects/project12.png"
alt="zdjęcie naszej realizacji"
/>
</div>
<div class="gallery-item">
<img
class="w-full"
src="./src/assets/img/projects/project13.png"
alt="zdjęcie naszej realizacji"
/>
</div>
<div class="gallery-item">
<img
class="w-full"
src="./src/assets/img/projects/project14.png"
alt="zdjęcie naszej realizacji"
/>
</div>
</div>
</div>
<button
class="gallery-btn link secondary-black flex gap-2 items-center absolute bottom-8 left-1/2 translate-x-[-50%] z-30"
>
Rozwiń
<img
src="./src/assets/img/vectors/black_down_vector.svg"
alt="czarna strzałka w dół"
/>
</button>
<!-- Sekcja breaker -->
</section>
<section class="lg:py-24">
<div
class="flex flex-col gap-16 lg:gap-[6.4rem] lg:flex-row px-8 lg:px-40 py-48 mx-auto bg-green items-center max-w-[104rem]"
data-aos="zoom-in"
data-aos-once="true"
data-aos-duration="800"
data-aos-offset="200"
>
<h2
class="text-[4rem] tracking-[-2px] text-center lg:text-left text-gray leading-[120%]"
>
<span class="font-montserrat font-normal"
>Zostańmy w kontakcie! <br />
Znajdziejsz nas na</span
><span class="font-inter italic font-medium tracking-[1px]">
Instagramie.</span
>
</h2>
<div class="flex flex-col gap-[2.4rem] items-center lg:items-start">
<p class="paragraph text-center lg:text-left text-gray">
Śledź nasze <br />
najnowsze realizacje!
</p>
<a
href="https://www.instagram.com/adrespect/?hl=en"
rel="noopener"
target="_blank"
class="link primary-gray"
>Instagram</a
>
</div>
</div>
</section>
</main>
<!-- Stopka -->
<footer class="bg-black px-8 py-32" id="contact">
<div class="flex flex-col gap-[6rem] lg:gap-48 max-w-[104rem] mx-auto">
<div class="flex flex-col gap-[6.2rem]">
<div
class="flex flex-col items-center gap-[2.4rem] lg:flex-row lg:justify-between"
>
<a href="#"
><img
src="./src/assets/img/giarddesign.png"
alt="logo firmy giarddesign"
/></a>
<div class="flex flex-col items-center gap-[2.4rem] lg:flex-row">
<p class="paragraph text-gray text-center">
Daj znać co możemy dla Ciebie zrobić!
</p>
<a
href="mailto:[email protected]"
class="link primary"
rel="noopener"
>Skontaktuj się z nami</a
>
</div>
</div>
<hr class="text-gray" />
<div
class="text-gray text-[1.4rem] font-inter leading-[150%] flex flex-col gap-16 items-center lg:flex-row lg:justify-between"
>
<div
class="flex flex-wrap items-center justify-center gap-8 lg:flex-nowrap lg:gap-[4.8rem]"
>
<a
href="https://adrespect.pl/kontakt/#dzial"
class="footer-link"
target="_blank"
rel="noopener"
>Kontakt</a
>
<a
href="https://www.instagram.com/adrespect/?hl=en"
class="footer-link"
rel="noopener"
target="_blank"
>Instagram</a
>
<a
href="https://www.facebook.com/adrespectagency/"
class="footer-link"
target="_blank"
rel="noopener"
>Facebook</a
>
<a
href="https://www.linkedin.com/company/adrespect/?originalSubdomain=pl "
class="footer-link"
target="_blank"
rel="noopener"
>Linkedin</a
>
</div>
<div class="flex gap-8 lg:gap-[4.8rem]">
<a href="tel:000000000" class="footer-link" rel="noopener"
>000-000-000</a
>
<a
href="mailto:[email protected]"
class="footer-link"
rel="noopener"
>
</div>
</div>
</div>
<div
class="flex flex-col gap-8 items-center text-[1.6rem] text-gray font-inter lg:flex-row lg:justify-between"
>
<p>Prawa zastrzeżone @ <span class="year"></span></p>
<div class="flex gap-[1.6rem]">
<p>made by</p>
<img
src="./src/assets/img/logo-full-light.png"
alt="logo firmy adRespect"
/>
</div>
</div>
</div>
</footer>
<script type="module" src="./src/js/main.js"></script>
</body>
</html>