-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
157 lines (157 loc) · 9.21 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
<!DOCTYPE html>
<html>
<head>
<title>webDesignPractice - del</title>
<link rel="stylesheet" type="text/css" href="./main.css" />
</head>
<body>
<h1 class="max-width-heading">Please set your screen size to be betweeen 1240px - 1310px. This design was not implemented as a responsive design.</h1>
<div class="body-container">
<header>
<div class="logo" style="width: 20%;">
<svg viewBox="0 0 25 25" width="fit-content" height="fot-content" class="airbnb">
<path d="M12 18.7l-.4-.5a12.3 12.3 0 0 1-2.5-4.6c0-.6-.1-1.2 0-1.6 0-.4.2-.9.4-1.2A3 3 0 0 1 12 9.5c1 0 2 .5 2.5 1.3.2.3.4.8.4 1.2.1.4 0 1 0 1.6-.3 1.3-1.2 3-2.5 4.6l-.4.5z"></path>
<path d="M12 18.8c1 1.6 2.5 2.9 4.2 3.2h.7a4.3 4.3 0 0 0 4.2-5v-.2a74.7 74.7 0 0 0-6.4-13.2c-.6-1-1.5-1.7-2.7-1.7s-2.1.8-2.7 1.7A74.7 74.7 0 0 0 3 16.8v.2l-.2.8a4.3 4.3 0 0 0 4.8 4.3h.2c1.7-.4 3.1-1.7 4.2-3.3"></path>
</svg>
<h1>airbnb</h1>
</div>
<nav class="navigation-container">
<ul class="navigation-list">
<li class="navigation-list-item ip">
<svg width="25" height="16" viewBox="3 0 16 16" fill="#1c1c1c">
<path d="M7.99985 0.349976C3.78135 0.349976 0.349854 3.78148 0.349854 7.99998C0.349854 12.2185 3.78135 15.65 7.99985 15.65C12.2184 15.65 15.6499 12.2185 15.6499 7.99998C15.6499 3.78148 12.2184 0.349976 7.99985 0.349976ZM1.68285 8.64997H3.86735C3.90085 9.42497 3.99535 10.1625 4.14085 10.85H2.33335C1.98351 10.1627 1.76301 9.41698 1.68285 8.64997ZM8.74985 3.84998V1.90748C9.25785 2.24998 9.74385 2.92348 10.1204 3.84998H8.74985ZM10.5274 5.14998C10.6859 5.81348 10.7954 6.54998 10.8339 7.34998H8.74985V5.14998H10.5274ZM7.24985 1.90748V3.84998H5.87985C6.25585 2.92348 6.74235 2.24998 7.24985 1.90748ZM7.24985 5.14998V7.34998H5.16585C5.20435 6.54998 5.31385 5.81348 5.47235 5.14998H7.24985ZM3.86735 7.34998H1.68285C1.76285 6.56498 1.99285 5.82498 2.33285 5.14998H4.14085C3.98937 5.87454 3.89789 6.61037 3.86735 7.34998ZM5.16585 8.64997H7.24985V10.85H5.47235C5.30192 10.1278 5.1993 9.39125 5.16585 8.64997ZM7.24985 12.15V14.0925C6.74235 13.7495 6.25585 13.0765 5.87985 12.15H7.24985ZM8.74985 14.0925V12.15H10.1204C9.74385 13.0765 9.25785 13.75 8.74985 14.0925ZM8.74985 10.85V8.64997H10.8339C10.8004 9.39125 10.6978 10.1278 10.5274 10.85H8.74985ZM12.1324 8.64997H14.3169C14.2369 9.43497 14.0069 10.175 13.6669 10.85H11.8589C12.0044 10.1625 12.0989 9.42497 12.1324 8.64997ZM12.1324 7.34998C12.1018 6.61037 12.0103 5.87454 11.8589 5.14998H13.6664C14.0074 5.82498 14.2364 6.56498 14.3169 7.34998H12.1324ZM12.7954 3.84998H11.5014C11.3192 3.31162 11.0813 2.7938 10.7914 2.30498C11.5556 2.68104 12.2369 3.20638 12.7949 3.84998H12.7954ZM5.20835 2.30498C4.91844 2.7938 4.68047 3.31162 4.49835 3.84998H3.20485C3.76298 3.20632 4.44439 2.68099 5.20885 2.30498H5.20835ZM3.20485 12.15H4.49935C4.69735 12.7245 4.93635 13.242 5.20935 13.695C4.44453 13.3191 3.76278 12.7937 3.20435 12.15H3.20485ZM10.7919 13.695C11.0818 13.2061 11.3197 12.6883 11.5019 12.15H12.7959C12.2377 12.7936 11.5563 13.319 10.7919 13.695Z"></path>
</svg>
<div class="ip_dropdown">
<p>English (US)</p>
<p>USD</p>
</div>
<svg width="9" height="6" fill="none" class="po">
<path d="M1 1L4.5 4.5L8 1" stroke="#1c1c1c" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</li>
<li class="navigation-list-item">Host your home</li>
<li class="navigation-list-item">Host an experience</li>
<li class="navigation-list-item">Help</li>
<li class="navigation-list-item">Log in</li>
<li class="navigation-list-item"><button class="navigation-list-item-button">Sign up</button></li>
</ul>
</nav>
</header>
<main>
<div class="left">
<h2>We bring the world's cultures to your fingertips - all you need to do is set the destination!</h2>
</div>
<div class="right">
<ul>
<li class="active rightLi">Places to stay</li>
<li class="rightLi">Monthly stays</li>
<li class="rightLi">Experiences</li>
<li class="rightLi">Online Experiences</li>
</ul>
<div class="search">
<div class="location">
<h2>Location</h2>
<input type="text" placeholder="Add city, landmark, or address" />
</div>
<div class="checkInOut">
<h2>Check in / Check out</h2>
<input type="text" placeholder="Add dates" />
</div>
<div class="guests">
<h2>Guests</h2>
<input type="text" placeholder="Add guests" />
</div>
</div>
</div>
</main>
<div class="travel">
<ul>
<li class="la image">
<img class="la" src="./la.jpg" />
<h2 class="travelHeading">Los Angeles</h2>
</li>
<li class="cairo image">
<img class="cairo" src="./cairo.jpg" />
<h2 class="travelHeading">Cairo</h2>
</li>
<li class="berlin image">
<img class="berlin" src="./berlin.jpg" />
<h2 class="travelHeading">Berlin</h2>
</li>
</ul>
</div>
<div class="statementBanner">
<div class="statementBannerLeft">
<h2 class="statementBannerLeftHeading">Experience Cultures</h2>
<p class="statementBannerLeftParagraph">Different people, different places, and different ways of life are out there and waiting for you to get to know them. Airbnb allows you to find yourself in a new part of the world with new people, creating new memories that will last a lifetime.</p>
</div>
<div class="statementBannerRight">
<h2 class="statementBannerRightHeading">Experience something new</h2>
<p class="statementBannerRightParagraph">You find yourself seeking new adventure, everyday, and Airbnb provides the means by which you can seek out that adventure. Whether its across your own country or across our world, theres people, places, and food that you will share moments with and create an appetite for travel that only settles after your've booked your next adventure.</p>
</div>
</div>
<div class="hostHero">
<div class="hostHeroLeft">
<h2 class="hostHeroLeftHeading">Host a hero: help us house frontline responders around the world</h2>
<button class="hostHeroLeftButton">Get involved</button>
</div>
<div class="hostHeroRight">
<p class="hostHeroRightParagraph">With Frontline stays, Airbnb is partnering with our hosts to connect 100,000 healthcare providers, relief workers, and first responders with clean places to stay that allow them to be close to their patients - and safely distanced from their own families.</p>
</div>
</div>
<div class="more">
<ul>
<li class="moreHeading">About</li>
<li>Diversity and Belonging</li>
<li>Accessibility</li>
<li>Trust & Safety</li>
<li>Airbnb Citizens</li>
<li>Newsroom</li>
</ul>
<ul>
<li class="moreHeading">Community</li>
<li>Airbnb Magazine</li>
<li>Airbnb for Work</li>
<li>Invite friends</li>
<li>Gift cards</li>
<li>Careers</li>
</ul>
<ul>
<li class="moreHeading">Host</li>
<li>Host your home</li>
<li>Host an experience</li>
<li>Responsible hosting</li>
<li>Open Homes</li>
<li>Olympics</li>
<li>Resource Center</li>
</ul>
<ul>
<li class="moreHeading">Support</li>
<li>Help Center</li>
<li>Neighborhood Support</li>
</ul>
</div>
<footer>
<div class="footerLeft">
<ul>
<li>Privacy</li>
<li>·</li>
<li>Terms</li>
<li>·</li>
<li>Sitemap</li>
</ul>
</div>
<div class="footerRight">
<ul>
<li>facebook</li>
<li>·</li>
<li>twitter</li>
<li>·</li>
<li>instagram</li>
</ul>
</div>
</footer>
<script src="./main.js"></script>
</div>
</body>
</html>