-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
342 lines (339 loc) · 19.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="dist/css/app.css">
<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=Lato:wght@700&family=Poppins:wght@400;500;600;700&display=swap"
rel="stylesheet">
<script src="https://kit.fontawesome.com/5134f85b78.js" crossorigin="anonymous"></script>
<link rel="icon" type="image/x-icon" href="dist/img/Besnik.svg">
<title>Real-Estate Landing Page v2</title>
</head>
<body>
<header class="bg-[#E6F0FF]">
<nav class="flex px-5 lg:px-40 pt-9 justify-center items-center font-poppins font-medium text-[14px]">
<div class="flex-none">
<img src="dist/img/Logo.svg" />
</div>
<div class="hidden space-x-6 md:pl-8 lg:pl-16 md:inline-flex md:flex-row text-[#4F5361]">
<a href="#">Home</a>
<a href="#">Fratures</a>
<a href="#">Service</a>
<a href="#">Listed</a>
<a href="#">Contact</a>
</div>
<!--<div class="hidden ml-auto md:inline-flex md:flex-row">
<button class="text-[#0F1B4C] w-full md:mx-3">Sign up</button>
<button class="bg-[#0F1B4C] rounded-lg text-white md:px-5 md:py-2.5">Register</button>
</div>-->
<div class="ml-auto inline-flex flex-row">
<button class="hidden text-[#0F1B4C] w-full mx-3 md:block">Sign up</button>
<button class="bg-[#0F1B4C] rounded-lg text-white px-5 py-2.5">Register</button>
</div>
</nav>
<!-- end navigation bar -->
<!-- header content -->
<div class="flex flex-col lg:flex-row lg:justify-between items-center pt-10 font-poppins">
<div class="mx-8 lg:ml-40 lg:basis-1/2">
<p class="text-[#687690] font-medium text-[18px]">Welcome to Besnik Agency</p>
<h2 class="text-[#000336] text-[56px] md:text-[64px] font-bold leading-[4.75rem]">
Discover a place you'll love to live.
</h2>
<h5 class="text-[#5A6473] text-[18px] font-normal">
get the best real estate deals first,
before they hit the mass market! HOT FORECLOSURE DEALS with one simple search
</h5>
<button
class="w-44 h-12 bg-[#0F1B4C] rounded-xl py-3.5 px-9 my-10 text-white text-[13px] font-medium lg:px-5 lg:py-2.5">
More About Us
</button>
</div>
<div class="hidden lg:flex lg:justify-end lg:basis-1/2 lg:mr-16">
<img class="w-full h-full" src="dist/img/header.svg" />
</div>
</div>
<!-- end header content -->
</header>
<main>
<section class="clients px-5 lg:px-40 mt-20">
<div class="py-10">
<div class="flex flex-col md:flex-row items-center font-poppins md:justify-between">
<div>
<div class="flex flex-row justify-center md:justify-start">
<img src="dist/img/Besnik.svg" />
</div>
<p class="text-[#7D8589] text-[16px] font-medium text-center my-6">More than 45,000+ companies trust
besnik</p>
</div>
<div>
<div class="flex flex-row justify-center md:justify-end">
<img class="w-28" src="dist/img/star.svg" />
</div>
<p class="text-[#7D8589] text-[16px] font-medium text-center my-3.5">5 Star Ratings (2k+ Review)</p>
</div>
</div>
<div
class="flex flex-col items-center justify-center space-y-4 mt-16 lg:mt-16 lg:flex-row lg:justify-between">
<img class="w-36" src="dist/img/meundies.svg" />
<img class="w-36" src="dist/img/slack.svg" />
<img class="w-36" src="dist/img/amazon.svg" />
<img class="w-36" src="dist/img/woocommerce.svg" />
<img class="w-36" src="dist/img/sitepoint.svg" />
</div>
</div>
</section>
<section class="how-its-work mt-20 px-5 lg:px-40">
<div class="flex flex-col font-poppins py-20">
<div class="flex flex-col items-center">
<div class="bg-[#000339] font-semibold rounded-xl w-10 h-1"></div>
<h4 class="text-[#000339] font-semibold text-3xl pt-2.5">How its works ?</h4>
<p class="text-[#5A6473] text-[16px] text-center pt-5 font-normal">Everything you need to know when
you're looking to buy, rent, or sell - all in one place.</p>
</div>
<div class="flex flex-col items-center justify-center md:space-x-36 md:flex-row pt-16">
<div class="flex flex-col items-center">
<img class="w-12" src="dist/img/addtocart.svg" />
<h5 class="text-[#3B3C45] font-medium text-xl pt-6">Buyer Guides</h5>
<a href="#"
class="flex text-[#0689FF] text-sm font-semibold pt-2 items-center w-full justify-evenly hover:underline hover:decoration-1">
How to buy
<img src="dist/img/Vector.svg" />
</a>
</div>
<div class="flex flex-col items-center py-12 md:py-0">
<img class="w-12" src="dist/img/rent.svg" />
<h5 class="text-[#3B3C45] font-medium text-xl pt-6">Renter Guides</h5>
<a href="#"
class="flex text-[#0689FF] text-sm font-semibold pt-2 items-center w-full justify-evenly hover:underline hover:decoration-1">
How to rent
<img src="dist/img/Vector.svg" />
</a>
</div>
<div class="flex flex-col items-center">
<img class="w-12" src="dist/img/buy.svg" />
<h5 class="text-[#3B3C45] font-medium text-xl pt-6">Seller Guides</h5>
<a href="#"
class="flex text-[#0689FF] text-sm font-semibold pt-2 items-center w-full justify-evenly hover:underline hover:decoration-1">
How to sell
<img src="dist/img/Vector.svg" />
</a>
</div>
</div>
<div class="flex flex-col items-center pt-12">
<button class="bg-[#0F1B4C] font-normal rounded-xl text-white py-3.5 px-6 text-[13px]">Sell Full
Guidelines</button>
</div>
</div>
</section>
<section class="featured-properties bg-[#F5FAFE] drop-shadow-lg px-5 lg:px-40 py-28 mt-10">
<div class="flex flex-col items-center md:flex-row md:justify-between md:items-end font-poppins">
<div>
<h4 class="text-[#000339] text-4xl font-semibold text-center md:text-start">Featured Properties</h5>
<p class="text-[#5A6473] text-base font-normal mt-3.5 text-center md:text-start">Everything you need
to know when you're looking</p>
</div>
<div class="mt-3.5">
<a href="#"
class="flex text-[#0689FF] font-semibold text-lg items-center hover:underline hover:decoration-1">
View All Properties
<img class="px-2" src="dist/img/Vector.svg" />
</a>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-3 gap-x-[30px] gap-y-[30px] mt-16">
<div class="drop-shadow-[0_0_65px_#E2EEF9]">
<img class="h-max w-full" src="dist/img/house3.svg" />
<div class="bg-white rounded-b-xl pl-5 pt-5 pb-5 pr-9 font-poppins">
<h5 class="font-semibold text-xl text-[#000339]">$35000</h5>
<p class="font-medium text-sm text-[#A3A6AB]">8502 Preston Rd. Inglewood, Maine 98280</p>
<div class="flex flex-wrap text-sm mt-5 justify-between">
<div class="grid grid-flow-col space-x-2">
<img src="dist/img/Group 457.svg" />
<p>5 Beds</p>
</div>
<div class="grid grid-flow-col space-x-2">
<img src="dist/img/Group 458.svg" />
<p>2 both</p>
</div>
<div class="grid grid-flow-col space-x-2">
<img src="dist/img/Subtract.svg" />
<p>2000 Sqft</p>
</div>
</div>
</div>
</div>
<div class="drop-shadow-[0_0_65px_#E2EEF9]">
<img class="h-max w-full" src="dist/img/house3.svg" />
<div class="bg-white rounded-b-xl pl-5 pt-5 pb-5 pr-9 font-poppins">
<h5 class="font-semibold text-xl text-[#000339]">$35000</h5>
<p class="font-medium text-sm text-[#A3A6AB]">8502 Preston Rd. Inglewood, Maine 98280</p>
<div class="flex flex-wrap text-sm mt-5 justify-between">
<div class="grid grid-flow-col space-x-2">
<img src="dist/img/Group 457.svg" />
<p>5 Beds</p>
</div>
<div class="grid grid-flow-col space-x-2">
<img src="dist/img/Group 458.svg" />
<p>2 both</p>
</div>
<div class="grid grid-flow-col space-x-2">
<img src="dist/img/Subtract.svg" />
<p>2000 Sqft</p>
</div>
</div>
</div>
</div>
<div class="drop-shadow-[0_0_65px_#E2EEF9]">
<img class="h-max w-full" src="dist/img/house3.svg" />
<div class="bg-white rounded-b-xl pl-5 pt-5 pb-5 pr-9 font-poppins">
<h5 class="font-semibold text-xl text-[#000339]">$35000</h5>
<p class="font-medium text-sm text-[#A3A6AB]">8502 Preston Rd. Inglewood, Maine 98280</p>
<div class="flex flex-wrap text-sm mt-5 justify-between">
<div class="grid grid-flow-col space-x-2">
<img src="dist/img/Group 457.svg" />
<p>5 Beds</p>
</div>
<div class="grid grid-flow-col space-x-2">
<img src="dist/img/Group 458.svg" />
<p>2 both</p>
</div>
<div class="grid grid-flow-col space-x-2">
<img src="dist/img/Subtract.svg" />
<p>2000 Sqft</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="stat px-5 lg:px-40 mt-16 font-poppins">
<div class="flex flex-col lg:flex-row lg:pt-12 justify-center items-center">
<div class="relative">
<div
class="hidden absolute lg:flex flex-col bg-white drop-shadow-sm rounded-b-xl divide-solid divide-y w-60 h-64 px-5 justify-center lg:-left-1/3">
<div class="mb-6">
<div class="flex justify-between">
<h5 class="font-semibold text-[26px] text-[#000339]">40,000+</h5>
<img src="dist/img/high.svg" />
</div>
<p class="text-[#A7A7A7] text-xs font-normal mt-2">
By avarage for 2 bedroom apments in San Francisco, CA
</p>
</div>
<div class="space-y-4">
<div class="flex mt-6 space-x-3.5">
<img class="h-4" src="dist/img/user1.svg" />
<img class="h-4" src="dist/img/user1.svg" />
<img class="h-4" src="dist/img/user1.svg" />
</div>
<div class="flex space-x-3.5">
<img class="h-4" src="dist/img/user1.svg" />
<img class="h-4" src="dist/img/user1.svg" />
<img class="h-4" src="dist/img/user1.svg" />
<img class="h-4" src="dist/img/user1.svg" />
</div>
</div>
</div>
<img class="hidden lg:basis-2/3 lg:block w-[400px] h-[460px]" src="dist/img/house.svg" />
</div>
<div class="lg:basis-1/3 lg:pl-40 lg:pr-14 lg:pb-16 pt-8">
<div class="bg-[#000339] font-semibold rounded-xl w-10 h-1"></div>
<h4 class="text-[#000339] font-semibold text-3xl pt-2.5">You’ve found a neighborhood you love.</h4>
<p class="text-[#5A6473] text-base font-normal md:text-start mt-5">
When you own a home, you’re committing to living in one location for a while. In a recent Trulia
survey, we found that five out of six respondents said finding the right neighborhood
</p>
</div>
</div>
<div
class="flex flex-col md:flex-row mt-10 lg:mt-28 mb-12 items-center space-y-4 md:justify-between font-poppins">
<div>
<h5 class="font-semibold text-[#000339] text-[64px]">2,500</h5>
<p class="text-[#7D8589] text-[18px] font-medium text-center md:text-start">Homes For Sale</p>
</div>
<div>
<h5 class="font-semibold text-[#000339] text-[64px]">5,000+</h5>
<p class="text-[#7D8589] text-[18px] font-medium text-center md:text-start">Homes Recently Sold</p>
</div>
<div>
<h5 class="font-semibold text-[#000339] text-[64px]">170+</h5>
<p class="text-[#7D8589] text-[18px] font-medium text-center md:text-start">Price Reduced</p>
</div>
</div>
</section>
<section class="stat px-5 lg:px-40 mt-12 font-poppins">
<div class="pt-10">
<div class="flex bg-[#063183] rounded-[20px] w-full h-[23.125rem] justify-center items-center">
<div class="basis-1/2 flex flex-col md:pl-20 md:block">
<h4 class="text-white font-semibold text-3xl text-center md:text-start">Featured Properties</h4>
<p class="text-[#9cadce] text-[16px] font-normal pt-4 text-center md:text-start">Everything you need
to know when you're looking</p>
<button class="py-3.5 px-[22px] text-[#002366] text-[13px] font-medium bg-white mt-5 rounded-xl">Get
Started Now</button>
</div>
<div class="hidden md:block">
<img class="max-w-none" src="dist/img/phone.svg" />
</div>
</div>
</div>
</section>
</main>
<footer class="stat px-5 lg:px-40 mt-14">
<div class="flex flex-col justify-center pt-12 pb-14">
<div class="flex flex-col md:flex-row md:justify-between gap-6">
<div>
<h5 class="text-[#1C1C1D] text-xl font-bold font-lato">Product</h5>
<ul class="mt-[42px] text-[#7A7A7E] text-[16px] font-normal space-y-[18px] font-poppins">
<li><a href="#">Listing</a></li>
<li><a href="#">Property</a></li>
<li><a href="#">Agents</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<div>
<h5 class="text-[#1C1C1D] text-xl font-bold font-lato">Resources</h5>
<ul class="mt-[42px] text-[#7A7A7E] text-[16px] font-normal space-y-[18px] font-poppins">
<li><a href="#">Our Homes</a></li>
<li><a href="#">Member Stories</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Free trial</a></li>
</ul>
</div>
<div>
<h5 class="text-[#1C1C1D] text-xl font-bold font-lato">Company</h5>
<ul class="mt-[42px] text-[#7A7A7E] text-[16px] font-normal space-y-[18px] font-poppins">
<li><a href="#">Patnerships</a></li>
<li><a href="#">Terms of use</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Sitemap</a></li>
</ul>
</div>
<div>
<h5 class="text-[#1C1C1D] text-xl font-bold font-lato">Get in touch</h5>
<p class="mt-[42px] text-[#7A7A7E] text-[16px] font-normal space-y-[18px] font-poppins">You’ll find your next home, in any style you prefer.</p>
<div class="flex mt-10 space-x-4"><!--bg-[#F9F9F9]-->
<a class="w-7 h-7 bg-[#F9F9F9] rounded text-center" href="#">
<i class="fab fa-facebook-f"></i>
</a>
<a class="w-7 h-7 bg-[#F9F9F9] rounded text-center" href="#">
<i class="fab fa-twitter"></i>
</a>
<a class="w-7 h-7 bg-[#F9F9F9] rounded text-center" href="#">
<i class="fab fa-linkedin-in"></i>
</a>
</div>
</div>
</div>
<div class="flex md:justify-between justify-center footer-bottom mt-[74px]">
<img class="hidden md:block" src="dist/img/Besnik.svg" />
<p class="text-[#C2C2C2] text-sm font-normal font-poppins">Copyright 2020.com, All rights reserved.</p>
</div>
</div>
</div>
</footer>
</body>
</html>