-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
140 lines (140 loc) · 6.17 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Real Estate</title>
</head>
<body>
<nav class="fixed top-0 left-0 right-0 bg-white">
<div class="w-4/5 mx-auto py-3 md:flex">
<div class="flex-none text-center">
<a href="#" class="font-bold font-serif text-xl px-2 py-1">Real Estate</a>
</div>
<div class="grow text-center">
<a href="#" class="px-2 py-1">Home</a>
<a href="#" class="px-2 py-1">Properties</a>
<a href="#" class="px-2 py-1">Blog</a>
</div>
<div class="flex-none text-center">
<a href="#" class="flex-none px-2 py-1">Contact</a>
</div>
</div>
</nav>
<header>
<div class="w-4/5 mx-auto py-3 h-screen flex justify-center items-center">
<div class="bg-slate-300 py-5 rounded-lg h-64 w-full">
<h1 class="text-center font-bold text-3xl">
Find A House
<br>
Relax As You Love
</h1>
<form action="#" class="w-4/5 bg-white rounded-lg mx-auto px-4 py-3 my-3">
<div class="grid grid-cols-2 lg:grid-cols-4">
<div>
<label class="font-bold">Location</label>
<select class="block">
<option>Assomada</option>
<option>Praia</option>
<option>Mindelo</option>
</select>
</div>
<div>
<label class="font-bold">Type</label>
<select class="block">
<option>Apartament</option>
<option>Hotel</option>
<option>Bedrooms</option>
</select>
</div>
<div>
<label class="font-bold">Range</label>
<select class="block">
<option>$0 - $200</option>
<option>$200 - $350</option>
<option>$350 - max</option>
</select>
</div>
<div class="text-center">
<button class="bg-black text-white rounded-full px-3 py-2">Search</button>
</div>
</div>
</form>
</div>
</div>
</header>
<section class="bg-slate-50 py-20">
<div class="w-4/5 mx-auto py-3">
<h3 class="font-bold text-2xl">Popular</h3>
<br>
<div class="grid grid-cols-1 md:grid-cols-3">
<div>
<div class="h-64 mx-3 rounded-lg overflow-hidden">
<img src="img/house.jpg" class="object-cover w-full h-full">
</div>
<p class="font-bold text-center">Luxury Apartment 1</p>
</div>
<div>
<div class="h-64 mx-3 rounded-lg overflow-hidden">
<img src="img/house2.jpg" class="object-cover w-full h-full">
</div>
<p class="font-bold text-center">Luxury Apartment 2</p>
</div>
<div>
<div class="h-64 mx-3 rounded-lg overflow-hidden">
<img src="img/house3.jpg" class="object-cover w-full h-full">
</div>
<p class="font-bold text-center">Luxury Apartment 3</p>
</div>
</div>
</div>
</section>
<section class="py-6">
<div class="w-4/5 mx-auto py-20">
<h3 class="font-bold text-2xl">Newest</h3>
<br>
<div class="grid grid-cols-1 md:grid-cols-3">
<div>
<div class="h-64 mx-3 rounded-lg overflow-hidden">
<img src="img/house.jpg" class="object-cover w-full h-full">
</div>
<p class="font-bold text-center">Luxury Apartment 1</p>
</div>
<div>
<div class="h-64 mx-3 rounded-lg overflow-hidden">
<img src="img/house2.jpg" class="object-cover w-full h-full">
</div>
<p class="font-bold text-center">Luxury Apartment 2</p>
</div>
<div>
<div class="h-64 mx-3 rounded-lg overflow-hidden">
<img src="img/house3.jpg" class="object-cover w-full h-full">
</div>
<p class="font-bold text-center">Luxury Apartment 3</p>
</div>
</div>
</div>
</section>
<footer class="bg-slate-100 py-10">
<div class="w-4/5 mx-auto py-3">
<div class="grid grid-cols-1 md:grid-cols-3">
<div class="text-center">
<p>© 2022 All right reserved</p>
</div>
<div class="text-center">
<a href="#">Privacy Police</a> |
<a href="#">Terms of Use</a> |
<a href="#">Language</a>
</div>
<div class="text-center text-xl">
<a href="#"><i class="fa-brands fa-facebook-square"></i></a>
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
</div>
</div>
</div>
</section>
</body>
</html>