-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
452 lines (448 loc) · 27.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
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
<!DOCTYPE html>
<html lang="en" data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HomeEdge</title>
<!-- DaisyUI and Tailwind cdn -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.10/dist/full.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- google font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap" rel="stylesheet">
<style>
.font-manrope {
font-family: "Manrope", sans-serif;
}
ul a {
font-size: large;
}
</style>
<!-- custom color -->
<script>
tailwind.config = {
theme: {
extend: {
backgroundImage: {
'contact-bg': "url('./assets/bg.jpg')"},
colors: {
clifford: '#da373d',
'icon-bg': '#abef5f',
}
}
}
}
</script>
</head>
<body class="font-manrope">
<!-- header section -->
<header>
<nav class="bg-base-100">
<div class="navbar justify-between container mx-auto pt-6">
<div class="">
<button class="flex text-p-title font-black text-3xl items-center">
<div class="p-2 bg-[#abef5f] text-btn-text rounded-full mr-2">
<!-- icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</div>HomeEdge
</button>
</div>
<div class="hidden lg:flex">
<ul class="menu menu-horizontal px-1 text-s-text text-base font-normal">
<li class="font-black text-p-text"><a>Home</a></li>
<li><a>Services</a></li>
<li><a>Portfolio</a></li>
<li><a>Blogs</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
<div class="flex space-x-4 items-center justify-end">
<div class="p-[10px] bg-white text-s-text border border-[#E9E9E9] rounded-full hidden lg:block">
<!-- icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
</svg>
</div>
<div class="p-[10px] bg-white text-s-text border border-[#E9E9E9] rounded-full lg:block hidden">
<!-- icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
</svg>
</div>
<button
class="py-2 px-5 hidden lg:flex text-btn-text font-black text-xl bg-[#abef5f] rounded-full items-center">Book
Consult
<div class="bg-black text-white p-2 ml-2 rounded-full"><svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" class="size-5">
<path fill-rule="evenodd"
d="M5.22 14.78a.75.75 0 0 0 1.06 0l7.22-7.22v5.69a.75.75 0 0 0 1.5 0v-7.5a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0 0 1.5h5.69l-7.22 7.22a.75.75 0 0 0 0 1.06Z"
clip-rule="evenodd" />
</svg>
</div>
</button>
<div class="dropdown dropdown-end lg:hidden">
<div tabindex="0" role="button"
class="p-3 bg-white text-s-text border border-[#E9E9E9] rounded-full lg:hidden">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-6">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>
</div>
<ul tabindex="0"
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow text-s-text text-base font-normal">
<li class="font-black text-p-text"><a>Home</a></li>
<li><a>Services</a></li>
<li><a>Portfolio</a></li>
<li><a>Blogs</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- header container -->
<div>
<div>
<div class="hero bg-base-100 min-h-screen">
<div class="hero-content text-center">
<div class="max-w-screen">
<div><img class="max-w-screen inline-block" src="assets/banner.png"></div>
<h1 class="text-5xl font-bold">HomeEdge</h1>
<p class="py-7 max-w-screen-md">
We are delighted to introducing HomeEdge, your total house design solution. Whatever
commercial or residential projects we are providing all the service with our industry
lead engineers.
</p>
<button class="btn h-8"><a
class="btn absolute lg:visible bg-[#abef5f] text-xl font-extrabold rounded-full px-6">View
Details<div class="bg-black text-white p-2 ml-2 rounded-full"><svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="size-5">
<path fill-rule="evenodd"
d="M5.22 14.78a.75.75 0 0 0 1.06 0l7.22-7.22v5.69a.75.75 0 0 0 1.5 0v-7.5a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0 0 1.5h5.69l-7.22 7.22a.75.75 0 0 0 0 1.06Z"
clip-rule="evenodd" />
</svg>
</div></a></button>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- main section -->
<main>
<!-- about us section -->
<section>
<div class="hero bg-base-200 min-h-screen relative">
<img class="invisible lg:visible absolute top-16 left-40" src="assets/Vector.png" alt="">
<div class="hero-content flex-col-reverse lg:flex-row-reverse">
<img src="assets/Rectangle.png" class="max-h-screen rounded-lg shadow-2xl" />
<div class="gap-5">
<p class="ml-12 text-center lg:text-left"><button class="btn h-7"><a
class="btn absolute lg:visible bg-white rounded-full px-6"> <svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="size-5">
<path fill-rule="evenodd"
d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z"
clip-rule="evenodd" />
</svg>About Us</a></button></p>
<h1 class="text-5xl mt-4 font-bold">We design, We define, <br> We develop.</h1>
<p class="py-6">
Our service is multi-dimentional. Whatever commercial or residential.
</p>
<div class="flex items-center bg-white p-2 rounded-2xl my-2">
<img src="assets/commercial.png">
<h4 class="mx-3 py-8"><span class="font-bold">Commecial Projects</span> <br> We provide
commercial service with wide variety.</h4>
</div>
<div class="flex items-center bg-white p-2 rounded-2xl my-2">
<img src="assets/residential.png">
<h4 class="mx-3 py-8"><span class="font-bold">Residential Projects</span> <br> We provide
the best service with wide variety.</h4>
</div>
</div>
</div>
</div>
</section>
<!-- stat section/Optional -->
<!-- work process section -->
<section class="lg:my-20 my-8 container mx-auto px-3">
<!-- title box -->
<div class="card">
<div class="mx-auto max-w-2xl card-body items-center text-center p-0 mb-8">
<p class="ml-12 text-center lg:text-left"><button class="btn h-7"><a
class="btn absolute lg:visible bg-white rounded-full px-6"> <svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="size-5">
<path fill-rule="evenodd"
d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z"
clip-rule="evenodd" />
</svg>How We Works</a></button></p>
<h2 class="card-title text-3xl lg:text-4xl font-bold text-p-title mb-3">What We Do, How We Do</h2>
<p class="lg:text-base text-sm font-medium text-p-text">Our way of doing something is different. We
think, we plan, we do.</p>
</div>
</div>
<!-- main -->
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
<!-- card -->
<div class="card">
<div class="card-body p-6 rounded-2xl bg-[#E7C1D3]">
<img src="./assets/concept.png" alt="" class="w-12" />
<h2 class="card-title font-black text-xl text-btn-text">Concept</h2>
<p class="font-medium text-p-text">
Concentrating to concept is the key to perfect design.</p>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-body p-6 rounded-2xl bg-[#EFDA6E]">
<img src="./assets/flow-chart.png" alt="" class="w-12" />
<h2 class="card-title font-black text-xl text-btn-text">Design Process</h2>
<p class="font-medium text-p-text">
We do not only design your home, we design your dream.</p>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-body p-6 rounded-2xl bg-[#A4DAC3]">
<img src="./assets/vision.png" alt="" class="w-12" />
<h2 class="card-title font-black text-xl text-btn-text">Supervision</h2>
<p class="font-medium text-p-text">
Without supervision idea dies and design never born.</p>
</div>
</div>
<!-- card -->
<div class="card">
<div class="card-body p-6 rounded-2xl bg-[#77AAEA]">
<img src="./assets/budget-planning.png" alt="" class="w-12" />
<h2 class="card-title font-black text-xl text-btn-text">Budget Planning</h2>
<p class="font-medium text-p-text">
Good planning is half done. We help you fully about budget planning.</p>
</div>
</div>
</div>
</section>
<!-- Our Latest portfolio Section/ challenge part -->
<section class="py-8 lg:py-20 lg:bg-base-100">
<div class="container mx-auto px-3">
<!-- portfolio container -->
<div class="card">
<div class="mx-auto max-w-2xl card-body items-center text-center p-0 mb-8">
<p class="ml-12 text-center lg:text-left"><button class="btn h-7"><a
class="btn absolute lg:visible bg-[#abef5f] rounded-full px-6"> <svg
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
class="size-5">
<path fill-rule="evenodd"
d="M3 10a.75.75 0 0 1 .75-.75h10.638L10.23 5.29a.75.75 0 1 1 1.04-1.08l5.5 5.25a.75.75 0 0 1 0 1.08l-5.5 5.25a.75.75 0 1 1-1.04-1.08l4.158-3.96H3.75A.75.75 0 0 1 3 10Z"
clip-rule="evenodd" />
</svg>Explore Our Latest Works</a></button></p>
<h2 class="card-title text-3xl lg:text-4xl font-bold text-p-title mb-3">Our Recent Projects</h2>
<p class="lg:text-base text-sm font-medium text-p-text">Here you can explore some of our recent
works done. You can visit our office to know more about our different projects.</p>
</div>
</div>
<!-- portfolio main -->
<div
class="gap-4 space-y-4 lg:space-y-0 lg:grid grid-cols-1 lg:grid-cols-12 lg:grid-rows-[230px_230px]">
<!-- card 1-->
<div class="bg-white card lg:card-side col-start-1 col-end-9 border p-6">
<img src="./assets/img1.png" alt="house"
class="w-full mr-0 lg:mr-6 mb-6 lg:mb-0 lg:w-2/5 lg:h-[180px]" />
<div class="card-body p-0 space-y-2">
<h2 class=" text-2xl font-black text-p-text">Residential</h2>
<p class="font-medium text-s-text">Our residential projects will attract your mind. We
always prefer quality than quantity. Number of projects is not matter. Quality matters.
</p>
<button class="flex text-p-title font-black text-xl items-center">View Details
<div class="bg-[#abef5f] p-2 ml-2 rounded-full"><svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" class="size-5">
<path fill-rule="evenodd"
d="M5.22 14.78a.75.75 0 0 0 1.06 0l7.22-7.22v5.69a.75.75 0 0 0 1.5 0v-7.5a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0 0 1.5h5.69l-7.22 7.22a.75.75 0 0 0 0 1.06Z"
clip-rule="evenodd" />
</svg>
</div>
</button>
</div>
</div>
<!-- card 2-->
<div class="bg-white card col-start-9 col-end-13 w-full border p-6 ">
<figure>
<img src="./assets/img2.png" alt="house" class="w-full lg:h-[180px] lg:obejct-cover" />
</figure>
</div>
<!-- card extra-->
<div class="bg-white lg:hidden card lg:card-side border p-6">
<figure>
<img src="./assets/img5.png" alt="house" class="w-full" />
</figure>
</div>
<!-- card 4-->
<div class="bg-white row-start-2 col-start-4 col-end-10 card lg:card-side border p-6">
<img src="./assets/img4.png" alt="house"
class="w-full mr-0 lg:mr-6 mb-6 lg:mb-0 lg:w-1/2 lg:h-[180px]" />
<div class="card-body p-0 space-y-2">
<h2 class="card-title text-2xl font-black text-p-text">Commercial</h2>
<p class="font-medium text-s-text">Commercial projects must attract your eyes. You are
cordially invited to visit our projects to get more idea and details plan.</p>
<button class="flex text-p-title font-black text-xl items-center">View Details
<div class="bg-[#abef5f] p-2 ml-2 rounded-full"><svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20" fill="currentColor" class="size-5">
<path fill-rule="evenodd"
d="M5.22 14.78a.75.75 0 0 0 1.06 0l7.22-7.22v5.69a.75.75 0 0 0 1.5 0v-7.5a.75.75 0 0 0-.75-.75h-7.5a.75.75 0 0 0 0 1.5h5.69l-7.22 7.22a.75.75 0 0 0 0 1.06Z"
clip-rule="evenodd" />
</svg>
</div>
</button>
</div>
</div>
<!-- card 3-->
<div class="bg-white card row-start-2 col-start-1 col-end-4 w-full border p-6">
<figure>
<img src="./assets/img3.png" alt="house" class="w-full lg:h-[180px]" />
</figure>
</div>
<!-- card 5-->
<div class="bg-white w-full row-start-2 col-start-10 col-end-13 card border p-6">
<figure>
<img src="./assets/img5.png" alt="house" class="w-full lg:h-[180px]" />
</figure>
</div>
</div>
</div>
</section>
<!-- Unique Section -->
<div class="hero bg-base-200 min-h-screen">
<div class="hero-content flex-col lg:flex-row container mx-auto">
<img
src="assets/article1.png"
class="max-w-screen inline-block min-h-full rounded-lg shadow-2xl" />
<div class="ml-3">
<h1 class="text-4xl font-bold">Home Planning: FAQ</h1>
<div class="collapse collapse-plus bg-base-200">
<input type="radio" name="my-accordion-3"/>
<div class="collapse-title text-xl font-medium">What do I need most to make a plan for home?</div>
<div class="collapse-content">
<p>Budget, Space Requirements, Design Preferences, Existing Conditions, Legal and Regulatory Considerations.</p>
</div>
</div>
<div class="collapse collapse-plus bg-base-200">
<input type="radio" name="my-accordion-3" />
<div class="collapse-title text-xl font-medium">What is the total cost of building a home?</div>
<div class="collapse-content">
<p>The total cost of building a home includes expenses for land, construction, permits, and finishing, and varies widely based on location, size, and materials.</p>
</div>
</div>
<div class="collapse collapse-plus bg-base-200">
<input type="radio" name="my-accordion-3" />
<div class="collapse-title text-xl font-medium">What permits and approvals are required before home construction?</div>
<div class="collapse-content">
<p>You'll need to obtain permits for zoning, construction, and utilities, and ensure compliance with local building codes and regulations.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Let's discuss next project section -->
<section class="bg-contact-bg bg-opacity-50 bg-cover bg-center border-y-4 lg:border-y-8 border-white">
<div class="lg:py-20 py-8 max-w-4xl mx-auto px-3">
<!-- title box -->
<div class="card">
<div class="mx-auto max-w-2xl card-body items-center text-center p-0 mb-8">
<button
class="w-fit py-2 px-4 flex text-p-text font-bold text-base bg-[#abef5f] rounded-full items-center gap-2 mb-1 mx-auto lg:mx-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.25 8.25 21 12m0 0-3.75 3.75M21 12H3" />
</svg>
Let's Connect
</button>
<h2 class="card-title text-3xl lg:text-4xl font-bold text-p-title mb-3">Want to Tell Something? Let's Discuss.</h2>
<p class="lg:text-base text-sm font-medium text-p-text">We can help you out to finalize your decision. Let's connect through discussion. Discussion is solution.</p>
</div>
</div>
<!-- main content -->
<div class="space-y-6">
<!-- forms -->
<div class="lg:flex gap-6 lg:space-y-0 space-y-6">
<input type="text" placeholder="First Name"
class="input w-full rounded-full border border-gray-200 p-5 text-base font-medium text-neutral-400" />
<input type="text" placeholder="Last Name"
class="input w-full rounded-full border border-gray-200 p-5 text-base font-medium text-neutral-400" />
</div>
<!-- forms -->
<div class="lg:flex gap-6 lg:space-y-0 space-y-6">
<input type="text" placeholder="Phone Number"
class="input w-full rounded-full border border-gray-200 p-5 text-base font-medium text-neutral-400" />
<input type="text" placeholder="Email Number"
class="input w-full rounded-full border border-gray-200 p-5 text-base font-medium text-neutral-400" />
</div>
<!-- text fild -->
<textarea
class="textarea w-full rounded-3xl border border-gray-200 p-5 text-base font-medium text-neutral-400 h-60"
placeholder="Write your idea here"></textarea>
<!-- button -->
<button
class="py-3 px-5 w-full flex justify-center text-btn-text font-black text-xl bg-[#abef5f] rounded-full items-center">Send Your Thought
<div class="p-2 bg-black text-white rounded-full ml-2">
<!-- icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</div>
</button>
</div>
</div>
</section>
</main>
<!-- footer section -->
<footer class="bg-black lg:py-20 py-16 px-3 text-center">
<div class="max-w-4xl mx-auto">
<button class="flex text-gray-200 font-black text-3xl items-center mx-auto">
<div class="p-2 bg-[#abef5f] text-black rounded-full mr-2">
<!-- icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</div>HomeEdge
</button>
<p class="text-gray-400 leading-normal text-xl font-medium lg:text-gray-400 mt-4 mb-8 lg:mb-12 max-w-2xl mx-auto">HomeEdge helps to cares your dreams. We do not only design your home we design your dream indeed.</p>
<div
class="font-medium text-gray-200 text-base lg:flex justify-between lg:mb-12 mb-8 space-y-8 lg:space-y-0">
<p>Home</p>
<p>Services</p>
<p>Portfolio</p>
<p>Blogs</p>
<p>Contact Us</p>
</div>
<button
class="lg:mx-auto w-full lg:w-fit justify-center py-3 px-5 flex text-btn-text font-black text-xl bg-[#abef5f] rounded-full items-center">
Get Details
<div class="p-2 bg-black text-white rounded-full ml-2">
<!-- icon -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="size-4">
<path stroke-linecap="round" stroke-linejoin="round"
d="m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25" />
</svg>
</div>
</button>
</div>
</footer>
</body>
</html>