Hugging Face's logo

Spaces:
combos
/
anycoder-ef1fc337
Running

App Files Community
combos commited on
Commit
757e82b
·
verified ·
1 Parent(s): e2c1bbe

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1169 -659
index.html CHANGED
@@ -1,674 +1,1184 @@
1
  <!DOCTYPE html>
2
  <html lang="ar" dir="rtl">
 
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>موقع السيارات | عرض المركبات</title>
7
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
- <style>
9
- /* Reset and Base Styles */
10
- * {
11
- margin: 0;
12
- padding: 0;
13
- box-sizing: border-box;
14
- font-family: 'Tajawal', sans-serif;
15
- }
16
-
17
- html {
18
- scroll-behavior: smooth;
19
- }
20
-
21
- body {
22
- background-color: #f8f9fa;
23
- color: #333;
24
- line-height: 1.6;
25
- }
26
-
27
- /* Header Styles */
28
- header {
29
- position: fixed;
30
- top: 0;
31
- left: 0;
32
- right: 0;
33
- background-color: rgba(255, 255, 255, 0.95);
34
- backdrop-filter: blur(10px);
35
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
36
- z-index: 1000;
37
- padding: 1rem;
38
- }
39
-
40
- .header-container {
41
- display: flex;
42
- justify-content: space-between;
43
- align-items: center;
44
- max-width: 1200px;
45
- margin: 0 auto;
46
- }
47
-
48
- .logo {
49
- font-size: 1.5rem;
50
- font-weight: bold;
51
- color: #2c3e50;
52
- text-decoration: none;
53
- }
54
-
55
- .nav-toggle {
56
- background: none;
57
- border: none;
58
- font-size: 1.5rem;
59
- cursor: pointer;
60
- color: #2c3e50;
61
- }
62
-
63
- .phone-icon {
64
- font-size: 1.5rem;
65
- color: #2c3e50;
66
- }
67
-
68
- /* Sidebar Styles */
69
- .sidebar {
70
- position: fixed;
71
- top: 0;
72
- right: -300px;
73
- width: 300px;
74
- height: 100vh;
75
- background-color: #2c3e50;
76
- color: white;
77
- transition: right 0.3s ease;
78
- z-index: 2000;
79
- padding: 2rem;
80
- box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
81
- }
82
-
83
- .sidebar.active {
84
- right: 0;
85
- }
86
-
87
- .sidebar-close {
88
- position: absolute;
89
- top: 1rem;
90
- left: 1rem;
91
- background: none;
92
- border: none;
93
- font-size: 1.5rem;
94
- color: white;
95
- cursor: pointer;
96
- }
97
-
98
- .sidebar-nav {
99
- list-style: none;
100
- margin-top: 3rem;
101
- }
102
-
103
- .sidebar-nav li {
104
- margin-bottom: 1rem;
105
- }
106
-
107
- .sidebar-nav a {
108
- color: white;
109
- text-decoration: none;
110
- font-size: 1.1rem;
111
- transition: color 0.3s;
112
- }
113
-
114
- .sidebar-nav a:hover {
115
- color: #3498db;
116
- }
117
-
118
- /* Hero Section */
119
- .hero {
120
- height: 100vh;
121
- display: flex;
122
- align-items: center;
123
- justify-content: center;
124
- position: relative;
125
- overflow: hidden;
126
- margin-top: 70px;
127
- }
128
-
129
- .hero video {
130
- position: absolute;
131
- top: 0;
132
- left: 0;
133
- width: 100%;
134
- height: 100%;
135
- object-fit: cover;
136
- z-index: -1;
137
- }
138
-
139
- .hero-content {
140
- text-align: center;
141
- color: white;
142
- text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
143
- z-index: 1;
144
- }
145
-
146
- .hero h1 {
147
- font-size: 2.5rem;
148
- margin-bottom: 1rem;
149
- }
150
-
151
- .hero p {
152
- font-size: 1.2rem;
153
- margin-bottom: 2rem;
154
- }
155
-
156
- .btn {
157
- display: inline-block;
158
- padding: 0.8rem 1.5rem;
159
- background-color: #3498db;
160
- color: white;
161
- text-decoration: none;
162
- border-radius: 5px;
163
- transition: background-color 0.3s;
164
- border: none;
165
- cursor: pointer;
166
- font-size: 1rem;
167
- }
168
-
169
- .btn:hover {
170
- background-color: #2980b9;
171
- }
172
-
173
- /* Vehicles Section */
174
- .section {
175
- padding: 4rem 1rem;
176
- max-width: 1200px;
177
- margin: 0 auto;
178
- }
179
-
180
- .section-title {
181
- text-align: center;
182
- margin-bottom: 3rem;
183
- font-size: 2rem;
184
- color: #2c3e50;
185
- }
186
-
187
- .vehicles-container {
188
- position: relative;
189
- overflow: hidden;
190
- }
191
-
192
- .vehicles-wrapper {
193
- display: flex;
194
- gap: 1.5rem;
195
- overflow-x: auto;
196
- scroll-snap-type: x mandatory;
197
- padding-bottom: 1rem;
198
- scrollbar-width: none;
199
- }
200
-
201
- .vehicles-wrapper::-webkit-scrollbar {
202
- display: none;
203
- }
204
-
205
- .vehicle-card {
206
- flex: 0 0 80%;
207
- scroll-snap-align: start;
208
- background-color: white;
209
- border-radius: 10px;
210
- overflow: hidden;
211
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
212
- transition: transform 0.3s;
213
- }
214
-
215
- .vehicle-card:hover {
216
- transform: translateY(-5px);
217
- }
218
-
219
- .vehicle-card img {
220
- width: 100%;
221
- height: 200px;
222
- object-fit: cover;
223
- }
224
-
225
- .vehicle-info {
226
- padding: 1.5rem;
227
- }
228
-
229
- .vehicle-info h3 {
230
- margin-bottom: 0.5rem;
231
- color: #2c3e50;
232
- }
233
-
234
- .vehicle-info p {
235
- color: #7f8c8d;
236
- margin-bottom: 1rem;
237
- }
238
-
239
- .vehicle-price {
240
- font-size: 1.2rem;
241
- font-weight: bold;
242
- color: #e74c3c;
243
- }
244
-
245
- /* Products Section */
246
- .products-grid {
247
- display: grid;
248
- grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
249
- gap: 1.5rem;
250
- }
251
-
252
- .product-card {
253
- background-color: white;
254
- border-radius: 10px;
255
- overflow: hidden;
256
- box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
257
- transition: transform 0.3s;
258
- }
259
-
260
- .product-card:hover {
261
- transform: translateY(-5px);
262
- }
263
-
264
- .product-card img {
265
- width: 100%;
266
- height: 180px;
267
- object-fit: cover;
268
- }
269
-
270
- .product-info {
271
- padding: 1rem;
272
- }
273
-
274
- .product-info h3 {
275
- margin-bottom: 0.5rem;
276
- color: #2c3e50;
277
- }
278
-
279
- .product-price {
280
- font-size: 1.1rem;
281
- font-weight: bold;
282
- color: #27ae60;
283
- }
284
-
285
- /* Footer */
286
- footer {
287
- background-color: #2c3e50;
288
- color: white;
289
- padding: 3rem 1rem 1rem;
290
- }
291
-
292
- .footer-container {
293
- max-width: 1200px;
294
- margin: 0 auto;
295
- display: grid;
296
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
297
- gap: 2rem;
298
- }
299
-
300
- .footer-column h3 {
301
- margin-bottom: 1rem;
302
- font-size: 1.2rem;
303
- }
304
-
305
- .footer-column ul {
306
- list-style: none;
307
- }
308
-
309
- .footer-column ul li {
310
- margin-bottom: 0.5rem;
311
- }
312
-
313
- .footer-column ul li a {
314
- color: #bdc3c7;
315
- text-decoration: none;
316
- transition: color 0.3s;
317
- }
318
-
319
- .footer-column ul li a:hover {
320
- color: white;
321
- }
322
-
323
- .social-links {
324
- display: flex;
325
- gap: 1rem;
326
- margin-top: 1rem;
327
- }
328
-
329
- .social-links a {
330
- color: white;
331
- font-size: 1.5rem;
332
- transition: color 0.3s;
333
- }
334
-
335
- .social-links a:hover {
336
- color: #3498db;
337
- }
338
-
339
- .footer-bottom {
340
- text-align: center;
341
- margin-top: 2rem;
342
- padding-top: 1rem;
343
- border-top: 1px solid rgba(255, 255, 255, 0.1);
344
- font-size: 0.9rem;
345
- color: #bdc3c7;
346
- }
347
-
348
- /* WhatsApp Button */
349
- .whatsapp-btn {
350
- position: fixed;
351
- bottom: 2rem;
352
- left: 2rem;
353
- width: 60px;
354
- height: 60px;
355
- background-color: #25d366;
356
- color: white;
357
- border-radius: 50%;
358
- display: flex;
359
- align-items: center;
360
- justify-content: center;
361
- font-size: 2rem;
362
- box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
363
- z-index: 1000;
364
- transition: transform 0.3s;
365
- }
366
-
367
- .whatsapp-btn:hover {
368
- transform: scale(1.1);
369
- }
370
-
371
- /* Built with anycoder */
372
- .built-with {
373
- position: fixed;
374
- bottom: 1rem;
375
- right: 1rem;
376
- font-size: 0.8rem;
377
- color: #7f8c8d;
378
- z-index: 1000;
379
- }
380
-
381
- .built-with a {
382
- color: #3498db;
383
- text-decoration: none;
384
- }
385
-
386
- /* Responsive Adjustments */
387
- @media (min-width: 768px) {
388
- .vehicle-card {
389
- flex: 0 0 45%;
390
- }
391
-
392
- .hero h1 {
393
- font-size: 3rem;
394
- }
395
-
396
- .hero p {
397
- font-size: 1.5rem;
398
- }
399
- }
400
-
401
- @media (min-width: 992px) {
402
- .vehicle-card {
403
- flex: 0 0 30%;
404
- }
405
-
406
- .header-container {
407
- padding: 0 2rem;
408
- }
409
- }
410
-
411
- @media (min-width: 1200px) {
412
- .vehicle-card {
413
- flex: 0 0 23%;
414
- }
415
- }
416
- </style>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
417
  </head>
 
418
  <body>
419
- <!-- Header -->
420
- <header>
421
- <div class="header-container">
422
- <a href="#" class="logo">سياراتنا</a>
423
- <div style="display: flex; align-items: center; gap: 1rem;">
424
- <i class="fas fa-phone phone-icon"></i>
425
- <button class="nav-toggle" id="navToggle">
426
- <i class="fas fa-bars"></i>
427
- </button>
428
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
429
  </div>
430
- </header>
431
-
432
- <!-- Sidebar -->
433
- <div class="sidebar" id="sidebar">
434
- <button class="sidebar-close" id="sidebarClose">
435
- <i class="fas fa-times"></i>
436
- </button>
437
- <nav>
438
- <ul class="sidebar-nav">
439
- <li><a href="#">الرئيسية</a></li>
440
- <li><a href="#">المركبات</a></li>
441
- <li><a href="#">المنتجات</a></li>
442
- <li><a href="#">الخدمات</a></li>
443
- <li><a href="#">اتصل بنا</a></li>
444
- <li><a href="#">من نحن</a></li>
445
- </ul>
446
- </nav>
 
 
 
 
 
 
 
 
 
 
447
  </div>
 
 
 
448
 
449
- <!-- Hero Section -->
450
- <section class="hero">
451
- <video autoplay muted loop>
452
- <source src="https://assets.mixkit.co/videos/preview/mixkit-car-driving-on-a-forest-road-40889-large.mp4" type="video/mp4">
453
- Your browser does not support the video tag.
454
- </video>
455
- <div class="hero-content">
456
- <h1>استكشف أحدث المركبات</h1>
457
- <p>اختر من بين مجموعة واسعة من السيارات الجاهزة لتجربة قيادة استثنائية</p>
458
- <a href="#vehicles" class="btn">عرض المركبات</a>
 
 
 
 
 
 
 
 
 
459
  </div>
460
- </section>
461
-
462
- <!-- Vehicles Section -->
463
- <section class="section" id="vehicles">
464
- <h2 class="section-title">مركباتنا المميزة</h2>
465
- <div class="vehicles-container">
466
- <div class="vehicles-wrapper">
467
- <div class="vehicle-card">
468
- <img src="https://images.unsplash.com/photo-1549317661-bd32c8ce0db2?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="سيارة رياضية">
469
- <div class="vehicle-info">
470
- <h3>سيارة رياضية</h3>
471
- <p>موديل 2023، محرك 3.0L، أوتوماتيك</p>
472
- <div class="vehicle-price">120,000 SAR</div>
473
- </div>
474
- </div>
475
- <div class="vehicle-card">
476
- <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="سيارة عائلية">
477
- <div class="vehicle-info">
478
- <h3>سيارة عائلية</h3>
479
- <p>موديل 2022، محرك 2.5L، أوتوماتيك</p>
480
- <div class="vehicle-price">85,000 SAR</div>
481
- </div>
482
- </div>
483
- <div class="vehicle-card">
484
- <img src="https://images.unsplash.com/photo-1583121274602-3e2820c69888?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="سيارة دفع رباعي">
485
- <div class="vehicle-info">
486
- <h3>سيارة دفع رباعي</h3>
487
- <p>موديل 2023، محرك 3.5L، أوتوماتيك</p>
488
- <div class="vehicle-price">150,000 SAR</div>
489
- </div>
490
- </div>
491
- <div class="vehicle-card">
492
- <img src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="سيارة فاخرة">
493
- <div class="vehicle-info">
494
- <h3>سيارة فاخرة</h3>
495
- <p>موديل 2023، محرك 4.0L، أوتوماتيك</p>
496
- <div class="vehicle-price">250,000 SAR</div>
497
- </div>
498
- </div>
499
- </div>
500
  </div>
501
- </section>
502
-
503
- <!-- Products Section -->
504
- <section class="section">
505
- <h2 class="section-title">منتجاتنا</h2>
506
- <div class="products-grid">
507
- <div class="product-card">
508
- <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="إطارات">
509
- <div class="product-info">
510
- <h3>إطارات عالية الجودة</h3>
511
- <div class="product-price">1,200 SAR</div>
512
- </div>
513
- </div>
514
- <div class="product-card">
515
- <img src="https://images.unsplash.com/photo-1599491360393-1d5e50418f46?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="زيوت محرك">
516
- <div class="product-info">
517
- <h3>زيت محرك اصلي</h3>
518
- <div class="product-price">250 SAR</div>
519
- </div>
520
- </div>
521
- <div class="product-card">
522
- <img src="https://images.unsplash.com/photo-1580273916550-e323be2ae537?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="بطاريات">
523
- <div class="product-info">
524
- <h3>بطارية سيارات</h3>
525
- <div class="product-price">500 SAR</div>
526
- </div>
527
- </div>
528
- <div class="product-card">
529
- <img src="https://images.unsplash.com/photo-1579952363873-27d3bfad9c0d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="أجزاء محرك">
530
- <div class="product-info">
531
- <h3>أجزاء محرك أصلية</h3>
532
- <div class="product-price">800 SAR</div>
533
- </div>
534
- </div>
535
  </div>
536
- </section>
537
-
538
- <!-- Footer -->
539
- <footer>
540
- <div class="footer-container">
541
- <div class="footer-column">
542
- <h3>روابط سريعة</h3>
543
- <ul>
544
- <li><a href="#">الرئيسية</a></li>
545
- <li><a href="#">المركبات</a></li>
546
- <li><a href="#">المنتجات</a></li>
547
- <li><a href="#">الخدمات</a></li>
548
- </ul>
549
- </div>
550
- <div class="footer-column">
551
- <h3>خدماتنا</h3>
552
- <ul>
553
- <li><a href="#">صيانة دورية</a></li>
554
- <li><a href="#">تغيير زيوت</a></li>
555
- <li><a href="#">إصلاح محركات</a></li>
556
- <li><a href="#">تغيير إطارات</a></li>
557
- </ul>
558
- </div>
559
- <div class="footer-column">
560
- <h3>اتصل بنا</h3>
561
- <ul>
562
- <li><a href="tel:+966123456789">+966 12 345 6789</a></li>
563
- <li><a href="mailto:info@example.com">info@example.com</a></li>
564
- <li>الرياض، المملكة العربية السعودية</li>
565
- </ul>
566
- <div class="social-links">
567
- <a href="#"><i class="fab fa-facebook"></i></a>
568
- <a href="#"><i class="fab fa-twitter"></i></a>
569
- <a href="#"><i class="fab fa-instagram"></i></a>
570
- <a href="#"><i class="fab fa-youtube"></i></a>
571
- </div>
572
- </div>
573
  </div>
574
- <div class="footer-bottom">
575
- <p>جميع الحقوق محفوظة © 2023 | <a href="#">سياسة الخصوصية</a> | <a href="#">شروط الاستخدام</a></p>
576
- <p>Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a></p>
 
 
 
 
577
  </div>
578
- </footer>
 
 
579
 
580
- <!-- WhatsApp Button -->
581
- <a href="https://wa.me/1234567890" class="whatsapp-btn" target="_blank">
582
- <i class="fab fa-whatsapp"></i>
583
- </a>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
584
 
585
- <script>
586
- // Sidebar toggle functionality
587
- const navToggle = document.getElementById('navToggle');
588
- const sidebar = document.getElementById('sidebar');
589
- const sidebarClose = document.getElementById('sidebarClose');
590
-
591
- navToggle.addEventListener('click', () => {
592
- sidebar.classList.add('active');
593
- });
594
-
595
- sidebarClose.addEventListener('click', () => {
596
- sidebar.classList.remove('active');
597
- });
598
-
599
- // Close sidebar when clicking outside
600
- document.addEventListener('click', (e) => {
601
- if (!sidebar.contains(e.target) && !navToggle.contains(e.target)) {
602
- sidebar.classList.remove('active');
603
- }
604
- });
605
-
606
- // Smooth scrolling for anchor links
607
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
608
- anchor.addEventListener('click', function (e) {
609
- e.preventDefault();
610
- const target = document.querySelector(this.getAttribute('href'));
611
- if (target) {
612
- target.scrollIntoView({
613
- behavior: 'smooth',
614
- block: 'start'
615
- });
616
- }
617
- });
618
- });
619
-
620
- // Horizontal scroll for vehicles with mouse drag
621
- let isDragging = false;
622
- let startX, scrollLeft;
623
-
624
- const vehiclesWrapper = document.querySelector('.vehicles-wrapper');
625
-
626
- if (vehiclesWrapper) {
627
- vehiclesWrapper.addEventListener('mousedown', (e) => {
628
- isDragging = true;
629
- startX = e.pageX - vehiclesWrapper.offsetLeft;
630
- scrollLeft = vehiclesWrapper.scrollLeft;
631
- });
632
-
633
- vehiclesWrapper.addEventListener('mouseleave', () => {
634
- isDragging = false;
635
- });
636
-
637
- vehiclesWrapper.addEventListener('mouseup', () => {
638
- isDragging = false;
639
- });
640
-
641
- vehiclesWrapper.addEventListener('mousemove', (e) => {
642
- if (!isDragging) return;
643
- e.preventDefault();
644
- const x = e.pageX - vehiclesWrapper.offsetLeft;
645
- const walk = (x - startX) * 2;
646
- vehiclesWrapper.scrollLeft = scrollLeft - walk;
647
- });
648
- }
649
-
650
- // Touch support for mobile devices
651
- if (vehiclesWrapper) {
652
- let startTouchX, startScrollLeft;
653
-
654
- vehiclesWrapper.addEventListener('touchstart', (e) => {
655
- isDragging = true;
656
- startTouchX = e.touches[0].pageX;
657
- startScrollLeft = vehiclesWrapper.scrollLeft;
658
- });
659
-
660
- vehiclesWrapper.addEventListener('touchend', () => {
661
- isDragging = false;
662
- });
663
-
664
- vehiclesWrapper.addEventListener('touchmove', (e) => {
665
- if (!isDragging) return;
666
- e.preventDefault();
667
- const x = e.touches[0].pageX;
668
- const walk = (x - startTouchX) * 2;
669
- vehiclesWrapper.scrollLeft = startScrollLeft - walk;
670
- });
671
- }
672
- </script>
673
- </body>
674
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="ar" dir="rtl">
3
+
4
  <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>ART Touch - Luxury Vehicles</title>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ :root {
17
+ --primary-color: #d4af37;
18
+ --secondary-color: #1a1a1a;
19
+ --accent-color: #2196F3;
20
+ --text-color: #333;
21
+ --light-bg: #f8f9fa;
22
+ --dark-bg: #121212;
23
+ --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
24
+ --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
25
+ }
26
+
27
+ body {
28
+ font-family: 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
29
+ background: var(--light-bg);
30
+ color: var(--text-color);
31
+ overflow-x: hidden;
32
+ line-height: 1.6;
33
+ }
34
+
35
+ /* Header Styles */
36
+ .header {
37
+ background: rgba(26, 26, 26, 0.95);
38
+ padding: 12px 16px;
39
+ display: flex;
40
+ justify-content: space-between;
41
+ align-items: center;
42
+ position: fixed;
43
+ top: 0;
44
+ left: 0;
45
+ right: 0;
46
+ z-index: 1000;
47
+ backdrop-filter: blur(12px);
48
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
49
+ }
50
+
51
+ .menu-icon {
52
+ color: white;
53
+ font-size: 24px;
54
+ cursor: pointer;
55
+ display: flex;
56
+ flex-direction: column;
57
+ gap: 4px;
58
+ padding: 8px;
59
+ }
60
+
61
+ .menu-icon span {
62
+ width: 20px;
63
+ height: 2px;
64
+ background: white;
65
+ display: block;
66
+ transition: var(--transition);
67
+ }
68
+
69
+ .menu-icon:hover span {
70
+ background: var(--primary-color);
71
+ }
72
+
73
+ .logo {
74
+ position: absolute;
75
+ left: 50%;
76
+ transform: translateX(-50%);
77
+ }
78
+
79
+ .logo img {
80
+ height: 35px;
81
+ width: auto;
82
+ object-fit: contain;
83
+ filter: brightness(0) invert(1);
84
+ }
85
+
86
+ .phone-icon {
87
+ color: white;
88
+ font-size: 20px;
89
+ cursor: pointer;
90
+ text-decoration: none;
91
+ display: flex;
92
+ align-items: center;
93
+ justify-content: center;
94
+ width: 40px;
95
+ height: 40px;
96
+ border-radius: 50%;
97
+ background: rgba(255, 255, 255, 0.1);
98
+ transition: var(--transition);
99
+ }
100
+
101
+ .phone-icon:hover {
102
+ background: var(--primary-color);
103
+ transform: scale(1.1);
104
+ }
105
+
106
+ /* Side Menu Styles */
107
+ .side-menu {
108
+ position: fixed;
109
+ top: 0;
110
+ left: -300px;
111
+ width: 300px;
112
+ height: 100vh;
113
+ background: var(--dark-bg);
114
+ z-index: 1001;
115
+ transition: left 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
116
+ overflow-y: auto;
117
+ box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
118
+ scrollbar-width: thin;
119
+ scrollbar-color: var(--primary-color) var(--dark-bg);
120
+ }
121
+
122
+ .side-menu::-webkit-scrollbar {
123
+ width: 6px;
124
+ }
125
+
126
+ .side-menu::-webkit-scrollbar-thumb {
127
+ background: var(--primary-color);
128
+ border-radius: 3px;
129
+ }
130
+
131
+ .side-menu.active {
132
+ left: 0;
133
+ }
134
+
135
+ .menu-overlay {
136
+ position: fixed;
137
+ top: 0;
138
+ left: 0;
139
+ right: 0;
140
+ bottom: 0;
141
+ background: rgba(0, 0, 0, 0.7);
142
+ z-index: 1000;
143
+ opacity: 0;
144
+ visibility: hidden;
145
+ transition: opacity 0.4s ease;
146
+ backdrop-filter: blur(5px);
147
+ }
148
+
149
+ .menu-overlay.active {
150
+ opacity: 1;
151
+ visibility: visible;
152
+ }
153
+
154
+ .menu-header {
155
+ padding: 24px;
156
+ background: var(--secondary-color);
157
+ display: flex;
158
+ justify-content: space-between;
159
+ align-items: center;
160
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
161
+ position: sticky;
162
+ top: 0;
163
+ z-index: 10;
164
+ }
165
+
166
+ .menu-logo {
167
+ display: flex;
168
+ align-items: center;
169
+ }
170
+
171
+ .menu-logo img {
172
+ height: 40px;
173
+ width: auto;
174
+ object-fit: contain;
175
+ filter: brightness(0) invert(1);
176
+ }
177
+
178
+ .close-menu {
179
+ color: white;
180
+ font-size: 28px;
181
+ cursor: pointer;
182
+ width: 32px;
183
+ height: 32px;
184
+ display: flex;
185
+ align-items: center;
186
+ justify-content: center;
187
+ background: rgba(255, 255, 255, 0.1);
188
+ border-radius: 50%;
189
+ transition: var(--transition);
190
+ }
191
+
192
+ .close-menu:hover {
193
+ background: var(--primary-color);
194
+ transform: rotate(90deg);
195
+ }
196
+
197
+ .menu-items {
198
+ padding: 20px 0;
199
+ }
200
+
201
+ .menu-item {
202
+ padding: 16px 24px;
203
+ color: #fff;
204
+ text-decoration: none;
205
+ display: flex;
206
+ align-items: center;
207
+ gap: 15px;
208
+ font-size: 15px;
209
+ transition: var(--transition);
210
+ border-left: 3px solid transparent;
211
+ }
212
+
213
+ .menu-item:hover {
214
+ background: rgba(255, 255, 255, 0.05);
215
+ border-left: 3px solid var(--primary-color);
216
+ transform: translateX(5px);
217
+ }
218
+
219
+ .menu-item-icon {
220
+ font-size: 20px;
221
+ width: 24px;
222
+ text-align: center;
223
+ color: var(--primary-color);
224
+ }
225
+
226
+ .menu-section-title {
227
+ padding: 20px 24px 10px;
228
+ color: var(--primary-color);
229
+ font-size: 13px;
230
+ font-weight: 600;
231
+ text-transform: uppercase;
232
+ letter-spacing: 1px;
233
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
234
+ }
235
+
236
+ /* Hero Section */
237
+ .hero-section {
238
+ margin-top: 60px;
239
+ position: relative;
240
+ height: 320px;
241
+ display: flex;
242
+ flex-direction: column;
243
+ align-items: center;
244
+ justify-content: center;
245
+ text-align: center;
246
+ padding: 20px;
247
+ overflow: hidden;
248
+ }
249
+
250
+ .hero-video {
251
+ position: absolute;
252
+ top: 50%;
253
+ left: 50%;
254
+ min-width: 100%;
255
+ min-height: 100%;
256
+ width: auto;
257
+ height: auto;
258
+ transform: translate(-50%, -50%);
259
+ z-index: 1;
260
+ pointer-events: none;
261
+ }
262
+
263
+ .hero-video iframe {
264
+ position: absolute;
265
+ top: 50%;
266
+ left: 50%;
267
+ width: 100vw;
268
+ height: 56.25vw;
269
+ min-height: 100vh;
270
+ min-width: 177.77vh;
271
+ transform: translate(-50%, -50%);
272
+ border: none;
273
+ }
274
+
275
+ .hero-overlay {
276
+ position: absolute;
277
+ top: 0;
278
+ left: 0;
279
+ width: 100%;
280
+ height: 100%;
281
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
282
+ z-index: 2;
283
+ }
284
+
285
+ .hero-content {
286
+ position: relative;
287
+ z-index: 3;
288
+ max-width: 800px;
289
+ }
290
+
291
+ .hero-title {
292
+ color: white;
293
+ font-size: 24px;
294
+ margin-bottom: 12px;
295
+ font-weight: 600;
296
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
297
+ }
298
+
299
+ .hero-subtitle {
300
+ color: rgba(255, 255, 255, 0.9);
301
+ font-size: 14px;
302
+ margin-bottom: 24px;
303
+ line-height: 1.5;
304
+ max-width: 320px;
305
+ margin-left: auto;
306
+ margin-right: auto;
307
+ }
308
+
309
+ .explore-btn {
310
+ background: var(--accent-color);
311
+ color: white;
312
+ padding: 12px 36px;
313
+ border-radius: 25px;
314
+ border: none;
315
+ font-size: 14px;
316
+ font-weight: 600;
317
+ cursor: pointer;
318
+ box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
319
+ text-decoration: none;
320
+ display: inline-block;
321
+ transition: var(--transition);
322
+ position: relative;
323
+ overflow: hidden;
324
+ }
325
+
326
+ .explore-btn:hover {
327
+ background: #1976D2;
328
+ transform: translateY(-2px);
329
+ box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
330
+ }
331
+
332
+ .explore-btn::after {
333
+ content: '';
334
+ position: absolute;
335
+ top: 50%;
336
+ left: 50%;
337
+ width: 5px;
338
+ height: 5px;
339
+ background: rgba(255, 255, 255, 0.5);
340
+ opacity: 0;
341
+ border-radius: 100%;
342
+ transform: scale(1, 1) translate(-50%, -50%);
343
+ transform-origin: 50% 50%;
344
+ }
345
+
346
+ .explore-btn:focus:not(:active)::after {
347
+ animation: ripple 1s ease-out;
348
+ }
349
+
350
+ @keyframes ripple {
351
+ 0% {
352
+ transform: scale(0, 0);
353
+ opacity: 0.5;
354
+ }
355
+ 100% {
356
+ transform: scale(20, 20);
357
+ opacity: 0;
358
+ }
359
+ }
360
+
361
+ /* Section Styles */
362
+ .section {
363
+ padding: 24px 16px;
364
+ background: white;
365
+ }
366
+
367
+ .section-header {
368
+ display: flex;
369
+ justify-content: space-between;
370
+ align-items: center;
371
+ margin-bottom: 20px;
372
+ }
373
+
374
+ .section-title {
375
+ font-size: 18px;
376
+ font-weight: 700;
377
+ color: var(--secondary-color);
378
+ position: relative;
379
+ padding-bottom: 8px;
380
+ }
381
+
382
+ .section-title::after {
383
+ content: '';
384
+ position: absolute;
385
+ bottom: 0;
386
+ left: 0;
387
+ width: 40px;
388
+ height: 3px;
389
+ background: var(--primary-color);
390
+ border-radius: 2px;
391
+ }
392
+
393
+ .view-all {
394
+ color: var(--accent-color);
395
+ font-size: 14px;
396
+ text-decoration: none;
397
+ display: flex;
398
+ align-items: center;
399
+ gap: 6px;
400
+ font-weight: 500;
401
+ transition: var(--transition);
402
+ }
403
+
404
+ .view-all:hover {
405
+ color: #1976D2;
406
+ transform: translateX(5px);
407
+ }
408
+
409
+ /* Cards Container */
410
+ .cards-container {
411
+ display: flex;
412
+ gap: 16px;
413
+ overflow-x: auto;
414
+ scroll-snap-type: x mandatory;
415
+ padding-bottom: 12px;
416
+ scrollbar-width: none;
417
+ -ms-overflow-style: none;
418
+ -webkit-overflow-scrolling: touch;
419
+ }
420
+
421
+ .cards-container::-webkit-scrollbar {
422
+ display: none;
423
+ }
424
+
425
+ .card {
426
+ min-width: 300px;
427
+ flex-shrink: 0;
428
+ scroll-snap-align: start;
429
+ border-radius: 16px;
430
+ overflow: hidden;
431
+ background: white;
432
+ box-shadow: var(--card-shadow);
433
+ cursor: pointer;
434
+ text-decoration: none;
435
+ color: inherit;
436
+ display: block;
437
+ transition: var(--transition);
438
+ position: relative;
439
+ border: 1px solid rgba(0, 0, 0, 0.05);
440
+ }
441
+
442
+ .card:hover {
443
+ transform: translateY(-8px);
444
+ box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
445
+ border-color: var(--primary-color);
446
+ }
447
+
448
+ .card-image {
449
+ width: 100%;
450
+ height: 200px;
451
+ object-fit: cover;
452
+ background: #f0f0f0;
453
+ display: block;
454
+ position: relative;
455
+ overflow: hidden;
456
+ }
457
+
458
+ .card img {
459
+ width: 100%;
460
+ height: 100%;
461
+ object-fit: cover;
462
+ display: block;
463
+ transition: transform 0.5s ease;
464
+ }
465
+
466
+ .card:hover img {
467
+ transform: scale(1.05);
468
+ }
469
+
470
+ .card-content {
471
+ padding: 16px;
472
+ }
473
+
474
+ .card-title {
475
+ font-size: 15px;
476
+ font-weight: 600;
477
+ color: var(--secondary-color);
478
+ margin-bottom: 6px;
479
+ line-height: 1.3;
480
+ }
481
+
482
+ .card-subtitle {
483
+ font-size: 13px;
484
+ color: #666;
485
+ margin-bottom: 8px;
486
+ line-height: 1.3;
487
+ }
488
+
489
+ .card-features {
490
+ font-size: 12px;
491
+ color: #999;
492
+ margin-bottom: 12px;
493
+ line-height: 1.4;
494
+ }
495
+
496
+ .card-cta {
497
+ color: var(--primary-color);
498
+ font-size: 13px;
499
+ font-weight: 600;
500
+ display: flex;
501
+ align-items: center;
502
+ gap: 6px;
503
+ transition: var(--transition);
504
+ }
505
+
506
+ .card-cta:hover {
507
+ color: #b8952d;
508
+ transform: translateX(5px);
509
+ }
510
+
511
+ /* Spacer */
512
+ .spacer {
513
+ height: 12px;
514
+ background: var(--light-bg);
515
+ }
516
+
517
+ /* Featured Card */
518
+ .featured-card {
519
+ margin: 20px 16px;
520
+ border-radius: 20px;
521
+ overflow: hidden;
522
+ position: relative;
523
+ height: 240px;
524
+ background-size: cover;
525
+ background-position: center;
526
+ display: flex;
527
+ flex-direction: column;
528
+ align-items: center;
529
+ justify-content: center;
530
+ text-align: center;
531
+ padding: 24px;
532
+ box-shadow: var(--card-shadow);
533
+ }
534
+
535
+ .featured-card::before {
536
+ content: '';
537
+ position: absolute;
538
+ top: 0;
539
+ left: 0;
540
+ right: 0;
541
+ bottom: 0;
542
+ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
543
+ z-index: 1;
544
+ }
545
+
546
+ .featured-content {
547
+ position: relative;
548
+ z-index: 2;
549
+ }
550
+
551
+ .featured-title {
552
+ color: white;
553
+ font-size: 22px;
554
+ font-weight: 700;
555
+ margin-bottom: 10px;
556
+ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
557
+ }
558
+
559
+ .featured-subtitle {
560
+ color: rgba(255, 255, 255, 0.95);
561
+ font-size: 14px;
562
+ margin-bottom: 20px;
563
+ line-height: 1.5;
564
+ max-width: 300px;
565
+ }
566
+
567
+ /* Products Section */
568
+ .products-section {
569
+ padding: 24px 16px;
570
+ background: white;
571
+ }
572
+
573
+ .products-grid {
574
+ display: grid;
575
+ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
576
+ gap: 16px;
577
+ margin-top: 20px;
578
+ }
579
+
580
+ .product-card {
581
+ border-radius: 16px;
582
+ overflow: hidden;
583
+ box-shadow: var(--card-shadow);
584
+ transition: var(--transition);
585
+ border: 1px solid rgba(0, 0, 0, 0.05);
586
+ }
587
+
588
+ .product-card:hover {
589
+ transform: translateY(-5px);
590
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
591
+ }
592
+
593
+ .product-image {
594
+ width: 100%;
595
+ height: 120px;
596
+ background: #f0f0f0;
597
+ display: flex;
598
+ align-items: center;
599
+ justify-content: center;
600
+ font-size: 48px;
601
+ position: relative;
602
+ overflow: hidden;
603
+ }
604
+
605
+ .product-content {
606
+ padding: 16px;
607
+ background: white;
608
+ }
609
+
610
+ .product-title {
611
+ font-size: 14px;
612
+ font-weight: 600;
613
+ color: var(--secondary-color);
614
+ margin-bottom: 8px;
615
+ }
616
+
617
+ .product-desc {
618
+ font-size: 12px;
619
+ color: #666;
620
+ line-height: 1.4;
621
+ margin-bottom: 12px;
622
+ }
623
+
624
+ .product-btn {
625
+ width: 100%;
626
+ background: var(--primary-color);
627
+ color: white;
628
+ border: none;
629
+ padding: 10px;
630
+ border-radius: 8px;
631
+ font-size: 13px;
632
+ font-weight: 600;
633
+ cursor: pointer;
634
+ text-align: center;
635
+ text-decoration: none;
636
+ display: block;
637
+ transition: var(--transition);
638
+ }
639
+
640
+ .product-btn:hover {
641
+ background: #b8952d;
642
+ transform: translateY(-2px);
643
+ }
644
+
645
+ /* WhatsApp FAB */
646
+ .whatsapp-fab {
647
+ position: fixed;
648
+ bottom: 24px;
649
+ left: 24px;
650
+ width: 60px;
651
+ height: 60px;
652
+ background: #25D366;
653
+ border-radius: 50%;
654
+ display: flex;
655
+ align-items: center;
656
+ justify-content: center;
657
+ box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
658
+ cursor: pointer;
659
+ z-index: 999;
660
+ text-decoration: none;
661
+ transition: var(--transition);
662
+ animation: pulse 2s infinite;
663
+ }
664
+
665
+ .whatsapp-fab:hover {
666
+ transform: scale(1.15);
667
+ animation: none;
668
+ }
669
+
670
+ .whatsapp-fab i {
671
+ font-size: 30px;
672
+ color: white;
673
+ }
674
+
675
+ @keyframes pulse {
676
+ 0% {
677
+ transform: scale(1);
678
+ }
679
+ 50% {
680
+ transform: scale(1.05);
681
+ }
682
+ 100% {
683
+ transform: scale(1);
684
+ }
685
+ }
686
+
687
+ /* Footer */
688
+ .footer {
689
+ background: var(--secondary-color);
690
+ color: #fff;
691
+ padding: 48px 20px 24px;
692
+ margin-top: 40px;
693
+ }
694
+
695
+ .footer-content {
696
+ max-width: 1200px;
697
+ margin: 0 auto;
698
+ display: grid;
699
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
700
+ gap: 32px;
701
+ margin-bottom: 32px;
702
+ }
703
+
704
+ .footer-section h3 {
705
+ color: var(--primary-color);
706
+ font-size: 18px;
707
+ margin-bottom: 16px;
708
+ font-weight: 600;
709
+ position: relative;
710
+ padding-bottom: 8px;
711
+ }
712
+
713
+ .footer-section h3::after {
714
+ content: '';
715
+ position: absolute;
716
+ bottom: 0;
717
+ left: 0;
718
+ width: 30px;
719
+ height: 2px;
720
+ background: var(--primary-color);
721
+ }
722
+
723
+ .footer-section ul {
724
+ list-style: none;
725
+ }
726
+
727
+ .footer-section ul li {
728
+ margin-bottom: 12px;
729
+ }
730
+
731
+ .footer-section ul li a {
732
+ color: #ccc;
733
+ text-decoration: none;
734
+ font-size: 14px;
735
+ transition: var(--transition);
736
+ display: flex;
737
+ align-items: center;
738
+ gap: 8px;
739
+ }
740
+
741
+ .footer-section ul li a:hover {
742
+ color: var(--primary-color);
743
+ transform: translateX(5px);
744
+ }
745
+
746
+ .footer-section p {
747
+ color: #ccc;
748
+ font-size: 14px;
749
+ line-height: 1.6;
750
+ }
751
+
752
+ .social-links {
753
+ display: flex;
754
+ gap: 16px;
755
+ margin-top: 16px;
756
+ }
757
+
758
+ .social-link {
759
+ width: 44px;
760
+ height: 44px;
761
+ background: rgba(255, 255, 255, 0.1);
762
+ border-radius: 50%;
763
+ display: flex;
764
+ align-items: center;
765
+ justify-content: center;
766
+ color: white;
767
+ text-decoration: none;
768
+ transition: var(--transition);
769
+ border: 1px solid rgba(255, 255, 255, 0.2);
770
+ }
771
+
772
+ .social-link:hover {
773
+ background: var(--primary-color);
774
+ border-color: var(--primary-color);
775
+ transform: translateY(-5px) scale(1.1);
776
+ }
777
+
778
+ .social-link i {
779
+ font-size: 18px;
780
+ }
781
+
782
+ .footer-bottom {
783
+ text-align: center;
784
+ padding-top: 24px;
785
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
786
+ color: #999;
787
+ font-size: 13px;
788
+ }
789
+
790
+ .footer-bottom a {
791
+ color: var(--primary-color);
792
+ text-decoration: none;
793
+ }
794
+
795
+ /* Responsive Design */
796
+ @media (max-width: 768px) {
797
+ .hero-section {
798
+ height: 280px;
799
+ }
800
+
801
+ .hero-title {
802
+ font-size: 20px;
803
+ }
804
+
805
+ .hero-subtitle {
806
+ font-size: 13px;
807
+ }
808
+
809
+ .section-title {
810
+ font-size: 16px;
811
+ }
812
+
813
+ .card {
814
+ min-width: 280px;
815
+ }
816
+
817
+ .products-grid {
818
+ grid-template-columns: 1fr;
819
+ }
820
+ }
821
+
822
+ @media (max-width: 480px) {
823
+ .card {
824
+ min-width: 260px;
825
+ }
826
+
827
+ .hero-section {
828
+ height: 240px;
829
+ }
830
+
831
+ .hero-title {
832
+ font-size: 18px;
833
+ }
834
+ }
835
+
836
+ /* Built with anycoder */
837
+ .built-with {
838
+ position: fixed;
839
+ bottom: 10px;
840
+ right: 10px;
841
+ background: rgba(0, 0, 0, 0.7);
842
+ color: white;
843
+ padding: 6px 12px;
844
+ border-radius: 20px;
845
+ font-size: 12px;
846
+ text-decoration: none;
847
+ z-index: 1000;
848
+ transition: var(--transition);
849
+ backdrop-filter: blur(10px);
850
+ }
851
+
852
+ .built-with:hover {
853
+ background: rgba(0, 0, 0, 0.9);
854
+ transform: scale(1.05);
855
+ }
856
+
857
+ /* Loading Animation */
858
+ @keyframes fadeIn {
859
+ from { opacity: 0; transform: translateY(20px); }
860
+ to { opacity: 1; transform: translateY(0); }
861
+ }
862
+
863
+ .section, .featured-card, .products-section {
864
+ animation: fadeIn 0.6s ease-out;
865
+ }
866
+ </style>
867
  </head>
868
+
869
  <body>
870
+ <div class="menu-overlay" id="menuOverlay" onclick="closeMenu()"></div>
871
+
872
+ <div class="side-menu" id="sideMenu">
873
+ <div class="menu-header">
874
+ <div class="menu-logo">
875
+ <img src="https://arttouchs.com/wp-content/uploads/2024/07/cropped-Art-Touch-Logo-PNG-2.png" alt="ART TOUCH">
876
+ </div>
877
+ <div class="close-menu" onclick="closeMenu()">×</div>
878
+ </div>
879
+ <div class="menu-items">
880
+ <div class="menu-section-title">Vehicles</div>
881
+ <a href="/sprinter" class="menu-item">
882
+ <span class="menu-item-icon"><i class="fas fa-shuttle-van"></i></span>
883
+ <span>Mercedes-Benz Sprinter</span>
884
+ </a>
885
+ <a href="/vclass" class="menu-item">
886
+ <span class="menu-item-icon"><i class="fas fa-car-side"></i></span>
887
+ <span>Mercedes-Benz V-Class</span>
888
+ </a>
889
+ <a href="/gmc" class="menu-item">
890
+ <span class="menu-item-icon"><i class="fas fa-car"></i></span>
891
+ <span>GMC Customized VIP</span>
892
+ </a>
893
+
894
+ <div class="menu-section-title">Services</div>
895
+ <a href="/wheelchair" class="menu-item">
896
+ <span class="menu-item-icon"><i class="fas fa-wheelchair"></i></span>
897
+ <span>Wheelchair Customization</span>
898
+ </a>
899
+ <a href="/upholstery" class="menu-item">
900
+ <span class="menu-item-icon"><i class="fas fa-paint-brush"></i></span>
901
+ <span>Custom Upholstery</span>
902
+ </a>
903
+ <a href="/furniture" class="menu-item">
904
+ <span class="menu-item-icon"><i class="fas fa-couch"></i></span>
905
+ <span>Home Furniture</span>
906
+ </a>
907
+ <a href="/electronics" class="menu-item">
908
+ <span class="menu-item-icon"><i class="fas fa-tv"></i></span>
909
+ <span>Smart TV & Electronics</span>
910
+ </a>
911
+
912
+ <div class="menu-section-title">Company</div>
913
+ <a href="/about" class="menu-item">
914
+ <span class="menu-item-icon"><i class="fas fa-info-circle"></i></span>
915
+ <span>About Us</span>
916
+ </a>
917
+ <a href="/contact" class="menu-item">
918
+ <span class="menu-item-icon"><i class="fas fa-phone"></i></span>
919
+ <span>Contact Us</span>
920
+ </a>
921
+ <a href="/showroom" class="menu-item">
922
+ <span class="menu-item-icon"><i class="fas fa-map-marker-alt"></i></span>
923
+ <span>Our Showroom</span>
924
+ </a>
925
+ <a href="/gallery" class="menu-item">
926
+ <span class="menu-item-icon"><i class="fas fa-images"></i></span>
927
+ <span>Gallery</span>
928
+ </a>
929
+ </div>
930
+ </div>
931
+
932
+ <div class="header">
933
+ <div class="menu-icon" onclick="openMenu()">
934
+ <span></span>
935
+ <span></span>
936
+ <span></span>
937
+ </div>
938
+ <div class="logo">
939
+ <img src="https://arttouchs.com/wp-content/uploads/2024/07/cropped-Art-Touch-Logo-PNG-2.png" alt="ART TOUCH">
940
+ </div>
941
+ <a href="tel:+971562424247" class="phone-icon">
942
+ <i class="fas fa-phone"></i>
943
+ </a>
944
+ </div>
945
+
946
+ <div class="hero-section">
947
+ <div class="hero-video">
948
+ <iframe
949
+ src="https://www.youtube.com/embed/8VUijhenyHA?autoplay=1&mute=1&loop=1&playlist=8VUijhenyHA&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1"
950
+ allow="autoplay; encrypted-media" allowfullscreen>
951
+ </iframe>
952
+ </div>
953
+ <div class="hero-overlay"></div>
954
+ <div class="hero-content">
955
+ <div class="hero-title">Before</div>
956
+ <div class="hero-subtitle">Transform your vehicle with ART Touch's premium customization services</div>
957
+ <a href="#vehicles" class="explore-btn">Explore Now</a>
958
+ </div>
959
+ </div>
960
+
961
+ <div class="section" id="vehicles">
962
+ <div class="section-header">
963
+ <div class="section-title">Discover Mercedes-Benz Sprinter</div>
964
+ <a href="/sprinter" class="view-all">
965
+ View All <i class="fas fa-arrow-left"></i>
966
+ </a>
967
+ </div>
968
+ <div class="cards-container">
969
+ <a href="/sprinter-luxury-vip" class="card">
970
+ <img src="https://arttouchs.com/wp-content/uploads/2024/08/Sprinter-VIP-Luxury-van-2024-Mercedes-Long-van-Full-Review-Interior-customized.jpg" alt="Sprinter Luxury VIP">
971
+ <div class="card-content">
972
+ <div class="card-title">Sprinter Luxury vip | Royal Van</div>
973
+ <div class="card-subtitle">Bespoke Mercedes Sprinter van</div>
974
+ <div class="card-features">ART Touch<br>UAE Features tailored to Your Vision</div>
975
+ <div class="card-cta">
976
+ <i class="fas fa-star"></i> Build Your Own Now ?
977
+ </div>
978
  </div>
979
+ </a>
980
+ <a href="/sprinter-luxury-vip-2" class="card">
981
+ <div class="card-image" style="background: linear-gradient(135deg, #4A148C, #7B1FA2); display: flex; align-items: center; justify-content: center; font-size: 48px;">
982
+ <i class="fas fa-shuttle-van" style="color: rgba(255,255,255,0.8);"></i>
983
+ </div>
984
+ <div class="card-content">
985
+ <div class="card-title">Sprinter Luxury vip | Royal Van</div>
986
+ <div class="card-subtitle">Bespoke Mercedes Sprinter van</div>
987
+ <div class="card-features">ART Touch<br>UAE Features tailored to Your Vision</div>
988
+ <div class="card-cta">
989
+ <i class="fas fa-star"></i> Build Your Own Now ?
990
+ </div>
991
+ </div>
992
+ </a>
993
+ <a href="/sprinter-luxury-vip-3" class="card">
994
+ <div class="card-image" style="background: linear-gradient(135deg, #8B4513, #D2691E); display: flex; align-items: center; justify-content: center; font-size: 48px;">
995
+ <i class="fas fa-shuttle-van" style="color: rgba(255,255,255,0.8);"></i>
996
+ </div>
997
+ <div class="card-content">
998
+ <div class="card-title">Sprinter Luxury vip | Royal Van</div>
999
+ <div class="card-subtitle">Bespoke Mercedes Sprinter van</div>
1000
+ <div class="card-features">ART Touch<br>UAE Features tailored to Your Vision</div>
1001
+ <div class="card-cta">
1002
+ <i class="fas fa-star"></i> Build Your Own Now ?
1003
+ </div>
1004
+ </div>
1005
+ </a>
1006
  </div>
1007
+ </div>
1008
+
1009
+ <div class="spacer"></div>
1010
 
1011
+ <div class="section">
1012
+ <div class="section-header">
1013
+ <div class="section-title">Discover Mercedes-Benz V-Class</div>
1014
+ <a href="/vclass" class="view-all">
1015
+ View All <i class="fas fa-arrow-left"></i>
1016
+ </a>
1017
+ </div>
1018
+ <div class="cards-container">
1019
+ <a href="/vclass-luxury-vip" class="card">
1020
+ <div class="card-image" style="background: linear-gradient(135deg, #C62828, #E53935); display: flex; align-items: center; justify-content: center; font-size: 48px;">
1021
+ <i class="fas fa-car-side" style="color: rgba(255,255,255,0.8);"></i>
1022
+ </div>
1023
+ <div class="card-content">
1024
+ <div class="card-title">V-Class Luxury vip interior van</div>
1025
+ <div class="card-subtitle">Bespoke Mercedes V-class van</div>
1026
+ <div class="card-features">Custom by<br>ART Touch modifications<br>Features in UAE</div>
1027
+ <div class="card-cta">
1028
+ <i class="fas fa-star"></i> Build Your Own Now ?
1029
+ </div>
1030
  </div>
1031
+ </a>
1032
+ <a href="/vclass-luxury-vip-2" class="card">
1033
+ <div class="card-image" style="background: linear-gradient(135deg, #8B4513, #D2691E); display: flex; align-items: center; justify-content: center; font-size: 48px;">
1034
+ <i class="fas fa-car-side" style="color: rgba(255,255,255,0.8);"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1035
  </div>
1036
+ <div class="card-content">
1037
+ <div class="card-title">V-Class Luxury vip interior van</div>
1038
+ <div class="card-subtitle">Bespoke Mercedes V-class van</div>
1039
+ <div class="card-features">Custom by<br>ART Touch modifications<br>Features in UAE</div>
1040
+ <div class="card-cta">
1041
+ <i class="fas fa-star"></i> Build Your Own Now ?
1042
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1043
  </div>
1044
+ </a>
1045
+ <a href="/vclass-luxury-vip-3" class="card">
1046
+ <div class="card-image" style="background: linear-gradient(135deg, #C62828, #E53935); display: flex; align-items: center; justify-content: center; font-size: 48px;">
1047
+ <i class="fas fa-car-side" style="color: rgba(255,255,255,0.8);"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1048
  </div>
1049
+ <div class="card-content">
1050
+ <div class="card-title">V-Class Luxury vip interior van</div>
1051
+ <div class="card-subtitle">Bespoke Mercedes V-class van</div>
1052
+ <div class="card-features">Custom by<br>ART Touch modifications<br>Features in UAE</div>
1053
+ <div class="card-cta">
1054
+ <i class="fas fa-star"></i> Build Your Own Now ?
1055
+ </div>
1056
  </div>
1057
+ </a>
1058
+ </div>
1059
+ </div>
1060
 
1061
+ <div class="spacer"></div>
1062
+
1063
+ <div class="featured-card" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1527613426441-4da17471b66d?w=800');">
1064
+ <div class="featured-content">
1065
+ <div class="featured-title">Wheelchair Customized</div>
1066
+ <div class="featured-subtitle">Luxury VIP van with custom wheelchair accessibility, providing style and comfort.</div>
1067
+ <a href="/wheelchair-customized" class="explore-btn">Explore</a>
1068
+ </div>
1069
+ </div>
1070
+
1071
+ <div class="spacer"></div>
1072
+
1073
+ <div class="section">
1074
+ <div class="section-header">
1075
+ <div class="section-title">Discover GMC Customized VIP</div>
1076
+ <a href="/gmc" class="view-all">
1077
+ View All <i class="fas fa-arrow-left"></i>
1078
+ </a>
1079
+ </div>
1080
+ <div class="cards-container">
1081
+ <a href="/gmc-yukon" class="card">
1082
+ <div class="card-image" style="background: linear-gradient(135deg, #8B4513, #D2691E); display: flex; align-items: center; justify-content: center; font-size: 48px;">
1083
+ <i class="fas fa-car" style="color: rgba(255,255,255,0.8);"></i>
1084
+ </div>
1085
+ <div class="card-content">
1086
+ <div class="card-title">GMC Luxury vip | Yuoken</div>
1087
+ <div class="card-subtitle">Customized GMC Yuoken</div>
1088
+ <div class="card-features">ART Touch<br>UAE Features tailored to Your Vision</div>
1089
+ <div class="card-cta">
1090
+ <i class="fas fa-star"></i> Build Your Own Now ?
1091
+ </div>
1092
+ </div>
1093
+ </a>
1094
+ <a href="/gmc-denali" class="card">
1095
+ <div class="card-image" style="background: linear-gradient(135deg, #1565C0, #1976D2); display: flex; align-items: center; justify-content: center; font-size: 48px;">
1096
+ <i class="fas fa-car" style="color: rgba(255,255,255,0.8);"></i>
1097
+ </div>
1098
+ <div class="card-content">
1099
+ <div class="card-title">GMC Luxury VIP | Denali</div>
1100
+ <div class="card-subtitle">GMC Denali Luxury interior</div>
1101
+ <div class="card-features">UAE Features tailored to Your Vision</div>
1102
+ <div class="card-cta">
1103
+ <i class="fas fa-star"></i> Build Your Own Now ?
1104
+ </div>
1105
+ </div>
1106
+ </a>
1107
+ <a href="/gmc-yukon-2" class="card">
1108
+ <div class="card-image" style="background: linear-gradient(135deg, #8B4513, #D2691E); display: flex; align-items: center; justify-content: center; font-size: 48px;">
1109
+ <i class="fas fa-car" style="color: rgba(255,255,255,0.8);"></i>
1110
+ </div>
1111
+ <div class="card-content">
1112
+ <div class="card-title">GMC Luxury vip | Yuoken</div>
1113
+ <div class="card-subtitle">Customized GMC Yuoken</div>
1114
+ <div class="card-features">ART Touch<br>UAE Features tailored to Your Vision</div>
1115
+ <div class="card-cta">
1116
+ <i class="fas fa-star"></i> Build Your Own Now ?
1117
+ </div>
1118
+ </div>
1119
+ </a>
1120
+ </div>
1121
+ </div>
1122
 
1123
+ <div class="spacer"></div>
1124
+
1125
+ <div class="featured-card" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=800');">
1126
+ <div class="featured-content">
1127
+ <div class="featured-title">To Be Unique</div>
1128
+ <div class="featured-subtitle">Full-color Upholstery options crafted from genuine materials for a luxurious experience.</div>
1129
+ <a href="/upholstery" class="explore-btn">Explore</a>
1130
+ </div>
1131
+ </div>
1132
+
1133
+ <div class="spacer"></div>
1134
+
1135
+ <div class="products-section">
1136
+ <div class="section-header">
1137
+ <div class="section-title">Explore Our Products</div>
1138
+ <a href="/products" class="view-all">
1139
+ View All <i class="fas fa-arrow-left"></i>
1140
+ </a>
1141
+ </div>
1142
+ <div class="products-grid">
1143
+ <div class="product-card">
1144
+ <div class="product-image" style="background: linear-gradient(135deg, #FFC107, #FFD54F);">
1145
+ <i class="fas fa-couch" style="font-size: 48px; color: rgba(0,0,0,0.3);"></i>
1146
+ </div>
1147
+ <div class="product-content">
1148
+ <div class="product-title">Customized Home Chair</div>
1149
+ <div class="product-desc">Enjoy a unique design that combines comfort and elegance</div>
1150
+ <a href="/home-chair" class="product-btn">Explore</a>
1151
+ </div>
1152
+ </div>
1153
+ <div class="product-card">
1154
+ <div class="product-image" style="background: linear-gradient(135deg, #2196F3, #42A5F5);">
1155
+ <i class="fas fa-tv" style="font-size: 48px; color: rgba(0,0,0,0.3);"></i>
1156
+ </div>
1157
+ <div class="product-content">
1158
+ <div class="product-title">Customized el & SmarTV</div>
1159
+ <div class="product-desc">Advanced viewing with this smart elevator that offers an eco-friendly</div>
1160
+ <a href="/smart-tv" class="product-btn">Explore</a>
1161
+ </div>
1162
+ </div>
1163
+ </div>
1164
+ </div>
1165
+
1166
+ <footer class="footer">
1167
+ <div class="footer-content">
1168
+ <div class="footer-section">
1169
+ <h3>ART TOUCH</h3>
1170
+ <p>Premium vehicle customization and luxury modifications in UAE. Transform your vision into reality.</p>
1171
+ <div class="social-links">
1172
+ <a href="https://www.facebook.com/arttouchs" target="_blank" class="social-link">
1173
+ <i class="fab fa-facebook-f"></i>
1174
+ </a>
1175
+ <a href="https://www.instagram.com/arttouchs/" target="_blank" class="social-link">
1176
+ <i class="fab fa-instagram"></i>
1177
+ </a>
1178
+ <a href="https://api.whatsapp.com/send?phone=+971562424247&text=Hello%20ART%20Touch" target="_blank" class="social-link">
1179
+ <i class="fab fa-whatsapp"></i>
1180
+ </a>
1181
+ <a href="https://www.youtube.com/@arttouchs" target="_blank" class="social-link">
1182
+ <i class="fab fa-youtube"></i>
1183
+ </a>
1184
+ <a href="https://www.tik