forked from platzi/PlatziTravel
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
209 lines (204 loc) · 17.8 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
<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="public/css/tailwind.css">
<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&display=swap" rel="stylesheet">
<title>Platzi Travel</title>
</head>
<body class="font-Montserrat dark:bg-gray-900">
<section class="w-auto h-screen">
<nav class="hidden lg:flex w-full h-14 bg-white justify-between p-4 dark:bg-gray-800">
<div class="w-auto h-auto">
<p class="font-black text-principal text-lg dark:text-white">Platzi Travel</p>
</div>
<div class=" flex flex-row space-x-10">
<a href="#home" class="font-bold text-principal dark:text-white">Inicio</a>
<a href="#recomendados"class="font-bold text-principal dark:text-white">Recomendados</a>
<a href="#rentas_destacadas"class="font-bold text-principal dark:text-white">Rentas</a>
<a href="#faqs"class="font-bold text-principal dark:text-white">FAQS</a>
<a href="#nosotros"class="font-bold text-principal dark:text-white">Sobre nosotros</a>
</div>
<div class="flex space-x-4">
<svg width="22" height="22" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path class="fill-current text-principal dark:text-white" fill-rule="evenodd" clip-rule="evenodd" d="M8 3.99997C6.93913 3.99997 5.92172 4.4214 5.17157 5.17155C4.42143 5.92169 4 6.93911 4 7.99997C4 9.06084 4.42143 10.0783 5.17157 10.8284C5.92172 11.5785 6.93913 12 8 12C9.06087 12 10.0783 11.5785 10.8284 10.8284C11.5786 10.0783 12 9.06084 12 7.99997C12 6.93911 11.5786 5.92169 10.8284 5.17155C10.0783 4.4214 9.06087 3.99997 8 3.99997ZM2 7.99997C1.99988 7.05568 2.22264 6.12468 2.65017 5.28271C3.0777 4.44074 3.69792 3.71157 4.4604 3.1545C5.22287 2.59743 6.10606 2.22819 7.03815 2.07681C7.97023 1.92543 8.92488 1.99618 9.82446 2.28332C10.724 2.57046 11.5432 3.06587 12.2152 3.72927C12.8872 4.39266 13.3931 5.20531 13.6919 6.10111C13.9906 6.9969 14.0737 7.95056 13.9343 8.88452C13.795 9.81848 13.4372 10.7064 12.89 11.476L17.707 16.293C17.8892 16.4816 17.99 16.7342 17.9877 16.9964C17.9854 17.2586 17.8802 17.5094 17.6948 17.6948C17.5094 17.8802 17.2586 17.9854 16.9964 17.9876C16.7342 17.9899 16.4816 17.8891 16.293 17.707L11.477 12.891C10.5794 13.5293 9.52335 13.9081 8.42468 13.9861C7.326 14.0641 6.22707 13.8381 5.2483 13.3329C4.26953 12.8278 3.44869 12.063 2.87572 11.1223C2.30276 10.1816 1.99979 9.10141 2 7.99997Z" fill="#3F3F46"/> </svg>
<button id="toggle">
<svg width="22" height="22" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M25.0748 19.2748C22.9267 20.2465 20.5334 20.5405 18.214 20.1177C15.8945 19.6949 13.7589 18.5753 12.0918 16.9082C10.4246 15.241 9.30509 13.1055 8.88228 10.786C8.45946 8.46654 8.75347 6.0733 9.72512 3.92514C8.01494 4.69801 6.51777 5.87422 5.36208 7.35288C4.20638 8.83154 3.42666 10.5685 3.08979 12.4147C2.75293 14.261 2.86898 16.1614 3.428 17.9529C3.98702 19.7444 4.97232 21.3736 6.29935 22.7006C7.62639 24.0276 9.25556 25.0129 11.0471 25.572C12.8386 26.131 14.739 26.247 16.5852 25.9102C18.4315 25.5733 20.1684 24.7936 21.6471 23.6379C23.1257 22.4822 24.302 20.985 25.0748 19.2748V19.2748Z" fill="#CC2D4A"/></svg>
</button>
<svg width="22" height="22" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="fill-current text-gray-300 dark:text-white" fill-rule="evenodd" clip-rule="evenodd" d="M10 9C10.7956 9 11.5587 8.68393 12.1213 8.12132C12.6839 7.55871 13 6.79565 13 6C13 5.20435 12.6839 4.44129 12.1213 3.87868C11.5587 3.31607 10.7956 3 10 3C9.20435 3 8.44129 3.31607 7.87868 3.87868C7.31607 4.44129 7 5.20435 7 6C7 6.79565 7.31607 7.55871 7.87868 8.12132C8.44129 8.68393 9.20435 9 10 9ZM3 18C3 17.0807 3.18106 16.1705 3.53284 15.3212C3.88463 14.4719 4.40024 13.7003 5.05025 13.0503C5.70026 12.4002 6.47194 11.8846 7.32122 11.5328C8.1705 11.1811 9.08075 11 10 11C10.9193 11 11.8295 11.1811 12.6788 11.5328C13.5281 11.8846 14.2997 12.4002 14.9497 13.0503C15.5998 13.7003 16.1154 14.4719 16.4672 15.3212C16.8189 16.1705 17 17.0807 17 18H3Z" fill="#3F3F46"/></svg>
</div>
</nav>
<div class="w-full h-3/4" id="home">
<div class=" w-full h-full flex flex-col items-center py-4 space-y-96 lg:space-y-0 lg:items-start lg:justify-start lg:pt-56 absolute">
<input
class="lg:hidden p-3 outline-none transition duration-300 rounded-full shadow-lg focus-within:shadow-sm focus:outline-none focus:ring-2 focus:w-11/12 "
type="search" name="Searchbar" placeholder="San Francisco" id="">
<div class=" hidden h-auto lg:w-2/5 lg:flex pb-6 ">
<p class=" lg:flex text-4xl ml-16 font-bold">Encuentra más ubicaciones como esta</p>
</div>
<button class="bg-white w-48 h-auto p-3 lg:ml-16 rounded-full shadow-md font-semibold text-principal transition duration-500 ease-in-out hover:bg-principal hover:text-white transform hover:-translate-y-1 hover:scale-110 transition-all" id='explore-more'>
Explorar
</button>
</div>
<div class="w-full h-full bg-cover lg:bg-cover lg:bg-sanFranciscoDesktop lg:bg-center">
<img class="w-full h-full lg:hidden" src="./public/img/sanFrancisco.jpg" alt="">
</div>
</div>
<div class="w-full h-auto lg:px-2">
<div class="p-6" id="recomendados">
<p class="text-3xl font-semibold text-principal dark:text-white">Recomendados</p>
<div class="w-auto h-80 lg:h-80 items-center mt-6 overflow-x-auto overscroll-x-contain flex space-x-4 lg:space-x-6 scrollbar">
<div class="Card">
<div id="image-container" class="w-full h-3/5 rounded-t-lg bg-yosemite bg-cover"></div>
<div class="bg-secondary h-2/5 rounded-b-lg dark:bg-gray-700 ">
<p class="text-xl px-4 py-2 font-semibold text-white">Yosemite</p>
<p class="text-sm px-4 overflow-ellipsis pr-2 text-white">Un respiro del mundo</p>
</div>
</div>
<div class="Card">
<div id="image-container" class="w-full h-3/5 rounded-t-lg bg-new_york bg-cover"></div>
<div class=" h-2/5 rounded-b-lg dark:bg-gray-800 ">
<p class="text-xl px-4 py-2 font-semibold text-tertiary dark:text-white">New York</p>
<p class="text-sm px-4 overflow-ellipsis pr-2 text-tertiary dark:text-white">Gran ciudad, explora ahora!</p>
</div>
</div>
<div class="Card">
<div id="image-container" class="w-full h-3/5 rounded-t-lg bg-norway bg-cover"></div>
<div class=" bg-secondary h-2/5 rounded-b-lg dark:bg-gray-700 ">
<p class="text-xl px-4 py-2 font-semibold text-white">Norway</p>
<p class="text-sm px-4 overflow-ellipsis pr-2 text-white">Conoce nuevos lugares</p>
</div>
</div>
<div class="Card">
<div id="image-container" class="w-full h-3/5 rounded-t-lg bg-seattle bg-cover"></div>
<div class="h-2/5 rounded-b-lg dark:bg-gray-800">
<p class="text-xl px-4 py-2 font-semibold text-tertiary dark:text-white">Seattle</p>
<p class="text-sm px-4 overflow-ellipsis pr-2 text-tertiary dark:text-white">Una ciudad para disfrutar al máximo</p>
</div>
</div>
<div class="Card">
<div id="image-container" class="w-full h-3/5 rounded-t-lg bg-switzerland bg-cover"></div>
<div class="bg-secondary h-2/5 rounded-b-lg dark:bg-gray-700">
<p class="text-xl px-4 py-2 font-semibold text-white">Switzerland</p>
<p class="text-sm px-4 overflow-ellipsis pr-2 text-white">El mejor chocolate caliente que probarás</p>
</div>
</div>
<div class="Card">
<div id="image-container" class="w-full h-3/5 rounded-t-lg bg-sydney bg-center bg-cover"></div>
<div class=" h-2/5 rounded-b-lg dark:bg-gray-800 ">
<p class="text-xl px-4 py-2 font-semibold text-tertiary dark:text-white">Sydney</p>
<p class="text-sm px-4 overflow-ellipsis pr-2 text-tertiary dark:text-white">Conoce la famosísima Opera</p>
</div>
</div>
<div class="Card">
<div id="image-container" class="w-full h-3/5 rounded-t-lg bg-europe bg-center bg-cover"></div>
<div class="bg-secondary h-2/5 rounded-b-lg dark:bg-gray-700 ">
<p class="text-xl px-4 py-2 font-semibold text-white">Edinburgh</p>
<p class="text-sm px-4 overflow-ellipsis pr-2 text-white">Castillos y tiempos medievales</p>
</div>
</div>
<div class="Card">
<div id="image-container" class="w-full h-3/5 rounded-t-lg bg-europe bg-center bg-cover"></div>
<div class="bg-secondary h-2/5 rounded-b-lg dark:bg-gray-800 ">
<p class="text-xl px-4 py-2 font-semibold text-white dark:text-white">Edinburgh</p>
<p class="text-sm px-4 overflow-ellipsis pr-2 text-white dark:text-white">Castillos y tiempos medievales</p>
</div>
</div>
</div>
</div>
<div class="px-6 h-full lg:px-14" id="rentas_destacadas">
<p class="text-3xl font-semibold text-principal pb-6 dark:text-white">Estancias destacadas</p>
<div class="w-full h-full flex flex-col items-center justify-center lg:flex-col">
<div class="w-full h-96 bg-chicago bg-cover rounded-2xl mb-8 lg:flex-none lg:bg-center ">
<p class="CardTitle lg:text-black">Chicago</p>
<p class="text-md pl-8 text-white mr-24 lg:text-black">2 habitaciones, baño y cocina</p>
</div>
<div class="lg:flex lg:w-full lg:h-1/3 lg:flex-none">
<div class="w-full h-96 bg-LA bg-cover rounded-2xl mb-8 lg:w-3/5 lg:h-auto">
<p class="CardTitle">Los Angeles</p>
<p class="text-md pl-8 text-white mr-24">4 habitaciones, 3 baños, cocina y piscina privada</p>
</div>
<div class="lg:flex lg:flex-col lg:w-full lg:pl-8">
<div class="w-full h-96 bg-miami bg-cover rounded-2xl mb-8">
<p class="CardTitle">Miami</p>
<p class="text-md pl-8 text-white mr-24 ">3 habitaciones, 2 baños, cocina y excelente vista al mar</p>
</div>
<div class="w-full h-96 bg-bali bg-cover rounded-2xl mb-8">
<p class="CardTitle ">Bali</p>
<p class="text-md pl-8 text-white mr-24 ">2 habitaciones, baño, cocina y piscina privada</p>
</div>
</div>
</div>
</div>
</div>
<div class="w-full h-full lg:px-8" id="faqs">
<div class="w-full h-full px-6 flex flex-col space-y-4">
<p class="text-3xl font-semibold text-principal lg:text-5xl lg:pb-4 dark:text-white">FAQS</p>
<div>
<p class="text-xl font-medium text-principal dark:text-white">Política de Cancelación</p>
<p class="text-md pt-2 dark:text-white">Para estancias menores a una semana es importante avisar con 3 días de
anticipación, de caso contario será sancionado.</p>
</div>
<div>
<p class="text-xl font-medium text-principal dark:text-white">Métodos de pago</p>
<p class="text-md pt-2 dark:text-white">Aceptamos distintos métodos de pago: VISA, MasterCard, American Express,
Paypal y Binance </p>
</div>
<div>
<p class="text-xl font-medium text-principal dark:text-white">Mascotas</p>
<p class="text-md pt-2 dark:text-white">El tema de las mascotas dependerá directamente del anfitrión.</p>
</div>
<div>
<p class="text-xl font-medium text-principal dark:text-white">Información de Seguridad</p>
<p class="text-md pt-2 dark:text-white">Todas nuestras estancias cuentan con seguro en caso de accidentes</p>
</div>
<div>
<p class="text-xl font-medium text-principal dark:text-white">Estancias Largas</p>
<p class="text-md pt-2 dark:text-white">Contamos con estancias de hasta 3 meses, en este caso es requerido un anticipo
con un monto del 50% del valor de la renta</p>
</div>
</div>
</div>
<footer class="w-full h-auto bg-gray-50 p-6 mt-8 space-y-2 lg:px-14" id="nosotros">
<p class="text-lg">Acerca de</p>
<p class="text-sm text-gray-300">Inversionistas</p>
<p class="text-sm text-gray-300">Empleos</p>
<p class="text-sm text-gray-300">Política de Privacidad</p>
<p class="text-sm text-gray-300">Terminos y Condiciones</p>
<p class="text-sm text-gray-300">Platzi Travel,Inc</p>
<p class="text-sm text-gray-300">Síguenos</p>
</footer>
</div>
</section>
<div class="w-full h-16 bg-white fixed left-0 bottom-0 shadow-md flex space-x-8 items-center justify-center dark:bg-gray-800 lg:hidden">
<a href="#home">
<svg width="30" height="30" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="fill-current text-gray-200 dark:text-white" d="M10.707 2.29303C10.5195 2.10556 10.2652 2.00024 10 2.00024C9.73488 2.00024 9.48057 2.10556 9.29304 2.29303L2.29304 9.29303C2.11088 9.48163 2.01009 9.73423 2.01237 9.99643C2.01465 10.2586 2.11981 10.5094 2.30522 10.6948C2.49063 10.8803 2.74144 10.9854 3.00364 10.9877C3.26584 10.99 3.51844 10.8892 3.70704 10.707L4.00004 10.414V17C4.00004 17.2652 4.1054 17.5196 4.29293 17.7071C4.48047 17.8947 4.73482 18 5.00004 18H7.00004C7.26526 18 7.51961 17.8947 7.70715 17.7071C7.89468 17.5196 8.00004 17.2652 8.00004 17V15C8.00004 14.7348 8.1054 14.4805 8.29293 14.2929C8.48047 14.1054 8.73482 14 9.00004 14H11C11.2653 14 11.5196 14.1054 11.7071 14.2929C11.8947 14.4805 12 14.7348 12 15V17C12 17.2652 12.1054 17.5196 12.2929 17.7071C12.4805 17.8947 12.7348 18 13 18H15C15.2653 18 15.5196 17.8947 15.7071 17.7071C15.8947 17.5196 16 17.2652 16 17V10.414L16.293 10.707C16.4816 10.8892 16.7342 10.99 16.9964 10.9877C17.2586 10.9854 17.5095 10.8803 17.6949 10.6948C17.8803 10.5094 17.9854 10.2586 17.9877 9.99643C17.99 9.73423 17.8892 9.48163 17.707 9.29303L10.707 2.29303Z" fill="#3F3F46"/></svg>
</a>
<a href="#rentas_destacadas">
<svg width="30" height="30" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="fill-current text-principal" fill-rule="evenodd" clip-rule="evenodd" d="M8 3.99997C6.93913 3.99997 5.92172 4.4214 5.17157 5.17155C4.42143 5.92169 4 6.93911 4 7.99997C4 9.06084 4.42143 10.0783 5.17157 10.8284C5.92172 11.5785 6.93913 12 8 12C9.06087 12 10.0783 11.5785 10.8284 10.8284C11.5786 10.0783 12 9.06084 12 7.99997C12 6.93911 11.5786 5.92169 10.8284 5.17155C10.0783 4.4214 9.06087 3.99997 8 3.99997ZM2 7.99997C1.99988 7.05568 2.22264 6.12468 2.65017 5.28271C3.0777 4.44074 3.69792 3.71157 4.4604 3.1545C5.22287 2.59743 6.10606 2.22819 7.03815 2.07681C7.97023 1.92543 8.92488 1.99618 9.82446 2.28332C10.724 2.57046 11.5432 3.06587 12.2152 3.72927C12.8872 4.39266 13.3931 5.20531 13.6919 6.10111C13.9906 6.9969 14.0737 7.95056 13.9343 8.88452C13.795 9.81848 13.4372 10.7064 12.89 11.476L17.707 16.293C17.8892 16.4816 17.99 16.7342 17.9877 16.9964C17.9854 17.2586 17.8802 17.5094 17.6948 17.6948C17.5094 17.8802 17.2586 17.9854 16.9964 17.9876C16.7342 17.9899 16.4816 17.8891 16.293 17.707L11.477 12.891C10.5794 13.5293 9.52335 13.9081 8.42468 13.9861C7.326 14.0641 6.22707 13.8381 5.2483 13.3329C4.26953 12.8278 3.44869 12.063 2.87572 11.1223C2.30276 10.1816 1.99979 9.10141 2 7.99997Z" fill="#3F3F46"/></svg>
</a>
<a href="#recomendados">
<svg width="30" height="30" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="fill-current text-gray-200 dark:text-white"fill-rule="evenodd" clip-rule="evenodd" d="M3.172 5.17202C3.92211 4.42214 4.93934 4.00087 6 4.00087C7.06066 4.00087 8.07789 4.42214 8.828 5.17202L10 6.34302L11.172 5.17202C11.541 4.78998 11.9824 4.48525 12.4704 4.27561C12.9584 4.06598 13.4833 3.95563 14.0144 3.95102C14.5455 3.9464 15.0722 4.04761 15.5638 4.24873C16.0554 4.44986 16.502 4.74687 16.8776 5.12244C17.2532 5.49801 17.5502 5.94462 17.7513 6.4362C17.9524 6.92779 18.0536 7.45451 18.049 7.98562C18.0444 8.51674 17.934 9.04162 17.7244 9.52964C17.5148 10.0177 17.21 10.459 16.828 10.828L10 17.657L3.172 10.828C2.42212 10.0779 2.00085 9.06068 2.00085 8.00002C2.00085 6.93936 2.42212 5.92213 3.172 5.17202Z" fill="#3F3F46"/></svg>
</a>
<button id="toggle-sm">
<svg width="30" height="30" viewBox="0 0 29 29" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="fill-current text-gray-200 dark:text-white" d="M25.0748 19.2748C22.9267 20.2465 20.5334 20.5405 18.214 20.1177C15.8945 19.6949 13.7589 18.5753 12.0918 16.9082C10.4246 15.241 9.30509 13.1055 8.88228 10.786C8.45946 8.46654 8.75347 6.0733 9.72512 3.92514C8.01494 4.69801 6.51777 5.87422 5.36208 7.35288C4.20638 8.83154 3.42666 10.5685 3.08979 12.4147C2.75293 14.261 2.86898 16.1614 3.428 17.9529C3.98702 19.7444 4.97232 21.3736 6.29935 22.7006C7.62639 24.0276 9.25556 25.0129 11.0471 25.572C12.8386 26.131 14.739 26.247 16.5852 25.9102C18.4315 25.5733 20.1684 24.7936 21.6471 23.6379C23.1257 22.4822 24.302 20.985 25.0748 19.2748V19.2748Z" fill="#CC2D4A"/></svg>
</button>
<svg width="30" height="30" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="fill-current text-gray-200 dark:text-white"fill-rule="evenodd" clip-rule="evenodd" d="M10 9C10.7956 9 11.5587 8.68393 12.1213 8.12132C12.6839 7.55871 13 6.79565 13 6C13 5.20435 12.6839 4.44129 12.1213 3.87868C11.5587 3.31607 10.7956 3 10 3C9.20435 3 8.44129 3.31607 7.87868 3.87868C7.31607 4.44129 7 5.20435 7 6C7 6.79565 7.31607 7.55871 7.87868 8.12132C8.44129 8.68393 9.20435 9 10 9ZM3 18C3 17.0807 3.18106 16.1705 3.53284 15.3212C3.88463 14.4719 4.40024 13.7003 5.05025 13.0503C5.70026 12.4002 6.47194 11.8846 7.32122 11.5328C8.1705 11.1811 9.08075 11 10 11C10.9193 11 11.8295 11.1811 12.6788 11.5328C13.5281 11.8846 14.2997 12.4002 14.9497 13.0503C15.5998 13.7003 16.1154 14.4719 16.4672 15.3212C16.8189 16.1705 17 17.0807 17 18H3Z" fill="#3F3F46"/></svg>
</div>
<script>
const htmlElement = document.querySelector("html")
const toggleButton = document.querySelector("#toggle")
const toggleButtonSm = document.querySelector("#toggle-sm")
toggleButton.addEventListener("click", () => toggleDarkMode())
toggleButtonSm.addEventListener("click", () => toggleDarkMode())
const toggleDarkMode = () => {
htmlElement.classList.contains("dark") ?
htmlElement.classList.remove("dark") :
htmlElement.classList.add("dark")
}
</script>
</body>
</html>