-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
240 lines (235 loc) · 8.51 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>|Home Page</title>
<link rel="stylesheet" href="./style.css" />
<link rel="stylesheet" href="./media.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
</head>
<body>
<header>
<nav role="navbar">
<!-- Nav Bar -->
<article class="nav-bar">
<!-- Nav Content -->
<div class="nav-content">
<!-- Nav Logo -->
<div class="nav-logo">
<img src="./logo.png.webp" alt="logo" />
</div>
<!-- Nav Links -->
<div class="nav-links">
<!-- link -->
<div class="links">
<a href="./index.html">Home</a>
</div>
<!-- link -->
<div class="links">
<a href="https://preview.colorlib.com/theme/sel/about-us.html"
>About</a
>
</div>
<!-- link -->
<div class="links">
<a href="https://preview.colorlib.com/theme/sel/properties.html"
>Properties</a
>
</div>
<!-- link -->
<div class="links">
<a href="https://preview.colorlib.com/theme/sel/agents.html"
>Team</a
>
</div>
<div class="links">
<a href="">Pages</a>
</div>
<div class="links">
<a href="">Blog </a>
</div>
<div class="links">
<a href="">Contact</a>
</div>
<div class="nav-icon">
<i class="fa-solid fa-magnifying-glass"></i>
</div>
</div>
<!-- Mob-Visibility Menu Bars -->
<div class="mob-visibility-menu">
<i class="fa-solid fa-bars" id="mob-menu-bars"></i>
</div>
</div>
</article>
</nav>
</header>
<!-- Main Section -->
<main>
<section id="main-sec1">
<!-- Main Sec 1 Content -->
<div class="main-sec-1-content">
<div class="main-sec1-header"><h3>THE JOY OF HOME OWNING</h3></div>
<div class="main-sec1-header"><h1>Find Your New Home</h1></div>
<div class="main-sec2-header"></div>
</div>
</section>
<section class="font-awesome">
<div class="advanced_search">
<h3>Search Properties for</h3>
<div class="search_select">
<select class="s_select" style="display: none">
<option value="1">Choose Locations</option>
<option value="2">Property Type</option>
<option value="4">Bedrooms</option>
</select>
<div class="nice-select s_select" tabindex="0">
<span class="current">Choose Locations</span>
<ul class="list">
<li data-value="1" class="option selected focus">
Choose Locations
</li>
<li data-value="2" class="option">Property Type</li>
<li data-value="4" class="option">Bedrooms</li>
</ul>
</div>
<select class="s_select" style="display: none">
<option value="1">Property Type</option>
<option value="2">Choose Locations</option>
<option value="4">Bedrooms</option>
</select>
<div class="nice-select s_select" tabindex="0">
<span class="current">Property Type</span>
<ul class="list">
<li data-value="1" class="option selected focus">
Property Type
</li>
<li data-value="2" class="option">Choose Locations</li>
<li data-value="4" class="option">Bedrooms</li>
</ul>
</div>
<select class="s_select" style="display: none">
<option value="1">Bedrooms</option>
<option value="2">Property Type</option>
<option value="4">Choose Locations</option>
</select>
<div class="nice-select s_select" tabindex="0">
<span class="current">Bedrooms</span>
<ul class="list">
<li data-value="1" class="option selected">Bedrooms</li>
<li data-value="2" class="option">Property Type</li>
<li data-value="4" class="option">Choose Locations</li>
</ul>
</div>
<select class="s_select" style="display: none">
<option value="1">Bathrooms</option>
<option value="2">Property Type</option>
<option value="4">Bedrooms</option>
</select>
<div class="nice-select s_select" tabindex="0">
<span class="current">Bathrooms</span>
<ul class="list">
<li data-value="1" class="option selected">Bathrooms</li>
<li data-value="2" class="option">Property Type</li>
<li data-value="4" class="option">Bedrooms</li>
</ul>
</div>
</div>
<div class="search_range">
<div class="range_item">
<h5>Price Range</h5>
<div
id="slider-range"
class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"
>
<div
class="ui-slider-range ui-corner-all ui-widget-header"
style="left: 16%; width: 84%"
></div>
<span
tabindex="0"
class="ui-slider-handle ui-corner-all ui-state-default"
style="left: 16%"
></span
><span
tabindex="0"
class="ui-slider-handle ui-corner-all ui-state-default"
style="left: 100%"
></span>
</div>
<span class="d_text">$200</span>
<input
type="text"
id="amount"
readonly=""
style="border: 0"
class="amount"
/>
</div>
<div class="range_item">
<h5>property Area</h5>
<div
id="slider-range2"
class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"
>
<div
class="ui-slider-range ui-corner-all ui-widget-header"
style="width: 84%; left: 16%"
></div>
<span
tabindex="0"
class="ui-slider-handle ui-corner-all ui-state-default"
style="left: 16%"
></span
><span
tabindex="0"
class="ui-slider-handle ui-corner-all ui-state-default"
style="left: 100%"
></span>
</div>
<span class="d_text2">50sqm</span>
<input
type="text"
id="amount2"
readonly=""
style="border: 0"
class="amount2"
/>
</div>
</div>
<button type="submit" value="submit" class="btn submit_btn">
Search Property
</button>
</div>
</section>
</main>
<!-- -->
<!-- Footer Section -->
<footer>
<article class="foot-section">
<div class="foot-content">
<!-- Foot Section 1 -->
<div class="foot-sec1">
<h3>About Us</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Temporibus praesentium incidunt perferendis debitis ducimus,
facere nam voluptate aliquam quo! In reprehenderit molestiae sed
iusto optio quidem, quam adipisci explicabo sint.
</p>
</div>
<!-- Foot Section 2 -->
<div class="foot-sec2"></div>
<!-- Foot Section 3 -->
<div class="foot-sec3"></div>
</div>
</article>
</footer>
</body>
</html>