-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
executable file
·395 lines (368 loc) · 21.9 KB
/
about.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
<!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">محفظة الأعمال</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>
</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 loading="lazy" 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 dot__active" 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="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 loading="lazy" src="/src/assets/imgs/about_hero.png" alt="" />
</picture>
<h1 class="once-in-title">شريكك الموثوق في البناء والإصلاح.</h1>
</section>
<!-- NOTE: ======== COL__1 HERO ==========-->
<section class="col__1 about__col">
<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>
<p class="col__1__p">
الشركة الذهبية المتحدة للمقاولات، قد زرعت الخبرة على مدار عقود، متخصصة في عزل الماء،
والعزل الحراري، وإصلاح الخرسانة. مع التزام لا هوادة فيه بالتميز، تتلقى كل مشروع
اهتمامًا دقيقًا ورعاية. من الاستشارة الأولية إلى الفحص النهائي، يضمن فريقنا ذو الخبرة
العميقة نتائج متفوقة بدعم من الخبرة في الصناعة والحرفية.
</p>
<p class="col__1__p">
عقود من الخبرة في عزل الماء، والعزل الحراري، وإصلاح الخرسانة تضمن نتائج متفوقة. مع
التزامنا بالتميز، نتعاون عن كثب مع العملاء، نقدم حلولًا مصممة خصيصًا بدعم من الخبرة في
الصناعة.
</p>
<div class="col__1__btn__wrapper">
<button type="button" class="btn-solid-horizon col__1__btn__wrapper__btn magnetic"
data-strength="50" data-strength-text="15">
<!-- <div class="btn-fill"></div> -->
<div class="btn-text btn-text-m">الاعتمادات</div>
</button>
</div>
</div>
</section>
<!-- NOTE: ======== COL__2 HERO ==========-->
<section class="col__2 about__col">
<div class="col__2__pin">
<span class="col__2__span">فريقنا</span>
<h2 class="col__2__title">تعرف على الفريق.</h2>
<svg width="39" height="19" class="col__2__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>
<ul class="our__team">
<li>
<img loading="lazy" src="./src/assets/imgs/ourteam/1.png" alt="" />
</li>
<li>
<img loading="lazy" src="./src/assets/imgs/ourteam/2.png" alt="" />
</li>
<li>
<img loading="lazy" src="./src/assets/imgs/ourteam/3.png" alt="" />
</li>
<li>
<img loading="lazy" src="./src/assets/imgs/ourteam/4.png" alt="" />
</li>
<li>
<img loading="lazy" src="./src/assets/imgs/ourteam/5.png" alt="" />
</li>
<li>
<img loading="lazy" src="./src/assets/imgs/ourteam/6.png" alt="" />
</li>
<li>
<img loading="lazy" src="./src/assets/imgs/ourteam/7.png" alt="" />
</li>
<li>
<img loading="lazy" src="./src/assets/imgs/ourteam/8.png" alt="" />
</li>
<li>
<img loading="lazy" src="./src/assets/imgs/ourteam/9.png" alt="" />
</li>
<li>
<img loading="lazy" src="./src/assets/imgs/ourteam/10.png" alt="" />
</li>
<li>
<img loading="lazy" src="./src/assets/imgs/ourteam/11.png" alt="" />
</li>
</ul>
</div>
</section>
<!-- NOTE: ======== COL__3 HERO ==========-->
<section class="col__3 about__col">
<div>
<div class="col__3__right">
<span class="col__3__span">ملفنا الشخصي</span>
<h2 class="col__3__title">نظرة داخل شركتنا.</h2>
<svg width="39" height="19" class="col__3__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="#fff" />
</svg>
</div>
<div>
<ul class="accordion">
<li class="active">
<div class="accordion-header">
<h3>مزيد من المعلومات عن شركة الاتحاد الذهبي للمقاولات.</h3>
<svg width="27" height="27" viewBox="0 0 27 27" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M1.49854 13.2499L25.9807 13.2499" stroke="white" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.7397 1L13.7397 25.5" stroke="white" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<p class="about__col__p">
اسم الشركة: شركة الاتحاد الذهبي للمقاولات. <br />
النوع: خاص. <br />
الملكية: شركة أجنبية محدودة. <br />
التسجيل: 17-02-1431 هـ، جدة.
</p>
<div class="stripe"></div>
</li>
<li>
<div class="accordion-header">
<h3>استكشاف خبرتنا: أنشطة الشركة.</h3>
<svg width="27" height="27" viewBox="0 0 27 27" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M1.49854 13.2499L25.9807 13.2499" stroke="white" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.7397 1L13.7397 25.5" stroke="white" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<p class="about__col__p">أنشطتنا: تسقيف، عزل الماء، عزل حراري، إصلاح الخرسانة.</p>
<div class="stripe"></div>
</li>
<li>
<div class="accordion-header">
<h3>معلومات المكتب: كيفية العثور علينا.</h3>
<svg width="27" height="27" viewBox="0 0 27 27" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path d="M1.49854 13.2499L25.9807 13.2499" stroke="white" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M13.7397 1L13.7397 25.5" stroke="white" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<p class="about__col__p">أنشطتنا: تسقيف، عزل الماء، عزل حراري، إصلاح الخرسانة.</p>
<div class="stripe"></div>
</li>
</ul>
</div>
</div>
<div class="bottom-shape-wrapper">
<div class="footer-shape">
<div class="layout"></div>
</div>
</div>
</section>
</main>
<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>