-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathworks.html
executable file
·398 lines (372 loc) · 19.7 KB
/
works.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
<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- ========= IMPORT CSS FILE ========== -->
<link rel="stylesheet" href="./src/scss/style.scss" />
<!-- ========= IMPORT FAVICON ========== -->
<link rel="shortcut icon" href="./favicon.png" type="image/x-icon" />
<!-- ========= IMPORT GOOGle 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=Lexend+Deca:[email protected]&display=swap" rel="stylesheet" />
<link
href="https://fonts.googleapis.com/css2?family=Lexend+Deca:[email protected]&family=Noto+Sans+Arabic:[email protected]&display=swap"
rel="stylesheet" />
<title>GOLDEN UNITED WATERPOOFING</title>
</head>
<body data-barba="wrapper">
<!--NOTE: ========= LOADER ========== -->
<div class="loader__wrappper">
<div class="loader loader_first">
<div class="loading-words">
<h2 data-animate="font-weight" class="loader__h2 init">
.NEDLOG <br />.DETINU <br />.GNIFOOPRETAW
</h2>
<h2 class="loader__h2 arabic active">محفظة الأعمال</h2>
<h2 class="loader__h2 arabic">حولنا</h2>
<h2 class="loader__h2 arabic">الذين يثقون بنا</h2>
<h2 class="loader__h2 arabic">اتصل بنا</h2>
<h2 class="loader__h2 arabic">الصفحة الرئيسية</h2>
</div>
</div>
<div class="loader loader_second"></div>
</div>
<!--NOTE: ========= MOUSE POSE ========== -->
<div class="mouse-pos-list-image active">
<div class="mouse-pos-list-image-bounce">
<div class="float-image-wrap">
<li class="float-image-item">
<div class="overlay-image"></div>
</li>
<li class="float-image-item">
<div class="overlay-image"></div>
</li>
<li class="float-image-item">
<div class="overlay-image"></div>
</li>
<li class="float-image-item">
<div class="overlay-image"></div>
</li>
</div>
</div>
</div>
<div class="mouse-pos-list-btn no-select"></div>
<div class="mouse-pos-list-span no-select">
<p>أعرض</p>
</div>
<div class="main__menu">
<ul class="main__menu__list">
<li>
<a class="btn-text magnetic" href="/credits.html" data-strength="20" data-strength-text="10">
<span> الاعتمادات </span>
<div class="dot btn-text-m"></div>
</a>
</li>
<li>
<a class="btn-text magnetic" href="/about.html" data-strength="20" data-strength-text="10">
<span>حولنا</span>
<div class="dot btn-text-m"></div>
</a>
</li>
<li>
<a class="btn-text magnetic" href="/works.html" data-strength="20" data-strength-text="10">
<span>محفظة الأعمال</span>
<div class="dot btn-text-m"></div>
</a>
</li>
<li>
<a class="btn-text magnetic" href="/contact.html" data-strength="20" data-strength-text="10">
<span> اتصل بنا</span>
<div class="dot btn-text-m"></div>
</a>
</li>
</ul>
<div class="main__menu__background"></div>
<div class="main__menu__img"></div>
</div>
<div data-barba="container" data-barba-namespace="works">
<div class="hamburger-button-wrapper">
<div class="hamburger-btn btn-radius magnetic" data-strength="50" data-strength-text="25">
<div class="btn-fill"></div>
<div class="btn-text btn-text-m">
<span></span>
<span></span>
</div>
</div>
</div>
<!--NOTE: ========= HEADER ========== -->
<header class="header">
<nav class="header__nav">
<a class="header__nav__logo magnetic" href="/index.html">
<img src="/src/assets/imgs/logo.png" alt="logo" class="magnetic" data-strength="20"
data-strength-text="10" />
</a>
<div class="header__nav__container">
<ul class="header__nav__container__menu">
<li>
<a class="btn-text magnetic" href="/credits.html" data-strength="20"
data-strength-text="10">
<span> الاعتمادات </span>
<div class="dot btn-text-m"></div>
</a>
</li>
<li>
<a class="btn-text magnetic" href="/about.html" data-strength="20" data-strength-text="10">
<span>حولنا</span>
<div class="dot btn-text-m"></div>
</a>
</li>
<li>
<a class="btn-text magnetic dot__active" href="/works.html" data-strength="20"
data-strength-text="10">
<span>محفظة الأعمال</span>
<div class="dot btn-text-m"></div>
</a>
</li>
<li>
<a class="btn-text magnetic" href="/contact.html" data-strength="20"
data-strength-text="10">
<span> اتصل بنا</span>
<div class="dot btn-text-m"></div>
</a>
</li>
</ul>
<div class="header__nav__container__btn magnetic" data-strength="20" data-strength-text="10">
<div></div>
<div></div>
</div>
</div>
</nav>
</header>
<!-- ========= MAIN ========== -->
<main>
<!-- NOTE: ========= PAGE__HERO ========== -->
<section class="page__hero__section">
<picture class="once-in-view">
<img src="/src/assets/imgs/works_hero.png" alt="" />
</picture>
<h1 class="once-in-title">عرض شامل لأعمالنا المتميزة ومشاريعنا.</h1>
</section>
<!-- NOTE: ========= COL__1 ========== -->
<section class="col__1 works_section">
<div>
<span class="col__1__span">أعمالنا</span>
<h2 class="col__1__title">ماهر. رحيم. ملتزم.</h2>
<svg width="39" height="19" class="col__1__svg" viewBox="0 0 39 19" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M38.3809 9.5C38.3809 9.02759 38.1932 8.57453 37.8592 8.24049C37.5251 7.90645 37.072 7.71878 36.5996 7.71878L6.69855 7.71878L11.686 3.08761C12.0325 2.76637 12.2371 2.32067 12.2549 1.84855C12.2727 1.37644 12.1023 0.916581 11.781 0.570148C11.4598 0.223714 11.0141 0.0190801 10.542 0.00126546C10.0698 -0.0165511 9.60998 0.15391 9.26354 0.47515L0.95109 8.19377C0.771235 8.36051 0.627753 8.5626 0.52963 8.78736C0.431508 9.01213 0.38086 9.25475 0.38086 9.5C0.38086 9.74525 0.431508 9.98786 0.52963 10.2126C0.627753 10.4374 0.771235 10.6395 0.951089 10.8062L9.26354 18.5248C9.60997 18.8461 10.0698 19.0165 10.542 18.9987C11.0141 18.9809 11.4598 18.7763 11.781 18.4299C12.1023 18.0834 12.2727 17.6236 12.2549 17.1514C12.2371 16.6793 12.0325 16.2336 11.686 15.9124L6.69855 11.2812L36.5996 11.2812C37.072 11.2812 37.5251 11.0936 37.8592 10.7595C38.1932 10.4255 38.3809 9.97241 38.3809 9.5Z"
fill="#333333" />
</svg>
</div>
<div class="filters-wrapper">
<button class="btn-solid-horizon filter-button active magnetic" data-type="all" data-strength="25"
data-strength-text="15">
<div class="btn-fill"></div>
<span class="btn-text-m"><span>الكل</span></span>
</button>
<button class="btn-solid-horizon filter-button magnetic" data-type="residential" data-strength="25"
data-strength-text="15">
<div class="btn-fill"></div>
<span class="btn-text-m change">
<span>سكني</span>
<span class="count">3</span>
</span>
</button>
<button class="btn-solid-horizon filter-button magnetic" data-type="commercial" data-strength="25"
data-strength-text="15">
<div class="btn-fill"></div>
<span class="btn-text-m change">
<span>تجاري</span>
<span class="count">3</span>
</span>
</button>
<button class="btn-solid-horizon filter-button magnetic" data-type="governmental" data-strength="25"
data-strength-text="15">
<div class="btn-fill"></div>
<span class="btn-text-m change">
<span>حكومي</span>
<span class="count">3</span>
</span>
</button>
</div>
<div class="projects-wrapper menu once-in">
<li class="propject-table-line">
<h5 class="client-name">Client</h5>
<h5 class="location-name">Location</h5>
<h5 class="services-name">Services</h5>
<h5 class="serivices-date">Year</h5>
</li>
<ul class="float-project-container">
<li class="project show" data-type="commercial">
<div class="stripe animate"></div>
<a href="#" class="row">
<picture>
<img src="/src/assets/imgs/projects/1.png" alt="proj1" />
</picture>
<div class="flex-col name">
<h4>جسر أبو داود</h4>
</div>
<div class="flex-col region animate">
<p>جدة - تقاطع الطرق - شارع الملك فهد وشارع - روضة الأطفال</p>
</div>
<div class="flex-col animate">
<p>عزل مائى لبالطات الجسر العلوية</p>
</div>
<div class="flex-col year animate">
<p>3500 م2</p>
</div>
<div class="stripe animate"></div>
</a>
</li>
<li class="project show" data-type="residential">
<div class="stripe animate"></div>
<a href="#" class="row">
<picture>
<img src="/src/assets/imgs/projects/2.png" alt="proj1" />
</picture>
<div class="flex-col name">
<h4>جسر حليمة السعدية</h4>
</div>
<div class="flex-col region animate">
<p>جدة – تقاطع شارع حليمة السعدية وطريق المدينة المنورة</p>
</div>
<div class="flex-col animate">
<p>عزل مائى لقواعد الجسر وبالطات الجسر العلوية</p>
</div>
<div class="flex-col animate year">
<p>7000 م2</p>
</div>
<div class="stripe animate"></div>
</a>
</li>
<li class="project show" data-type="governmental">
<div class="stripe animate"></div>
<a href="#" class="row">
<picture>
<img src="/src/assets/imgs/projects/3.png" alt="proj1" />
</picture>
<div class="flex-col name">
<h4>جسر بنى مالك</h4>
</div>
<div class="flex-col region animate">
<p>جدة – تقاطع طريق األمير ماجد وشارع بنى مالك</p>
</div>
<div class="flex-col animate">
<p>عزل مائى لقواعد الجسروبالطات الجسر العلوية</p>
</div>
<div class="flex-col animate year">
<p>16000 م 2</p>
</div>
<div class="stripe animate"></div>
</a>
</li>
<li class="project show" data-type="residential">
<div class="stripe animate"></div>
<a href="#" class="row">
<picture>
<img src="/src/assets/imgs/projects/4.png" alt="proj1" />
</picture>
<div class="flex-col name">
<h4>جسر دوار الدراجة</h4>
</div>
<div class="flex-col region animate">
<p>جدة – تقاطع طريق الملك فهد وشارع الروضة</p>
</div>
<div class="flex-col animate">
<p>عزل مائى لقواعد الجسروبالطات الجسر العلوية</p>
</div>
<div class="flex-col animate year">
<p>15000 م2</p>
</div>
<div class="stripe animate"></div>
</a>
</li>
</ul>
</div>
<a class="col__1__btn__wrapper" href="./works.html">
<button type="button" class="btn-solid-horizon col__1__btn magnetic" data-strength="50"
data-strength-text="15">
<div class="btn-fill"></div>
<div class="btn-text btn-text-m change">الأرشيف<sup>10</sup></div>
</button>
</a>
</section>
<!-- NOTE: ========= COL__2 ========== -->
<section class="col__2 works_section pin__section">
<h2 class="col__2__title-1">هل رأيت هذه الأعمال</h2>
<h2 class="col__2__title-2">آمل أن تكونوا قد أحببت أعمالنا</h2>
<h2 class="col__2__title-3">أليس كذلك؟</h2>
<div class="bottom-shape-wrapper">
<div class="footer-shape">
<div class="layout"></div>
</div>
</div>
</section>
</main>
<!-- NOTE: ========= FOOTER ========== -->
<!---->
<footer class="footer__section">
<div class="footer__section__col1">
<h2>لنعمل معًا.</h2>
</div>
<div class="footer__section__col2">
<div class="stripe"></div>
<img loading="lazy" src="/src/assets/svg/arrow.png" alt="" />
<a href="./contact.html">
<button type="button" class="btn-radius footer__btn magnetic" data-strength="50"
data-strength-text="15">
<div class="btn-fill"></div>
<div class="btn-text btn-text-m">ابدأ</div>
</button>
</a>
</div>
<div class="footer__section__col3">
<button type=" button" class="btn-solid-horizon footer__btn magnetic" data-strength="50"
data-strength-text="15">
<div class="btn-fill"></div>
<div class="btn-text btn-text-m">[email protected]</div>
</button>
<button type="button" class="btn-solid-horizon footer__btn magnetic" data-strength="50"
data-strength-text="15">
<div class="btn-fill"></div>
<div class="btn-text btn-text-m">93299994 50+</div>
</button>
<div class="stripe"></div>
</div>
<div class="footer__section__col4">
<p>© تصميم وتطوير من قبل Ahmed Ayob | سياسة الخصوصية | إشعارات قانونية</p>
<ul class="header__nav__container__menu">
<li>
<a class="btn-text magnetic" href="/credits.html" data-strength="20" data-strength-text="10">
<span> الاعتمادات </span>
<div class="dot btn-text-m"></div>
</a>
</li>
<li>
<a class="btn-text magnetic" href="/about.html" data-strength="20" data-strength-text="10">
<span>حولنا</span>
<div class="dot btn-text-m"></div>
</a>
</li>
<li>
<a class="btn-text magnetic" href="/works.html" data-strength="20" data-strength-text="10">
<span>محفظة الأعمال</span>
<div class="dot btn-text-m"></div>
</a>
</li>
<li>
<a class="btn-text magnetic" href="/contact.html" data-strength="20" data-strength-text="10">
<span>بنا</span>
<div class="dot btn-text-m"></div>
</a>
</li>
</ul>
</div>
</footer>
</div>
<script type="module" src="/src/ts/main.ts"></script>
</body>
</html>