-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
342 lines (342 loc) · 20.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="./images/logo.ico">
<title>Rinterio</title>
<!-- Tailwind & deisyUI 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">
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/147de7fead.js" crossorigin="anonymous"></script>
<style>
.font-monorope{
font-family: "Manrope", sans-serif;
}
.bg-img{
background-image: url(./images/bg.jpg);
}
</style>
</head>
<body class="font-monorope bg-[#f1f1f1]">
<!-- Header section Start -->
<header class="w-full p-10 pb-20 bg-[linear-gradient(to_bottom,_#f0f0f0_0%,_#FFFFFF_100%)]">
<!-- Navbar section Start -->
<nav class="container mx-auto flex justify-between items-center">
<!-- Logo -->
<div class="">
<a class="btn btn-ghost text-3xl font-bold" href="#"><i class="w-11 h-11 fa-solid fa-arrow-right bg-[#ABEF5F] rounded-full p-1 -rotate-45 flex justify-center items-center"></i>Rinterio</a>
</div>
<!-- Menu -->
<div class="hidden lg:flex">
<ul class="menu menu-horizontal px-1 gap-5 text-xl">
<li><a class="text-[#494949] font-bold">Home</a></li>
<li><a class="text-[#737373]">Services</a></li>
<li><a class="text-[#737373]">Portfolio</a></li>
<li><a class="text-[#737373]">Blogs</a></li>
<li><a class="text-[#737373]">Contact Us</a></li>
</ul>
</div>
<!-- Right Bottons -->
<div class="hidden md:flex md:text-end lg:flex text-xl gap-5">
<a href="#">
<i class="fa-solid fa-magnifying-glass flex items-center justify-center h-10 w-10 bg-white rounded-full hover:bg-gray-300 active:scale-90 duration-100 transition-transform"></i>
</a>
<a class="" href="#">
<i class="fa-solid fa-cart-shopping flex items-center justify-center h-10 w-10 bg-white rounded-full hover:bg-gray-300 active:scale-90 duration-100 transition-transform"></i>
</a>
<a class="btn bg-[#ABEF5F] font-bold border-none rounded-3xl text-2xl">Book Consult<i class="w-8 h-8 fa-solid fa-arrow-right bg-black rounded-full p-1 -rotate-45 text-white justify-center items-center"></i></a>
<!-- Medium device Menu -->
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden bg-white rounded-full">
<i class="fa-solid fa-bars text-2xl text-[#737373]"></i>
</div>
<ul
tabindex="0"
class="menu dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
<li><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>
<!-- Small Device Menu -->
<div class="dropdown dropdown-end md:hidden">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden bg-white rounded-full">
<i class="fa-solid fa-bars text-2xl text-[#737373]"></i>
</div>
<ul
tabindex="0"
class="menu dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow">
<li><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>
<li><a class="btn">Book Consult</a></li>
</ul>
</div>
</nav>
<!-- Navbar section End -->
<!-- Banner section Star -->
<section class="container mx-auto py-10 px-5 lg:px-64">
<!-- bannar image -->
<div class="flex justify-center">
<img src="./images/banner.png" alt="bannar images">
</div>
<!-- bannar text -->
<div class="">
<h1 class="flex justify-center text-2xl lg:text-6xl text-center font-extrabold text-[#212121] mt-10">A barn house of this design has a striking appearance</h1>
<p class="text-center text-base mt-10 lg:text-lg leading-6">A barn house with this design exudes charm and elegance, featuring a rustic facade combined with sleek modern elements. Its bold lines and natural materials create a visually stunning, timeless appeal.</p>
<!-- bannar botton -->
<div class="flex justify-center mt-8">
<a class="btn bg-[#abef5f80] font-bold border-none rounded-3xl text-xl text-[#212121]">View Details<i class="flex justify-center items-center w-8 h-8 fa-solid fa-arrow-right bg-[#ABEF5F] rounded-full p-1 -rotate-45 text-white"></i></a>
</div>
</div>
</section>
<!-- Banner section End -->
</header>
<!-- Header section End -->
<!-- Main section start -->
<!-- About us section start -->
<section class="container mx-auto lg:flex lg:justify-between gap-12">
<!-- About section Text -->
<div class="pt-10">
<!-- about botton -->
<div class="relative flex flex-col justify-center items-center lg:items-start px-10 lg:py-24">
<img class="hidden lg:flex absolute left-2 top-5 border-dashed border-2 border-gray-400 py-5" src="./images/Vector.png" alt="victor image in about botton">
<a class="btn bg-white font-bold border-none rounded-3xl text-lg text-[#494949]"><i class="flex justify-center items-center w-8 h-8 fa-solid fa-arrow-right rounded-full p-1"></i>About Us</a>
<!-- about section text head -->
<h1 class="text-2xl lg:text-4xl text-center lg:text-start font-bold text-[#212121] mt-6">We design thoughtful, liveable spaces</h1>
<!-- about sectio text pera -->
<p class="text-center lg:text-start text-base mt-6 lg:text-lg leading-6 pb-10">We design thoughtful, livable spaces that blend functionality with aesthetics. Our approach ensures each area is comfortable, practical, and beautifully crafted, creating environments that enhance daily living and reflect personal style.</p>
</div>
<div class="grid gird-cols-1 md:grid-cols-2 lg:grid-cols-1">
<!-- Commercial box -->
<div class="bg-white w-11/12 mx-auto rounded-xl p-5 flex gap-5 mb-6">
<div>
<img src="./images/commercial.png" alt="">
</div>
<div class="">
<h3 class="text-lg font-extrabold text-[#494949]">Commercial</h3>
<p class="text-[#737373]">Commercial spaces are designed for functionality, efficiency, and professional appeal.</p>
</div>
</div>
<!-- Residential box -->
<div class="bg-white w-11/12 mx-auto rounded-xl p-5 flex gap-5 mb-6">
<div>
<img src="./images/residential.png" alt="">
</div>
<div class="">
<h3 class="text-lg font-extrabold text-[#494949]">Residential</h3>
<p class="text-[#737373]">Residential designs prioritize comfort, style, and personalized living spaces.</p>
</div>
</div>
</div>
</div>
<!--about section right picture -->
<div class="relative w-11/12 h-64 mx-auto lg:h-auto lg:mt-24 lg:p-5 ">
<img class="absolute w-full h-full rounded-xl object-fill pb-10" src="./images/Rectangle.png" alt="Rectangle Home Picture">
</div>
</section>
<!-- About us section End -->
<!-- Works Process section start -->
<section class="container mx-auto py-24">
<!-- Works Process section Text -->
<div class="flex flex-col justify-center items-center px-10">
<a class="btn bg-white font-bold border-none rounded-3xl text-lg text-[#494949]"><i class="flex justify-center items-center w-8 h-8 fa-solid fa-arrow-right rounded-full p-1"></i>How we works
</a>
<h1 class="text-2xl lg:text-4xl text-center lg:text-start font-bold text-[#212121] mt-6">Our Works Process</h1>
<p class="text-center lg:text-start text-base mt-6 lg:text-lg leading-6 pb-10">Our Works Process" outlines the systematic approach we use to ensure efficient project execution, quality control, and timely delivery of results.</p>
</div>
<!-- work process bottom box -->
<div class="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4">
<!-- Concept -->
<div class="bg-[#E7C1D3] w-11/12 mx-auto rounded-xl p-5 gap-6 mb-6">
<div>
<img src="./images/concept.png" alt="">
</div>
<div class="">
<h3 class="text-lg font-extrabold text-[#1C1C1C] py-2">Concept</h3>
<p class="text-[#494949]">Designing residence involves planning, conceptualizing, and creating functional living spaces.</p>
</div>
</div>
<!-- Design Process -->
<div class="bg-[#EFDA6E] w-11/12 mx-auto rounded-xl p-5 gap-6 mb-6">
<div>
<img src="./images/flow-chart.png" alt="">
</div>
<div class="">
<h3 class="text-lg font-extrabold text-[#1C1C1C] py-2">Design Process</h3>
<p class="text-[#494949]">Research, concept development, design, review, finalize, and implement residential plans.</p>
</div>
</div>
<!-- Supervision -->
<div class="bg-[#A4DAC3] w-11/12 mx-auto rounded-xl p-5 gap-6 mb-6">
<div>
<img src="./images/vision.png" alt="">
</div>
<div class="">
<h3 class="text-lg font-extrabold text-[#1C1C1C] py-2">Supervision</h3>
<p class="text-[#494949]">Oversee construction, ensure quality, address issues, and ensure design adherence.</p>
</div>
</div>
<!-- Budget Planning -->
<div class="bg-[#77AAEA] w-11/12 mx-auto rounded-xl p-5 gap-6 mb-6">
<div>
<img src="./images/budget-planning.png" alt="">
</div>
<div class="">
<h3 class="text-lg font-extrabold text-[#1C1C1C] py-2">Budget Planning</h3>
<p class="text-[#494949]">Estimate costs, allocate funds, track expenses, and adjust as needed.</p>
</div>
</div>
</div>
</section>
<!-- Works Process section End -->
<!-- Our Latest Portfolio section Start -->
<section class="px-8 md:px-20 pb-20 lg:py-20 lg:bg-white">
<!-- Our Latest Portfolio text -->
<div class="flex flex-col justify-center items-center">
<a class="btn bg-[#ABEF5F33] font-bold border-none rounded-3xl text-lg text-[#494949]"><i class="flex w-8 h-8 fa-solid fa-arrow-right rounded-full p-1 justify-center items-center"></i>Explore our Latest works</a>
<h1 class="text-2xl lg:text-4xl text-center lg:text-start font-bold text-[#212121] mt-6">Our Latest Portfolio</h1>
<p class="text-center lg:text-start text-base mt-6 lg:text-lg leading-6 pb-10">Explore our latest portfolio showcasing elegant residence designs. Discover unique features, modern aesthetics, and innovative solutions for luxury living.</p>
</div>
<!-- Our Latest Portfolio box section -->
<div class="container mx-auto grid md:grid-cols-2 lg:grid-cols-12 gap-x-5">
<div class="md:mt-5 bg-white p-6 rounded-2xl md:col-span-2 lg:col-span-8 md:flex gap-6 lg:border-2 border-[#e9e9e9]">
<div class="flex md:w-3/4 justify-center lg:border-2 border-[#e9e9e9] border-dashed">
<img class="w-full h-52" src="./images/img1.png" alt="">
</div>
<div class="">
<h3 class="text-lg font-extrabold text-[#1C1C1C] py-2">Commercial</h3>
<p class="text-[#494949]">Discover our latest portfolio featuring cutting-edge residential and commercial designs that blend innovation with functionality.</p>
<a class="flex font-bold text-base text-[#212121] gap-2 items-center my-4 py-2" href="#">View Details<i class="flex justify-center items-center w-8 h-8 fa-solid fa-arrow-right bg-[#ABEF5F] rounded-full p-1 -rotate-45 "></i></a>
</div>
</div>
<div class="mt-4 md:mt-5 lg:col-span-4 bg-white rounded-2xl p-5 lg:border-2 border-[#e9e9e9]">
<img class="w-full h-56 lg:border-2 border-[#e9e9e9] border-dashed" src="./images/img2.png" alt="">
</div>
<div class="mt-4 md:mt-5 lg:col-span-3 bg-white rounded-2xl p-5 lg:border-2 border-[#e9e9e9]">
<img class="w-full h-56 lg:border-2 border-[#e9e9e9] border-dashed" src="./images/img3.png" alt="">
</div>
<div class="mt-4 md:mt-5 bg-white p-6 rounded-2xl md:col-span-2 lg:col-span-6 md:flex gap-6 lg:border-2 border-[#e9e9e9]">
<div class="flex md:w-3/4 justify-center">
<img class="w-full h-52 lg:border-2 border-[#e9e9e9] border-dashed" src="./images/img4.png" alt="">
</div>
<div class="">
<h3 class="text-lg font-extrabold text-[#1C1C1C] py-2">Commercial</h3>
<p class="text-[#494949]">Explore our latest portfolio showcasing modern residential and commercial projects with exceptional design and functionality.</p>
<a class="flex font-bold text-base text-[#212121] gap-2 items-center my-4 py-2" href="#">View Details<i class="flex justify-center items-center w-8 h-8 fa-solid fa-arrow-right bg-[#ABEF5F] rounded-full p-1 -rotate-45 "></i></a>
</div>
</div>
<div class="mt-4 md:mt-5 lg:col-span-3 bg-white rounded-2xl p-5 lg:border-2 border-[#e9e9e9]">
<img class="w-full h-56 lg:border-2 border-[#e9e9e9] border-dashed" src="./images/img5.png" alt="">
</div>
<!-- Double Use image large device hidden-->
<div class="mt-4 md:mt-5 bg-white rounded-2xl p-5 lg:hidden">
<img class="w-full h-56" src="./images/img3.png" alt="">
</div>
</div>
</Section>
<!-- Our Latest Portfolio section End -->
<!-- Aditional section (FAQ) start -->
<section class="container mx-auto py-8 md:py-24">
<!-- FAQ text -->
<div class="flex flex-col justify-center items-center px-10">
<a class="btn bg-white font-bold border-none rounded-3xl text-lg text-[#494949]"><i class="flex justify-center items-center w-8 h-8 fa-solid fa-arrow-right rounded-full p-1"></i>Common Question</a>
<h1 class="text-2xl lg:text-4xl text-center lg:text-start font-bold text-[#212121] mt-6">FAQ: Residential Design</h1>
<p class="text-center lg:text-start text-base mt-6 lg:text-lg leading-6 pb-10">Address frequently asked questions related to residential design, such as timelines, budgeting, and customization options.</p>
</div>
<!-- FAQ QUestion & answer -->
<div class="container mx-auto px-5">
<!-- question 1 -->
<div class="collapse collapse-plus bg-white mb-8 md:mb-12">
<input type="radio" name="my-accordion-3" checked="checked" />
<div class="collapse-title text-lg md:text-2xl font-extrabold text-[#1C1C1C]">What is residential design, and why is it important?</div>
<div class="collapse-content">
<p class="text-[#494949] text-base md:text-lg lg:text-xl">Residential design creates functional, aesthetically pleasing homes, enhancing comfort and reflecting personal style. It improves daily living and adds property value through thoughtful, tailored design solutions.</p>
</div>
</div>
<!-- question 2 -->
<div class="collapse collapse-plus bg-white mb-8 md:mb-12">
<input type="radio" name="my-accordion-3" />
<div class="collapse-title text-lg md:text-2xl font-extrabold text-[#1C1C1C]">How do I start the residential design process with your team?</div>
<div class="collapse-content">
<p class="text-[#494949] text-base md:text-lg lg:text-xl">Start by contacting us for an initial consultation. We’ll discuss your needs, preferences, and budget to develop a customized design plan, guiding you through each step of the process.</p>
</div>
</div>
<!-- question 3 -->
<div class="collapse collapse-plus bg-white mb-8 md:mb-12">
<input type="radio" name="my-accordion-3" />
<div class="collapse-title text-lg md:text-2xl font-extrabold text-[#1C1C1C] ">What factors should I consider when designing my home?</div>
<div class="collapse-content">
<p class="text-[#494949] text-base md:text-lg lg:text-xl">Consider your lifestyle, family needs, budget, and design preferences. Evaluate space functionality, storage, lighting, and sustainability to create a comfortable and cohesive living environment.</p>
</div>
</div>
<!-- question 4 -->
<div class="collapse collapse-plus bg-white mb-8 md:mb-12">
<input type="radio" name="my-accordion-3" />
<div class="collapse-title text-lg md:text-2xl font-extrabold text-[#1C1C1C] ">What is the typical cost of a residential design project?</div>
<div class="collapse-content">
<p class="text-[#494949] text-base md:text-lg lg:text-xl">Costs depend on space size, design complexity, and services needed. We offer customized pricing and provide a detailed estimate after the initial consultation to fit your budget.</p>
</div>
</div>
<!-- question 5 -->
<div class="collapse collapse-plus bg-white mb-8">
<input type="radio" name="my-accordion-3" />
<div class="collapse-title text-lg md:text-2xl font-extrabold text-[#1C1C1C] ">Do you offer sustainable or eco-friendly design options?</div>
<div class="collapse-content">
<p class="text-[#494949] text-base md:text-lg lg:text-xl">Yes, we offer sustainable design options, including energy-efficient materials and eco-friendly products, to create beautiful spaces with minimal environmental impact.</p>
</div>
</div>
</section>
<!-- Aditional section (FAQ) end -->
<!-- Let's discuss section Start -->
<section class="bg-img bg-no-repeat bg-cover border-4 py-8 px-6 lg:border-8 lg:py-24 border-white">
<!-- Let's discuss section text -->
<div class="container mx-auto backdrop:relative flex flex-col justify-center items-center px-10">
<a class="btn bg-[#ABEF5F33] font-bold border-none rounded-3xl text-lg text-[#494949]"><i class="flex justify-center items-center w-8 h-8 fa-solid fa-arrow-right rounded-full p-1"></i>Let's Connect
</a>
<h1 class="text-2xl lg:text-4xl text-center lg:text-start font-bold text-[#212121] mt-6">Let's Discuss Next Project</h1>
<p class="text-center lg:text-start text-base mt-6 lg:text-lg leading-6 pb-10">Let’s discuss the next project to outline goals, define roles, set deadlines, and allocate resources for optimal results and efficiency.</p>
</div>
<!-- text input form -->
<form action="" class="md:w-9/12 mx-auto text-center grid grid-cols-1 md:gap-x-5 lg:gap-x-6 md:grid-cols-2 ">
<input type="text" placeholder="First Name*" required class="input w-full rounded-full mb-6"/>
<input type="text" placeholder="Last Name*" class="input w-full rounded-full mb-6"/>
<input type="text" placeholder="Phone Number*" class="input w-full rounded-full mb-6"/>
<input type="text" placeholder="Email Addres*" class="input w-full rounded-full mb-6"/>
<textarea class="textarea md:col-span-2 w-full h-60 rounded-3xl my-6 p-5" placeholder="Write your message here"></textarea>
<button type="submit" class="w-full md:col-span-2">
<a class="w-full btn bg-[#ABEF5F] font-bold border-none rounded-full text-xl">Send Mail<i class="w-8 h-8 fa-solid fa-arrow-right bg-black rounded-full p-1 -rotate-45 text-white justify-center items-center"></i></a>
</button>
</form>
</section>
<!-- Let's discuss section End -->
<!-- Main section end -->
<!-- Footer Section Start -->
<footer class="bg-black text-center py-16 lg:py-24 px-8">
<a class="btn btn-ghost text-[#E9E9E9] text-3xl font-bold mb-6" href="#"><i class="w-11 h-11 fa-solid fa-arrow-right bg-[#ABEF5F] rounded-full p-1 text-[#1C1C1C] -rotate-45 flex justify-center items-center"></i>Rinterio</a>
<p class="text-[#737373] text-base leading-6">The barn house captivates with its blend of rustic charm and modern sophistication, featuring weathered wood, sleek metal accents.</p>
<div class="my-6 flex justify-center">
<ul class="menu md:flex-row px-1 gap-y-2 md:gap-x-12 lg:gap-x-20 text-base font-medium text-[#E9E9E9] items-center">
<li><a class="">Home</a></li>
<li><a class="">Services</a></li>
<li><a class="">Portfolio</a></li>
<li><a class="">Blogs</a></li>
<li><a class="">Contact Us</a></li>
</ul>
</div>
<a class="btn bg-[#ABEF5F] font-bold border-none rounded-3xl text-2xl">Book Consult<i class="w-8 h-8 fa-solid fa-arrow-right bg-black rounded-full p-1 -rotate-45 text-white justify-center items-center"></i></a>
</footer>
<!-- Footer Section End -->
</body>
</html>