Hugging Face's logo

Spaces:
Michael254
/
website
Running

App Files Community
Michael254 commited on
Commit
55fc4db
·
verified ·
1 Parent(s): dab1e73

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +339 -298
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,239 +3,273 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Michael Mati - Biomedical Engineering Services</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
  .hero-gradient {
11
- background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
12
  }
13
  .service-card:hover {
14
  transform: translateY(-5px);
15
- box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
  }
17
- .contact-card {
18
- transition: all 0.3s ease;
19
- }
20
- .contact-card:hover {
21
- background-color: #f8fafc;
22
  }
23
  </style>
24
  </head>
25
- <body class="font-sans antialiased text-gray-800">
26
  <!-- Navigation -->
27
- <nav class="bg-white shadow-lg sticky top-0 z-50">
28
- <div class="max-w-6xl mx-auto px-4">
29
- <div class="flex justify-between items-center py-4">
30
- <div class="flex items-center space-x-4">
31
- <div class="flex items-center">
32
- <i class="fas fa-heartbeat text-3xl text-blue-600 mr-2"></i>
33
- <span class="font-bold text-xl text-blue-800">Michael Mati</span>
 
 
34
  </div>
35
  </div>
36
- <div class="hidden md:flex items-center space-x-8">
37
- <a href="#services" class="text-blue-600 font-medium hover:text-blue-800">Services</a>
38
- <a href="#about" class="text-gray-600 hover:text-blue-600">About</a>
39
- <a href="#contact" class="text-gray-600 hover:text-blue-600">Contact</a>
 
 
 
 
40
  </div>
41
  <div class="md:hidden">
42
- <button class="mobile-menu-button p-2 focus:outline-none">
43
- <i class="fas fa-bars text-2xl text-gray-600"></i>
44
  </button>
45
  </div>
46
  </div>
47
  </div>
 
48
  <!-- Mobile menu -->
49
- <div class="mobile-menu hidden md:hidden bg-white border-t">
50
- <div class="px-4 py-2 space-y-2">
51
- <a href="#services" class="block px-2 py-1 text-blue-600 font-medium">Services</a>
52
- <a href="#about" class="block px-2 py-1 text-gray-600">About</a>
53
- <a href="#contact" class="block px-2 py-1 text-gray-600">Contact</a>
 
 
54
  </div>
55
  </div>
56
  </nav>
57
 
58
  <!-- Hero Section -->
59
- <section class="hero-gradient text-white">
60
- <div class="max-w-6xl mx-auto px-4 py-20 md:py-32">
61
- <div class="md:flex items-center">
62
- <div class="md:w-1/2 mb-10 md:mb-0">
63
- <h1 class="text-4xl md:text-5xl font-bold mb-6">Biomedical Engineering Solutions</h1>
64
- <p class="text-xl mb-8 opacity-90">Expert medical equipment maintenance, repair, and consulting services to keep your healthcare facility running smoothly.</p>
65
- <div class="flex space-x-4">
66
- <a href="#contact" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">Get in Touch</a>
67
- <a href="#services" class="border border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-600 transition duration-300">Our Services</a>
 
 
 
 
 
 
 
 
68
  </div>
69
  </div>
70
- <div class="md:w-1/2 flex justify-center">
71
- <img src="https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=880&q=80" alt="Medical Equipment" class="rounded-xl shadow-2xl max-w-full h-auto">
 
 
 
 
 
72
  </div>
73
  </div>
74
  </div>
75
  </section>
76
 
77
  <!-- Services Section -->
78
- <section id="services" class="py-20 bg-gray-50">
79
- <div class="max-w-6xl mx-auto px-4">
80
  <div class="text-center mb-16">
81
- <h2 class="text-3xl font-bold text-gray-800 mb-4">Our Biomedical Services</h2>
82
- <p class="text-xl text-gray-600 max-w-2xl mx-auto">Comprehensive solutions for all your medical equipment needs</p>
 
 
 
83
  </div>
84
 
85
  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
86
  <!-- Service 1 -->
87
- <div class="service-card bg-white rounded-xl p-8 shadow-md transition duration-300">
88
- <div class="text-blue-600 mb-4">
89
- <i class="fas fa-tools text-4xl"></i>
90
  </div>
91
- <h3 class="text-xl font-bold mb-3">Equipment Maintenance</h3>
92
- <p class="text-gray-600 mb-4">Preventive and corrective maintenance to ensure your medical devices operate at peak performance.</p>
93
- <ul class="text-gray-600 space-y-2">
94
- <li class="flex items-start">
95
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
96
- <span>Scheduled maintenance programs</span>
97
- </li>
98
- <li class="flex items-start">
99
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
100
- <span>Performance verification</span>
101
- </li>
102
- <li class="flex items-start">
103
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
104
- <span>Calibration services</span>
105
- </li>
106
- </ul>
107
  </div>
108
 
109
  <!-- Service 2 -->
110
- <div class="service-card bg-white rounded-xl p-8 shadow-md transition duration-300">
111
- <div class="text-blue-600 mb-4">
112
- <i class="fas fa-wrench text-4xl"></i>
113
  </div>
114
- <h3 class="text-xl font-bold mb-3">Repair Services</h3>
115
- <p class="text-gray-600 mb-4">Expert troubleshooting and repair for all types of medical equipment and devices.</p>
116
- <ul class="text-gray-600 space-y-2">
117
- <li class="flex items-start">
118
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
119
- <span>Diagnostic equipment repair</span>
120
- </li>
121
- <li class="flex items-start">
122
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
123
- <span>Therapeutic device repair</span>
124
- </li>
125
- <li class="flex items-start">
126
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
127
- <span>Emergency repair services</span>
128
- </li>
129
- </ul>
130
  </div>
131
 
132
  <!-- Service 3 -->
133
- <div class="service-card bg-white rounded-xl p-8 shadow-md transition duration-300">
134
- <div class="text-blue-600 mb-4">
135
- <i class="fas fa-laptop-medical text-4xl"></i>
136
  </div>
137
- <h3 class="text-xl font-bold mb-3">Consulting</h3>
138
- <p class="text-gray-600 mb-4">Professional guidance for medical technology management and procurement.</p>
139
- <ul class="text-gray-600 space-y-2">
140
- <li class="flex items-start">
141
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
142
- <span>Equipment selection advice</span>
143
- </li>
144
- <li class="flex items-start">
145
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
146
- <span>Technology assessment</span>
147
- </li>
148
- <li class="flex items-start">
149
- <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
150
- <span>Regulatory compliance</span>
151
- </li>
152
- </ul>
153
  </div>
154
- </div>
155
- </div>
156
- </section>
157
-
158
- <!-- About Section -->
159
- <section id="about" class="py-20 bg-white">
160
- <div class="max-w-6xl mx-auto px-4">
161
- <div class="md:flex items-center">
162
- <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
163
- <img src="https://images.unsplash.com/photo-1581094794329-c811329cf522?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Michael Mati" class="rounded-xl shadow-lg w-full">
 
 
 
 
 
 
 
 
 
 
 
164
  </div>
165
- <div class="md:w-1/2">
166
- <h2 class="text-3xl font-bold text-gray-800 mb-6">About Michael Mati</h2>
167
- <p class="text-gray-600 mb-6">With over 10 years of experience in the biomedical engineering field, I am dedicated to providing top-quality service and support for medical equipment in healthcare facilities.</p>
168
- <p class="text-gray-600 mb-6">My expertise spans across various medical devices including diagnostic imaging equipment, patient monitors, ventilators, and laboratory instruments.</p>
169
- <div class="bg-blue-50 p-6 rounded-lg border border-blue-100">
170
- <h3 class="text-xl font-bold text-blue-800 mb-3">Professional Qualifications</h3>
171
- <ul class="space-y-2 text-gray-700">
172
- <li class="flex items-start">
173
- <i class="fas fa-graduation-cap text-blue-600 mt-1 mr-2"></i>
174
- <span>Degree in Biomedical Engineering</span>
175
- </li>
176
- <li class="flex items-start">
177
- <i class="fas fa-certificate text-blue-600 mt-1 mr-2"></i>
178
- <span>Certified Biomedical Equipment Technician (CBET)</span>
179
- </li>
180
- <li class="flex items-start">
181
- <i class="fas fa-award text-blue-600 mt-1 mr-2"></i>
182
- <span>Multiple manufacturer certifications</span>
183
- </li>
184
- </ul>
185
  </div>
 
 
 
 
186
  </div>
187
  </div>
188
  </div>
189
  </section>
190
 
191
- <!-- Testimonials Section -->
192
- <section class="py-20 bg-gray-50">
193
- <div class="max-w-6xl mx-auto px-4">
194
  <div class="text-center mb-16">
195
- <h2 class="text-3xl font-bold text-gray-800 mb-4">Client Testimonials</h2>
196
- <p class="text-xl text-gray-600 max-w-2xl mx-auto">What healthcare professionals say about our services</p>
 
 
 
197
  </div>
198
 
199
- <div class="grid md:grid-cols-2 gap-8">
200
- <!-- Testimonial 1 -->
201
- <div class="bg-white p-8 rounded-xl shadow-md">
202
- <div class="flex items-center mb-4">
203
- <div class="text-yellow-400 mr-2">
204
- <i class="fas fa-star"></i>
205
- <i class="fas fa-star"></i>
206
- <i class="fas fa-star"></i>
207
- <i class="fas fa-star"></i>
208
- <i class="fas fa-star"></i>
209
  </div>
210
  </div>
211
- <p class="text-gray-600 mb-6">"Michael's expertise in maintaining our ICU equipment has been invaluable. His prompt response to emergencies has saved us countless times."</p>
212
- <div class="flex items-center">
213
- <div class="bg-blue-100 text-blue-800 rounded-full w-12 h-12 flex items-center justify-center font-bold mr-4">JD</div>
 
 
 
 
 
214
  <div>
215
- <h4 class="font-bold">Dr. Jane Doe</h4>
216
- <p class="text-gray-500">Chief Medical Officer, City Hospital</p>
217
  </div>
218
  </div>
219
  </div>
220
 
221
- <!-- Testimonial 2 -->
222
- <div class="bg-white p-8 rounded-xl shadow-md">
223
- <div class="flex items-center mb-4">
224
- <div class="text-yellow-400 mr-2">
225
- <i class="fas fa-star"></i>
226
- <i class="fas fa-star"></i>
227
- <i class="fas fa-star"></i>
228
- <i class="fas fa-star"></i>
229
- <i class="fas fa-star"></i>
230
  </div>
231
  </div>
232
- <p class="text-gray-600 mb-6">"The preventive maintenance program implemented by Michael has significantly reduced our equipment downtime and repair costs."</p>
233
- <div class="flex items-center">
234
- <div class="bg-blue-100 text-blue-800 rounded-full w-12 h-12 flex items-center justify-center font-bold mr-4">RS</div>
235
- <div>
236
- <h4 class="font-bold">Robert Smith</h4>
237
- <p class="text-gray-500">Facility Manager, Regional Medical Center</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
238
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
239
  </div>
240
  </div>
241
  </div>
@@ -243,83 +277,85 @@
243
  </section>
244
 
245
  <!-- Contact Section -->
246
- <section id="contact" class="py-20 bg-white">
247
- <div class="max-w-6xl mx-auto px-4">
248
  <div class="text-center mb-16">
249
- <h2 class="text-3xl font-bold text-gray-800 mb-4">Contact Me</h2>
250
- <p class="text-xl text-gray-600 max-w-2xl mx-auto">Get in touch for all your biomedical engineering needs</p>
 
 
 
251
  </div>
252
 
253
- <div class="md:flex">
254
- <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
255
- <div class="bg-blue-50 rounded-xl p-8 h-full">
256
- <h3 class="text-2xl font-bold text-blue-800 mb-6">Contact Information</h3>
257
-
258
- <div class="space-y-6">
259
- <div class="contact-card bg-white p-5 rounded-lg shadow-sm">
260
- <div class="flex items-center">
261
- <div class="bg-blue-100 text-blue-800 rounded-full w-12 h-12 flex items-center justify-center mr-4">
262
- <i class="fas fa-phone-alt"></i>
263
- </div>
264
- <div>
265
- <h4 class="font-bold text-gray-800">Phone</h4>
266
- <a href="tel:0792158087" class="text-blue-600 hover:text-blue-800">0792 158 087</a>
267
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
268
  </div>
269
  </div>
270
-
271
- <div class="contact-card bg-white p-5 rounded-lg shadow-sm">
272
- <div class="flex items-center">
273
- <div class="bg-blue-100 text-blue-800 rounded-full w-12 h-12 flex items-center justify-center mr-4">
274
- <i class="fas fa-envelope"></i>
275
- </div>
276
- <div>
277
- <h4 class="font-bold text-gray-800">Email</h4>
278
- <a href="mailto:michaelbmd01@gmail.com" class="text-blue-600 hover:text-blue-800">michaelbmd01@gmail.com</a>
279
- </div>
280
  </div>
281
  </div>
282
-
283
- <div class="contact-card bg-white p-5 rounded-lg shadow-sm">
284
- <div class="flex items-center">
285
- <div class="bg-blue-100 text-blue-800 rounded-full w-12 h-12 flex items-center justify-center mr-4">
286
- <i class="fas fa-clock"></i>
287
- </div>
288
- <div>
289
- <h4 class="font-bold text-gray-800">Working Hours</h4>
290
- <p class="text-gray-600">Monday - Friday: 8:00 AM - 5:00 PM</p>
291
- <p class="text-gray-600">Emergency services available 24/7</p>
292
- </div>
293
  </div>
294
  </div>
295
  </div>
296
  </div>
297
- </div>
298
-
299
- <div class="md:w-1/2">
300
- <div class="bg-gray-50 rounded-xl p-8 h-full">
301
- <h3 class="text-2xl font-bold text-gray-800 mb-6">Send a Message</h3>
302
- <form id="contactForm" class="space-y-4">
303
- <div>
304
- <label for="name" class="block text-gray-700 mb-2">Your Name</label>
305
- <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
306
- </div>
307
- <div>
308
- <label for="email" class="block text-gray-700 mb-2">Email Address</label>
309
- <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
310
  </div>
311
- <div>
312
- <label for="phone" class="block text-gray-700 mb-2">Phone Number</label>
313
- <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
314
  </div>
315
- <div>
316
- <label for="message" class="block text-gray-700 mb-2">Your Message</label>
317
- <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" required></textarea>
318
  </div>
319
- <button type="submit" class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition duration-300">
320
- Send Message
321
- </button>
322
- </form>
323
  </div>
324
  </div>
325
  </div>
@@ -327,100 +363,105 @@
327
  </section>
328
 
329
  <!-- Footer -->
330
- <footer class="bg-gray-900 text-white py-12">
331
- <div class="max-w-6xl mx-auto px-4">
332
- <div class="md:flex md:justify-between">
333
- <div class="mb-8 md:mb-0">
334
- <div class="flex items-center mb-4">
335
- <i class="fas fa-heartbeat text-3xl text-blue-400 mr-2"></i>
336
- <span class="font-bold text-xl">Michael Mati</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
337
  </div>
338
- <p class="text-gray-400 max-w-xs">Professional biomedical engineering services for healthcare facilities.</p>
339
  </div>
340
 
341
- <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
342
- <div>
343
- <h3 class="text-lg font-semibold mb-4">Services</h3>
344
- <ul class="space-y-2">
345
- <li><a href="#services" class="text-gray-400 hover:text-white">Equipment Maintenance</a></li>
346
- <li><a href="#services" class="text-gray-400 hover:text-white">Repair Services</a></li>
347
- <li><a href="#services" class="text-gray-400 hover:text-white">Consulting</a></li>
348
- </ul>
349
- </div>
350
-
351
- <div>
352
- <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
353
- <ul class="space-y-2">
354
- <li><a href="#about" class="text-gray-400 hover:text-white">About</a></li>
355
- <li><a href="#services" class="text-gray-400 hover:text-white">Services</a></li>
356
- <li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li>
357
- </ul>
358
- </div>
359
-
360
- <div>
361
- <h3 class="text-lg font-semibold mb-4">Connect</h3>
362
- <div class="flex space-x-4">
363
- <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-linkedin"></i></a>
364
- <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-twitter"></i></a>
365
- <a href="#" class="text-gray-400 hover:text-white text-xl"><i class="fab fa-facebook"></i></a>
366
- </div>
367
- </div>
368
  </div>
369
  </div>
370
 
371
- <div class="border-t border-gray-800 mt-10 pt-8 flex flex-col md:flex-row justify-between items-center">
372
- <p class="text-gray-400 mb-4 md:mb-0">© 2023 Michael Mati. All rights reserved.</p>
373
- <div class="flex space-x-6">
374
- <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
375
- <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
376
- </div>
377
  </div>
378
  </div>
379
  </footer>
380
 
381
  <script>
382
  // Mobile menu toggle
383
- const mobileMenuButton = document.querySelector('.mobile-menu-button');
384
- const mobileMenu = document.querySelector('.mobile-menu');
385
-
386
- mobileMenuButton.addEventListener('click', () => {
387
- mobileMenu.classList.toggle('hidden');
388
  });
389
-
390
  // Smooth scrolling for anchor links
391
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
392
  anchor.addEventListener('click', function (e) {
393
  e.preventDefault();
394
 
395
- document.querySelector(this.getAttribute('href')).scrollIntoView({
396
- behavior: 'smooth'
397
- });
398
 
399
- // Close mobile menu if open
400
- if (!mobileMenu.classList.contains('hidden')) {
 
401
  mobileMenu.classList.add('hidden');
 
 
 
 
 
 
402
  }
403
  });
404
  });
405
-
406
- // Form submission
407
- const contactForm = document.getElementById('contactForm');
408
-
409
- contactForm.addEventListener('submit', function(e) {
410
- e.preventDefault();
411
-
412
- // Get form values
413
- const name = document.getElementById('name').value;
414
- const email = document.getElementById('email').value;
415
- const phone = document.getElementById('phone').value;
416
- const message = document.getElementById('message').value;
417
-
418
- // Here you would typically send the form data to a server
419
- // For this example, we'll just show an alert
420
- alert(`Thank you, ${name}! Your message has been received. I will contact you soon at ${email} or ${phone}.`);
421
-
422
- // Reset form
423
- contactForm.reset();
424
  });
425
  </script>
426
  <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=Michael254/website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Eng Cyprian Mati - Civil Engineering Services</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
  .hero-gradient {
11
+ background: linear-gradient(135deg, rgba(15,23,42,0.9) 0%, rgba(2,6,23,0.95) 100%);
12
  }
13
  .service-card:hover {
14
  transform: translateY(-5px);
15
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
16
  }
17
+ .contact-input:focus {
18
+ outline: none;
19
+ box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
 
 
20
  }
21
  </style>
22
  </head>
23
+ <body class="bg-gray-900 text-gray-100 font-sans">
24
  <!-- Navigation -->
25
+ <nav class="bg-gray-800/90 backdrop-blur-md fixed w-full z-50 shadow-lg">
26
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
27
+ <div class="flex items-center justify-between h-16">
28
+ <div class="flex items-center">
29
+ <div class="flex-shrink-0">
30
+ <span class="text-blue-400 font-bold text-xl flex items-center">
31
+ <i class="fas fa-ruler-combined mr-2"></i>
32
+ Eng Cyprian Mati
33
+ </span>
34
  </div>
35
  </div>
36
+ <div class="hidden md:block">
37
+ <div class="ml-10 flex items-baseline space-x-4">
38
+ <a href="#home" class="px-3 py-2 rounded-md text-sm font-medium text-blue-300 hover:bg-gray-700 hover:text-white transition">Home</a>
39
+ <a href="#services" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition">Services</a>
40
+ <a href="#projects" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition">Projects</a>
41
+ <a href="#about" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition">About</a>
42
+ <a href="#contact" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white transition">Contact</a>
43
+ </div>
44
  </div>
45
  <div class="md:hidden">
46
+ <button id="mobile-menu-button" class="text-gray-300 hover:text-white focus:outline-none">
47
+ <i class="fas fa-bars text-xl"></i>
48
  </button>
49
  </div>
50
  </div>
51
  </div>
52
+
53
  <!-- Mobile menu -->
54
+ <div id="mobile-menu" class="hidden md:hidden bg-gray-800">
55
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
56
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-blue-300 hover:bg-gray-700 hover:text-white">Home</a>
57
+ <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Services</a>
58
+ <a href="#projects" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Projects</a>
59
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">About</a>
60
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Contact</a>
61
  </div>
62
  </div>
63
  </nav>
64
 
65
  <!-- Hero Section -->
66
+ <section id="home" class="hero-gradient min-h-screen flex items-center pt-16">
67
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
68
+ <div class="grid md:grid-cols-2 gap-12 items-center">
69
+ <div class="text-center md:text-left">
70
+ <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">
71
+ Building <span class="text-blue-400">Tomorrow's</span> Infrastructure
72
+ </h1>
73
+ <p class="text-lg md:text-xl text-gray-300 mb-8">
74
+ Professional civil engineering services tailored to your construction needs. Quality, precision, and innovation in every project.
75
+ </p>
76
+ <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
77
+ <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition shadow-lg hover:shadow-blue-500/20">
78
+ Get a Quote
79
+ </a>
80
+ <a href="#services" class="border border-blue-400 text-blue-400 hover:bg-blue-400 hover:text-gray-900 px-6 py-3 rounded-lg font-medium transition">
81
+ Our Services
82
+ </a>
83
  </div>
84
  </div>
85
+ <div class="hidden md:block">
86
+ <div class="relative">
87
+ <div class="absolute -top-6 -left-6 w-full h-full border-2 border-blue-400 rounded-xl"></div>
88
+ <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
89
+ alt="Construction Site"
90
+ class="relative rounded-xl shadow-2xl w-full h-auto">
91
+ </div>
92
  </div>
93
  </div>
94
  </div>
95
  </section>
96
 
97
  <!-- Services Section -->
98
+ <section id="services" class="py-20 bg-gray-800">
99
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
100
  <div class="text-center mb-16">
101
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-blue-400">Services</span></h2>
102
+ <div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div>
103
+ <p class="text-gray-400 max-w-2xl mx-auto">
104
+ Comprehensive civil engineering solutions designed to meet your project requirements with excellence and efficiency.
105
+ </p>
106
  </div>
107
 
108
  <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
109
  <!-- Service 1 -->
110
+ <div class="service-card bg-gray-700 rounded-xl p-8 transition duration-300 shadow-lg hover:shadow-blue-500/10">
111
+ <div class="text-blue-400 mb-4">
112
+ <i class="fas fa-road text-4xl"></i>
113
  </div>
114
+ <h3 class="text-xl font-bold mb-3">Road Construction</h3>
115
+ <p class="text-gray-400">
116
+ Professional design and construction of roads, highways, and pavements using quality materials and modern techniques.
117
+ </p>
 
 
 
 
 
 
 
 
 
 
 
 
118
  </div>
119
 
120
  <!-- Service 2 -->
121
+ <div class="service-card bg-gray-700 rounded-xl p-8 transition duration-300 shadow-lg hover:shadow-blue-500/10">
122
+ <div class="text-blue-400 mb-4">
123
+ <i class="fas fa-building text-4xl"></i>
124
  </div>
125
+ <h3 class="text-xl font-bold mb-3">Structural Engineering</h3>
126
+ <p class="text-gray-400">
127
+ Structural analysis and design for residential, commercial, and industrial buildings ensuring safety and durability.
128
+ </p>
 
 
 
 
 
 
 
 
 
 
 
 
129
  </div>
130
 
131
  <!-- Service 3 -->
132
+ <div class="service-card bg-gray-700 rounded-xl p-8 transition duration-300 shadow-lg hover:shadow-blue-500/10">
133
+ <div class="text-blue-400 mb-4">
134
+ <i class="fas fa-tint text-4xl"></i>
135
  </div>
136
+ <h3 class="text-xl font-bold mb-3">Water Systems</h3>
137
+ <p class="text-gray-400">
138
+ Design and implementation of water supply systems, drainage, and sewage systems for optimal functionality.
139
+ </p>
 
 
 
 
 
 
 
 
 
 
 
 
140
  </div>
141
+
142
+ <!-- Service 4 -->
143
+ <div class="service-card bg-gray-700 rounded-xl p-8 transition duration-300 shadow-lg hover:shadow-blue-500/10">
144
+ <div class="text-blue-400 mb-4">
145
+ <i class="fas fa-bridge text-4xl"></i>
146
+ </div>
147
+ <h3 class="text-xl font-bold mb-3">Bridge Construction</h3>
148
+ <p class="text-gray-400">
149
+ Expert bridge design and construction services for all types of bridges with focus on structural integrity.
150
+ </p>
151
+ </div>
152
+
153
+ <!-- Service 5 -->
154
+ <div class="service-card bg-gray-700 rounded-xl p-8 transition duration-300 shadow-lg hover:shadow-blue-500/10">
155
+ <div class="text-blue-400 mb-4">
156
+ <i class="fas fa-map-marked-alt text-4xl"></i>
157
+ </div>
158
+ <h3 class="text-xl font-bold mb-3">Site Planning</h3>
159
+ <p class="text-gray-400">
160
+ Comprehensive site evaluation and planning services to optimize land use and project feasibility.
161
+ </p>
162
  </div>
163
+
164
+ <!-- Service 6 -->
165
+ <div class="service-card bg-gray-700 rounded-xl p-8 transition duration-300 shadow-lg hover:shadow-blue-500/10">
166
+ <div class="text-blue-400 mb-4">
167
+ <i class="fas fa-hard-hat text-4xl"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
168
  </div>
169
+ <h3 class="text-xl font-bold mb-3">Construction Management</h3>
170
+ <p class="text-gray-400">
171
+ Professional project management services ensuring projects are completed on time and within budget.
172
+ </p>
173
  </div>
174
  </div>
175
  </div>
176
  </section>
177
 
178
+ <!-- Projects Section -->
179
+ <section id="projects" class="py-20 bg-gray-900">
180
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
181
  <div class="text-center mb-16">
182
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Our <span class="text-blue-400">Projects</span></h2>
183
+ <div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div>
184
+ <p class="text-gray-400 max-w-2xl mx-auto">
185
+ A showcase of our completed projects demonstrating our expertise and commitment to quality.
186
+ </p>
187
  </div>
188
 
189
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
190
+ <!-- Project 1 -->
191
+ <div class="group relative overflow-hidden rounded-xl shadow-lg">
192
+ <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
193
+ alt="Residential Complex"
194
+ class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
195
+ <div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 to-transparent flex items-end p-6">
196
+ <div>
197
+ <h3 class="text-xl font-bold text-white">Green Valley Residential Complex</h3>
198
+ <p class="text-blue-300">Nairobi, Kenya</p>
199
  </div>
200
  </div>
201
+ </div>
202
+
203
+ <!-- Project 2 -->
204
+ <div class="group relative overflow-hidden rounded-xl shadow-lg">
205
+ <img src="https://images.unsplash.com/photo-1605100804763-247f67b3557e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
206
+ alt="Highway Construction"
207
+ class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
208
+ <div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 to-transparent flex items-end p-6">
209
  <div>
210
+ <h3 class="text-xl font-bold text-white">Mombasa Highway Expansion</h3>
211
+ <p class="text-blue-300">Mombasa, Kenya</p>
212
  </div>
213
  </div>
214
  </div>
215
 
216
+ <!-- Project 3 -->
217
+ <div class="group relative overflow-hidden rounded-xl shadow-lg">
218
+ <img src="https://images.unsplash.com/photo-1600880292203-75704362ea02?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
219
+ alt="Commercial Building"
220
+ class="w-full h-64 object-cover transition duration-500 group-hover:scale-110">
221
+ <div class="absolute inset-0 bg-gradient-to-t from-gray-900/90 to-transparent flex items-end p-6">
222
+ <div>
223
+ <h3 class="text-xl font-bold text-white">Nairobi Business Plaza</h3>
224
+ <p class="text-blue-300">Nairobi CBD, Kenya</p>
225
  </div>
226
  </div>
227
+ </div>
228
+ </div>
229
+
230
+ <div class="text-center mt-12">
231
+ <a href="#" class="inline-flex items-center text-blue-400 hover:text-blue-300 font-medium">
232
+ View All Projects
233
+ <i class="fas fa-arrow-right ml-2"></i>
234
+ </a>
235
+ </div>
236
+ </div>
237
+ </section>
238
+
239
+ <!-- About Section -->
240
+ <section id="about" class="py-20 bg-gray-800">
241
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
242
+ <div class="grid md:grid-cols-2 gap-12 items-center">
243
+ <div class="order-2 md:order-1">
244
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">About <span class="text-blue-400">Eng Cyprian Mati</span></h2>
245
+ <div class="w-20 h-1 bg-blue-500 mb-6"></div>
246
+ <p class="text-gray-400 mb-4">
247
+ With over 15 years of experience in civil engineering, Eng Cyprian Mati has established himself as a trusted professional in the construction industry. His expertise spans across various sectors including residential, commercial, and infrastructure projects.
248
+ </p>
249
+ <p class="text-gray-400 mb-6">
250
+ Committed to excellence, Eng Mati combines technical knowledge with practical solutions to deliver projects that meet the highest standards of quality and safety. His approach focuses on sustainable and cost-effective engineering solutions.
251
+ </p>
252
+ <div class="space-y-3">
253
+ <div class="flex items-center">
254
+ <i class="fas fa-graduation-cap text-blue-400 mr-3"></i>
255
+ <span class="text-gray-300">BSc. Civil Engineering - University of Nairobi</span>
256
  </div>
257
+ <div class="flex items-center">
258
+ <i class="fas fa-award text-blue-400 mr-3"></i>
259
+ <span class="text-gray-300">Registered Engineer - EBK</span>
260
+ </div>
261
+ <div class="flex items-center">
262
+ <i class="fas fa-medal text-blue-400 mr-3"></i>
263
+ <span class="text-gray-300">10+ Industry Awards</span>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ <div class="order-1 md:order-2">
268
+ <div class="relative max-w-md mx-auto">
269
+ <div class="absolute -top-6 -right-6 w-full h-full border-2 border-blue-400 rounded-xl"></div>
270
+ <img src="https://images.unsplash.com/photo-1581093450022-4b2a5a0c0f9d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80"
271
+ alt="Eng Cyprian Mati"
272
+ class="relative rounded-xl shadow-2xl w-full h-auto">
273
  </div>
274
  </div>
275
  </div>
 
277
  </section>
278
 
279
  <!-- Contact Section -->
280
+ <section id="contact" class="py-20 bg-gray-900">
281
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
282
  <div class="text-center mb-16">
283
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Get In <span class="text-blue-400">Touch</span></h2>
284
+ <div class="w-20 h-1 bg-blue-500 mx-auto mb-6"></div>
285
+ <p class="text-gray-400 max-w-2xl mx-auto">
286
+ Have a project in mind? Contact us today for professional consultation and quote.
287
+ </p>
288
  </div>
289
 
290
+ <div class="grid md:grid-cols-2 gap-12">
291
+ <div>
292
+ <form class="space-y-6">
293
+ <div>
294
+ <label for="name" class="block text-sm font-medium text-gray-300 mb-1">Your Name</label>
295
+ <input type="text" id="name" class="contact-input w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-gray-300 focus:border-blue-500 transition">
296
+ </div>
297
+ <div>
298
+ <label for="email" class="block text-sm font-medium text-gray-300 mb-1">Email Address</label>
299
+ <input type="email" id="email" class="contact-input w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-gray-300 focus:border-blue-500 transition">
300
+ </div>
301
+ <div>
302
+ <label for="phone" class="block text-sm font-medium text-gray-300 mb-1">Phone Number</label>
303
+ <input type="tel" id="phone" class="contact-input w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-gray-300 focus:border-blue-500 transition">
304
+ </div>
305
+ <div>
306
+ <label for="message" class="block text-sm font-medium text-gray-300 mb-1">Your Message</label>
307
+ <textarea id="message" rows="5" class="contact-input w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 text-gray-300 focus:border-blue-500 transition"></textarea>
308
+ </div>
309
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition shadow-lg hover:shadow-blue-500/20">
310
+ Send Message
311
+ </button>
312
+ </form>
313
+ </div>
314
+
315
+ <div class="space-y-8">
316
+ <div class="bg-gray-800 rounded-xl p-8 shadow-lg">
317
+ <h3 class="text-xl font-bold text-blue-400 mb-4">Contact Information</h3>
318
+ <div class="space-y-4">
319
+ <div class="flex items-start">
320
+ <i class="fas fa-envelope text-blue-400 mt-1 mr-4"></i>
321
+ <div>
322
+ <h4 class="font-medium text-gray-300">Email</h4>
323
+ <a href="mailto:murikicyprian23@gmail.com" class="text-gray-400 hover:text-blue-400 transition">murikicyprian23@gmail.com</a>
324
  </div>
325
  </div>
326
+ <div class="flex items-start">
327
+ <i class="fas fa-phone-alt text-blue-400 mt-1 mr-4"></i>
328
+ <div>
329
+ <h4 class="font-medium text-gray-300">Phone</h4>
330
+ <a href="tel:0740598333" class="text-gray-400 hover:text-blue-400 transition">0740 598 333</a>
 
 
 
 
 
331
  </div>
332
  </div>
333
+ <div class="flex items-start">
334
+ <i class="fas fa-map-marker-alt text-blue-400 mt-1 mr-4"></i>
335
+ <div>
336
+ <h4 class="font-medium text-gray-300">Location</h4>
337
+ <p class="text-gray-400">Nairobi, Kenya</p>
 
 
 
 
 
 
338
  </div>
339
  </div>
340
  </div>
341
  </div>
342
+
343
+ <div class="bg-gray-800 rounded-xl p-8 shadow-lg">
344
+ <h3 class="text-xl font-bold text-blue-400 mb-4">Business Hours</h3>
345
+ <div class="space-y-3">
346
+ <div class="flex justify-between">
347
+ <span class="text-gray-300">Monday - Friday</span>
348
+ <span class="text-gray-400">8:00 AM - 5:00 PM</span>
 
 
 
 
 
 
349
  </div>
350
+ <div class="flex justify-between">
351
+ <span class="text-gray-300">Saturday</span>
352
+ <span class="text-gray-400">9:00 AM - 1:00 PM</span>
353
  </div>
354
+ <div class="flex justify-between">
355
+ <span class="text-gray-300">Sunday</span>
356
+ <span class="text-gray-400">Closed</span>
357
  </div>
358
+ </div>
 
 
 
359
  </div>
360
  </div>
361
  </div>
 
363
  </section>
364
 
365
  <!-- Footer -->
366
+ <footer class="bg-gray-800/90 backdrop-blur-md py-12 border-t border-gray-700">
367
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
368
+ <div class="grid md:grid-cols-3 gap-8">
369
+ <div>
370
+ <h3 class="text-xl font-bold text-blue-400 mb-4 flex items-center">
371
+ <i class="fas fa-ruler-combined mr-2"></i>
372
+ Eng Cyprian Mati
373
+ </h3>
374
+ <p class="text-gray-400 mb-4">
375
+ Professional civil engineering services with a commitment to quality and innovation.
376
+ </p>
377
+ <div class="flex space-x-4">
378
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition">
379
+ <i class="fab fa-facebook-f"></i>
380
+ </a>
381
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition">
382
+ <i class="fab fa-twitter"></i>
383
+ </a>
384
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition">
385
+ <i class="fab fa-linkedin-in"></i>
386
+ </a>
387
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition">
388
+ <i class="fab fa-instagram"></i>
389
+ </a>
390
  </div>
 
391
  </div>
392
 
393
+ <div>
394
+ <h3 class="text-lg font-bold text-gray-300 mb-4">Quick Links</h3>
395
+ <ul class="space-y-2">
396
+ <li><a href="#home" class="text-gray-400 hover:text-blue-400 transition">Home</a></li>
397
+ <li><a href="#services" class="text-gray-400 hover:text-blue-400 transition">Services</a></li>
398
+ <li><a href="#projects" class="text-gray-400 hover:text-blue-400 transition">Projects</a></li>
399
+ <li><a href="#about" class="text-gray-400 hover:text-blue-400 transition">About</a></li>
400
+ <li><a href="#contact" class="text-gray-400 hover:text-blue-400 transition">Contact</a></li>
401
+ </ul>
402
+ </div>
403
+
404
+ <div>
405
+ <h3 class="text-lg font-bold text-gray-300 mb-4">Newsletter</h3>
406
+ <p class="text-gray-400 mb-4">
407
+ Subscribe to our newsletter for the latest updates and project insights.
408
+ </p>
409
+ <form class="flex">
410
+ <input type="email" placeholder="Your email" class="bg-gray-700 text-gray-300 px-4 py-2 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-blue-500 w-full">
411
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg transition">
412
+ <i class="fas fa-paper-plane"></i>
413
+ </button>
414
+ </form>
 
 
 
 
 
415
  </div>
416
  </div>
417
 
418
+ <div class="border-t border-gray-700 mt-12 pt-8 text-center">
419
+ <p class="text-gray-500 text-sm">
420
+ &copy; 2023 Eng Cyprian Mati - Civil Engineering Services. All rights reserved.
421
+ </p>
 
 
422
  </div>
423
  </div>
424
  </footer>
425
 
426
  <script>
427
  // Mobile menu toggle
428
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
429
+ const menu = document.getElementById('mobile-menu');
430
+ menu.classList.toggle('hidden');
 
 
431
  });
432
+
433
  // Smooth scrolling for anchor links
434
  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
435
  anchor.addEventListener('click', function (e) {
436
  e.preventDefault();
437
 
438
+ const targetId = this.getAttribute('href');
439
+ const targetElement = document.querySelector(targetId);
 
440
 
441
+ if (targetElement) {
442
+ // Close mobile menu if open
443
+ const mobileMenu = document.getElementById('mobile-menu');
444
  mobileMenu.classList.add('hidden');
445
+
446
+ // Scroll to target
447
+ window.scrollTo({
448
+ top: targetElement.offsetTop - 80,
449
+ behavior: 'smooth'
450
+ });
451
  }
452
  });
453
  });
454
+
455
+ // Add shadow to navbar on scroll
456
+ window.addEventListener('scroll', function() {
457
+ const nav = document.querySelector('nav');
458
+ if (window.scrollY > 50) {
459
+ nav.classList.add('shadow-xl');
460
+ nav.classList.remove('shadow-lg');
461
+ } else {
462
+ nav.classList.remove('shadow-xl');
463
+ nav.classList.add('shadow-lg');
464
+ }
 
 
 
 
 
 
 
 
465
  });
466
  </script>
467
  <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=Michael254/website" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -1,3 +1,4 @@
1
  create a website for my biomedical engineering services with my name 'Michael Mati' and Tel; 0792158087
2
  Create a website for my biomedical engineering services with my Name 'Michael Mati' ,email;'michaelbmd01@gmail.com' ,phone; '0792158087'
3
- create a website for my biomedical engineering services with my name 'Michael Mati',email; 'michaelbmd01@gmail.com',phone; '0792158087'
 
 
1
  create a website for my biomedical engineering services with my name 'Michael Mati' and Tel; 0792158087
2
  Create a website for my biomedical engineering services with my Name 'Michael Mati' ,email;'michaelbmd01@gmail.com' ,phone; '0792158087'
3
+ create a website for my biomedical engineering services with my name 'Michael Mati',email; 'michaelbmd01@gmail.com',phone; '0792158087'
4
+ create a website for my Civil Engineering services include my name 'Eng Cyprian Mati' ,tel;'0740598333' ,email; 'murikicyprian23@gmail.com'.Let the background colour be a dark colour