-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
384 lines (344 loc) · 20.6 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
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Giard Design</title>
<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=Inter:wght@100;200;300;400;500;600;700&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Oswald:wght@200;300;400;500;600;700&display=swap"
rel="stylesheet">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
themeBeigeBgc: 'rgba(220, 193, 171, 1)',
themeGrey: 'rgba(245, 240, 236, 1)',
themeGreenBgc: 'rgba(27, 91, 49, 1)',
themeBlack: 'rgba(17, 17, 17, 1) '
}
}
}
}
</script>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<nav class=" py-8 flex items-center justify-between px-8 xl:px-16">
<h1 data-aos="zoom-in" data-aos-duration="1200" class="text-white text-2xl"><a href="#"><img
src="icons/logo-icon.svg" alt="giard design logo"></a></h1>
<div data-aos="zoom-in" data-aos-duration="1200" class="lg:hidden fixed right-8 z-50">
<button id="mobile-menu-button" class="text-themeBlack transition hover:text-gray-500 focus:outline-none">
<svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7">
</path>
</svg>
</button>
</div>
<ul data-aos="zoom-in" data-aos-duration="1200" class="hidden lg:flex space-x-4 ">
<li class="relative group">
<a href="#" class=" hover:text-gray-900 underline-effect flex items-center">
Oferta
<svg class="inline h-4 w-4 ml-1 transition-transform duration-300 transform group-hover:rotate-180"
fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</a>
<ul
class="absolute left-0 mt-2 bg-white border border-gray-300 w-40 py-2 transform scale-0 group-hover:scale-100 transition-transform duration-300 origin-top">
<li><a href="#offer" class="transition hover:bg-gray-200 block px-4 py-2 ">Projekty</a>
</li>
<li><a href="#offer" class="transition hover:bg-gray-200 block px-4 py-2 ">Wizualizacje</a>
</li>
<li><a href="#offer" class="transition hover:bg-gray-200 block px-4 py-2 ">Realizacje</a>
</li>
</ul>
</li>
<li><a href="#about" class="text-themeBlack hover:text-gray-800 underline-effect">O Firmie</a></li>
<li><a href="#projects" class="text-themeBlack hover:text-gray-800 underline-effect">Realizacje</a></li>
<li><a href="#" class="text-themeBlack hover:text-gray-800 underline-effect">Kontakt</a></li>
<li>
<button id="searchButton" class="text-white hover:text-gray-300 focus:outline-none">
<img src="icons/search-icon.svg" alt="search-icon">
</button>
<div id="searchContainer" class="hidden ">
<input type="text" class="border rounded px-2 " placeholder="Szukaj...">
</div>
</li>
</ul>
</nav>
<div id="mobile-menu"
class="lg:hidden -translate-x-full bg-themeGrey border border-gray-300 w-full h-screen fixed top-0 right-0 z-50 transform transition-transform duration-300 ease-in-out">
<div class="absolute top-0 right-0 px-8 pt-8">
<button class=" close-button text-gray-600 hover:text-gray-800 focus:outline-none">
<svg class="h-8 w-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="flex flex-col items-center justify-center h-full">
<ul class="space-y-4 text-center mobile">
<li><a href="#offer" class="text-gray-800 text-xl block px-4 py-2 mobile-menu-item">Oferta</a></li>
<li><a href="#about" class="text-gray-800 text-xl block px-4 py-2 mobile-menu-item">O
firmie </a></li>
<li><a href="#projects" class="text-gray-800 text-xl block px-4 py-2 mobile-menu-item">Realizacje</a>
</li>
<li><a href="#contact" class="text-gray-800 text-xl block px-4 py-2 mobile-menu-item">Kontakt</a></li>
</ul>
</div>
</div>
<section class="heeader_hero-section md:flex mx-auto ">
<div
class=" md:w-1/2 bg-themeBeigeBgc flex flex-col justify-center items-start p-8 xl:px-16 relative overflow-hidden">
<img src="images/hero-photo.jpg" alt="giard design hero image"
class="h-full w-full object-cover absolute top-0 left-0 opacity-20 md:hidden">
<div class="relative ">
<div class="lg:pr-28 " data-aos="fade-right" data-aos-duration="1200">
<h2
class="header-heading text-4xl font-medium md:text-5xl lg:text-6xl text-primary mb-4 tracking-wide ">
Nowoczesna
aranżacja Twojego ogrodu</h2>
<p class="tracking-wide font-medium md:text-base text-themeBlack mb-6 text-left mt-11 ">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="flex flex-col lg:flex-row gap-4 mt-16">
<a href="#contact"
class="text-themeGrey bg-themeGreenBgc rounded-full px-5 py-3 text-center sm:w-3/5 md:w-4/5 lg:w-auto transition hover:scale-105">Skontaktuj
się z nami</a>
<div
class="bg-themeBeigeBgc/50 border-2 border-themeGreenBgc text-themeGreenBgc rounded-full px-5 py-3 flex items-center justify-center sm:w-3/5 md:w-4/5 lg:w-auto transition hover:scale-105">
<a href="#projects" class=" text-center">Zobacz nasze realizacje</a>
<svg class="w-4 h-4 inline ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
</svg>
</div>
</div>
</div>
</div>
<div class="hidden md:block md:w-1/2 bg-hero-image bg-cover bg-center">
<img src="images/hero-photo.jpg" alt="giard design hero image" class="h-full w-full object-cover">
</div>
</section>
</header>
<main>
<section id="offer" class=" offer-section max-w-7xl pt-28 pb-40 mx-auto px-8">
<div class="lg:w-4/6 lg:px-24 pb-20" data-aos="fade-right" data-aos-duration="1100">
<h2 class="text-sm mb-4 text-themeGreenBgc">Oferta</h2>
<h3 class="text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-medium mb-8 text-themeBlack tracking-wide">
Działamy <span class="italic font-semibold ">kompleksowo</span></h3>
<p class="text-themeBlack">Oferujemy kompletną obsługę inwestycji terenów zielonych. Projektujemy
nowoczesne
ogrody przydomowe oraz
rezydencjonalne. Stworzymy dla Ciebie projekt, zwizualizujemy go i wcielimy w życie, a na każdym etapie
posłużymy radą i wieloletnim doświadczeniem.</p>
</div>
<div class="flex justify-center items-center gap-8 flex-wrap ">
<div
class="md:w-[380px] cursor-pointer bg-white p-8 rounded-card transition-transform duration-300 transform hover:-translate-y-2 ">
<div class="flex items-center mb-8">
<img src="icons/projects-icon.png" alt="projects icon" class="w-11 h-8">
</div>
<h4 class="text-2xl font-medium mb-2">
Projekty </h4>
<p class="text-themeBlack mb-12">
Zaprojektujemy Twój ogród w nowoczesnym stylu i z najlepszym wykorzystaniem istniejącej
przestrzeni. </p>
<div class="border-b border-green-600 inline text-green-600 transition hover:text-green-900">
<a href="#" class=" inline-flex items-center ">
Dowiedz się więcej <svg class="w-4 h-4 ml-1" fill="none" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
</div>
<div
class="md:w-[380px] cursor-pointer bg-white p-8 rounded-card transition-transform duration-300 transform hover:-translate-y-2 ">
<div class="flex items-center mb-8">
<img src="icons/visualisations-icon.png" alt="visualizations icon" class="w-11 h-8">
</div>
<h4 class="text-2xl font-medium mb-2">
Wizualizacje </h4>
<p class="text-themeBlack mb-12">
Przedstawimy Ci projekty koncepcyjne w postaci wirtualnego spaceru animowanego w technologii 3D. </p>
<div class="border-b border-green-600 inline text-green-600 transition hover:text-green-900">
<a href="#" class=" inline-flex items-center ">
Dowiedz się więcej <svg class="w-4 h-4 ml-1" fill="none" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
</div>
<div
class="md:w-[380px] cursor-pointer bg-white p-8 rounded-card transition-transform duration-300 transform hover:-translate-y-2 ">
<div class="flex items-center mb-8">
<img src="icons/realizations-icon.png" alt="realizations icon" class="w-11 h-8">
</div>
<h4 class="text-2xl font-medium mb-2">
Realizacje </h4>
<p class="text-themeBlack mb-12">
Zrealizujemy Twoje marzenie przy użyciu najnowszych rozwiązań i zaawansowanych technologii. </p>
<div class="border-b border-green-600 inline text-green-600 transition hover:text-green-900">
<a href="#" class=" inline-flex items-center ">
Zobacz nasze realizacje <svg class="w-4 h-4 ml-1" fill="none" stroke-linecap="round"
stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor">
<path d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</a>
</div>
</div>
</div>
</section>
<section id="about" class="about-section md:flex mx-auto max-h-[700px]">
<div class="hidden md:block md:w-1/2 bg-cover bg-center">
<img src="images/about-img.png" alt="giard design hero image" class="h-full w-full object-cover">
</div>
<div
class="md:w-1/2 bg-themeGreenBgc flex flex-col justify-center items-start p-8 relative overflow-hidden z-20">
<img src="images/about-img.png" alt="giard design hero image"
class="h-full w-full object-cover absolute top-0 left-0 opacity-20 md:hidden -z-10">
<div class="lg:p-20 " data-aos="fade-right" data-aos-duration="1100">
<h2 class="text-sm mb-4 text-themeGrey">O firmie</h2>
<h3 class="text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-medium mb-8 text-themeGrey tracking-wide">
Tworzymy <span class="italic font-semibold block">z pasją</span> </h3>
<p class="text-themeGrey">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
class="border-2 rounded-full px-5 py-3 inline-flex items-center justify-center mt-16 text-themeGrey transition hover:scale-105">
<a href="#projects" class="btn-secondary mr-1 text-center">Poznaj nas bliżej</a>
<svg class="w-4 h-4 inline transform rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 10l7-7m0 0l7 7m-7-7v18">
</path>
</svg>
</div>
</div>
</div>
</section>
<section id="projects" class="projects pt-28 mx-auto bg-themeBeigeBgc">
<div data-aos="fade-right" data-aos-duration="1100" class="lg:w-4/6 px-8 lg:px-30 pb-20 mx-auto max-w-7xl">
<h2 class="text-sm mb-4 text-themeGreenBgc">Realizacje</h2>
<h3 class="text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-medium mb-8 text-themeBlack tracking-wide">
Nasze <span class="italic font-semibold ">projekty</span></h3>
</div>
<div class="masonry relative gap-8 ">
<div class="item cursor-pointer transform overflow-hidden ">
<img class="hover:scale-105 transition-transform" src="images/masonry-photo-9.png"
alt="realized project image">
</div>
<div class="item cursor-pointer transform overflow-hidden "> <img
class="hover:scale-105 transition-transform" src="images/masonry-photo-6.png"
alt="realized project image"></div>
<div class="item cursor-pointer transform overflow-hidden "> <img
class="hover:scale-105 transition-transform" src="images/masonry-photo-3.png"
alt="realized project image"></div>
<div class="item cursor-pointer transform overflow-hidden "> <img
class="hover:scale-105 transition-transform" src="images/masonry-photo-8.png"
alt="realized project image"></div>
<div class="item cursor-pointer transform overflow-hidden "> <img
class="hover:scale-105 transition-transform" src="images/masonry-photo-5.png"
alt="realized project image"></div>
<div class="item cursor-pointer transform overflow-hidden "> <img
class="hover:scale-105 transition-transform" src="images/masonry-photo-2.png"
alt="realized project image"></div>
<div class="item cursor-pointer transform overflow-hidden "> <img
class="hover:scale-105 transition-transform" src="images/masonry-photo-7.png"
alt="realized project image"></div>
<div class="item cursor-pointer transform overflow-hidden "> <img
class="hover:scale-105 transition-transform" src="images/masonry-photo-4.png"
alt="realized project image"></div>
<div class="item cursor-pointer transform overflow-hidden "> <img
class="hover:scale-105 transition-transform" src="images/masonry-photo-1.png"
alt="realized project image"></div>
<div id="gradient"
class="gradient absolute bottom-0 left-0 w-full h-3/4 flex flex-col items-center justify-end">
<button id="expand-btn"
class="mb-8 py-2 px-4 border border-2 text-white rounded-full transition hover:scale-105">Rozwiń <svg
class="w-4 h-4 inline transform rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M5 10l7-7m0 0l7 7m-7-7v18">
</path>
</svg> </button>
</div>
<div class="popup" id="popup">
<img src="" alt="Popup Image" id="popupImage">
</div>
</div>
</section>
<section class="instagram-section py-16 max-w-7xl mx-auto px-8 ">
<div data-aos="fade-right" data-aos-duration="1100"
class="bg-themeGreenBgc py-28 px-4 md:px-10 lg:px-20 md:flex justify-between text-center md:text-left">
<h3 class="md:w-3/5 lg:w-3/4 mb-6 md:mb-0 text-themeGrey text-2xl md:text-3xl lg:text-4xl xl:text-5xl ">
Zostańmy w kontakcie! Znajdziesz nas na <span class="italic font-semibold">Instagramie.</span></h3>
<div class="ml-4">
<span class="block mb-6 text-themeGrey md:w-2/3">Śledź nasze najnowsze realizacje</span>
<button
class=" py-2 px-4 bg-themeGrey text-themeGreenBgc rounded-full transition hover:scale-105">Instagram</button>
</div>
</div>
</section>
</main>
<footer id="contact" class="bg-themeBlack py-20 ">
<div class="max-w-7xl mx-auto">
<div class="text-center mx-8 border-b pb-8 md:flex justify-between items-center">
<h5 class=" flex items-center justify-center"><a href="#"><img src="icons/logo-icon-white.svg"
alt="giard design logo"></a>
</h5>
<div class="md:flex">
<span class="text-white block p-4">Daj znać, co możemy dla ciebie zrobić</span>
<button
class="py-2 px-4 bg-themeGreenBgc text-themeGrey rounded-full transition hover:scale-105">Skontaktuj
się z nami</button>
</div>
</div>
<div class="text-white mx-8 pt-8">
<div class="md:flex md:justify-between items-center">
<div class="text-center flex justify-evenly lg:justify-between flex-wrap md:w-1/3">
<a class="mx-1 text-themeGrey transition duration-300 hover:scale-105 hover:opacity-75"
href="#">Kontakt</a>
<a class="mx-1 text-themeGrey transition duration-300 hover:scale-105 hover:opacity-75"
href="#">Instagram</a>
<a class="mx-1 text-themeGrey transition duration-300 hover:scale-105 hover:opacity-75"
href="#">Facebook</a>
<a class="mx-1 text-themeGrey transition duration-300 hover:scale-105 hover:opacity-75"
href="#">LinkedIn</a>
</div>
<div class="text-center p-4 px-0 ">
<span class="md:inline-block mr-2 md:mr-12">000-000-000</span>
<span>giardesign@kontakt.pl</span>
</div>
</div>
<div class="text-center md:pt-24 md:flex justify-between items-center ">
<span>Prawa zastrzeżone © 2022</span>
<div class="md:flex">
<span class="inline-block p-3">made by</span><img class="block mx-auto"
src="icons/logo-full-light-adrespect.svg" alt="adrespect logo">
</div>
</div>
</div>
</div>
</footer>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="main.js"></script>
</body>
</html>