-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
349 lines (346 loc) · 28.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./images/logomark.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Traverse Landing Page" />
<meta name="keywords" content="Traverse, Landing Page, Traveler, Travels, Travel Agency, Iceland" />
<meta name="color-scheme" content="dark" />
<title>Traverse Landing Page</title>
<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=Outfit:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="overflow-hidden text-base text-white bg-bkg selection:bg-accent selection:text-bkg">
<div class="relative h-screen pb-12 overflow-y-auto sm:pb-0 scroll-smooth perspective">
<nav class="absolute top-0 z-50 grid w-full place-items-center drop-shadow-text-sm" aria-label="Primary Navigation">
<a href="/" aria-label="Go Home"
class="p-1 m-4 transition-shadow rounded-full focus:outline-none focus-visible:ring-4 ring-accent">
<svg width="280" class="w-32 sm:w-48 lg:w-56" viewBox="0 0 357 86" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M18.555 21.228c-3.033.534-4.35 4.151-2.37 6.51l21.78 25.957c1.98 2.359 5.77 1.69 6.823-1.203l11.59-31.84c1.053-2.894-1.421-5.843-4.454-5.308l-33.37 5.884ZM84.795 63.81c3.032-.534 4.349-4.151 2.37-6.51l-21.78-25.957c-1.98-2.359-5.77-1.69-6.824 1.203L46.972 64.387c-1.053 2.894 1.421 5.842 4.453 5.308l33.37-5.884ZM127.81 64.52V22.76h9.42v41.76h-9.42Zm-13.26-34.14v-8.22h35.94v8.22h-35.94Zm34.559 34.14V35.36h9.18v29.16h-9.18Zm9.18-16.02-3.84-3c.76-3.4 2.04-6.04 3.84-7.92 1.8-1.88 4.3-2.82 7.5-2.82 1.4 0 2.62.22 3.66.66 1.08.4 2.02 1.04 2.82 1.92l-5.46 6.9c-.4-.44-.9-.78-1.5-1.02s-1.28-.36-2.04-.36c-1.52 0-2.74.48-3.66 1.44-.88.92-1.32 2.32-1.32 4.2Zm27.785 16.62c-2.68 0-5.08-.66-7.2-1.98-2.08-1.32-3.74-3.12-4.98-5.4-1.2-2.28-1.8-4.88-1.8-7.8s.6-5.52 1.8-7.8c1.24-2.28 2.9-4.08 4.98-5.4 2.12-1.32 4.52-1.98 7.2-1.98 1.96 0 3.72.38 5.28 1.14 1.6.76 2.9 1.82 3.9 3.18 1 1.32 1.56 2.84 1.68 4.56v12.6c-.12 1.72-.68 3.26-1.68 4.62-.96 1.32-2.24 2.36-3.84 3.12-1.6.76-3.38 1.14-5.34 1.14Zm1.86-8.28c1.96 0 3.54-.64 4.74-1.92 1.2-1.32 1.8-2.98 1.8-4.98 0-1.36-.28-2.56-.84-3.6a5.51 5.51 0 0 0-2.28-2.4c-.96-.6-2.08-.9-3.36-.9-1.28 0-2.42.3-3.42.9-.96.56-1.74 1.36-2.34 2.4-.56 1.04-.84 2.24-.84 3.6 0 1.32.28 2.5.84 3.54a6.293 6.293 0 0 0 2.34 2.46c1 .6 2.12.9 3.36.9Zm6.18 7.68v-7.86l1.38-7.08-1.38-7.08v-7.14h9v29.16h-9Zm24.644 0-12.36-29.16h9.9l8.4 24.3h-4.32l8.4-24.3h9.72l-12.36 29.1-7.38.06Zm36.626.66c-3.16 0-5.98-.64-8.46-1.92-2.44-1.32-4.36-3.14-5.76-5.46-1.4-2.32-2.1-4.94-2.1-7.86s.68-5.52 2.04-7.8c1.4-2.32 3.28-4.14 5.64-5.46 2.36-1.32 5.02-1.98 7.98-1.98 2.88 0 5.42.62 7.62 1.86 2.2 1.24 3.92 2.96 5.16 5.16 1.28 2.2 1.92 4.72 1.92 7.56 0 .52-.04 1.08-.12 1.68-.04.56-.14 1.22-.3 1.98l-25.14.06v-6.3l21.24-.06-3.96 2.64c-.04-1.68-.3-3.06-.78-4.14-.48-1.12-1.2-1.96-2.16-2.52-.92-.6-2.06-.9-3.42-.9-1.44 0-2.7.34-3.78 1.02-1.04.64-1.86 1.56-2.46 2.76-.56 1.2-.84 2.66-.84 4.38 0 1.72.3 3.2.9 4.44.64 1.2 1.52 2.14 2.64 2.82 1.16.64 2.52.96 4.08.96 1.44 0 2.74-.24 3.9-.72a8.893 8.893 0 0 0 3.06-2.28l5.04 5.04a13.606 13.606 0 0 1-5.22 3.78c-2.04.84-4.28 1.26-6.72 1.26Zm18.471-.66V35.36h9.18v29.16h-9.18Zm9.18-16.02-3.84-3c.76-3.4 2.04-6.04 3.84-7.92 1.8-1.88 4.3-2.82 7.5-2.82 1.4 0 2.62.22 3.66.66 1.08.4 2.02 1.04 2.82 1.92l-5.46 6.9c-.4-.44-.9-.78-1.5-1.02s-1.28-.36-2.04-.36c-1.52 0-2.74.48-3.66 1.44-.88.92-1.32 2.32-1.32 4.2Zm26.401 16.74c-1.72 0-3.42-.22-5.1-.66-1.64-.44-3.18-1.06-4.62-1.86-1.4-.84-2.6-1.8-3.6-2.88l5.22-5.28c.96 1.04 2.1 1.86 3.42 2.46 1.32.56 2.76.84 4.32.84 1.08 0 1.9-.16 2.46-.48.6-.32.9-.76.9-1.32 0-.72-.36-1.26-1.08-1.62-.68-.4-1.56-.74-2.64-1.02-1.08-.32-2.22-.66-3.42-1.02-1.2-.36-2.34-.86-3.42-1.5s-1.96-1.52-2.64-2.64c-.68-1.16-1.02-2.62-1.02-4.38 0-1.88.48-3.5 1.44-4.86.96-1.4 2.32-2.5 4.08-3.3 1.76-.8 3.82-1.2 6.18-1.2 2.48 0 4.76.44 6.84 1.32 2.12.84 3.84 2.1 5.16 3.78l-5.22 5.28c-.92-1.08-1.96-1.84-3.12-2.28-1.12-.44-2.22-.66-3.3-.66-1.04 0-1.82.16-2.34.48-.52.28-.78.7-.78 1.26 0 .6.34 1.08 1.02 1.44.68.36 1.56.68 2.64.96 1.08.28 2.22.62 3.42 1.02 1.2.4 2.34.94 3.42 1.62 1.08.68 1.96 1.6 2.64 2.76.68 1.12 1.02 2.6 1.02 4.44 0 2.84-1.08 5.1-3.24 6.78-2.12 1.68-5 2.52-8.64 2.52Zm31.261-.06c-3.16 0-5.98-.64-8.46-1.92-2.44-1.32-4.36-3.14-5.76-5.46-1.4-2.32-2.1-4.94-2.1-7.86s.68-5.52 2.04-7.8c1.4-2.32 3.28-4.14 5.64-5.46 2.36-1.32 5.02-1.98 7.98-1.98 2.88 0 5.42.62 7.62 1.86 2.2 1.24 3.92 2.96 5.16 5.16 1.28 2.2 1.92 4.72 1.92 7.56 0 .52-.04 1.08-.12 1.68-.04.56-.14 1.22-.3 1.98l-25.14.06v-6.3l21.24-.06-3.96 2.64c-.04-1.68-.3-3.06-.78-4.14-.48-1.12-1.2-1.96-2.16-2.52-.92-.6-2.06-.9-3.42-.9-1.44 0-2.7.34-3.78 1.02-1.04.64-1.86 1.56-2.46 2.76-.56 1.2-.84 2.66-.84 4.38 0 1.72.3 3.2.9 4.44.64 1.2 1.52 2.14 2.64 2.82 1.16.64 2.52.96 4.08.96 1.44 0 2.74-.24 3.9-.72a8.893 8.893 0 0 0 3.06-2.28l5.04 5.04a13.606 13.606 0 0 1-5.22 3.78c-2.04.84-4.28 1.26-6.72 1.26Z"
fill="#fff" />
</svg>
</a>
</nav>
<header class="relative flex flex-col items-center min-h-screen justify-evenly preserve-3d">
<div class="absolute inset-0 bg-gradient-to-b bottom-3/4 from-accent to-transparent"></div>
<div class="absolute inset-0 bg-gradient-to-t top-1/3 -bottom-32 from-bkg/95 to-transparent distance-1"></div>
<img sizes="(min-width: 500px) 480w, 650w, 800w, 1300w"
srcset="./images/hero-xs.jpg 480w, ./images/hero-sm.jpg 650w, ./images/hero-md.jpg 800w, ./images/hero-lg.jpg 1300w"
class="absolute object-cover object-center w-full h-full -z-20 distance-1" src="./images/hero.jpg"
aria-hidden="true" alt="Nordic lights over a lake at night">
<h1
class="py-12 text-5xl font-bold tracking-wide text-center text-white drop-shadow-text-sm lg:drop-shadow-text-lg distance-2">
Unique Trips for<br>
Adventurous <br>
Travelers
</h1>
<a href="#contact-form"
class="flex items-center px-8 py-3 space-x-2 font-medium transition-shadow border rounded-full bg-accent text-bkg border-bkg focus:outline-none focus-visible:ring-4 ring-accent ring-offset-bkg ring-offset-2 hover:bg-accent/90 drop-shadow-text-lg hover:drop-shadow-none distance-2">
<span class="tracking-wider uppercase">Book a Trip</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<polyline points="96 184 32 200 32 56 96 40" fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="24"></polyline>
<polygon points="160 216 96 184 96 40 160 72 160 216" fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="24"></polygon>
<polyline points="160 72 224 56 224 200 160 216" fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="24"></polyline>
</svg>
</a>
</header>
<main class="relative grid gap-16 pb-16 mt-16 -mb-16 overflow-hidden sm:mt-24 lg:mt-40 sm:gap-24 lg:gap-40">
<section aria-labelledby="headline" class="container grid gap-4 text-center max-w-prose fade-up">
<div>
<small class="tracking-widest uppercase text-accent drop-shadow-text-sm">What Dreams Are Made Of</small>
<h2 id="headline" class="text-3xl font-bold tracking-wide drop-shadow-text-md">Trips for Explorers</h2>
</div>
<p class="text-muted drop-shadow-text-sm">We find once-in-a-lifetime locations and reserve them for travelers
full of adventure. Calling all explorers and extremists to the trip of their dreams in the most exotic
locations
all around the globe.</p>
</section>
<section aria-labelledby="slider" class="container grid gap-4 text-center sm:text-left fade-up">
<div class="relative">
<div class="absolute hidden w-8 h-full sm:block bg-accent/10 -left-4"></div>
<div>
<small class="tracking-widest uppercase text-accent drop-shadow-text-sm">Off The Beaten Path</small>
<h2 id="slider" class="text-3xl font-bold tracking-wide drop-shadow-text-md">Places without People</h2>
</div>
<div class="flex flex-wrap items-center justify-center space-x-4 space-y-4 sm:flex-nowrap sm:justify-between">
<p class="max-w-2xl text-muted drop-shadow-text-sm">We specialize in finding places no one else knows about.
Here are a few of our favorite Icelandic spots for true adventurers.</p>
<div class="flex space-x-4">
<button type="button" data-slideBtn id="prev" aria-label="show previous image"
class="grid p-2 rounded-full place-items-center bg-accent hover:bg-accent/90 text-bkg focus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent disabled:bg-accent/20 disabled:text-accent"
disabled>
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="pointer-events-none"
fill="currentColor" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="24"></circle>
<polyline points="121.9 161.9 88 128 121.9 94.1" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></polyline>
<line x1="168" y1="128" x2="88" y2="128" fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="24"></line>
</svg>
</button>
<button type="button" data-slideBtn id="next" aria-label="show next image"
class="grid p-2 rounded-full place-items-center bg-accent hover:bg-accent/90 text-bkg focus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent disabled:bg-accent/20 disabled:text-accent">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" class="pointer-events-none"
fill="currentColor" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<circle cx="128" cy="128" r="96" fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="24"></circle>
<polyline points="134.1 161.9 168 128 134.1 94.1" fill="none" stroke="currentColor"
stroke-linecap="round" stroke-linejoin="round" stroke-width="24"></polyline>
<line x1="88" y1="128" x2="168" y2="128" fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="24"></line>
</svg>
</button>
</div>
</div>
</div>
</section>
<div class="container -mt-10 sm:-mt-20 lg:-mt-36 xs:w-screen fade-up">
<div class="flex transition-transform duration-500" data-slideContainer>
<div class="relative flex-grow flex-shrink-0 w-full pr-4 xs:w-auto xs:basis-96" data-slide>
<img loading="lazy"
class="object-cover h-full [@media(hover:hover)]:grayscale hover:grayscale-0 transition-all peer"
src="./images/slider-1.jpg" alt="Black Beach in Vík">
<p
class="absolute bottom-4 left-4 px-4 py-2 bg-bkg font-bold text-lg pointer-events-none tracking-wide [@media(hover:hover)]:opacity-0 peer-hover:opacity-100 transition-opacity">
Black Beach in Vík</p>
</div>
<div class="relative flex-grow flex-shrink-0 w-full pr-4 xs:w-auto xs:basis-96" data-slide>
<img loading="lazy"
class="object-cover h-full [@media(hover:hover)]:grayscale hover:grayscale-0 transition-all peer"
src="./images/slider-2.jpg" alt="Waterfall Seljalandsfoss">
<p
class="absolute bottom-4 left-4 px-4 py-2 bg-bkg font-bold text-lg pointer-events-none tracking-wide [@media(hover:hover)]:opacity-0 peer-hover:opacity-100 transition-opacity">
Seljalandsfoss</p>
</div>
<div class="relative flex-grow flex-shrink-0 w-full pr-4 xs:w-auto xs:basis-96" data-slide>
<img loading="lazy"
class="object-cover h-full [@media(hover:hover)]:grayscale hover:grayscale-0 transition-all peer"
src="./images/slider-3.jpg" alt="Skógafoss at Night">
<p
class="absolute bottom-4 left-4 px-4 py-2 bg-bkg font-bold text-lg pointer-events-none tracking-wide [@media(hover:hover)]:opacity-0 peer-hover:opacity-100 transition-opacity">
Skógafoss at Night</p>
</div>
<div class="relative flex-grow flex-shrink-0 w-full pr-4 xs:w-auto xs:basis-96" data-slide>
<img loading="lazy"
class="object-cover h-full [@media(hover:hover)]:grayscale hover:grayscale-0 transition-all peer"
src="./images/slider-4.jpg" alt="Fjaðrárgljúfur canyon in Iceland">
<p
class="absolute bottom-4 left-4 px-4 py-2 bg-bkg font-bold text-lg pointer-events-none tracking-wide [@media(hover:hover)]:opacity-0 peer-hover:opacity-100 transition-opacity">
Fjaðrárgljúfur Canyon</p>
</div>
<div class="relative flex-grow flex-shrink-0 w-full pr-4 xs:w-auto xs:basis-96" data-slide>
<img loading="lazy"
class="object-cover h-full [@media(hover:hover)]:grayscale hover:grayscale-0 transition-all peer"
src="./images/slider-5.jpg" alt="Icelandic countryside lake with mountain range in the distance">
<p
class="absolute bottom-4 left-4 px-4 py-2 bg-bkg font-bold text-lg pointer-events-none tracking-wide [@media(hover:hover)]:opacity-0 peer-hover:opacity-100 transition-opacity">
Mountain Inlet</p>
</div>
<div class="relative flex-grow flex-shrink-0 w-full pr-4 xs:w-auto xs:basis-96" data-slide>
<img loading="lazy"
class="object-cover h-full [@media(hover:hover)]:grayscale hover:grayscale-0 transition-all peer"
src="./images/slider-6.jpg" alt="Gullfoss Waterfall in Iceland">
<p
class="absolute bottom-4 left-4 px-4 py-2 bg-bkg font-bold text-lg pointer-events-none tracking-wide [@media(hover:hover)]:opacity-0 peer-hover:opacity-100 transition-opacity">
Gullfoss Falls</p>
</div>
<div class="relative flex-grow flex-shrink-0 w-full pr-4 xs:w-auto xs:basis-96" data-slide>
<img loading="lazy"
class="object-cover h-full [@media(hover:hover)]:grayscale hover:grayscale-0 transition-all peer"
src="./images/slider-7.jpg"
alt="Aurora Borealis seen over the sea in winter from the coast in winter with large rocks piled up in the foreground">
<p
class="absolute bottom-4 left-4 px-4 py-2 bg-bkg font-bold text-lg pointer-events-none tracking-wide [@media(hover:hover)]:opacity-0 peer-hover:opacity-100 transition-opacity">
Aurora Sound</p>
</div>
<div class="relative flex-grow flex-shrink-0 w-full xs:w-auto xs:basis-96" data-slide>
<img loading="lazy"
class="object-cover h-full [@media(hover:hover)]:grayscale hover:grayscale-0 transition-all peer"
src="./images/slider-8.jpg" alt="Svartifoss Waterfall in Southeast Iceland in winter">
<p
class="absolute bottom-4 left-4 px-4 py-2 bg-bkg font-bold text-lg pointer-events-none tracking-wide [@media(hover:hover)]:opacity-0 peer-hover:opacity-100 transition-opacity">
Svartifoss Waterfall</p>
</div>
</div>
</div>
<section aria-labelledby="map"
class="container flex flex-wrap items-center justify-between space-y-12 md:space-x-16 md:space-y-0">
<img src="./images/map.png" alt="Map" width="400" class="grow md:flex-1 fade-up" loading="lazy">
<div class="grid gap-4 text-center md:text-left grow md:flex-1">
<div class="relative">
<div class="absolute hidden w-8 h-full md:block bg-accent/10 -left-4"></div>
<small class="tracking-widest uppercase text-accent">A globe of possibilities</small>
<h2 id="map" class="text-3xl font-bold tracking-wide">Happy Travelers <br> the World Over</h2>
</div>
<p class="max-w-2xl text-muted">Don’t take our word for it! Thousands of adventurous travelers have enjoyed
more
than 250 exotic locations all over the globe!</p>
</div>
</section>
<section aria-labelledby="cta" class="container grid gap-4 text-center max-w-prose fade-up">
<div>
<small class="tracking-widest uppercase text-accent">It’s Time to Explore</small>
<h2 id="cta" class="text-3xl font-bold tracking-wide">Get Hidden Locations</h2>
</div>
<p class="max-w-2xl mx-auto text-muted">Not sure where to start? Drop us a line, and we’ll send you new
locations
before they’re shown on our website.</p>
<form id="contact-form"
class="flex items-center justify-between max-w-md p-1 mx-auto border-4 rounded-full border-accent">
<input type="email" id="email" required placeholder="Email Address"
class="flex-1 w-full p-2 mx-4 text-sm bg-transparent border-b-2 border-transparent rounded-none caret-accent placeholder:text-white focus:placeholder:text-muted focus:outline-none focus:border-accent">
<label class="sr-only" for="email">Enter your email address</label>
<button type="submit" aria-label="Sign Up"
class="flex px-4 py-3 space-x-2 text-sm font-medium border rounded-full bg-accent text-bkg sm:px-8 border-bkg focus:outline-none focus-visible:ring-4 ring-accent ring-offset-bkg ring-offset-2 hover:bg-accent/90 shrink-0"
id="contact-btn">
<span class="tracking-wide uppercase">Sign Up</span>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor"
class="pointer-events-none" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<path
d="M210.3,35.9,23.9,88.4a8,8,0,0,0-1.2,15l85.6,40.5a7.8,7.8,0,0,1,3.8,3.8l40.5,85.6a8,8,0,0,0,15-1.2L220.1,45.7A7.9,7.9,0,0,0,210.3,35.9Z"
fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="24">
</path>
<line x1="110.9" y1="145.1" x2="156.1" y2="99.9" fill="none" stroke="currentColor" stroke-linecap="round"
stroke-linejoin="round" stroke-width="24"></line>
</svg>
</button>
</form>
</section>
</main>
<footer class="py-6 mt-16 border-t border-accent sm:mt-24 lg:mt-40 sm:py-8 md:py-12">
<div class="container flex flex-wrap items-center gap-12 md:justify-between md:items-start">
<div class="grid gap-2 grow justify-items-center md:justify-items-start basis-full md:basis-1/4">
<svg aria-label="Traverse Logo" class="w-32 sm:w-48 lg:w-56" width="280" viewBox="0 0 357 86" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path
d="M18.555 21.228c-3.033.534-4.35 4.151-2.37 6.51l21.78 25.957c1.98 2.359 5.77 1.69 6.823-1.203l11.59-31.84c1.053-2.894-1.421-5.843-4.454-5.308l-33.37 5.884Z"
fill="#fff" />
<path
d="M84.795 63.81c3.032-.534 4.349-4.151 2.37-6.51l-21.78-25.957c-1.98-2.359-5.77-1.69-6.824 1.203L46.972 64.387c-1.053 2.894 1.421 5.842 4.453 5.307l33.37-5.884Z"
fill="#66CCC1" />
<path
d="M127.81 64.519v-41.76h9.42v41.76h-9.42Zm-13.26-34.14v-8.22h35.94v8.22h-35.94Zm34.559 34.14v-29.16h9.18v29.16h-9.18Zm9.18-16.02-3.84-3c.76-3.4 2.04-6.04 3.84-7.92 1.8-1.88 4.3-2.82 7.5-2.82 1.4 0 2.62.22 3.66.66 1.08.4 2.02 1.04 2.82 1.92l-5.46 6.9c-.4-.44-.9-.78-1.5-1.02s-1.28-.36-2.04-.36c-1.52 0-2.74.48-3.66 1.44-.88.92-1.32 2.32-1.32 4.2Zm27.785 16.62c-2.68 0-5.08-.66-7.2-1.98-2.08-1.32-3.74-3.12-4.98-5.4-1.2-2.28-1.8-4.88-1.8-7.8s.6-5.52 1.8-7.8c1.24-2.28 2.9-4.08 4.98-5.4 2.12-1.32 4.52-1.98 7.2-1.98 1.96 0 3.72.38 5.28 1.14 1.6.76 2.9 1.82 3.9 3.18 1 1.32 1.56 2.84 1.68 4.56v12.6c-.12 1.72-.68 3.26-1.68 4.62-.96 1.32-2.24 2.36-3.84 3.12-1.6.76-3.38 1.14-5.34 1.14Zm1.86-8.28c1.96 0 3.54-.64 4.74-1.92 1.2-1.32 1.8-2.98 1.8-4.98 0-1.36-.28-2.56-.84-3.6a5.51 5.51 0 0 0-2.28-2.4c-.96-.6-2.08-.9-3.36-.9-1.28 0-2.42.3-3.42.9-.96.56-1.74 1.36-2.34 2.4-.56 1.04-.84 2.24-.84 3.6 0 1.32.28 2.5.84 3.54a6.293 6.293 0 0 0 2.34 2.46c1 .6 2.12.9 3.36.9Zm6.18 7.68v-7.86l1.38-7.08-1.38-7.08v-7.14h9v29.16h-9Zm24.644 0-12.36-29.16h9.9l8.4 24.3h-4.32l8.4-24.3h9.72l-12.36 29.1-7.38.06Zm36.626.66c-3.16 0-5.98-.64-8.46-1.92-2.44-1.32-4.36-3.14-5.76-5.46-1.4-2.32-2.1-4.94-2.1-7.86s.68-5.52 2.04-7.8c1.4-2.32 3.28-4.14 5.64-5.46 2.36-1.32 5.02-1.98 7.98-1.98 2.88 0 5.42.62 7.62 1.86 2.2 1.24 3.92 2.96 5.16 5.16 1.28 2.2 1.92 4.72 1.92 7.56 0 .52-.04 1.08-.12 1.68-.04.56-.14 1.22-.3 1.98l-25.14.06v-6.3l21.24-.06-3.96 2.64c-.04-1.68-.3-3.06-.78-4.14-.48-1.12-1.2-1.96-2.16-2.52-.92-.6-2.06-.9-3.42-.9-1.44 0-2.7.34-3.78 1.02-1.04.64-1.86 1.56-2.46 2.76-.56 1.2-.84 2.66-.84 4.38 0 1.72.3 3.2.9 4.44.64 1.2 1.52 2.14 2.64 2.82 1.16.64 2.52.96 4.08.96 1.44 0 2.74-.24 3.9-.72a8.893 8.893 0 0 0 3.06-2.28l5.04 5.04a13.606 13.606 0 0 1-5.22 3.78c-2.04.84-4.28 1.26-6.72 1.26Zm18.471-.66v-29.16h9.18v29.16h-9.18Zm9.18-16.02-3.84-3c.76-3.4 2.04-6.04 3.84-7.92 1.8-1.88 4.3-2.82 7.5-2.82 1.4 0 2.62.22 3.66.66 1.08.4 2.02 1.04 2.82 1.92l-5.46 6.9c-.4-.44-.9-.78-1.5-1.02s-1.28-.36-2.04-.36c-1.52 0-2.74.48-3.66 1.44-.88.92-1.32 2.32-1.32 4.2Zm26.401 16.74c-1.72 0-3.42-.22-5.1-.66-1.64-.44-3.18-1.06-4.62-1.86-1.4-.84-2.6-1.8-3.6-2.88l5.22-5.28c.96 1.04 2.1 1.86 3.42 2.46 1.32.56 2.76.84 4.32.84 1.08 0 1.9-.16 2.46-.48.6-.32.9-.76.9-1.32 0-.72-.36-1.26-1.08-1.62-.68-.4-1.56-.74-2.64-1.02-1.08-.32-2.22-.66-3.42-1.02-1.2-.36-2.34-.86-3.42-1.5s-1.96-1.52-2.64-2.64c-.68-1.16-1.02-2.62-1.02-4.38 0-1.88.48-3.5 1.44-4.86.96-1.4 2.32-2.5 4.08-3.3 1.76-.8 3.82-1.2 6.18-1.2 2.48 0 4.76.44 6.84 1.32 2.12.84 3.84 2.1 5.16 3.78l-5.22 5.28c-.92-1.08-1.96-1.84-3.12-2.28-1.12-.44-2.22-.66-3.3-.66-1.04 0-1.82.16-2.34.48-.52.28-.78.7-.78 1.26 0 .6.34 1.08 1.02 1.44.68.36 1.56.68 2.64.96 1.08.28 2.22.62 3.42 1.02 1.2.4 2.34.94 3.42 1.62 1.08.68 1.96 1.6 2.64 2.76.68 1.12 1.02 2.6 1.02 4.44 0 2.84-1.08 5.1-3.24 6.78-2.12 1.68-5 2.52-8.64 2.52Zm31.261-.06c-3.16 0-5.98-.64-8.46-1.92-2.44-1.32-4.36-3.14-5.76-5.46-1.4-2.32-2.1-4.94-2.1-7.86s.68-5.52 2.04-7.8c1.4-2.32 3.28-4.14 5.64-5.46 2.36-1.32 5.02-1.98 7.98-1.98 2.88 0 5.42.62 7.62 1.86 2.2 1.24 3.92 2.96 5.16 5.16 1.28 2.2 1.92 4.72 1.92 7.56 0 .52-.04 1.08-.12 1.68-.04.56-.14 1.22-.3 1.98l-25.14.06v-6.3l21.24-.06-3.96 2.64c-.04-1.68-.3-3.06-.78-4.14-.48-1.12-1.2-1.96-2.16-2.52-.92-.6-2.06-.9-3.42-.9-1.44 0-2.7.34-3.78 1.02-1.04.64-1.86 1.56-2.46 2.76-.56 1.2-.84 2.66-.84 4.38 0 1.72.3 3.2.9 4.44.64 1.2 1.52 2.14 2.64 2.82 1.16.64 2.52.96 4.08.96 1.44 0 2.74-.24 3.9-.72a8.893 8.893 0 0 0 3.06-2.28l5.04 5.04a13.606 13.606 0 0 1-5.22 3.78c-2.04.84-4.28 1.26-6.72 1.26Z"
fill="#fff" />
</svg>
<p class="text-sm text-center text-muted md:text-left">We curate unique experiences <br>for the adventurous
traveler.</p>
</div>
<nav aria-label="Secondary navigation"
class="flex flex-col items-center justify-between gap-6 mt-2 text-sm text-center sm:items-start sm:flex-row sm:text-left md:justify-around grow basis-full md:basis-1/2">
<div class="grid gap-3">
<p class="px-2 font-bold tracking-wide underline decoration-accent decoration-4 underline-offset-2">About
</p>
<ul aria-label="About Traverse">
<li>
<a href="#"
class="px-2 transition-colors rounded-full hover:text-accent focus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent">
About Us
</a>
</li>
<li>
<a href="#"
class="px-2 transition-colors rounded-full hover:text-accent focus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent">
Press
</a>
</li>
<li>
<a href="#"
class="px-2 transition-colors rounded-full hover:text-accent focus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent">
News
</a>
</li>
</ul>
</div>
<div class="grid gap-3">
<p class="px-2 font-bold tracking-wide underline decoration-accent decoration-4 underline-offset-2">
Locations
</p>
<ul aria-label="Traverse Locations">
<li>
<a href="#"
class="px-2 transition-colors rounded-full hover:text-accent focus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent">
Africa
</a>
</li>
<li>
<a href="#"
class="px-2 transition-colors rounded-full hover:text-accent focus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent">
Asia
</a>
</li>
<li>
<a href="#"
class="px-2 transition-colors rounded-full hover:text-accent focus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent">
Australia
</a>
</li>
<li>
<a href="#"
class="px-2 transition-colors rounded-full hover:text-accent focus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent">
Europe
</a>
</li>
<li>
<a href="#"
class="px-2 transition-colors rounded-full hover:text-accent focus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent">
North America
</a>
</li>
<li>
<a href="#"
class="px-2 transition-colors rounded-full hover:text-accent focus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent">
South America
</a>
</li>
</ul>
</div>
<div class="grid gap-3">
<p class="px-2 font-bold tracking-wide underline decoration-accent decoration-4 underline-offset-2">Contact
Us
</p>
<ul aria-label="Contact Traverse">
<li>
<a href="#"
class="px-2 transition-colors rounded-full hover:text-accent focus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent">
Email
</a>
</li>
<li>
<a href="#"
class="px-2 transition-colors rounded-full hover:text-accent focus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent">
Instagram
</a>
</li>
<li>
<a href="#"
class="px-2 transition-colors rounded-full hover:text-accent focus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent">
Facebook
</a>
</li>
<li>
<a href="#"
class="px-2 transition-colors rounded-full hover:text-accent focus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent">
Twitter
</a>
</li>
</ul>
</div>
</nav>
</div>
</footer>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>