-
Notifications
You must be signed in to change notification settings - Fork 0
/
serving.html
98 lines (92 loc) · 6.68 KB
/
serving.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
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="2G9">
<title>Serving</title>
<link rel="icon" type="image/png" href="./images/logo.png">
<!-- Icons -->
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
<!-- 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=Noto+Kufi+Arabic:[email protected]&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="./js/script.js"></script>
<style>
body {
font-family: "Noto Kufi Arabic", sans-serif;
}
</style>
</head>
<body class="bg-gray-50">
<!-- Start Navbar -->
<div id="navbar"></div>
<!-- End Navbar -->
<!-- Start Content -->
<div class="container mx-auto px-4 py-8">
<div class="flex flex-col md:flex-row items-center gap-5">
<div class="w-full md:w-auto">
<img src="./images/Group1000006059.webp" alt="Car Exhibition Image" class="mx-auto md:ml-0 md:mr-5">
</div>
<div class="mt-4 md:mt-10 md:w-1/2">
<h2 class="text-[#C10D10] font-bold text-3xl text-center md:text-right ltr:text-left mb-4">فيوتشر لصيانة السيارات</h2>
<p class="text-sm text-justify text-[#8A8A8A] mb-4 leading-6">سيقدم المعرض كافة التقنيات الجديدة في مجال السيارات، والحلول للمستهلكين الذين يرغبون في شراء سيارة كهربائية، وكل ذلك بأسعار خاصة ومغرية سيقدم المعرض كافة التقنيات الجديدة في مجال السيارات، والحلول للمستهلكين الذين يرغبون في شراء سيارة كهربائية، وكل ذلك بأسعار خاصة ومغرية</p>
</div>
</div>
<div class="md:ml-8 mt-4 md:mt-0 md:mr-36">
<div class="flex items-center text-[#837F7F] gap-2 text-[18px] font-bold mb-4">
<ion-icon name="location-outline"></ion-icon>
<p>دبي - رأس الخور</p>
</div>
<div class="flex gap-5">
<div>
<button class="bg-[#B8B8B8] text-white font-semibold py-2 px-4 border rounded-md flex items-center gap-2">
الهاتف
<ion-icon name="call"></ion-icon>
</button>
</div>
<div>
<button class="bg-[#39CE8A] text-white font-semibold py-2 px-4 border rounded-md flex items-center gap-2">
واتساب
<ion-icon name="logo-whatsapp"></ion-icon>
</button>
</div>
</div>
</div>
</div>
<!-- End Content -->
<!-- Start Second Content -->
<div class="container mx-auto lg:flex">
<div class="mt-20">
<div class="mt-10">
<a href="#" class="flex flex-col items-center bg-white border border-gray-200 rounded-lg shadow md:flex-row md:max-w-xl">
<img class="object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none md:rounded-l-lg" src="./images/imageE.webp" alt="">
<div class="flex flex-col justify-between p-4 leading-normal">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">إطارات السيارات</h5>
<p class="text-sm text-justify mb-3 font-normal text-[#8A8A8A] dark:text-gray-400">سيقدم المعرض كافة التقنيات الجديدة في مجال السيارات، والحلول للمستهلكين الذين يرغبون في شراء سيارة كهربائية، وكل ذلك بأسعار خاصة ومغرية سيقدم المعرض كافة التقنيات الجديدة في مجال السيارات، والحلول للمستهلكين الذين يرغبون في شراء سيارة كهربائية، وكل ذلك بأسعار خاصة ومغرية</p>
</div>
</a>
</div>
<div class="mt-10">
<a href="#" class="flex flex-col items-center bg-white border border-gray-200 rounded-lg shadow md:flex-row md:max-w-xl">
<img class="object-cover w-full h-96 md:h-auto md:w-48 md:rounded-none md:rounded-l-lg" src="./images/imageE.webp" alt="">
<div class="flex flex-col justify-between p-4 leading-normal">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">إطارات السيارات</h5>
<p class="text-sm text-justify mb-3 font-normal text-[#8A8A8A] dark:text-gray-400">سيقدم المعرض كافة التقنيات الجديدة في مجال السيارات، والحلول للمستهلكين الذين يرغبون في شراء سيارة كهربائية، وكل ذلك بأسعار خاصة ومغرية سيقدم المعرض كافة التقنيات الجديدة في مجال السيارات، والحلول للمستهلكين الذين يرغبون في شراء سيارة كهربائية، وكل ذلك بأسعار خاصة ومغرية</p>
</div>
</a>
</div>
</div>
<div class="mt-10">
<img class="object-cover w-full h-96 md:h-auto" src="./images/image31.webp" alt="car">
</div>
</div>
<!-- End Second Content -->
<!-- Start Footer -->
<div id="footer"></div>
<!-- End Footer -->
</body>
</html>