-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
399 lines (392 loc) · 19.3 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
390
391
392
393
394
395
396
397
398
399
<!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="../assets/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<title>Vacation Rentals, Homes, Experiences & Places - Airbnb</title>
</head>
<body>
<div class="container">
<div class="banner">
<p>
<a href="http://example.com/"
>Get the latest on our COVID-19 response</a
>
</p>
</div>
<div class="top">
<div class="content top__content">
<div class="nav">
<div class="nav__logo">
<svg
xmlns="http://www.w3.org/2000/svg"
width="32px"
height="32px"
viewBox="0 0 16 16"
>
<path
fill-rule="evenodd"
d="M7.44484716,6.8471508 C6.85318386,6.84718205 6.31986346,7.10983449 6.01827408,7.54973437 C5.88477601,7.74446592 5.79723041,7.9722595 5.7581216,8.22681831 C5.71291913,8.5209703 5.73171573,8.85324673 5.81401141,9.21444463 C6.01047732,10.0770415 6.57114107,11.1058547 7.44500341,12.2132293 C8.31855325,11.1061985 8.87920138,10.0775727 9.07580791,9.21521024 C9.15822859,8.85382485 9.17710332,8.52142342 9.13193209,8.22717768 C9.09283891,7.97254074 9.00530893,7.7446378 8.87176399,7.54978124 C8.57014336,7.10978762 8.03669796,6.84711955 7.44484716,6.8471508 M1.75307025,10.3577093 C1.75305462,10.3577718 1.75302338,10.3578343 1.75299213,10.3578968 L1.73171118,10.404068 C1.61293165,10.6617518 1.49010531,10.9282323 1.37435699,11.1904004 C1.3025924,11.3529449 1.22779661,11.5269736 1.16690687,11.6983461 C1.01098725,12.1373398 0.965706657,12.5327872 1.02439331,12.9428281 C1.14454782,13.782066 1.70691467,14.5013212 2.49205954,14.8198634 C2.87999142,14.9772518 3.29520416,15.0316885 3.72622916,14.9816111 C4.13545761,14.9340805 4.53804553,14.7963169 4.95703946,14.5605234 C5.53821854,14.2334188 6.12624127,13.7310511 6.78827855,12.9933899 C5.73662191,11.6960962 5.0815064,10.501051 4.83902554,9.43655078 C4.72866776,8.9521203 4.7053556,8.49400194 4.76976092,8.07491426 C4.83188502,7.67076387 4.97446108,7.30381606 5.19356728,6.98427381 C5.68166958,6.272331 6.52325114,5.84724341 7.44478466,5.84718091 C8.36658381,5.84713404 9.20838411,6.2722685 9.69656454,6.98444568 C9.91568636,7.30417543 10.0582468,7.67123261 10.1203084,8.07542988 C10.1846668,8.49462693 10.1612609,8.95290154 10.0507469,9.43753514 C9.80812542,10.501676 9.15297866,11.696518 8.10171265,12.9933743 C8.76378118,13.7310667 9.35183516,14.23345 9.93296736,14.5605234 C10.3519613,14.7963325 10.7545648,14.9340805 11.163762,14.9816111 C11.5948027,15.0317041 12.0099998,14.9772518 12.3979317,14.8198634 C13.1830765,14.5013055 13.7454746,13.782066 13.8655979,12.9428281 C13.9243002,12.532834 13.8790039,12.1373867 13.7230687,11.6982993 C13.6657102,11.5368641 13.5986486,11.3784758 13.5156498,11.1903379 C13.4006046,10.9298104 13.2785126,10.6649236 13.1604362,10.4087867 L13.1369834,10.3578812 C13.1369053,10.3577093 13.1368116,10.3575374 13.1367491,10.3573812 C12.0345775,7.96627521 10.8509541,5.54106035 9.61862817,3.148845 C9.61861254,3.14881375 9.61858129,3.14876688 9.61856567,3.14873563 L9.56839452,3.05129954 C9.44324008,2.80814682 9.31382008,2.55674421 9.18319698,2.31363835 C9.04727707,2.06075139 8.91029468,1.81617681 8.72982855,1.60477363 C8.39211469,1.20910748 7.94783987,0.999969887 7.44500341,0.999969887 C6.94204195,0.999969887 6.49767338,1.20920123 6.1599439,1.60503925 C5.97941527,1.81658306 5.842511,2.06109514 5.70660672,2.31399772 C5.57568674,2.55765044 5.44596987,2.80966242 5.32053419,3.05337764 L5.2714099,3.14881375 C5.27133178,3.14897 5.27126928,3.149095 5.27117553,3.14925125 C4.03928713,5.54062285 2.85553865,7.96605646 1.75307025,10.3577093 M3.41662427,15.9997682 C2.96741203,15.9997682 2.53154335,15.915035 2.11611186,15.746475 C1.56732294,15.5238063 1.08453306,15.1596085 0.719944592,14.6932715 C0.355465498,14.2270751 0.118453307,13.6707863 0.0345326477,13.0845448 C-0.046872423,12.5158812 0.0153141761,11.9529675 0.224623644,11.3636322 C0.296481978,11.1613852 0.380027642,10.9667474 0.459588989,10.7865468 C0.57860289,10.5169726 0.703132336,10.246789 0.823568091,9.98548033 L0.844833408,9.939356 L0.845005281,9.938981 C1.9535361,7.53415647 3.14359698,5.09578555 4.38214153,2.69149226 C4.38225091,2.69130476 4.38234466,2.69113289 4.38243841,2.69096101 L4.4314377,2.59577489 C4.55885772,2.3481691 4.69063706,2.09212594 4.82577573,1.84067646 C4.98188285,1.55013379 5.15477097,1.242482 5.3992518,0.955970525 C5.92522855,0.339526331 6.65174928,0 7.44500341,0 C8.23805442,0 8.96445015,0.339370083 9.49039565,0.955579906 C9.73487648,1.24198201 9.90781148,1.54968067 10.0640123,1.84028584 C10.1988541,2.0912197 10.3303366,2.34663788 10.4574754,2.5936343 L10.5075372,2.69086726 C10.5075372,2.69088289 10.5075528,2.69089851 10.5075528,2.69091414 C11.746613,5.09617617 12.9368145,7.53490646 14.0451422,9.93932475 C14.0452515,9.93955912 14.0453765,9.93982474 14.0454859,9.94007474 L14.0685793,9.99019901 C14.1882963,10.2499609 14.312107,10.5185507 14.4304178,10.7865468 C14.5100886,10.9670442 14.5936655,11.1618227 14.6653519,11.3635854 C14.8746926,11.9530456 14.9368792,12.5159593 14.8554585,13.0845604 C14.7715379,13.6707707 14.5345413,14.2270595 14.1700466,14.6932715 C13.8054425,15.1596085 13.3226683,15.5238063 12.773895,15.746475 C12.2285747,15.9677062 11.6480363,16.0445644 11.0483731,15.9748779 C10.5122871,15.9126288 9.97199805,15.729944 9.44250572,15.4319327 C8.79149953,15.0655474 8.14830572,14.5275551 7.44500341,13.7578163 C6.74173235,14.5275395 6.09855417,15.0655161 5.4475011,15.4319327 C4.9180244,15.729944 4.37771972,15.9126288 3.84161812,15.9748779 C3.69880768,15.9914871 3.55704411,15.9997682 3.41662427,15.9997682"
/>
</svg>
<h2 class="nav__logo-name">airbnb</h2>
</div>
<div class="nav__center">
<div class="nav__link">Places to stay</div>
<div class="nav__link">Experiences</div>
<div class="nav__link">Online experiences</div>
</div>
<div class="nav__right">
<div class="nav__host">Become a host</div>
<div class="nav__locale"><i class="fa fa-globe fa-lg"></i></div>
<div class="nav__signin">
<i class="fa fa-bars" style="color: grey"></i>
<div class="nav__user-icon">
<i class="fa fa-user fa-lg"></i>
</div>
</div>
</div>
<div class="nav__center-2">
<div class="nav__link">Places to stay</div>
<div class="nav__link">Experiences</div>
<div class="nav__link">Online experiences</div>
</div>
</div>
<div class="search">
<div class="search__item search__location">
<div class="search__item-title">Location</div>
<div class="search__item-desc">Where are you going?</div>
</div>
<div class="search__item search__checkin">
<div class="search__item-title">Check in</div>
<div class="search__item-desc">Add dates</div>
</div>
<div class="search__item search__checkout">
<div class="search__item-title">Check out</div>
<div class="search__item-desc">Add dates</div>
</div>
<div class="search__item search__guests">
<div class="search__item-title">Guests</div>
<div class="search__item-desc">Add guests</div>
</div>
<div class="search__button">
<i style="color: white" class="fa fa-search fa-lg"></i>
</div>
</div>
<div class="explore">
<div class="explore__header"><h1>Go Near</h1></div>
<div class="explore__description">
Settle in somewhere new. Discover stays to live, work, or just
relax.
</div>
<button class="btn">Explore nearby</button>
</div>
</div>
</div>
<div class="content suggestions">
<div class="suggestion">
<img src="assets/images/yurt.jpg" alt="yurt" />
<div class="suggestion__content">
<div class="suggestion__title">Unique stays</div>
<div class="suggestion__description">
Spaces that are more than just a place to sleep.
</div>
</div>
</div>
<div class="suggestion">
<img src="assets/images/girl.jpg" alt="yurt" />
<div class="suggestion__content">
<div class="suggestion__title">Online experiences</div>
<div class="suggestion__description">
A new way to travel from home.
</div>
</div>
</div>
<div class="suggestion">
<img src="assets/images/house.jpg" alt="yurt" />
<div class="suggestion__content">
<div class="suggestion__title">Entire homes</div>
<div class="suggestion__description">
Comfortable private places, with room for friends or family.
</div>
</div>
</div>
</div>
<div class="experiences">
<div class="content experiences__content">
<div class="experiences__header">
<div class="experiences__header-content">
<div class="experiences__title">
<h1>Online Experiences: Field Trips</h1>
</div>
<div class="experiences__description">
Join interactive, global adventures with inspiring, kid-friendly
hosts.
</div>
</div>
<div class="experiences__button">
<button class="btn btn--black">Explore all</button>
</div>
</div>
<div class="experiences__featured">
<div class="experience">
<img src="assets/images/bill.jpg" alt="bill nye" />
<div class="experience__title">
<div>Decode the science of 2020 with Bill Nye</div>
</div>
</div>
<div class="experience">
<img src="assets/images/sri.jpg" alt="sri" />
<div class="experience__title">
<div>Go on a leopard safari in Sri Lanka</div>
</div>
</div>
<div class="experience">
<img src="assets/images/buenos.jpg" alt="buenos" />
<div class="experience__title">
<div>Discover Buenos Aires street and sketch</div>
</div>
</div>
<div class="experience">
<img src="assets/images/dive.jpg" alt="dive" />
<div class="experience__title">
<div>Dive under the sea with a shark scientist</div>
</div>
</div>
</div>
<div class="experiences__button-2">
<button class="btn btn--black">Explore all</button>
</div>
</div>
</div>
<div class="content lighthouse">
<div>
<div class="lighthouse__header">
<h1>
We embrace a world where everyone belongs, and stand with
#BlackLivesMatter.
</h1>
</div>
<button class="lighthouse__button btn btn--white">Learn more</button>
</div>
<div class="lighthouse__description">
We reject racism or bigotry of any kind. But now is a time for action
rather than words. So we’d like to share with you, Project Lighthouse,
a groundbreaking initiative launching in the United States to uncover,
measure, and overcome discrimination when booking or hosting on
Airbnb.
</div>
<button class="lighthouse__button-2 btn btn--white">Learn more</button>
</div>
<div class="content destinations">
<div class="destinations__header">
<h3>Destinations for future trips</h3>
</div>
<div class="destinations__tabs">
<div class="destinations__tab">Destinations for arts & culture</div>
<div class="destinations__tab">
Destinations for outdoor adventure
</div>
<div class="destinations__tab">Mountain cabins</div>
<div class="destinations__tab">Beach destinations</div>
<div class="destinations__tab">Popular destinations</div>
</div>
<div class="destinations__places">
<div>
<div class="destinations__city">New York</div>
<div class="destinations__state">New York</div>
</div>
<div>
<div class="destinations__city">Phoenix</div>
<div class="destinations__state">Arizona</div>
</div>
<div>
<div class="destinations__city">Atlanta</div>
<div class="destinations__state">Georgia</div>
</div>
<div>
<div class="destinations__city">Chicago</div>
<div class="destinations__state">Illinois</div>
</div>
<div>
<div class="destinations__city">Miami</div>
<div class="destinations__state">Florida</div>
</div>
<div>
<div class="destinations__city">San Diego</div>
<div class="destinations__state">California</div>
</div>
<div>
<div class="destinations__city">San Francisco</div>
<div class="destinations__state">California</div>
</div>
<div>
<div class="destinations__city">Nashville</div>
<div class="destinations__state">Tennessee</div>
</div>
<div>
<div class="destinations__city">Seattle</div>
<div class="destinations__state">Washington</div>
</div>
<div>
<div class="destinations__city">Boston</div>
<div class="destinations__state">Massachusetts</div>
</div>
<div>
<div class="destinations__city">Philadelphia</div>
<div class="destinations__state">Pennsylvania</div>
</div>
<div>
<div class="destinations__city">Dallas</div>
<div class="destinations__state">Texas</div>
</div>
<div>
<div class="destinations__city">Austin</div>
<div class="destinations__state">Texas</div>
</div>
<div>
<div class="destinations__city">Washington</div>
<div class="destinations__state">District of Columbia</div>
</div>
<div>
<div class="destinations__city">New Orleans</div>
<div class="destinations__state">Louisiana</div>
</div>
<div>
<div class="destinations__city">San Antonio</div>
<div class="destinations__state">Texas</div>
</div>
<div>
<div class="destinations__city">Houston</div>
<div class="destinations__state">Texas</div>
</div>
<div>
<div class="destinations__city">Los Angeles</div>
<div class="destinations__state">California</div>
</div>
<div>
<div class="destinations__city">London</div>
<div class="destinations__state">United Kingdom</div>
</div>
<div>
<div class="destinations__city">Paris</div>
<div class="destinations__state">France</div>
</div>
<div>
<div class="destinations__city">Memphis</div>
<div class="destinations__state">Tennessee</div>
</div>
<div>
<div class="destinations__city">Rome</div>
<div class="destinations__state">Italy</div>
</div>
<div>
<div class="destinations__city">Barcelona</div>
<div class="destinations__state">Spain</div>
</div>
<div>
<div class="destinations__city">Amsterdam</div>
<div class="destinations__state">Netherlands</div>
</div>
<div>
<div class="destinations__city">Lexington</div>
<div class="destinations__state">Kentucky</div>
</div>
</div>
</div>
<footer class="footer">
<div class="content footer__content">
<div class="footer__links">
<div>
<h4>About</h4>
<ul>
<li>How Airbnb works</li>
<li>Newsroom</li>
<li>Airbnb Plus</li>
<li>Luxe</li>
<li>HotelTonight</li>
<li>Airbnb for Work</li>
<li>Olympics</li>
<li>Careers</li>
</ul>
</div>
<div>
<h4>Community</h4>
<ul>
<li>Diversity & Belonging</li>
<li>Against Discrimination</li>
<li>Accessibility</li>
<li>Airbnb Associates</li>
<li>Frontline Stays</li>
<li>Frontline stays</li>
<li>Invite friends</li>
<li>Gift cards</li>
</ul>
</div>
<div>
<h4>Host</h4>
<ul>
<li>Host your home</li>
<li>Host an Online Experience</li>
<li>Host an Experience</li>
<li>Message from CEO Brian Chesky</li>
<li>Responsible hosting</li>
<li>Open Homes</li>
<li>Resource Center</li>
<li>Community Center</li>
</ul>
</div>
<div>
<h4>Support</h4>
<ul>
<li>Updates for COVID-19</li>
<li>Help Center</li>
<li>Cancellation options</li>
<li>Neighborhood Support</li>
<li>Trust & Safety</li>
</ul>
</div>
</div>
<div class="footer__bottom">
<div class="footer__copyright">
© 2020 Airbnb, Inc. All rights reserved
</div>
<div class="footer__boring">
<div>•</div>
<div class="footer__link">Privacy</div>
<div>•</div>
<div class="footer__link">Terms</div>
<div>•</div>
<div class="footer__link">Sitemap</div>
</div>
<div class="footer__locales">
<div class="footer__locale">
<i class="fa fa-globe fa-lg"></i>
<a href="http://example.com/">English (US)</a>
</div>
<div class="footer__locale">
$ <a href="http://example.com/">USD</a>
</div>
</div>
<div class="footer__social">
<div class="footer__social-link">
<i class="fa fa-facebook fa-lg"></i>
</div>
<div class="footer__social-link">
<i class="fa fa-twitter fa-lg"></i>
</div>
<div class="footer__social-link">
<i class="fa fa-instagram fa-lg"></i>
</div>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>