-
Notifications
You must be signed in to change notification settings - Fork 0
/
terms.html
125 lines (118 loc) · 10.9 KB
/
terms.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
<!DOCTYPE html>
<html lang="en" dir="rtl">
<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>Terms & Conditions</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
html {
scroll-behavior: smooth;
font-family: "Poppins", sans-serif;
}
</style>
</head>
<body>
<div class="bg-black lg:h-[383px] md:h-[341px]">
<!-- 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">العربية</p>
<a class="text-[#F5993C] md:text-lg text-base font-normal leading-10 underline order-1 lg:order-2" href="#Download">حمل الان</a>
<a href="./index.html">
<img src="./images/logo.svg" class="md:w-[262px] md:h-20 w-[176px] h-[56px] cursor-pointer order-2 lg:order-1" alt="Logo">
</a>
</section>
<!-- End Language Bar -->
<!-- Start Header -->
<header>
<h1 class="text-white items-center justify-center sm:text-[44px] text-4xl smleading-[52.8px] leading-[43.2px] font-bold lg:py-[95px] py-[52px] text-center">
الشروط والأحكام
</h1>
</header>
<!-- End Header -->
</div>
<!-- Start Content -->
<section class="container mx-auto py-14 lg:px-28 md:px-[72px] px-4 xl:px-0">
<div>
<h1 class="text-[#0F0F0F] text-2xl font-bold leading-8">عنوان رئيسي</h1>
<p class="xl:w-[1240px] text-[#0F0F0F] text-base font-normal leading-6">لوريم إيبسوم هو نص عربي غير معنى، يُستخدم في مجالات الطباعة ومواقع الويب كنص دال على الشكل والتخطيط. يمكنك اختيار عدد الفقرات وعدد الحروف ثم النقر علىهذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.</p>
</div>
<div class="mt-10">
<h1 class="text-[#0F0F0F] text-2xl font-bold leading-8">عنوان رئيسي</h1>
<p class="xl:w-[1240px] text-[#0F0F0F] text-base font-normal leading-6">لوريم إيبسوم هو نص عربي غير معنى، يُستخدم في مجالات الطباعة ومواقع الويب كنص دال على الشكل والتخطيط. يمكنك اختيار عدد الفقرات وعدد الحروف ثم النقر علىهذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.</p>
</div>
<div class="mt-10">
<h1 class="text-[#0F0F0F] text-2xl font-bold leading-8">عنوان رئيسي</h1>
<p class="xl:w-[1240px] text-[#0F0F0F] text-base font-normal leading-6">لوريم إيبسوم هو نص عربي غير معنى، يُستخدم في مجالات الطباعة ومواقع الويب كنص دال على الشكل والتخطيط. يمكنك اختيار عدد الفقرات وعدد الحروف ثم النقر علىهذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى إضافة إلى زيادة عدد الحروف التى يولدها التطبيق. إذا كنت تحتاج إلى عدد أكبر من الفقرات يتيح لك مولد النص العربى زيادة عدد الفقرات كما تريد، النص لن يبدو مقسما ولا يحوي أخطاء لغوية، مولد النص العربى مفيد لمصممي المواقع على وجه الخصوص، حيث يحتاج العميل فى كثير من الأحيان أن يطلع على صورة حقيقية لتصميم الموقع.</p>
</div>
</section>
<!-- End Content -->
<!-- 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>