-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
389 lines (371 loc) · 19.5 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
<!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">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Mirian Revishvili">
<meta name="googlebot" content="notranslate">
<meta name="rating" content="adult">
<meta name="description" content="buildings, flats, and houses for rent across London
UK and the All world">
<meta property="og:url" content="https://www.facebook.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="Facebook - Log In or Sign Up">
<meta property="og:description" content="Create an account or log into Facebook. Connect with friends, family and other people you know. Share photos and videos, send messages and get updates.">
<meta property="og:image" content="https://www.facebook.com/images/fb_icon_325x325.png">
<meta http-equiv="refresh" content="30">
<script src="https://kit.fontawesome.com/6a3c4b31cb.js" crossorigin="anonymous"></script>
<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=Montserrat:wght@100;300;400;500;600;700;800;900&family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="slick.css">
<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet">
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="css/global.css">
<title>Final project</title>
</head>
<body>
<header>
<div class="container-1">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid ">
<a class="navbar-brand logo" href="index.html"><img class="logo" src="images/Group 9738.png" alt="modern"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto text-center mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html"><span class="active-page">Home</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/about.html">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Featured </a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Apartment Plans</a></li>
<li><a class="dropdown-item" href="#">Dream Apartment</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Featured Apartment</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="pages/contact.html" >Contact</a>
</li>
</ul>
<div class="geolab-dive ">
<a href="https://geolab.edu.ge/" > <img class="geolab animate__animated animate__hinge" src="images/GEOLAB.png" alt="geolab-logo"></a>
</div>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Saved Search" aria-label="Search">
<div class="div-bell">
<img src="images/bell.png" alt="notification-bell">
</div>
<button class="btn btn-outline-success" type="submit"> <a href="pages/login.html">LOGIN</a> </button>
</form>
</div>
</div>
</nav>
</div>
</header>
<section>
<div class="bigimage">
<img src="images/pierre-chatel-innocenti-gxyeia7Syuk-unsplash.png" alt="house">
</div>
<div class="nearbigimage">
<h2 >Let’s find <br>yours Dream..</h2>
<p>Building award winning properties across London <br> UK and the All world</p>
</div>
<nav class="first-nav">
<ul>
<li>Buy</li>
<li>Sell</li>
<li>Rent</li>
</ul>
</nav>
<div class="box">
<div>
<h6>City/Street</h6>
<p>Enter City</p>
</div>
<div>
<h6>Apartment Type</h6>
<p>Deluxe Portion</p>
</div>
<div >
<h6>Price Range</h6>
<p>Min price - Max price</p>
</div>
<div class="last">
<h6>+ Advance Filter</h6>
<a href="#"><button>Search</button></a>
</div>
</div>
</section>
<section class="section2">
<div class="head">
<h2><span>Hi, What do you want to your</span><br> Dream Apartment </h2>
<p>Select a Apartment type below to begins</p>
</div>
<div class="photos">
<div>
<img src="images/top_.png" alt="view from the building">
<p>Deluxe Portion</p>
<i class="fa fa-circle-check"></i>
</div>
<div>
<img src="images/delux.png" alt="delux">
<p>Double Height</p>
</div>
<div>
<img src="images/top_.png" alt="Penthouse">
<p>Penthouse</p>
</div>
<div>
<img src="images/studio.png" alt="studio">
<p>The Studio</p>
</div>
</div>
<div class="footer">
<a href="#"><button>Continue</button></a>
<h2>Featured Apartment </h2>
<p>The Most frequently searched and most popular apartment of the application will be in the list</p>
</div>
<div class="last">
<div class="wrap">
<div class="wrap1">
<img src="images/Group 9692.png" alt="building">
<img src="images/Group 9695.png" alt="for sale">
<img src="images/Group 9694.png" alt="location">
<img src="images/Group 9714.png" alt="amount ofnumbers">
<img src="images/Group 9712.png" alt="simbols">
<h6>Apartment London</h6>
<p>Beautiful Huge 1 Family House In Heart Of Westbury Newly Renovated<br> With New Furniture</p>
</div>
<div class="wrap2">
<img src="images/secound wrap.png" alt="building">
<img src="images/Group 9695.png" alt="for sale">
<img src="images/location2.png" alt="location">
<img src="images/conditions.png" alt="amount of numbers">
<img src="images/Group 9712.png" alt="simbols">
<h6>Studio Apartment</h6>
<p>Beautiful Huge 1 Family House In Heart Of Westbury Newly Renovated<br> With New Furniture</p>
</div>
<div class="wrap3">
<img src="images/three.png" alt="building">
<img src="images/Group 9695.png" alt="for sale">
<img src="images/yard.png" alt="location">
<img src="images/amount3.png" alt="amount ofnumbers">
<img src="images/Group 9712.png" alt="simbols">
<h6>Galliard Homes Apartment</h6>
<p>This Fabulous Two Bedroom Duplex Apartment Will Be Close To Some Of The Best Local Haunts And Venues The City Has To Offer.</p>
</div>
</div>
</div>
<img src="images/slide.png" alt="slide" class="slide-image">
<!-- SLIDE -->
<div id="carouselExampleIndicators" class="carousel slide ">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3" aria-label="Slide 4"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://www.w3schools.com/css/img_5terre.jpg" class=".d-md-block w-50" alt="houses nerar see">
</div>
<div class="carousel-item">
<img src="https://cdn.travelpulse.com/images/99999999-9999-9999-9999-999999999999/e4cfdce8-9055-e10f-c0ee-c61c8c29fbdf/630x355.jpg" class=".d-md-block w-50" alt="houses nerar see">
</div>
<div class="carousel-item">
<img src="https://lp-cms-production.imgix.net/features/2015/12/Riomaggiore_cs.jpg?auto=format&fit=crop&sharp=10&vib=20&ixlib=react-8.6.4&w=850" class=".d-md-block w-50" alt="houses nerar see">
</div>
<div class="carousel-item">
<img src="https://www.w3schools.com/css/img_5terre.jpg" class=".d-md-block w-50" alt="houses nerar see">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<section class="section3">
<h2>Apartment Plans</h2>
<nav class="nav3">
<ul>
<li>The Studio</li>
<li>Deluxe Portion</li>
<li>Penthouse</li>
<li>Top Garden</li>
<li>Double Height</li>
</ul>
</nav>
<div class="big-card3">
<img src="images/deluxportion.png" alt="deluxlist">
<img src="images/schem.png" alt="schem">
</div>
</section>
<section class="section4">
<h2>Buy <br>
Dream Apartment<br>
In <span>Prime location</span>
</h2><br>
<a href="#"><button>See All Apartment</button></a>
<img src="images/dots.png" alt="dots">
<img src="images/penhouse.png" alt="penthouse">
<img src="images/delux2.png" alt="studio">
<img src="images/video.png" alt="video">
</section>
<section class="section5">
<h4>Apartments</h4>
<h2>Featured Listings</h2>
<div class="cards8">
<div><img src="images/car.png" alt="car">
<p>Parking Space</p>
</div>
<div><img src="images/swimin poll.png" alt="swinning poll">
<p>Swinning Poll</p>
</div>
<div><img src="images/shield.png" alt="shield" class="circle">
<p>Private Security</p>
</div>
<div><img src="images/medical.png" alt="medical equipment">
<p>Medical Center</p>
</div>
<div><img src="images/area.png" alt="library area">
<p>Library Area</p>
</div>
<div><img src="images/king size beds.png" alt="king size beds" class="circle">
<p>King Size Beds</p>
</div>
<div><img src="images/smart home.png" alt="smart home" class="circle">
<p>Smart Home</p>
</div>
<div><img src="images/kids playland.png" alt="kids playland">
<p>Kids Playland</p>
</div>
</div>
</section>
<section class="section6">
<h2>Frequently Asked Questions</h2>
<div class="accordion last-cards" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h4>What the First Step of the Dream Apartment buying process ?</h4>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>First, you need to know how much you can borrow, knowing how much home you can afford narrows down online apartment searching to suitable Properties , thus no time is Wasted considering apartment that are not within your dream and budget.
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h4>How Long does It take to buy Apartment ?</h4>
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. overflow.
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h4>How much do I need for a down payment ?</h4>
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingfour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsefour" aria-expanded="false" aria-controls="collapseTwo">
<h4>What is a buyer's market ?</h4>
</button>
</h2>
<div id="collapsefour" class="accordion-collapse collapse" aria-labelledby="headingfour" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. overflow.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingfive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapsefive" aria-expanded="false" aria-controls="collapseTwo">
<h4>What is popular in Apartment ?</h4>
</button>
</h2>
<div id="collapsefive" class="accordion-collapse collapse" aria-labelledby="headingfive" data-bs-parent="#accordionExample">
<div class="accordion-body">
<p><strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. overflow.</p>
</div>
</div>
</div>
</div>
</section>
<footer class="footer-footer ">
<div class="footer-head ">
<div class="footer-one ">
<img src="images/logo modern.png" alt="logo modern">
<h6> The most beautiful exclusive properties and luxury apartments</h6>
<div class="icons-footer">
<span><i class="fa-brands fa-facebook-f"></i></span>
<span><i class="fa-brands fa-twitter"></i></span>
<span><i class="fa-brands fa-instagram"></i></span>
<span><i class="fa-brands fa-telegram"></i></span>
</div>
</div>
<div class="unordered-list">
<ul>
<li>Useful Links</li>
<li>About</li>
<li>Partners</li>
<li>Contact</li>
</ul>
<ul>
<li>Help?</li>
<li>FAQ</li>
<li>Term & Conditi0on</li>
<li>Policy</li>
<li>Privacy</li>
</ul>
<ul>
<li>Address</li>
<li>113-115 Old Brompton Road</li>
<li>SW7 3LE LONDON, UNITED KINGDOM</li>
<li>website :www.mordern.com</li>
<li>mobie</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<h3>© Copyright 2021, morden.com</h3>
<h3>Terms & Condition | Privacy Policy</h3>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>