-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
373 lines (371 loc) · 42.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Petcare</title>
<link rel="shortcut icon" href="images/logo.webp" type="image/x-icon">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<nav class="navbar navbar-expand-lg pt-3 ps-4 header-area header-transparent fixed-top bg-white">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="images/logo.webp" alt=""></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0 gap-5 me-5 dropdownmenu">
<li class="nav-item">
<a class="text-decoration-none nav-link" style="font-family: 'Muli'; color: #112957" href="#">Home</a>
</li>
<li class="nav-item">
<a class="text-decoration-none nav-link" style="font-family: 'Muli'; color: #112957" href="#">About</a>
</li>
<li class="nav-item">
<a class="text-decoration-none nav-link" style="font-family: 'Muli'; color: #112957" href="#">Services</a>
</li>
<li><a href="#" class="nav-link" style="font-family: 'Muli'; color: #112957">Blog</a>
<ul id="submenu">
<li class="ps-2"><a href="#" class="nav-link" style="font-family: 'Muli'; color: #112957;">Blog</a></li>
<li class="ps-2"><a href="#" class="nav-link" style="font-family: 'Muli'; color: #112957;">Blog Details</a></li>
<li class="ps-2"><a href="#" class="nav-link" style="font-family: 'Muli'; color: #112957;">Elements</a></li>
</ul>
</li>
<li class="nav-item">
<a class="text-decoration-none nav-link" style="font-family: 'Muli'; color: #112957" href="#">Contact</a>
</li>
</ul>
<button class="rounded-5 border-0 text-white p-3 px-5 ms-5 phones">+92 312 2607520</button>
</div>
</div>
</nav>
<div class="pink">
<div class="container m-0 p-0">
<div class="row gap-0">
<div class="col-2 m-0 p-0 Screll h-100 d-lg-flex d-none" style="margin-top: 25% !important; margin-left: -3% !important;">
<p class="text-uppercase text-secondary fw-bold" style="font-size: 13px; font-family: 'Roboto';">Screll</p>
<div class="d-flex"><p class="dash">______ <span class="text-secondary">___</span></p></div>
</div>
<div class="col-7 ms-lg-0 groom-div" style="margin-left: -4%;">
<div class="play d-none d-lg-block bg-black border border-black rounded-circle text-center">
<i class="fa-solid fa-play text-white fs-3"></i>
</div>
<p class="mt-5 fw-medium groom">We help to groom your pet</p>
<h1 class="pets" style="font-size: 3.8rem;">We Care Your Pets.</h1>
<div class="d-flex"><p class="text-secondary" style="width: 70%;">Consectetur adipiscing elit, sed do eiusmod tempor <span class="d-lg-bolck d-none"> incididunt ut labore et dolore magna sectetur adipisci.</span></p></div>
<br>
<a href="#" class="text-decoration-none text-black fw-bold contact" style="font-family: 'Roboto'; letter-spacing: 0.8px; font-size: 17px;">Contact Now <i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
</div>
</div>
<div class="text-center" style="padding-top: 10%;">
<p class="fw-bold" style="font-family: 'Roboto'; letter-spacing: .5px;">Our Professional Services</p>
<h1 class="fw-bolder text-black best" style="font-size: 3rem; font-family: 'Roboto'; letter-spacing: 1px;">Best Pet Care Services</h1>
<div class="d-lg-flex d-md-flex d-block justify-content-evenly mt-5">
<div class="card py-5 px-4 pet-card" style="width: 23rem; background-color: #fff7fe; border: none;">
<div class="card-body">
<div style="background-color: #ffedf2; width: 30%;" class="m-auto py-4 rounded-circle dogs-icons d-none d-lg-block" ><i class="fa-solid fa-dog fs-1" style="color: #ff7474;"></i></div>
<p class="card-title pt-5 pet-head" style="font-family: 'Muli'; font-size: 18px;">Pet Boarding</p>
<p class="card-text text-secondary" style="font-family: 'Roboto'; font-size: 16px;">consectetur adipiscing elit, serfd dgo eiusmod tempor incididunt ut ore et dolore magna aliqua.</p>
</div>
</div>
<div class="card py-5 px-4 pet-card" style="width: 23rem; background-color: #fff7fe; border: none;">
<div class="card-body">
<div style="background-color: #ffedf2; width: 30%;" class="m-auto py-3 rounded-circle dogs-icons d-none d-lg-block"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50" x="0" y="0" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><path d="M268.949 170.658c-7.848 18.019-18.503 27.575-18.589 27.652l-.08.07a35.313 35.313 0 0 0-11.716 26.25c0 11.164 5.102 21.455 13.997 28.236 9.454 7.207 21.979 9.617 33.505 6.452 4.544-1.248 9.83-1.908 15.288-1.908 5.549 0 10.911.681 15.508 1.97a38.227 38.227 0 0 0 10.33 1.422 38.344 38.344 0 0 0 21.14-6.361c8.718-5.758 14.474-14.849 15.791-24.942l.001-.006c1.627-12.539-3.19-24.604-12.9-32.378-3.354-3.389-11.145-12.209-17.352-26.461-5.485-13.155-18.221-21.65-32.463-21.65-14.24-.001-26.973 8.496-32.46 21.654zm13.829 5.81c3.141-7.572 10.454-12.464 18.631-12.464 8.18 0 15.494 4.891 18.634 12.461l.05.117c7.432 17.09 17.057 27.698 20.851 31.466.214.212.44.412.678.597 5.733 4.463 8.585 11.536 7.628 18.917-.766 5.856-4.027 10.958-9.184 14.364a23.322 23.322 0 0 1-19.153 3.012c-5.896-1.653-12.66-2.527-19.558-2.527-6.781 0-13.441.845-19.262 2.443-7.043 1.935-14.683.47-20.438-3.917-5.218-3.978-8.091-9.769-8.091-16.308a20.288 20.288 0 0 1 6.71-15.063c1.062-.939 13.388-12.13 22.454-32.981zM226.316 133.513c-5.843-1.861-11.823-1.454-16.837 1.144-12.256 6.345-15.694 23.267-7.826 38.528 4.302 8.34 11.258 14.553 19.084 17.047 2.416.77 4.854 1.152 7.239 1.152 3.383 0 6.658-.77 9.6-2.292 12.256-6.344 15.694-23.266 7.827-38.525v-.001c-4.302-8.345-11.259-14.561-19.087-17.053zm4.365 42.256c-1.865.965-3.961.625-5.39.169-4-1.274-7.854-4.875-10.307-9.63-4.224-8.192-2.657-16.236 1.392-18.332.878-.455 1.808-.621 2.694-.621.996 0 1.938.208 2.694.449 4 1.274 7.853 4.875 10.307 9.634 4.223 8.193 2.658 16.236-1.39 18.331zM364.915 189.09c2.943 1.523 6.217 2.292 9.601 2.292 2.384 0 4.823-.382 7.238-1.152 7.826-2.493 14.782-8.707 19.086-17.048 7.867-15.26 4.429-32.182-7.825-38.525-5.017-2.599-10.996-3.006-16.84-1.145-7.827 2.493-14.784 8.708-19.087 17.051v.001c-7.867 15.26-4.429 32.182 7.827 38.526zm5.505-31.651c2.454-4.758 6.307-8.36 10.308-9.634 1.428-.454 3.521-.795 5.39.172 4.047 2.095 5.614 10.139 1.392 18.33-2.454 4.756-6.308 8.357-10.309 9.632-1.429.455-3.524.796-5.39-.17-4.047-2.095-5.614-10.138-1.391-18.33zM271.509 141.059c6.899 0 13.155-4.023 17.163-11.039 3.485-6.103 4.948-14.132 4.013-22.029-1.83-15.52-12.463-27.676-24.209-27.676-6.899 0-13.153 4.021-17.159 11.032-3.483 6.099-4.946 14.129-4.013 22.027 1.829 15.524 12.461 27.685 24.205 27.685zm-7.167-42.272c.465-.814 2.139-3.472 4.134-3.472 3.03 0 8.29 5.757 9.313 14.434v.005c.559 4.707-.242 9.502-2.141 12.826-.467.816-2.143 3.479-4.139 3.479-3.028 0-8.285-5.76-9.309-14.443-.556-4.711.243-9.507 2.142-12.829zM331.493 141.059c11.744 0 22.376-12.161 24.205-27.683.934-7.899-.529-15.928-4.013-22.03-4.006-7.011-10.26-11.032-17.16-11.032-11.746 0-22.379 12.157-24.209 27.676-.936 7.896.527 15.926 4.015 22.03 4.007 7.016 10.263 11.039 17.162 11.039zm-6.28-31.305v-.005c1.022-8.677 6.282-14.434 9.313-14.434 1.996 0 3.67 2.658 4.135 3.471 1.897 3.323 2.698 8.12 2.142 12.832-1.023 8.681-6.28 14.441-9.309 14.441-1.996 0-3.672-2.663-4.138-3.478-1.9-3.326-2.702-8.121-2.143-12.827zM72.428 449.907c0 4.143 3.358 7.5 7.5 7.5s7.5-3.357 7.5-7.5c0-7.69 6.239-13.946 13.907-13.946s13.907 6.256 13.907 13.946c0 7.689-6.239 13.945-13.907 13.945-4.142 0-7.5 3.357-7.5 7.5s3.358 7.5 7.5 7.5c15.939 0 28.907-12.984 28.907-28.945s-12.967-28.946-28.907-28.946-28.907 12.985-28.907 28.946z" style="fill: #ff7474;" opacity="1" data-original="#000000" class="dogs-icons"></path><path d="M472.659 181.01a7.5 7.5 0 0 0-7.5-7.5h-7.201V59.086c0-17.647-13.326-32.236-30.429-34.204C422.004 16.884 408.384 0 391.871 0c-17.932 0-32.52 14.609-32.52 32.565s14.588 32.565 32.52 32.565c16.625 0 30.318-17.115 35.77-25.045 8.742 1.876 15.317 9.683 15.317 19V173.51h-7.799a7.5 7.5 0 0 0-7.5 7.5c0 69.847-56.709 126.671-126.414 126.671-47.075 0-89.978-26.02-111.966-67.905a7.5 7.5 0 0 0-13.281 6.971c24.588 46.837 72.58 75.933 125.248 75.933 75.463 0 137.311-59.529 141.219-134.171h15.019c-3.922 82.949-72.501 149.229-156.237 149.229-83.735 0-152.313-66.28-156.236-149.229h15.02a141.653 141.653 0 0 0 3.927 26.529 7.5 7.5 0 0 0 14.562-3.598 127.006 127.006 0 0 1-3.686-30.431 7.5 7.5 0 0 0-7.5-7.5h-8.452V59.086c0-9.317 6.575-17.124 15.317-19 5.452 7.93 19.145 25.045 35.77 25.045 17.931 0 32.519-14.609 32.519-32.565S227.899 0 209.968 0c-16.513 0-30.133 16.885-35.659 24.883-17.103 1.968-30.429 16.557-30.429 34.204V173.51h-6.548a7.5 7.5 0 0 0-7.5 7.5c0 92.174 72.861 167.62 163.913 171.567v101.849c0 23.476-19.056 42.574-42.478 42.574s-42.478-19.099-42.478-42.574v-59.112c0-31.746-25.784-57.574-57.478-57.574-29.294 0-53.54 22.065-57.043 50.474-30.869 3.523-54.929 29.847-54.929 61.693 0 34.238 27.811 62.093 61.994 62.093s61.994-27.854 61.994-62.093c0-31.5-23.539-57.596-53.924-61.57 3.331-20.168 20.855-35.598 41.907-35.598 23.422 0 42.478 19.099 42.478 42.574v59.112c0 31.746 25.784 57.574 57.478 57.574s57.478-25.828 57.478-57.574V352.577c91.053-3.947 163.915-79.392 163.915-171.567zM391.871 50.131c-9.66 0-17.52-7.88-17.52-17.565S382.211 15 391.871 15c8.307 0 17.75 10.68 22.714 17.579-5.314 7.395-14.801 17.552-22.714 17.552zM209.968 15c9.66 0 17.519 7.88 17.519 17.565s-7.859 17.565-17.519 17.565c-8.302 0-17.738-10.666-22.705-17.565C192.234 25.662 201.668 15 209.968 15zm-61.639 434.907c0 25.967-21.082 47.093-46.994 47.093s-46.994-21.126-46.994-47.093c0-25.968 21.082-47.094 46.994-47.094s46.994 21.126 46.994 47.094z" style="fill: #ff7474;" opacity="1" data-original="#000000" class="dogs-icons"></path></g></svg></div>
<p class="card-title pt-5 pet-head" style="font-family: 'Muli'; font-size: 18px;">Pet Treatment</p>
<p class="card-text text-secondary" style="font-family: 'Roboto'; font-size: 16px;">consectetur adipiscing elit, serfd dgo eiusmod tempor incididunt ut ore et dolore magna aliqua.</p>
</div>
</div>
<div class="card py-5 px-4 pet-card" style="width: 23rem; background-color: #fff7fe; border: none;">
<div class="card-body">
<div style="background-color: #ffedf2; width: 30%;" class="m-auto py-3 rounded-circle dogs-icons d-none d-lg-block"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50" x="0" y="0" viewBox="0 0 60 60" style="enable-background:new 0 0 512 512" xml:space="preserve" class=""><g><g fill="#ff7474" class="dogs-icon" fill-rule="nonzero"><path d="M1 60a1 1 0 0 0 .707-.293l7.21-7.207a3.006 3.006 0 0 0 4.242 0l2.655-2.655a10.98 10.98 0 0 0 12.193-2.3l2.382-2.383c.03.074.051.149.084.222A4.04 4.04 0 0 0 33.863 48a2.4 2.4 0 0 0 .995-.213 2.735 2.735 0 0 0 1.5-2.135 4.855 4.855 0 0 0-.42-2.748 5 5 0 0 0-1.43-1.855l1.707-1.708c.224.9.67 1.73 1.3 2.412A3.761 3.761 0 0 0 40.223 43c.126 0 .253-.008.378-.022a3.693 3.693 0 0 0 2.717-1.9 5.989 5.989 0 0 0-.8-6.81 4.4 4.4 0 0 0-.656-.561l5.238-5.252a3 3 0 1 0 4.242-4.243l-4.95-4.949 4.243-4.243 2.828 2.828a3 3 0 0 0 4.243 0l1.414-1.414a3 3 0 0 0 0-4.243L47.808.879a3.074 3.074 0 0 0-4.243 0l-1.416 1.414a3.006 3.006 0 0 0 0 4.243l2.829 2.828-4.242 4.242-4.95-4.95a3 3 0 0 0-4.242 4.244l-2.823 2.823h-.006v.006l-2.819 2.819-2.829 2.832-.008.005-.006.008-8.471 8.471-.009.006-.005.009-2.114 2.113a10.981 10.981 0 0 0-2.3 12.195L7.5 46.84a3 3 0 0 0 0 4.243l-7.21 7.21A1 1 0 0 0 1 60zm33.382-14.669a.821.821 0 0 1-.351.635c-.376.168-1.233-.3-1.738-1.407a2.9 2.9 0 0 1-.268-1.6.819.819 0 0 1 .352-.634.388.388 0 0 1 .168-.033c.194.012.38.076.541.186.455.311.811.746 1.027 1.253a2.9 2.9 0 0 1 .269 1.6zm7.207-5.264a1.517 1.517 0 0 1-2.624.308 3.995 3.995 0 0 1-.521-4.426 1.743 1.743 0 0 1 1.222-.92c.05-.006.1-.009.15-.009.483.032.934.255 1.252.621a3.995 3.995 0 0 1 .521 4.426zm1.975-36.359 1.416-1.416a1 1 0 0 1 1.414 0l11.313 11.314a1 1 0 0 1 0 1.415l-1.414 1.414a1.022 1.022 0 0 1-1.414 0l-5.657-5.657L47.1 8.657l-3.535-3.535a1 1 0 0 1-.001-1.414zm2.829 7.07 2.829 2.829-4.242 4.243-2.829-2.829zm-13.435-.707a1 1 0 0 1 1.415 0l5.655 5.656 2.122 2.121 7.778 7.779a1 1 0 0 1 0 1.414 1.024 1.024 0 0 1-1.413 0l-.707-.707-14.14-14.14-.7-.7a1 1 0 0 1-.01-1.423zm12.728 16.97-6 6c-.086 0-.172-.013-.258 0a3.267 3.267 0 0 0-.639.16 14.256 14.256 0 0 1-8.263-2.05 27.96 27.96 0 0 0-10.524-3.884l3.761-3.761 2.121 2.12a1 1 0 0 0 1.416-1.413l-2.121-2.12 1.421-1.414 2.12 2.12a1 1 0 0 0 1.414-1.414l-2.12-2.121 1.414-1.414 2.12 2.121a1 1 0 0 0 1.414-1.414l-2.12-2.121 2.121-2.121zm-33.071 7.941 1.958 1.959a1 1 0 1 0 1.414-1.414l-2.12-2.12 1.415-1.414 2.12 2.12a1 1 0 1 0 1.414-1.413L16.7 30.578l1.525-1.525c3.99.384 7.84 1.682 11.248 3.794a15.623 15.623 0 0 0 7.149 2.3 5.291 5.291 0 0 0-.515 1.472l-3.692 3.692a2.368 2.368 0 0 0-.861.188 2.736 2.736 0 0 0-1.5 2.135v.039l-3.457 3.457a9 9 0 0 1-13.982-11.148zm-3.7 13.273L11.17 46c.76 1.11 1.72 2.07 2.83 2.83l-2.254 2.253a1.029 1.029 0 0 1-1.414 0l-1.415-1.415a1 1 0 0 1 0-1.413zM35 54c0 4.429 3.232 6 6 6a4.868 4.868 0 0 0 2.447-.6 3.25 3.25 0 0 1 3.106 0A4.868 4.868 0 0 0 49 60c2.768 0 6-1.571 6-6 0-4.58-5.421-10-10-10s-10 5.42-10 10zm18 0a3.669 3.669 0 0 1-4 4 2.9 2.9 0 0 1-1.553-.4 5.251 5.251 0 0 0-4.894 0A2.9 2.9 0 0 1 41 58a3.669 3.669 0 0 1-4-4c0-3.439 4.561-8 8-8s8 4.561 8 8z" fill="#ff7474" opacity="1" data-original="#000000" class="dogs-icons"></path><path d="M53.318 34.924a3.5 3.5 0 0 0-5.8-.682 5.987 5.987 0 0 0-.8 6.81 3.686 3.686 0 0 0 2.717 1.9c.125.015.251.022.377.022a3.769 3.769 0 0 0 2.709-1.242 5.989 5.989 0 0 0 .8-6.81zM52 38.222a3.775 3.775 0 0 1-.935 2.133 1.516 1.516 0 0 1-2.624-.308 4 4 0 0 1 .521-4.426c.319-.366.77-.59 1.255-.621.05 0 .1.003.149.009.528.102.979.441 1.223.92.375.702.52 1.504.411 2.293zM58.451 40.5a2.737 2.737 0 0 0-2.594.277 5.128 5.128 0 0 0-2.212 4.873c.106.92.67 1.723 1.5 2.135a2.4 2.4 0 0 0 .994.213 4.04 4.04 0 0 0 3.39-2.615c.406-.855.552-1.81.421-2.748a2.737 2.737 0 0 0-1.499-2.135zm-.744 4.056c-.506 1.111-1.371 1.575-1.737 1.407a.819.819 0 0 1-.352-.635 2.9 2.9 0 0 1 .268-1.6 2.893 2.893 0 0 1 1.027-1.253c.16-.11.347-.174.541-.186a.411.411 0 0 1 .169.033c.209.145.339.38.351.634a2.9 2.9 0 0 1-.267 1.603z" fill="#ff7474" opacity="1" data-original="#000000" class="dogs-icons"></path></g></g></svg></div>
<p class="card-title pt-5 pet-head" style="font-family: 'Muli'; font-size: 18px;">Vaccinations</p>
<p class="card-text text-secondary" style="font-family: 'Roboto'; font-size: 16px;">consectetur adipiscing elit, serfd dgo eiusmod tempor incididunt ut ore et dolore magna aliqua.</p>
</div>
</div>
</div>
</div>
<div class="succ ps-5 container-fluid" style="margin-top: 10%;">
<div class="row">
<div class="col-6 d-flex pe-0 me-0" style="margin-top: 40%;">
<div class="col-6 py-2 px-5 text-white h-100 d-none d-xl-block d-xxl-block d-lg-block" style="background-color: #1A1F50; vertical-align: bottom !important;">
<div class="d-flex">
<div class="mt-2 ms-5">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="39px" style="vertical-align: middle; overflow: hidden;"><path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M24.000,19.000 C21.791,19.000 20.000,17.209 20.000,15.000 C20.000,12.790 21.791,11.000 24.000,11.000 C26.209,11.000 28.000,12.790 28.000,15.000 C28.000,17.209 26.209,19.000 24.000,19.000 ZM24.000,8.000 C21.791,8.000 20.000,6.209 20.000,4.000 C20.000,1.790 21.791,-0.001 24.000,-0.001 C26.209,-0.001 28.000,1.790 28.000,4.000 C28.000,6.209 26.209,8.000 24.000,8.000 ZM14.000,38.999 C11.791,38.999 10.000,37.209 10.000,35.000 C10.000,32.791 11.791,31.000 14.000,31.000 C16.209,31.000 18.000,32.791 18.000,35.000 C18.000,37.209 16.209,38.999 14.000,38.999 ZM14.000,29.000 C11.791,29.000 10.000,27.209 10.000,25.000 C10.000,22.791 11.791,21.000 14.000,21.000 C16.209,21.000 18.000,22.791 18.000,25.000 C18.000,27.209 16.209,29.000 14.000,29.000 ZM14.000,19.000 C11.791,19.000 10.000,17.209 10.000,15.000 C10.000,12.790 11.791,11.000 14.000,11.000 C16.209,11.000 18.000,12.790 18.000,15.000 C18.000,17.209 16.209,19.000 14.000,19.000 ZM14.000,8.000 C11.791,8.000 10.000,6.209 10.000,4.000 C10.000,1.790 11.791,-0.001 14.000,-0.001 C16.209,-0.001 18.000,1.790 18.000,4.000 C18.000,6.209 16.209,8.000 14.000,8.000 ZM4.000,29.000 C1.791,29.000 -0.000,27.209 -0.000,25.000 C-0.000,22.791 1.791,21.000 4.000,21.000 C6.209,21.000 8.000,22.791 8.000,25.000 C8.000,27.209 6.209,29.000 4.000,29.000 ZM4.000,19.000 C1.791,19.000 -0.000,17.209 -0.000,15.000 C-0.000,12.790 1.791,11.000 4.000,11.000 C6.209,11.000 8.000,12.790 8.000,15.000 C8.000,17.209 6.209,19.000 4.000,19.000 ZM4.000,8.000 C1.791,8.000 -0.000,6.209 -0.000,4.000 C-0.000,1.790 1.791,-0.001 4.000,-0.001 C6.209,-0.001 8.000,1.790 8.000,4.000 C8.000,6.209 6.209,8.000 4.000,8.000 ZM24.000,21.000 C26.209,21.000 28.000,22.791 28.000,25.000 C28.000,27.209 26.209,29.000 24.000,29.000 C21.791,29.000 20.000,27.209 20.000,25.000 C20.000,22.791 21.791,21.000 24.000,21.000 Z"></path></svg>
</div>
<div class="text-center ms-3">
<h1 class="fw-bolder" style="font-family: 'Muli2';">354</h1>
</div>
</div>
<p class="text-center w-50 m-auto" style="line-height: 200%;">Success Treatment</p>
</div>
<div class="col-6 py-2 px-5 text-white h-100 d-none d-xl-block d-xxl-block d-lg-block" style="background-color: #EB4916; vertical-align: bottom !important;">
<div class="d-flex">
<div class="mt-2 ms-5">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="28px" height="39px" style="vertical-align: middle; overflow: hidden;"><path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M24.000,19.000 C21.791,19.000 20.000,17.209 20.000,15.000 C20.000,12.790 21.791,11.000 24.000,11.000 C26.209,11.000 28.000,12.790 28.000,15.000 C28.000,17.209 26.209,19.000 24.000,19.000 ZM24.000,8.000 C21.791,8.000 20.000,6.209 20.000,4.000 C20.000,1.790 21.791,-0.001 24.000,-0.001 C26.209,-0.001 28.000,1.790 28.000,4.000 C28.000,6.209 26.209,8.000 24.000,8.000 ZM14.000,38.999 C11.791,38.999 10.000,37.209 10.000,35.000 C10.000,32.791 11.791,31.000 14.000,31.000 C16.209,31.000 18.000,32.791 18.000,35.000 C18.000,37.209 16.209,38.999 14.000,38.999 ZM14.000,29.000 C11.791,29.000 10.000,27.209 10.000,25.000 C10.000,22.791 11.791,21.000 14.000,21.000 C16.209,21.000 18.000,22.791 18.000,25.000 C18.000,27.209 16.209,29.000 14.000,29.000 ZM14.000,19.000 C11.791,19.000 10.000,17.209 10.000,15.000 C10.000,12.790 11.791,11.000 14.000,11.000 C16.209,11.000 18.000,12.790 18.000,15.000 C18.000,17.209 16.209,19.000 14.000,19.000 ZM14.000,8.000 C11.791,8.000 10.000,6.209 10.000,4.000 C10.000,1.790 11.791,-0.001 14.000,-0.001 C16.209,-0.001 18.000,1.790 18.000,4.000 C18.000,6.209 16.209,8.000 14.000,8.000 ZM4.000,29.000 C1.791,29.000 -0.000,27.209 -0.000,25.000 C-0.000,22.791 1.791,21.000 4.000,21.000 C6.209,21.000 8.000,22.791 8.000,25.000 C8.000,27.209 6.209,29.000 4.000,29.000 ZM4.000,19.000 C1.791,19.000 -0.000,17.209 -0.000,15.000 C-0.000,12.790 1.791,11.000 4.000,11.000 C6.209,11.000 8.000,12.790 8.000,15.000 C8.000,17.209 6.209,19.000 4.000,19.000 ZM4.000,8.000 C1.791,8.000 -0.000,6.209 -0.000,4.000 C-0.000,1.790 1.791,-0.001 4.000,-0.001 C6.209,-0.001 8.000,1.790 8.000,4.000 C8.000,6.209 6.209,8.000 4.000,8.000 ZM24.000,21.000 C26.209,21.000 28.000,22.791 28.000,25.000 C28.000,27.209 26.209,29.000 24.000,29.000 C21.791,29.000 20.000,27.209 20.000,25.000 C20.000,22.791 21.791,21.000 24.000,21.000 Z"></path></svg>
</div>
<div class="text-center ms-3">
<h1 class="fw-bolder" style="font-family: 'Muli2';">354</h1>
</div>
</div>
<p class="text-center w-50 m-auto" style="line-height: 200%;">Success Treatment</p>
</div>
</div>
<div class="col-6 float-end" style="background-color: #F8DADB; padding-top: 8%;padding-bottom: 8%;padding-left: 5.5%;padding-right: 5.5%;">
<h1 class="fw-bolder text-black commit" style="font-size: 3rem;">We are commited for
better service</h1>
<p class="mt-5 fs-5 fw-bold d-sm-none d-none d-xxl-block d-xl-block d-lg-block" style="font-family: 'Roboto'; letter-spacing: .1px;">Mollit anim laborum duis adseu dolor iuyn voluptcate velit ess cillum dolore egru lofrre dsu.</p>
<p class="text-secondary d-lg-block d-xl-block d-xxl-block d-none" style="line-height: 160%;">Mollit anim laborum.Dvcuis aute serunt iruxvfg dhjkolohr indd re voluptate velit esscillumlore eu quife nrulla parihatur. Excghcepteur sfwsignjnt occa cupidatat non aute iruxvfg dhjinulpadeserunt moll.</p>
<button class="bg-black text-white rounded-5 py-3 px-lg-5 px-md-5 px-sm-4 px-3 border-0 mt-5 text-capitalize fw-bold butn3 overflow-hidden position-relative" style="font-size: 13px; font-family: 'Roboto'; letter-spacing: 1.5px; ">Read more</button>
</div>
</div>
</div>
<div style="margin-top: 10%;">
<p style="font-family: 'Roboto';" class="fw-bold text-center">Our Recent Photos</p>
<h1 style="font-size: 2.8rem;" class="fw-bolder text-center photo">Pets Photo Gallery</h1>
<div class="wrapper mt-5 ms-5 p-0">
<div class="parent col-lg-4 col-md-12 overflow-hidden position-relative d-lg-inline-block d-md-block">
<div class="child bg-one w-100 h-100">
<div class="black w-100 h-100 d-none"></div>
</div>
</div>
<div class="parent col-lg-7 col-12 overflow-hidden position-relative d-lg-inline-block d-md-block ms-xl-5 mt-md-5 mt-sm-5 mt-5">
<div class="child bg-two w-100 h-100">
<div class="black w-100 h-100 d-none"></div>
</div>
</div>
<div class="parent col-lg-7 col-md-12 mt-5 overflow-hidden position-relative d-lg-inline-block d-md-block p-0">
<div class="child bg-three w-100 h-100">
<div class="black w-100 h-100 d-none"></div>
</div>
</div>
<div class="parent col-lg-4 col-md-12 mt-5 ms-xl-5 overflow-hidden position-relative d-lg-inline-block d-md-block">
<div class="child bg-four w-100 h-100">
<div class="black w-100 h-100 d-none"></div>
</div>
</div>
</div>
</div>
<div style="margin-top: 10%;" class="container-fluid mx-0 mb-0 p-0">
<div class="row p-0 m-0">
<div class="col-6 m-0 p-0"><img src="images/doc dog.webp" alt="" style="width: 100%; height: 100%;"></div>
<div class="col-6 m-0 p-0" style="background-color: #F9F9F9;">
<div style="background-color: #FE2122;" class="py-5 px-5">
<h2 class="w-75 fw-bolder text-white lead" style="font-family: Arial, Helvetica, sans-serif;">World's Leading Law Consultency Agency !</h1>
</div>
<form action="#" class="mt-5 ms-5 me-5">
<div class="d-flex">
<input type="text" placeholder="Name" class="p-lg-3 p-md-3 p-sm-2 p-1 border-top-0 border-start-0 border-end-0 form fw-medium bg-transparent w-100 inputs" style="border-bottom: .5px solid gainsboro;">
<input type="number" placeholder="Phone" class="p-lg-3 p-md-3 p-sm-2 p-1 border-top-0 border-start-0 border-end-0 ms-4 form fw-medium bg-transparent w-100 inputs" style="border-bottom: .5px solid gainsboro;">
</div>
<div class="container m-0 p-0 w-100">
<div class="row w-100 m-0 p-0">
<div class="col-6 ms-0 ps-0"><ul class="list-unstyled w-100">
<li class="nav-item dropdown border-top-0 border-start-0 border-end-0 form fw-light bg-transparent p-lg-3 p-md-3 p-sm-2 p-1 w-100" style="border-bottom: 0.5px solid gainsboro;">
<a class="nav-link dropdown-toggle text-secondary w-100 inputs p-1" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Health law
</a>
<ul class="dropdown-menu rounded-0 w-100">
<li><a href="#" class="dropdown-item text-secondary fw-bolder">Health Law</a></li>
<li><a href="#" class="dropdown-item text-secondary">Saiful Islam</a></li>
<li><a href="#" class="dropdown-item text-secondary">Arafath Miya</a></li>
<li><a href="#" class="dropdown-item text-secondary">Shakil Miya</a></li>
<li><a href="#" class="dropdown-item text-secondary">Tamim Sharker</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-6"><input type="email" placeholder="Email" class="p-lg-3 p-md-3 p-sm-2 p-1 inputs border-top-0 border-start-0 border-end-0 form fw-medium bg-transparent w-100" style="border-bottom: .5px solid gainsboro;"></div>
</div>
</div>
<div>
<textarea name="" id="" placeholder="Message" rows="3" style="color: #a3a3a3;border-bottom: .5px solid gainsboro; width: 100%;" class="p-lg-3 p-md-3 p-sm-2 p-1 inputs border-top-0 border-start-0 border-end-0 form fw-light bg-transparent"></textarea>
<div class="d-flex justify-content-between">
<div><button class="bg-black text-white rounded-5 py-lg-3 py-md-3 py-sm-3 py-2 px-lg-5 px-md-5 px-sm-5 px-3 border-0 mt-5 text-capitalize fw-bold butn3 overflow-hidden position-relative mt-5" style="font-size: 13px; font-family: 'Roboto'; letter-spacing: 1.5px;">Submit now</button></div>
<div class="float-end mt-5 d-none d-lg-block d-xl-block d-xxl-block"><img src="images/dog.webp" alt="" width="100% "></div>
</div>
</div>
</div>
</form>
</div>
</div>
<div style="margin-top: 10%;">
<p style="font-family: 'Roboto';" class="fw-bold text-center">Our Professional members</p>
<h1 class="text-center fw-bolder team">Our Team Members</h1>
<div class="d-lg-flex d-block d-xl-flex d-xxl-flex justify-content-evenly mt-5 ms-3 me-3">
<div class="card border-0 rounded-0 doctors" style="width: 22rem; background-color: #F9F9F9;">
<img src="images/doctor 1.webp" class="card-img-top" alt="...">
<div class="card-body doctor-body">
<p class="card-text fs-3 fw-light doctors-text" style="color: #161E46;">Mike Janathon</p>
<h4 class="card-title fw-bold doctors-text" style="color: #161E46; font-size: 25px;">Doctor</h4>
</div>
</div>
<div class="card border-0 rounded-0 doctors" style="width: 22rem; background-color: #F9F9F9;">
<img src="images/doctor 2.webp" class="card-img-top" alt="...">
<div class="card-body doctor-body">
<p class="card-text fs-3 fw-light doctors-text" style="color: #161E46;">Mike J Smith</p>
<h4 class="card-title fw-bold doctors-text" style="color: #161E46; font-size: 25px;">Doctor</h4>
</div>
</div>
<div class="card border-0 rounded-0 doctors" style="width: 22rem; background-color: #F9F9F9;">
<img src="images/doctor 3.webp" class="card-img-top" alt="...">
<div class="card-body doctor-body">
<p class="card-text fs-3 fw-light doctors-text" style="color: #161E46;">Pule W Smith</p>
<h4 class="card-title fw-bold doctors-text" style="color: #161E46; font-size: 25px;">Doctor</h4>
</div>
</div>
</div>
</div>
<div id="carouselExampleDark" class="carousel carousel-dark slide bg-success d-md-none d-sm-none d-none d-lg-block" style="margin-top: 10%;">
<div class="carousel-indicators gap-2">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" aria-label="Slide 1" aria-colcount="text-white" aria-current="true"class="active border-0 carousel-circle rounded-5" style="padding-top: .5%; padding-bottom: .5%; background-color: #FE2122; width: 1.5%;"><i class="fa-solid fa-circle text-white"></i></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2" aria-colcount="text-white" aria-current="true" class="active border-0 carousel-circle rounded-5" style="padding-top: .5%; padding-bottom: .5%; background-color: #FE2122; width: 1.5%;"><i class="fa-solid fa-circle text-white"></i></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3" aria-colcount="text-white" aria-current="true" class="active border-0 carousel-circle rounded-5" style="padding-top: .5%; padding-bottom: .5%; background-color: #FE2122; width: 1.5%;"><i class="fa-solid fa-circle text-white"></i></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="images/dog banner.png" class="d-block w-100" alt="..." style=" height: 200%;">
<div class="carousel-caption d-none d-md-block">
<img src="images/men.webp" alt="" style="margin-top: 100% !important;">
<p class="text-white mt-4" style="font-size: 25px; font-weight: 700; font-family: 'Muli';">Margaret Lawson</h5>
<p style="color: #506172;">Creative Director</p>
<p class="text-white fst-italic" style="font-size: 24px; font-weight: 400; font-family: 'Roboto';">“I am at an age where I just want to be fit and healthy our bodies are our responsibility! So start caring for your body and it will care for you. Eat clean it will care for you and workout hard.”</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="images/dog banner.png" class="d-block w-100" alt="..." style=" height: 200%;">
<div class="carousel-caption d-none d-md-block">
<img src="images/men.webp" alt="" style="margin-top: 100% !important;">
<p class="text-white mt-4" style="font-size: 25px; font-weight: 700; font-family: 'Muli';">Margaret Lawson</h5>
<p style="color: #506172;">Creative Director</p>
<p class="text-white fst-italic" style="font-size: 24px; font-weight: 400; font-family: 'Roboto';">“I am at an age where I just want to be fit and healthy our bodies are our responsibility! So start caring for your body and it will care for you. Eat clean it will care for you and workout hard.”</p>
</div>
</div>
<div class="carousel-item">
<img src="images/dog banner.png" class="d-block w-100" alt="..." style=" height: 200%;">
<div class="carousel-caption d-none d-md-block">
<img src="images/men.webp" alt="" style="margin-top: 100% !important;">
<p class="text-white mt-4" style="font-size: 25px; font-weight: 700; font-family: 'Muli';">Margaret Lawson</h5>
<p style="color: #506172;">Creative Director</p>
<p class="text-white fst-italic" style="font-size: 24px; font-weight: 400; font-family: 'Roboto';">“I am at an age where I just want to be fit and healthy our bodies are our responsibility! So start caring for your body and it will care for you. Eat clean it will care for you and workout hard.”</p>
</div>
</div>
</div>
</div>
<div style="margin-top: 10%;">
<p style="font-family: 'Roboto';" class="fw-bold text-center">Our recent news</p>
<h1 class="fw-bolder text-center blog">Our Recent Blog</h1>
<div class="d-lg-flex d-md-block mt-5 gap-5 ps-5">
<div class="card border-0 card-doctor" style="width: 22rem;">
<div class="wrapper">
<div class="parent-1 card border-0 position-relative overflow-hidden">
<div class="bg-five child-1 rounded-0 w-100 h-100">
</div>
</div>
<div class="card-body">
<div class="d-md-block d-sm-block d-block">
<div class="m-0 p-0"><p style="color: #FF2121;">Pet food</p></div>
<br class="d-lg-none d-xl-none d-xxl-none d-block">
<div class="m-0 p-0"><ul><li style="color: #aebccb;" class="Date">Nov 30, 2020</li></ul></div>
</div>
<h4 style="color: #112957;" class="fw-bolder">Winter Photography Tips from Glenn</h4>
<p class="card-text fw-bold mt-3 cdp" style="color:#c4c4c4;">Read More</p>
</div>
</div>
</div>
<div class="card border-0 card-doctor" style="width: 22rem;">
<div class="wrapper">
<div class="parent-1 card border-0 position-relative overflow-hidden">
<div class="bg-six child-1 w-100 h-100">
</div>
</div>
<div class="card-body">
<div class="d-flex">
<p style="color: #FF2121;">Pet food</p>
<ul>
<li style="color: #aebccb;" class="Date">Nov 30, 2020</li>
</ul>
</div>
<h4 style="color: #112957;" class="fw-bolder">Winter Photography Tips from Glenn</h4>
<p class="card-text fw-bold mt-3 cdp" style="color:#c4c4c4;">Read More</p>
</div>
</div>
</div>
<div class="card border-0 card-doctor" style="width: 22rem;">
<div class="wrapper">
<div class="parent-1 card border-0 position-relative overflow-hidden">
<div class="bg-seven child-1 w-100 h-100">
</div>
</div>
<div class="card-body">
<div class="d-flex">
<p style="color: #FF2121;">Pet food</p>
<ul>
<li style="color: #aebccb;" class="Date">Nov 30, 2020</li>
</ul>
</div>
<h4 style="color: #112957;" class="fw-bolder">Winter Photography Tips from Glenn</h4>
<p class="card-text fw-bold mt-3 cdp" style="color:#c4c4c4;">Read More</p>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top: 10%;" class="phone container-fluid">
<h1 style="font-family: 'Muli'; font-size: 3.4rem;" class="text-white fw-bolder text-center call-us">Any time you can call us!</h1>
<p class="fs-3 text-center m-auto mt-5" style="color: #ffd2c4; width: 70%;">Because we know that even the best technology is only as good as the people behind it. 24/7 tech support.</p>
<div class="d-lg-flex d-block d-xl-flex d-xxl-flex m-auto justify-content-evenly mt-5 number text-center" style="width: 30%;">
<button class="bg-white rounded-5 px-5 border-0 text-capitalize fw-bold butn4 overflow-hidden position-relative" style="font-size: 13px; font-family: 'Roboto'; letter-spacing: 1.5px; color: #FF2121 !important;">Contact us</button>
<p class="fs-5 text-white mt-3 text-center ms-3 mx-auto">Or</p>
<a href="tel:+92 3117865772" class="text-decoration-none text-white text-center mx-auto ms-md-0" style="margin-top: 5.3%;">+92 3117865772</a>
</div>
</div>
<footer style="padding-top: 15%;padding-bottom: 15%;" class="ps-5 pe-5">
<div class="d-lg-flex d-md-block justify-content-between">
<div style="width: 30%;" class="website">
<img src="images/logo.webp" alt="">
<p class="text-secondary mt-4" style="width: 90%;">Lorem ipsum dolor sit amet, adipiscing elit, sed do eiusmod tempor elit.</p>
<div class="d-flex justify-content-between w-25 mt-4">
<a href="https://www.facebook.com/" class="text-black"><i class="fa-brands fa-square-facebook fs-5"></i></a>
<a href="https://www.twitter.com" class="text-black"><i class="fa-brands fa-square-twitter fs-5"></i></a>
<a href="https://www.linkedin.com/" class="text-black"><i class="fa-brands fa-linkedin fs-5"></i></a>
<a href="https://www.pinterest.com/" class="text-black"><i class="fa-brands fa-square-pinterest fs-5"></i></a>
</div>
</div>
<div class="company mt-4 mt-lg-0 mt-xl-0 mt-xxl-0">
<h5 style="color: #012F5F;">Company</h5>
<ul class="list-unstyled">
<li class="mt-2"><a href="#" style="color: #506172;" class="text-decoration-none fw-light footer-li">Home</a></li>
<li class="mt-2"><a href="#" style="color: #506172;" class="text-decoration-none fw-light footer-li">About Us</a></li>
<li class="mt-2"><a href="#" style="color: #506172;" class="text-decoration-none fw-light footer-li">Services</a></li>
<li class="mt-2"><a href="#" style="color: #506172;" class="text-decoration-none fw-light footer-li">Cases</a></li>
<li class="mt-2"><a href="#" style="color: #506172;" class="text-decoration-none fw-light footer-li">Contact Us</a></li>
</ul>
</div>
<div style="width: 15%;" class="company mt-4 mt-lg-0 mt-xl-0 mt-xxl-0">
<h5>Services</h5>
<ul class="list-unstyled">
<li class="mt-2"><a href="#" style="color: #506172;" class="text-decoration-none fw-light footer-li">Commercial Cleaning</a></li>
<li class="mt-2"><a href="#" style="color: #506172;" class="text-decoration-none fw-light footer-li">Office Cleaning</a></li>
<li class="mt-2"><a href="#" style="color: #506172;" class="text-decoration-none fw-light footer-li">Building Cleaning</a></li>
<li class="mt-2"><a href="#" style="color: #506172;" class="text-decoration-none fw-light footer-li">Floor Cleaning</a></li>
<li class="mt-2"><a href="#" style="color: #506172;" class="text-decoration-none fw-light footer-li">Apartment Cleaning</a></li>
</ul>
</div>
<div>
<h5>Get in Touch</h5>
<ul class="list-unstyled" class="company mt-4 mt-lg-0 mt-xl-0 mt-xxl-0">
<li class="mt-2"><a href="tel:+92 3117865772" style="color: #506172;" class="text-decoration-none fw-light footer-li">+92 312 2607520</a></li>
<li class="mt-2"><a href="mailto:zobiajawed5@gmail.com" style="color: #506172;" class="text-decoration-none fw-light footer-li">zobiajawed5@gmail.com</a></li>
<li class="mt-2"><a href="#" style="color: #506172;" class="text-decoration-none fw-light footer-li">Karachi, Pakistan</a></li>
</ul>
</div>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>