-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
419 lines (395 loc) · 35.2 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Black Dimond">
<link href="./src/output.css" rel="stylesheet">
<!-- Poppins Font -->
<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=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- Fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css" integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Black Dimond</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
html {
scroll-behavior: smooth;
font-family: "Poppins", sans-serif;
}
</style>
</head>
<body>
<div style="background-image: url(./images/header.webp);" class="lg:h-[833px] md:h-[628px] h-[600px] bg-bottom bg-contain bg-no-repeat bg-black">
<!-- Start Contact Bar -->
<nav class="flex md:flex-row flex-col justify-between items-center py-[18px] container mx-auto xl:px-0 px-2">
<div class="flex gap-8">
<a href="#" class="flex gap-4">
<img src="./images/Call.svg" class="translate ltr:scale-x-100 rtl:scale-x-[-1]" alt="Call">
<p class="text-white md:text-lg text-sm font-normal leading-7" dir="ltr">+12 345 6789 0</p>
</a>
<a href="#" class="flex gap-4">
<img src="./images/Email.svg" alt="Email">
<p class="text-white md:text-lg text-sm font-normal leading-7">support@homie.com</p>
</a>
</div>
<div class="flex gap-8">
<a href="#"><img src="./images/instagram.svg" class="w-6 h-6" alt="Instagram"></a>
<a href="#"><img src="./images/facebook.svg" class="w-6 h-6" alt="Facebook"></a>
<a href="#"><img src="./images/xIcon.svg" class="w-6 h-6" alt="X Icon"></a>
<a href="#"><img src="./images/Linkedin.svg" class="w-6 h-6" alt="Linkedin"></a>
</div>
</nav>
<hr class="container mx-auto" style="border-color: rgb(112, 111, 111);">
<!-- End Contact Bar -->
<!-- Start Language Bar -->
<section class="flex justify-between items-center container mx-auto xl:px-0 px-2">
<p class="text-white text-lg font-normal leading-7 cursor-pointer order-1 md:order-1">العربية</p>
<a href="#" class="order-3 md:order-2">
<img src="./images/logo.svg" class="md:w-[262px] md:h-20 w-[176px] h-[56px] cursor-pointer" alt="Logo">
</a>
<a class="text-[#F5993C] md:text-lg text-base font-normal leading-10 underline order-2 md:order-3" href="#Download">Download NOW!</a>
</section>
<!-- End Language Bar -->
<!-- Start Header -->
<header>
<h1 class="text-white items-center justify-center md:text-[64px] text-5xl font-bold mt-[39px] text-center">
Let’s keep your ride looking <br>
<span class="text-transparent" style="-webkit-text-stroke: 1px white; -webkit-text-fill-color: transparent; color: transparent; /* Fallback */"> Best</span>
with Our
<span class="text-transparent" style="-webkit-text-stroke: 1px white; -webkit-text-fill-color: transparent; color: transparent; /* Fallback */">Expert services</span>
</h1>
</header>
<!-- End Header -->
</div>
<!-- Start Services -->
<section class="flex flex-col items-center md:h-[278px] lg:mt-[-90px] md:mt-[-60px] mt-[-30px] rounded-2xl justify-center gap-[10px] container mx-auto w-[355px] md:w-[700px] lg:w-[1000px] px-2" style="background: rgba(255, 255, 255, 0.7); box-shadow: 0px 8px 8px -4px #10182808; box-shadow: 0px 20px 24px -4px #10182814; backdrop-filter: blur(28px) ">
<h1 class="text-[#0F0F0F] text-4xl leading-[46.8px] font-bold">Our Services</h1>
<div class="grid grid-cols-3 md:grid-cols-6 md:gap-16 gap-10">
<div class="flex flex-col justify-center items-center gap-[10px]">
<img src="./images/Detailing.webp" class="w-24 h-24 rounded-full object-contain" alt="Detailing">
<p class="md:text-lg text-xs text-[#0F0F0F] font-medium">Detailing</p>
</div>
<div class="flex flex-col justify-center items-center gap-[10px]">
<img src="./images/Ceramic.webp" class="w-24 h-24 rounded-full object-contain" alt="Ceramic">
<p class="md:text-lg text-xs text-[#0F0F0F] font-medium">Ceramic</p>
</div>
<div class="flex flex-col justify-center items-center gap-[10px]">
<img src="./images/Windowtint.webp" class="w-24 h-24 rounded-full object-contain" alt="Window Tint">
<p class="md:text-lg text-xs text-[#0F0F0F] font-medium">Window Tint</p>
</div>
<div class="flex flex-col justify-center items-center gap-[10px]">
<img src="./images/PPF.webp" class="w-24 h-24 rounded-full object-contain" alt="PPF">
<p class="md:text-lg text-xs text-[#0F0F0F] font-medium">PPF</p>
</div>
<div class="flex flex-col justify-center items-center gap-[10px]">
<img src="./images/RimsRestoration.webp" class="w-24 h-24 rounded-full object-contain" alt="Rims Restoration">
<p class="md:text-lg text-xs text-[#0F0F0F] font-medium">Rims Restoration</p>
</div>
<div class="flex flex-col justify-center items-center gap-[10px]">
<img src="./images/Polishing.webp" class="w-24 h-24 rounded-full object-contain" alt="Polishing">
<p class="md:text-lg text-xs text-[#0F0F0F] font-medium">Polishing</p>
</div>
</div>
<p class="text-black text-2xl font-bold text-center leading-10 px-20 sm:px-0 py-5 sm:py-0">
And many more, with
<span class="font-bold text-transparent border-black px-1" style="-webkit-text-stroke: 1px black; -webkit-text-fill-color: transparent;">Best Quality</span>
</p>
</section>
<!-- End Services -->
<!-- How It Works -->
<section class="container mx-auto flex flex-col items-center justify-center mt-[53px]">
<h1 class="text-[#0F0F0F] text-5xl font-bold">How it works</h1>
<p class="text-[#0F0F0F] text-lg font-medium text-center mt-6">Bolshing a luxury car has never been easier. Our streamlined process makes it simple for you <br> to book and confirm your vehicle online</p>
<div class="mt-[60px] flex xl:flex-row flex-col items-center">
<div class="z-50">
<div class="md:w-[672px] w-[365px] lg:h-[170px] md:h-[292px] h-[382px] cursor-pointer flex lg:flex-row flex-col gap-5 border-[1.5px] bg-white border-[#0000001A] rounded-[30px] items-center justify-center px-5 transition-transform duration-500 hover:rotate-[-3deg] hover:scale-105 hover:shadow-lg">
<img src="./images/search-lg.svg" class="bg-[#F5F5F5] p-5 rounded-[20px] lg:w-[67.5px] lg:h-[132.5px] w-24 h-24" alt="Search">
<div>
<h1 class="text-[#000000] text-3xl font-bold">Browse and select</h1>
<p class="text-[22.5px] leading-9 mt-[5px]">Choose from our wide range of premium cars, select the pickup and return dates and locations that suit you best.</p>
</div>
</div>
<div class="md:w-[672px] w-[365px] lg:h-[170px] md:h-[292px] h-[382px] cursor-pointer flex lg:flex-row flex-col gap-5 border-[1.5px] bg-white border-[#0000001A] rounded-[30px] items-center justify-center px-5 mt-10 transition-transform duration-500 hover:rotate-[-3deg] hover:scale-105 hover:shadow-lg">
<img src="./images/calendar-check-02.svg" class="bg-[#F5F5F5] p-5 rounded-[20px] lg:w-[67.5px] lg:h-[132.5px] w-24 h-24" alt="Calender">
<div>
<h1 class="text-[#000000] text-3xl font-bold">Book and confirm</h1>
<p class="text-[22.5px] leading-9 mt-[5px]">Book your desired car with just a few clicks and receive an instant confirmation via email or SMS.</p>
</div>
</div>
<div class="md:w-[672px] w-[365px] lg:h-[170px] md:h-[292px] h-[382px] cursor-pointer flex lg:flex-row flex-col gap-5 border-[1.5px] bg-white border-[#0000001A] rounded-[30px] items-center justify-center px-5 mt-10 transition-transform duration-500 hover:rotate-[-3deg] hover:scale-105 hover:shadow-lg">
<img src="./images/face-happy.svg" class="bg-[#F5F5F5] p-5 rounded-[20px] lg:w-[67.5px] lg:h-[132.5px] w-24 h-24" alt="Happy Face">
<div>
<h1 class="text-[#000000] text-3xl font-bold">Enjoy your service</h1>
<p class="text-[22.5px] leading-9 mt-[5px]">Pick up your car at the designated location and enjoy your premium driving experience with our top-quality service.</p>
</div>
</div>
</div>
<img src="./images/car.webp" class="ltr:lg:ml-[-100px] rtl:lg:mr-[-100px] transform ltr:scale-x-100 rtl:scale-x-[-1] md:w-[740px] md:h-[638px] mt-4 xl:mt-0" alt="car">
</div>
</section>
<!-- How It Works -->
<!-- Start Benefits -->
<section class="bg-[#1A191A] bg-cover bg-center lg:h-[769px] md:h-[1456px] h-[1527px] md:mt-[75px]" style="background-image: url(./images/Texture.webp);">
<div class="container mx-auto flex flex-col items-center pt-[67.46px]">
<h1 class="text-[#FFFFFF] font-bold lg:text-[64px] text-[44px] sm:leading-[78.14px] leading-[53px] text-center">All the benefits you will get <br> when you shop with us</h1>
<p class="sm:mt-[29.98px] text-[#FFFFFF] text-[17.99px] text-center">Take advantage of everything you can have now by buying your new car at Prime Car</p>
<div class="flex lg:flex-row flex-col lg:gap-[63.71px]">
<div class="w-[322.29px] flex flex-col items-center h-[299.81px] rounded-[13.79px] mt-[77px] hover:scale-105 duration-300" style="background-color: rgba(0, 221, 168, 0.5);">
<img src="./images/MAP.webp" class="mt-[-85px]" alt="Map">
<h1 class="text-[#FFFFFF] lg:text-[27.58px] md:text-[23.96px] font-bold leading-[32.92px] text-center">Several Branches <br> Around Emirates </h1>
<p class="text-[#FFFFFF] text-[17.99px] font-medium leading-[24.69px] text-center lg:mt-[14.99px] px-4">You can find several Branches around the United Arab Emirates!</p>
</div>
<div class="w-[322.29px] flex flex-col items-center h-[299.81px] rounded-[13.79px] mt-[77px] hover:scale-105 duration-300" style="background-color: rgba(207, 41, 41, 0.6);">
<img src="./images/CALENDAR.webp" class="mt-[-75px]" alt="Calender">
<h1 class="text-[#FFFFFF] text-[27.58px] font-bold leading-[32.92px] text-center">Schedule Your <br> Best Day</h1>
<p class="text-[#FFFFFF] text-[17.99px] font-medium leading-[24.69px] text-center mt-[14.99px] px-6">Choose the day and time to take a test drive for free!</p>
</div>
<div class="w-[322.29px] flex flex-col items-center h-[299.81px] rounded-[13.79px] mt-[77px] hover:scale-105 duration-300" style="background-color: rgba(0, 88, 221, 0.6);">
<img src="./images/KEY.webp" class="mt-[-75px]" alt="Key">
<h1 class="text-[#FFFFFF] text-[27.58px] font-bold leading-[32.92px] text-center">Receive your car <br> right away</h1>
<p class="text-[#FFFFFF] text-[17.99px] font-medium leading-[24.69px] text-center mt-[14.99px] px-6">Close the contract and you get the keys right away</p>
</div>
</div>
</div>
</section>
<!-- End Benefits -->
<!-- Why Choose Us -->
<section class="container flex lg:flex-row flex-col lg:items-center gap-[103px] mx-auto mt-24 lg:px-0 px-4">
<div class="relative lg:order-1 order-2">
<img src="./images/Vector2.webp" alt="Vector" >
<img src="./images/Audi1.webp" alt="Audi" class="absolute top-12 left-0 transform ltr:scale-x-100 rtl:scale-x-[-1]">
</div>
<div class="lg:order-2 order-1">
<p class="uppercase text-[#333333] text-sm font-medium bg-[#E7E7E7] w-[181px] h-[42px] flex items-center justify-center rounded-lg">Why Choose us</p>
<p class="lg:w-[576px] text-[#333333] font-medium text-[38px] leading-[49.4px] mt-8">We offer the best experience with Care Caring Services</p>
<div class="flex items-center gap-6 mt-14 hover:scale-105 duration-300">
<img src="./images/wallet.svg" class="bg-[#F5F5F5] p-5 rounded-[20px] w-16 h-16" alt="Wallet">
<div>
<h1 class="text-[#000000] text-[20px] font-bold">Best price guaranteed</h1>
<p class="lg:w-[322px] text-[#6D6D6D] text-base leading-6 mt-[5px]">Find a lower price? We’ll refund you 100% of the difference.</p>
</div>
</div>
<div class="flex items-center gap-6 mt-10 hover:scale-105 duration-300">
<img src="./images/user-tick.svg" class="bg-[#F5F5F5] p-5 rounded-[20px] w-16 h-16" alt="User">
<div>
<h1 class="text-[#000000] text-[20px] font-bold">Experience Technician</h1>
<p class="lg:w-[374px] text-[#6D6D6D] text-base leading-6 mt-[5px]">hard to find Expert? Don’t worry, we have many Expert technician for you.</p>
</div>
</div>
<div class="flex items-center gap-6 mt-10 hover:scale-105 duration-300">
<img src="./images/24-support.svg" class="bg-[#F5F5F5] p-5 rounded-[20px] w-16 h-16" alt="24 support">
<div>
<h1 class="text-[#000000] text-[20px] font-bold">Fast Delivery</h1>
<p class="lg:w-[349px] text-[#6D6D6D] text-base leading-6 mt-[5px]">Book your Service and all you need anytime and we will deliver it directly to you.</p>
</div>
</div>
<div class="flex items-center gap-6 mt-10 hover:scale-105 duration-300">
<img src="./images/messages-2.svg" class="bg-[#F5F5F5] p-5 rounded-[20px] w-16 h-16" alt="Message">
<div>
<h1 class="text-[#000000] text-[20px] font-bold">24/7 technical support</h1>
<p class="lg:w-[349px] text-[#6D6D6D] text-base leading-6 mt-[5px]">Have a question? Contact Rentcars support any time when you have problem.</p>
</div>
</div>
</div>
</section>
<!-- Why Choose Us -->
<!-- Contact Us -->
<section class="bg-[#161616] lg:h-[406px] md:h-[600.59px] mt-[91px] py-[87px] lg:px-0 px-4 relative overflow-hidden">
<div class="container mx-auto flex lg:flex-row flex-col lg:items-center justify-center lg:gap-20 relative mt-14">
<div class="absolute inset-0 lg:flex hidden items-center justify-center text-[165px] font-bold text-[#373737] opacity-30 top-[-130%] left-[-45%]">
Contact us
</div>
<div>
<h1 class="text-[#FFFFFF] lg:text-[90.06px] md:text-[56px] lg:font-normal md:font-bold mt-[-70px]">Contact us</h1>
<p class="lg:w-[494.55px] text-[#FFFFFF] text-[22.57px] font-normal">
To find out more information about services, fill out the form on the side or contact us by phone.
</p>
</div>
<form class="lg:mt-[-2%]">
<div class="grid md:grid-cols-2">
<div class="relative z-0 lg:w-[227.86px] w-[340px] group mb-2">
<input type="text" name="floating_first_name" id="floating_first_name"
class="block py-2.5 px-0 md:w-full w-[390px] ltr:text-sm rtl:text-[20px] text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 peer"
placeholder=" " required />
<label id="fName" for="floating_first_name"
class="peer-focus:font-medium absolute ltr:text-sm rtl:text-[20px] text-[#D9D9D9] dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto peer-focus:text-[#F5993C] peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-6">Your
Name</label>
</div>
<div class="relative z-0 lg:w-[227.86px] w-[340px] group mb-2">
<input type="email" name="floating_email" id="floating_email"
class="block py-2.5 px-0 md:w-full w-[390px] ltr:text-sm rtl:text-[20px] text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 peer"
placeholder=" " required />
<label id="yourEmail" for="floating_email"
class="peer-focus:font-medium absolute ltr:text-sm rtl:text-[20px] text-[#D9D9D9] dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-[#F5993C] peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4">Your
Email</label>
</div>
</div>
<div class="grid md:grid-cols-2 md:mt-5">
<div class="relative z-0 lg:w-[227.86px] w-[340px] group mb-2">
<input type="text" name="phoneNum" id="phoneNum"
class="block py-2.5 px-0 md:w-full w-[390px] ltr:text-sm rtl:text-[20px] text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 peer"
dir="ltr" placeholder=" " required />
<label id="phoneNum" for="phoneNum"
class="peer-focus:font-medium absolute ltr:text-sm rtl:text-[20px] text-[#D9D9D9] dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-[#F5993C] peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4">Phone
Number</label>
</div>
<div class="relative z-0 flex group mb-2">
<select id="select_service" name="select_service"
class="lg:w-[227.86px] md:w-[340px] w-[390px] ltr:text-sm rtl:text-[20px] block py-2.5 px-0 bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 peer text-sm text-[#D9D9D9]"
required>
<option class="text-black" id="selectService" value="" disabled selected>City</option>
<option class="text-black" id="service1" value="Service 1">City 1</option>
<option class="text-black" id="service2" value="Service 2">City 2</option>
<option class="text-black" id="service3" value="Service 3">City 3</option>
</select>
<i class="fa-solid fa-chevron-down text-white mt-4 "></i>
</div>
</div>
<div class="relative z-0 lg:w-[470px] md:w-[710px] group mb-2 flex md:mt-5">
<input type="text" name="floating_details" id="floating_details"
class="block py-2.5 px-0 sm:w-full w-[390px] text-sm text-white bg-transparent border-0 border-b-2 border-gray-300 appearance-none focus:outline-none focus:ring-0 peer"
placeholder=" " required />
<label id="moreDetails" for="floating_details"
class="peer-focus:font-medium absolute text-sm text-[#D9D9D9] dark:text-gray-400 duration-300 transform -translate-y-6 scale-75 top-3 -z-10 origin-[0] peer-focus:start-0 rtl:peer-focus:translate-x-1/4 peer-focus:text-[#F5993C] peer-placeholder-shown:scale-100 peer-placeholder-shown:translate-y-0 peer-focus:scale-75 peer-focus:-translate-y-4 ltr:text-sm rtl:text-[20px]">Message</label>
</div>
<a href="#"
class="flex w-[118px] h-[33px] border rounded-md items-center justify-center mt-[37px] mx-auto lg:mx-0">
<button class="text-white">Submit</button>
</a>
</form>
</div>
</section>
<!-- Contact Us -->
<!-- Start Branches -->
<section class="container mx-auto mt-20 flex flex-col items-center">
<h1 class="text-[#333333] font-medium text-[38px] leading-[57px] mb-9">Our Branches</h1>
<div class="grid grid-cols-1 md:grid-cols-2 md:gap-[112px] md:px-2 lg:px-0">
<div>
<div class="mb-10">
<h2 class="font-bold text-[20px] leading-[30px] mb-6">DUBAI</h2>
<p class="text-base text-[#6D6D6D] mb-2">Al Quoz, 14 7 St. – Al Quoz Industrial Zone 3</p>
<div class="flex gap-5">
<div class="flex items-center gap-[10px]">
<img src="./images/phone.svg" class="bg-[#0F0F0F1A] p-2 rounded-sm" alt="phone">
<span class="text-[#000000] text-base font-normal leading-6" dir="ltr">04 3399 443</span>
</div>
<div class="w-[2px] h-[25px] mt-1 bg-black"></div>
<div class="flex items-center gap-[10px]">
<img src="./images/phone.svg" class="bg-[#0F0F0F1A] p-2 rounded-sm" alt="phone">
<span class="text-[#000000] text-base font-normal leading-6" dir="ltr">054 4090 401</span>
</div>
</div>
</div>
<div class="mb-10">
<h2 class="font-bold text-[20px] leading-[30px] mb-6">RAS AL KHAIMAH</h2>
<p class="text-base text-[#6D6D6D] mb-2">Mohammed Bin Salem St.,</p>
<div class="flex gap-5">
<div class="flex items-center gap-[10px]">
<img src="./images/phone.svg" class="bg-[#0F0F0F1A] p-2 rounded-sm" alt="phone">
<span class="text-[#000000] text-base font-normal leading-6" dir="ltr">07 2212 122</span>
</div>
<div class="w-[2px] h-[25px] mt-1 bg-black"></div>
<div class="flex items-center gap-[10px]">
<img src="./images/phone.svg" class="bg-[#0F0F0F1A] p-2 rounded-sm" alt="phone">
<span class="text-[#000000] text-base font-normal leading-6" dir="ltr">050 4090 461</span>
</div>
</div>
</div>
</div>
<div>
<div class="mb-10">
<h2 class="font-bold text-[20px] leading-[30px] mb-6">FUJAIRAH</h2>
<p class="text-base text-[#6D6D6D] mb-2">Al Hail Industrial Area, Opposite to Military Camp,</p>
<div class="flex gap-5">
<div class="flex items-center gap-[10px]">
<img src="./images/phone.svg" class="bg-[#0F0F0F1A] p-2 rounded-sm" alt="phone">
<span class="text-[#000000] text-base font-normal leading-6" dir="ltr">04 2229 979</span>
</div>
<div class="w-[2px] h-[25px] mt-1 bg-black"></div>
<div class="flex items-center gap-[10px]">
<img src="./images/phone.svg" class="bg-[#0F0F0F1A] p-2 rounded-sm" alt="phone">
<span class="text-[#000000] text-base font-normal leading-6" dir="ltr">054 9942 244</span>
</div>
</div>
</div>
<div class="mb-10">
<h2 class="font-bold text-[20px] leading-[30px] mb-6">AL KHAWANEEJ</h2>
<p class="text-base text-[#6D6D6D] mb-2">Mirdif Avenue Mall – Basement 1, Mirdif</p>
<div class="flex gap-5">
<div class="flex items-center gap-[10px]">
<img src="./images/phone.svg" class="bg-[#0F0F0F1A] p-2 rounded-sm" alt="phone">
<span class="text-[#000000] text-base font-normal leading-6" dir="ltr">04 334 850</span>
</div>
<div class="w-[2px] h-[25px] mt-1 bg-black"></div>
<div class="flex items-center gap-[10px]">
<img src="./images/phone.svg" class="bg-[#0F0F0F1A] p-2 rounded-sm" alt="phone">
<span class="text-[#000000] text-base font-normal leading-6" dir="ltr">050 409 0461</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End Branches -->
<!-- Download -->
<section id="Download" class="container mx-auto flex md:flex-row flex-col justify-between lg:px-20 px-4 pt-20">
<div>
<p class="uppercase text-[#333333] text-sm font-medium bg-[#E7E7E7] w-[146px] h-[42px] flex items-center justify-center rounded-lg">Download</p>
<p class="lg:text-5xl text-3xl font-semibold lg:leading-[57.6px] mt-6">Download Black <br> Diamond App
<span class="font-bold text-transparent border-black px-1 uppercase" style="-webkit-text-stroke: 1px black; -webkit-text-fill-color: transparent;">Now</span>
</p>
<p class="text-[#3E3E3E] text-base font-normal leading-6 lg:mt-10 mt-4">For faster, easier booking and exclusive deals.</p>
<div class="flex gap-4 mt-10">
<a href="#">
<img src="./images/googlePlay.webp" alt="Google Play">
</a>
<a href="#">
<img src="./images/appStore.webp" alt="App Store">
</a>
</div>
</div>
<img src="./images/image.webp" class="lg:w-[468.66px] md:w-[355.72px]" alt="Image">
</section>
<!-- Download -->
<!-- Start Footer -->
<footer class="bg-[#0F0F0F] sm:h-[239px] p-5">
<div class="container mx-auto flex flex-col items-center justify-center">
<p class="text-[#FFFFFF] font-medium text-base mb-2 leading-4">Follow us</p>
<div class="flex flex-row items-center gap-2">
<div class="lg:w-[473px] md:w-[300px] w-[150px] h-px bg-[#FFFFFF] opacity-[0.08]"></div>
<div class="flex gap-4">
<a href="#"><img src="./images/instagram.svg" class="w-6 h-6" alt="Instagram"></a>
<a href="#"><img src="./images/facebook.svg" class="w-6 h-6" alt="Facebook"></a>
<a href="#"><img src="./images/xIcon.svg" class="w-6 h-6" alt="X Icon"></a>
<a href="#"><img src="./images/Linkedin.svg" class="w-6 h-6" alt="Linkedin"></a>
</div>
<div class="lg:w-[473px] md:w-[300px] w-[150px] h-px bg-[#FFFFFF] opacity-[0.08]"></div>
</div>
<img src="./images/footerLogo.webp" class="w-[170px] h-[36px] mt-4" alt="Logo">
<p class="text-[#D6D6D6] text-xs mt-2 leading-[18px] font-normal">Copyright @ 2024 Black Diamond</p>
<div class="flex md:flex-row flex-col items-center lg:gap-8 gap-2 mt-4">
<a href="#" class="flex items-center gap-2">
<img src="./images/footerCall.svg" alt="Call">
<p class="text-[#FFFFFF] text-sm font-normal leading-[21px]">+603 4784 273 12</p>
</a>
<div class="border-l border-[#FFFFFF] h-6 md:flex hidden" style="opacity: 8%;"></div>
<a href="#" class="flex items-center gap-2">
<img src="./images/footerEmail.svg" alt="Email">
<p class="text-[#FFFFFF] text-sm font-normal leading-[21px]">blackdiamond@example.com</p>
</a>
<div class="border-l border-[#FFFFFF] h-6 md:flex hidden" style="opacity: 8%;"></div>
<a href="./terms.html" class="text-[#FFFFFF] font-medium text-sm leading-[19.6px]">Terms & Conditions</a>
<div class="border-l border-[#FFFFFF] h-6 md:flex hidden" style="opacity: 8%;"></div>
<a href="./privacy.html" class="text-[#FFFFFF] font-medium text-sm leading-[19.6px]">Privacy policy</a>
</div>
<a href="#" class="flex items-center gap-2 mt-4">
<p class="text-[#D6D6D6] text-xs font-normal leading-[18px]">Developed by: </p>
<img src="./images/Layer_1.svg" alt="Icon">
</a>
</div>
</footer>
<!-- End Footer -->
</body>
</html>