hkais commited on
Commit
142866a
ยท
verified ยท
1 Parent(s): ea1a68c

- Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +248 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mh
3
- emoji: ๐Ÿข
4
- colorFrom: indigo
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mh
3
+ emoji: ๐Ÿณ
4
+ colorFrom: green
5
  colorTo: pink
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,248 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="he" 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
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');
11
+
12
+ body {
13
+ font-family: 'Rubik', sans-serif;
14
+ }
15
+
16
+ .hero-section {
17
+ background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://mazhar.hamady-qais.com/wp-content/uploads/2024/11/man-5899192_1280.jpg');
18
+ background-size: cover;
19
+ background-position: center;
20
+ }
21
+
22
+ .service-card:hover {
23
+ transform: translateY(-5px);
24
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
25
+ }
26
+
27
+ .testimonial-card {
28
+ transition: all 0.3s ease;
29
+ }
30
+
31
+ .testimonial-card:hover {
32
+ transform: scale(1.02);
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="bg-gray-50 text-gray-800">
37
+ <!-- Navigation -->
38
+ <nav class="bg-white shadow-lg">
39
+ <div class="max-w-6xl mx-auto px-4">
40
+ <div class="flex justify-between items-center py-4">
41
+ <div class="text-2xl font-bold text-blue-600">ืžืžื–ื”ื”ืจ ืง ืงืื™ืก</div>
42
+ <div class="hidden md:flex space-x-6 space-x-reverse">
43
+ <a href="#" class="text-blue-600 hover:text-blue-800">ื‘ื™ืช</a>
44
+ <a href="#" class="hover:text-blue-600">ืฉื™ืจื•ืชื™ื</a>
45
+ <a href="#" class="hover:text-blue-600">ืื•ื“ื•ืช</a>
46
+ <a href="#" class="hover:text-blue-600">ืœืงื•ื—ื•ืช</a>
47
+ <a href="#" class="hover:text-blue-600">ืฆื•ืจ ืงืฉืจ</a>
48
+ </div>
49
+ <div class="md:hidden">
50
+ <button class="outline-none mobile-menu-button">
51
+ <i class="fas fa-bars text-2xl"></i>
52
+ </button>
53
+ </div>
54
+ </div>
55
+ </div>
56
+ </nav>
57
+
58
+ <!-- Hero Section -->
59
+ <section class="hero-section text-white py-20 px-4">
60
+ <div class="max-w-4xl mx-auto text-center">
61
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">ื‘ื™ื—ื“ ื ื•ื‘ื™ืœ ืืช ื”ืข ื”ืขืกืง ืฉืœ ืฉืœืš ืœื” ืœื”ืฆืœืœื—ื”</h1>
62
+ <p class="text-xl mb-8 leading-relaxed">
63
+ ื”ื ื™ืกื™ื•ืŸ, ื”ืžืงืฆื•ืขื™ื•ืช ื•ื”ื™ื“ืข ืฉืœื™ ื ืคื’ืฉื™ื ื›ืืŸ, ื›ื“ื™ ืœืกืคืง ืคืชืจื•ื ื•ืช ืžื•ืชืืžื™ื ืœืขืกืงื™ื ื”ืฉื•ืืคื™ื ืœืฆืžื•ืžื•ื— ื•ืœ ื•ืœืฉื’ืฉื’. ืื ื™ ืžืฆื™ืข ื™ืขื•ืฅ ื•ืœื™ื•ื•ื™ ืข ืขืกืงื™ ื›ื•ืœืœ โ€“ ื’ื™ื•ืก ื”ืœื•ื•ืื•ืช ื‘ืขืจื‘ื•ืช ื”ืžื“ื™ื ื” ื•ืžื™ืžื•ืŸ ื ื“ืœืดืŸ ื”ืžืฉืœื‘ ื”ื‘ ื”ื‘ื ื” ืžืข ืžืขืžื™ืงื” ื‘ืฆืจื›ื™ื ื”ืžื™ื•ื—ื“ื™ื ืฉืœ ื›ืœ ืขืกืง, ืจ ืจืื™ื™ื” ืืกื˜ืจื˜ื’ื™ืช ื•ื”ื™ื›ืจื•ืช ืžืงื™ืคื” ืขื ื”ืžืขืจื›ืช ื”ื‘ื ืงืื™ืช.
64
+ </p>
65
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full transition duration-300">
66
+ ืฆื•ืจ ืงืฉืจ
67
+ </button>
68
+ </div>
69
+ </section>
70
+
71
+ <!-- Working Method Section -->
72
+ <section class="py-16 px-4 bg-white">
73
+ <div class="max-w-6xl mx-auto">
74
+ <div class="flex flex-col md:flex-row items-center">
75
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pl-12">
76
+ <h2 class="text-3xl font-bold mb-6 text-blue-600">ืฉื™ื˜ืช ื”ืขื‘ื•ื“ื”: ื”ืชืืžื” ืžื• ืžื•ืฉืœืœืžืช ืœื›ืœ ืฉืœื‘ ืขืกืงื™</h2>
77
+ <p class="text-lg leading-relaxed mb-6">
78
+ ื”ื—ืœ ื‘ืข ื‘ืขืกืงื™ื ื”ืฉื•ืื•ืืคื™ื ืœื” ืœื”ืจื—ื™ื‘ ืคืขื™ืœื•ืชื, ื“ืจืš ื”ื‘ืจืื” ืขืกืงื™ืช, ื•ืขื“ ืœื™ื™ืขื•ืฅ ืคื™ื ื ืกื™ ืขื‘ื•ืจ ืคืจ ืคืจื˜ื™ื™ื ื•ืขืกืงื™ื, ื›ืœ ืขืกืง ืžืงื‘ืœ ืคืชืจื•ืŸ ืžืงื™ืฃ, ืžืงืฆื•ืขื™ ื•ืื™ืฉื™.
79
+ </p>
80
+ <p class="text-lg leading-relaxed">
81
+ ื‘ืฆืข ืืช ื”ืฆืขื“ ื”ื‘ ื”ื‘ื ืœื” ืœื”ืฆืœืœื—ืช ื”ืข ื”ืขืกืง ืฉืœ ืฉืœืš ื‘ืข ื‘ืขื–ืจืช ื™ื•ื•ืขืฅ ืžื ื•ืกื” ืฉืžื‘ื™ืŸ ืืช ื”ื“ื™ื ื™ื ืžื™ืงื” ื”ืขืกืงื™ืช ืœืขื•ืžื•ืžืง ื•ืž ื•ืžื—ื•ื™ื‘ ืœืฆืžื™ื—ื” ืืžื™ืชื™ืช ื•ื™ืฆื™ื‘ื•ืช ื‘ื˜ื•ื•ื— ื”ืืจื•๏ฟฝ๏ฟฝ.
82
+ </p>
83
+ </div>
84
+ <div class="md:w-1/2">
85
+ <img src="https://mazhar.hamady-qais.com/wp-content/uploads/2024/11/call-center-8022155_1280.jpg" alt="ืขื‘ื•ื“ื” ืžืฉืจื“ื™ืช" class="rounded-lg shadow-xl w-full h-auto">
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </section>
90
+
91
+ <!-- Services Section -->
92
+ <section class="py-16 px-4 bg-gray-100">
93
+ <div class="max-w-6xl mx-auto">
94
+ <h2 class="text-3xl font-bold mb-12 text-center text-blue-600">ื”ื”ืฉื™ืจื•ืชื™ื ืฉืœื ื•</h2>
95
+ <div class="grid md:grid-cols-3 gap-8">
96
+ <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300">
97
+ <div class="text-blue-600 mb-4">
98
+ <i class="fas fa-handshake fa-3x"></i>
99
+ </div>
100
+ <h3 class="text-xl font-bold mb-4">ื™ื™ืขื•ืฅ ืข ืขืกืงื™</h3>
101
+ <p class="text-gray-600">
102
+ ืœื™ื•ื•ื™ ืื™ืฉื™ ื• ื•ืžื•ืชืื ืœืขืกืงื™ื ื‘ื›ืœ ืฉืœื‘ื™ ื”ื”ืชืคืชื—ื•ืช, ืžื” ืžื”ืงืžื” ื•ืขื“ ืฆืžื™ื—ื” ื•ื” ื•ื”ืชืจื—ื‘ื•ืช.
103
+ </p>
104
+ </div>
105
+ <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300">
106
+ <div class="text-blue-600 mb-4">
107
+ <i class="fas fa-landmark fa-3x"></i>
108
+ </div>
109
+ <h3 class="text-xl font-bold mb-4">ืžื™ืžื•ื™ืžื•ืŸ ื  ื ื“ืœ"ืŸ</h3>
110
+ <p class="text-gray-600">
111
+ ืคืชืจื•ื ื•ืช ืžื™ืžื•ื™ืžื•ืŸ ืžืช ืžืชืงื“ืžื™ื ืœื ื“ืœ"ืŸ ืžืก ืžืกื—ืจื™ ื•ืคืจืจื˜ื™, ืขื ื’ื™ืฉื” ืœืžืขืจื›ืช ื”ื‘ ื”ื‘ื ืงืื™ืช ื•ื”ืžื•ื•ืกื“ื™ืช.
112
+ </p>
113
+ </div>
114
+ <div class="service-card bg-white p-8 rounded-lg shadow-md transition duration-300">
115
+ <div class="text-blue-600 mb-4">
116
+ <i class="fas fa-chart-line fa-3x"></i>
117
+ </div>
118
+ <h3 class="text-xl font-bold mb-4">ื”ื‘ืจืื” ืคื™ื ื ืกื™ืช</h3>
119
+ <p class="text-gray-600">
120
+ ืชื•ื›ื•ื›ื ื™ื•ืช ื”ื‘ืจืื” ืœืข ืœืขืกืงื™ื ื‘ืžืฆื•ืงื”, ืขื ืœื™ื•ื•ื™ ืฆืžื•ื“ ืขื“ ืœื”ืฉ ืœื”ืฉื’ืช ื™ืฆื™ื‘ื•ืช ืคื™ื ื ืกื™ืช.
121
+ </p>
122
+ </div>
123
+ </div>
124
+ </div>
125
+ </section>
126
+
127
+ <!-- Caring Service Section -->
128
+ <section class="py-16 px-4 bg-white">
129
+ <div class="max-w-6xl mx-auto text-center">
130
+ <h2 class="text-3xl font-bold mb-6 text-blue-600">ืฉื™ืจื•ืช ื ืื›ืคืชื™ ื•ื ื•ืื ื•ืฉื™, ืขื ื“ื’ืฉ ืขืœ ื–ืžื™ื ื•ืช ื•ืžืงืฆื•ืขื™ื•ืช</h2>
131
+ <p class="text-lg max-w-3xl mx-auto leading-relaxed mb-8">
132
+ ื›ืœ ืœืงื•ื— ืžืงื‘ืœ ืœื™ื•ื•ื™ ืื™ืฉื™ ืžืž ืžืžื ื™ โ€“ ืžื–ื”ื”ืจ, ื‘ืชื™ืื•ื ืžืœ ืžืœื ืขื ืื ืฉื™ ืžืงืฆื•ืข ืžื” ืžื”ืžื•ื‘ื™ืœื™ื ื‘ืชื—ื•ืžื. ื‘ืž ื‘ืžืฉืจืจื“ื™ ื ืื ื• ืฉ ืฉืžื™ื ื“ื’ืฉ ืขืœ ืฉื•ืชืคื•ืช, ื”ื‘ื ื” ื•ื”ืžื—ื•ื™ื‘ื•ืช ื”ื ื”ืืžื™ืชื™ืช ืœืฉื’ืฉื•ื’ ื”ืขืกืง.
133
+ </p>
134
+ <div class="flex justify-center">
135
+ <img src="https://mazhar.hamady-qais.com/wp-content/uploads/2024/11/man-5899192_1280.jpg" alt="ื™ื•ืขืฅ ืข ืขืกืงื™" class="rounded-full w-40 h-40 object-cover border-4 border-blue-500 shadow-lg">
136
+ </div>
137
+ </div>
138
+ </section>
139
+
140
+ <!-- Testimonials Section -->
141
+ <section class="py-16 px-4 bg-gray-100">
142
+ <div class="max-w-6xl mx-auto">
143
+ <h2 class="text-3xl font-bold mb-12 text-center text-blue-600">ืœืงื•ื—ื•ืช ืžืจื•ืฆื™ื</h2>
144
+ <div class="grid md:grid-cols-3 gap-8">
145
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-md">
146
+ <div class="flex items-center mb-4">
147
+ <div class="w-12 h-12 rounded-full bg-gray-300 mr-4"></div>
148
+ <div>
149
+ <h4 class="font-bold">ื“ื•ื“ ืœื•ื™</h4>
150
+ <p class="text-gray-600 text-sm">ื‘ืขืœ ืขืกืง</p>
151
+ </div>
152
+ </div>
153
+ <p class="text-gray-700">
154
+ "ื”ื”ืœื™ื•ื•ื™ ื”ืžืงืฆื•ืขื™ ืฉืœ ืžื–ื”ืจ ื”ืฆื™ืœ ืืช ื”ืขืกืง ืฉืœื™. ื”ื•ื ื”ื‘ื™ืŸ ื‘ ื‘ื“ื™ื•ืง ืžื” ื”ืฆืจื›ื™ื ืฉืœื™ ื•ื” ื•ื”ืฆืœื™ื— ืœื”ื•ื‘ื™ืœ ืื•ืชื™ ืœื”ืฆืœื—ื”."
155
+ </p>
156
+ </div>
157
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-md">
158
+ <div class="flex items-center mb-4">
159
+ <div class="w-12 h-12 rounded-full bg-gray-300 mr-4"></div>
160
+ <div>
161
+ <h4 class="font-bold">ืฉืจื” ื› ื›ื”ืŸ</h4>
162
+ <p class="text-gray-600 text-sm">ื™ื–ืžื™ืช ื ื“ืœ"ืŸ</p>
163
+ </div>
164
+ </div>
165
+ <p class="text-gray-700">
166
+ "ื”ื”ืžืœืœืฆื•ืช ื”ืคื™ื ื ืกื™ื•ืช ืฉืงื™ื‘ืœืชื™ ื”ื™ื• ืžื“ื•ื™ืงื•ืช ื• ื•ื—ืกื›ื• ืœื™ ื”ืจื‘ื” ื› ื›ืกืฃ ื•ื–ืžืŸ. ืžืž ืžืžืœื™ืฆื” ื‘ื—ื•ื!"
167
+ </p>
168
+ </div>
169
+ <div class="testimonial-card bg-white p-6 rounded-lg shadow-md">
170
+ <div class="flex items-center mb-4">
171
+ <div class="w-12 h-12 rounded-full bg-gray-300 mr-4"></div>
172
+ <div>
173
+ <h4 class="font-bold">ืืื‘ื™ ื“ื”ื”ืืŸ</h4>
174
+ <p class="text-gray-600 text-sm">ื‘ืขืœ ืจ ืจืฉืช ื— ื—ื ื•ื™ื•ืช</p>
175
+ </div>
176
+ </div>
177
+ <p class="text-gray-700">
178
+ "ื”ื”ืฉื™ืจื•ืช ื”ืื™ืฉื™ ื•ื”ื–ืžื™ื ื•ืช ืฉืœ ืžื–ื”ืจ ืœื ืžืฉ ืžืฉืื™ืจื™ื ืก ืกืคืง - ื”ื•ื ื‘ื ื‘ืืžืช ืฉื ื‘ืฉ ื‘ืฉื‘ื™ืœ ื”ืœืงื•ื—ื•ืช ืฉืœื•."
179
+ </p>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </section>
184
+
185
+ <!-- CTA Section -->
186
+ <section class="py-16 px-4 bg-blue-600 text-white">
187
+ <div class="max-w-4xl mx-auto text-center">
188
+ <h2 class="text-3xl font-bold mb-6">ื”ื”ืฆื˜ืจืคื• ืœืžืขื’ืœ ื”ืœืงื•ื—ื•ืช ื”ืž ื”ืžืจื•ืฆื™ื</h2>
189
+ <p class="text-xl mb-8 leading-relaxed">
190
+ ืฉื›ื‘ืจ ื‘ ื‘ื—ืจื• ื‘ืฉื™ืจื•ืช ืžืงืฆื•ืขื™ ืขื ืชื•ืฆืื•ืช ืžื•ื›ื—ื•ืช!
191
+ </p>
192
+ <button class="bg-white text-blue-600 hover:bg-gray-100 font-bold py-3 px-8 rounded-full transition duration-300">
193
+ ืฆื•ืจ ืงืฉืจ ืขื•ื“ ื”ื™ื•ื
194
+ </button>
195
+ </div>
196
+ </section>
197
+
198
+ <!-- Footer -->
199
+ <footer class="bg-gray-800 text-white py-12 px-4">
200
+ <div class="max-w-6xl mx-auto">
201
+ <div class="grid md:grid-cols-4 gap-8">
202
+ <div>
203
+ <h3 class="text-xl font-bold mb-4">ืžืžื–ื”ื”ืจ ืง ืงืื™ืก</h3>
204
+ <p>ื™ื™ืขื•ืฅ ื•ืœื™ื•ื•ื™ ืขืกืงื™ ืž ืžืงืฆื•ืขื™ ืœืข ืœืขืกืงื™ื ืงื˜ื ื™ื ื•ื‘ื™ื ื•ื ื™ื™ื.</p>
205
+ </div>
206
+ <div>
207
+ <h3 class="text-xl font-bold mb-4">ืงื™ืฉื•ืจื™ื</h3>
208
+ <ul class="space-y-2">
209
+ <li><a href="#" class="hover:text-blue-400">ื‘ื™ืช</a></li>
210
+ <li><a href="#" class="hover:text-blue-400">ืฉื™ืจื•ืชื™ื</a></li>
211
+ <li><a href="#" class="hover:text-blue-400">ืื•ื“ื•ืช</a></li>
212
+ <li><a href="#" class="hover:text-blue-400">ืฆื•ืจ ืงืฉืจ</a></li>
213
+ </ul>
214
+ </div>
215
+ <div>
216
+ <h3 class="text-xl font-bold mb-4">ืฆื•ืจ ืงืฉืจ</h3>
217
+ <ul class="space-y-2">
218
+ <li><i class="fas fa-phone mr-2"></i> 050-1234567</li>
219
+ <li><i class="fas fa-envelope mr-2"></i> info@example.com</li>
220
+ <li><i class="fas fa-map-marker-alt mr-2"></i> ืชืœ ืื‘ื™ื‘, ื™ืฉืจืืœ</li>
221
+ </ul>
222
+ </div>
223
+ <div>
224
+ <h3 class="text-xl font-bold mb-4">ืขืงื‘ื• ืื—ืจื™ื ื•</h3>
225
+ <div class="flex space-x-4 space-x-reverse">
226
+ <a href="#" class="text-2xl hover:text-blue-400"><i class="fab fa-facebook"></i></a>
227
+ <a href="#" class="text-2xl hover:text-blue-400"><i class="fab fa-linkedin"></i></a>
228
+ <a href="#" class="text-2xl hover:text-blue-400"><i class="fab fa-whatsapp"></i></a>
229
+ </div>
230
+ </div>
231
+ </div>
232
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center">
233
+ <p>ยฉ 2023 ืžื–ื”ื”ืจ ืง ืงืื™ืก. ื›ืœ ื”ื–ื›ื•ื™ื•ืช ืฉืžื•ืจื•ืช.</p>
234
+ </div>
235
+ </div>
236
+ </footer>
237
+
238
+ <script>
239
+ // Mobile menu toggle
240
+ const mobileMenuButton = document.querySelector('.mobile-menu-button');
241
+ const mobileMenu = document.querySelector('.mobile-menu');
242
+
243
+ mobileMenuButton.addEventListener('click', () => {
244
+ mobileMenu.classList.toggle('hidden');
245
+ });
246
+ </script>
247
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - ๐Ÿงฌ <a href="https://enzostvs-deepsite.hf.space?remix=hkais/mh" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
248
+ </html>