-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
237 lines (237 loc) · 26.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
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
<!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="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="bg-bkg text-base text-white selection:bg-accent selection:text-bkg overflow-hidden">
<div class="h-screen pb-12 sm:pb-0 overflow-y-auto overflow-x-hidden relative scroll-smooth perspective">
<nav class="grid place-items-center absolute w-full top-0 z-50"
aria-label="Primary Navigation">
<a href="/" aria-label="Go Home" class="p-1 m-4 focus:outline-none focus-visible:ring-4 ring-accent rounded-full transition-shadow drop-shadow-text-sm">
<svg 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.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="min-h-screen flex flex-col justify-evenly items-center relative preserve-3d">
<div class="absolute bg-gradient-to-b inset-0 bottom-3/4 from-accent to-transparent"></div>
<div class="absolute bg-gradient-to-t inset-0 top-1/3 -bottom-32 from-bkg/80 to-transparent distance-1"></div>
<img loading="lazy"
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 h-full w-full -z-20 object-cover object-center distance-1"
src="./images/hero.jpg" aria-hidden="true">
<h1 class="text-5xl text-center font-bold text-white tracking-wide py-12 drop-shadow-text-sm lg:drop-shadow-text-lg distance-2">Unique Trips for <br>
Adventurous <br>
Travelers
</h1>
<a href="#contact-form"
class="bg-accent text-bkg font-medium py-3 px-8 rounded-full border border-bkg focus:outline-none focus-visible:ring-4 ring-accent ring-offset-bkg ring-offset-2
hover:bg-accent/90 flex space-x-2 drop-shadow-text-lg hover:drop-shadow-none transition-shadow">
<span class="uppercase tracking-wide">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 mt-16 sm:mt-24 lg:mt-40 pb-16 -m-16 grid gap-16 sm:gap-24 lg:gap-40 overflow-hidden">
<section aria-label="headline" class="container grid gap-4 text-center max-w-prose fade-up">
<div>
<small class="tracking-widest text-accent uppercase 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 Explorer</h2>
<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>
</div>
</section>
<section aria-label="slider" class="container grid gap-4 text-center sm:text-left fade-up">
<div class="relative">
<div class="hidden sm:block absolute w-8 bg-accent/10 -left-4 h-full"></div>
<div>
<small class="tracking-widest text-accent uppercase 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 sm:flex-nowrap justify-center sm:justify-between items-center space-x-4 space-y-4">
<p class="text-muted max-w-2xl drop-shadow-text-sm">We specialize in finding places no one else knows about. Here are a few of our favorite spots for true adventurers.</p>
<div class="flex space-x-4">
<button data-slideBtn id="prev" aria-label="show previous image" disabled
class="grid place-items-center bg-accent hover:bg-accent/90 rounded-full p-2 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="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 data-slideBtn id="next" aria-label="show next image"
class="grid place-items-center bg-accent hover:bg-accent/90 rounded-full p-2 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="-mt-10 sm:-mt-20 lg:-mt-36 container xs:w-screen fade-up">
<div data-slideContainer class="flex transition-transform duration-500 fade-up">
<div data-slide class="relative w-full xs:w-auto flex-grow flex-shrink-0 xs:basis-96 pr-4">
<img loading="lazy" class="object-cover h-full [@media(hover:hover)]:grayscale hover:grayscale-0 transition-all peer" src="/images/slider-1.jpg" alt="Iceland Scene">
<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">Ocean Wonders</p>
</div>
<div data-slide class="relative w-full xs:w-auto flex-grow flex-shrink-0 xs:basis-96 pr-4">
<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 Cave">
<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">Waterfall Cave</p>
</div>
<div data-slide class="relative w-full xs:w-auto flex-grow flex-shrink-0 xs:basis-96 pr-4">
<img loading="lazy" class="object-cover h-full [@media(hover:hover)]:grayscale hover:grayscale-0 transition-all peer" src="/images/slider-3.jpg" alt="Rainbow Falls">
<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">Rainbow Falls</p>
</div>
<div data-slide class="relative w-full xs:w-auto flex-grow flex-shrink-0 xs:basis-96 pr-4">
<img loading="lazy" class="object-cover h-full [@media(hover:hover)]:grayscale hover:grayscale-0 transition-all peer" src="/images/slider-4.jpg" alt="Canyon Peakse">
<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">Canyon Peaks</p>
</div>
<div data-slide class="relative w-full xs:w-auto flex-grow flex-shrink-0 xs:basis-96 pr-4">
<img loading="lazy" class="object-cover h-full [@media(hover:hover)]:grayscale hover:grayscale-0 transition-all peer" src="/images/slider-5.jpg" alt="Mountain Inlet">
<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 data-slide class="relative w-full xs:w-auto flex-grow flex-shrink-0 xs:basis-96 pr-4">
<img loading="lazy" class="object-cover h-full [@media(hover:hover)]:grayscale hover:grayscale-0 transition-all peer" src="/images/slider-6.jpg" alt="Angel Cliffs">
<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">Angel Cliffs</p>
</div>
<div data-slide class="relative w-full xs:w-auto flex-grow flex-shrink-0 xs:basis-96 pr-4">
<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 Sound">
<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 data-slide class="relative w-full xs:w-auto flex-grow flex-shrink-0 xs:basis-96">
<img loading="lazy" class="object-cover h-full [@media(hover:hover)]:grayscale hover:grayscale-0 transition-all peer" src="/images/slider-8.jpg" alt="Icy Meadows">
<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">Icy Meadows</p>
</div>
</div>
<section aria-labelledby="map" class="container flex flex-wrap md:space-x-16 space-y-12 md:space-y-0 justify-between items-center">
<img loading="lazy" src="./images/map.png" alt="map" width="400" class="grow md:flex-1 fade-up"/>
<div class="grid gap-4 text-center md:text-left grow md:flex-1 fade-up">
<div class="relative">
<div class="hidden md:block absolute w-8 bg-accent/10 -left-4 h-full"></div>
<small class="tracking-widest text-accent uppercasem">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="text-muted max-w-2xl">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 text-accent uppercasem">It's Time To Explore</small>
<h2 id="cta" class="text-3xl font-bold tracking-wide">Get Hidden Locations</h2>
</div>
<p class="text-muted max-w-2xl mx-auto">Don’t take our word for it! Thousands of adventurous travelers have enjoyed more than 250 exotic locations all over the globe!</p>
<form id="contact-form" class="border-4 border-accent rounded-full p-1 flex items-center justify-between max-w-md mx-auto">
<input type="email" id="email" required placeholder="Email Address" class="p-2 mx-4 bg-transparent w-full text-sm flex-1 border-b-2 border-transparent rounded-none caret-accent placeholder:text-white focus:placeholder:text-muted focus:outline-none focus:border-accent">
<label for="email" class="sr-only">Enter your email address</label>
<button href="#contatc-form"
class="bg-accent text-bkg font-medium text-sm py-3 px-4 sm:px-8 rounded-full border border-bkg focus:outline-none focus-visible:ring-4 ring-accent ring-offset-bkg ring-offset-2
hover:bg-accent/90 flex space-x-2 shrink-0" id="contact-btn">
<span class="uppercase tracking-wide">Sign Up</span>
<svg xmlns="http://www.w3.org/2000/svg" class="pointer-events-none" width="24" height="24" fill="currentColor" 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>
</div>
</main>
<footer class="boerder-t border-accent mt-16 sm:mt-24 lg:mt-40 py-6 sm:py-8 md:py-12">
<div class="container flex felx-wrap md:justify-between items-center md:items-start gap-12">
<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: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-muted text-sm text-center md:text-left">We curate unique experiences <br> for the adventurous traveler.</p>
</div>
<nav aria-label="Secondary Navigation" class="text-sm flex flex-col items-center sm:items-start sm:flex-row text-center sm:text-left gap-6 justify-between md:justify-around grow basis-full md:basis-1/2 mt-2">
<div class="grid gap-3">
<p class="font-bold underline decoration-accent decoration-4 underline-offset-2 tracking-wide px-2">About</p>
<ul aria-label="About Traverse">
<li>
<a href="#" class="hover:text-accent transition-colors foucus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent rounded-full px-2">
About Us
</a>
</li>
<li>
<a href="#" class="hover:text-accent transition-colors foucus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent rounded-full px-2">
Press
</a>
</li>
<li>
<a href="#" class="hover:text-accent transition-colors foucus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent rounded-full px-2">
News
</a>
</li>
</ul>
</div>
<div class="grid gap-3">
<p class="font-bold underline decoration-accent decoration-4 underline-offset-2 tracking-wide px-2">Locations</p>
<ul aria-label="About Traverse">
<li>
<a href="#" class="hover:text-accent transition-colors foucus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent rounded-full px-2">
Africa
</a>
</li>
<li>
<a href="#" class="hover:text-accent transition-colors foucus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent rounded-full px-2">
Asia
</a>
</li>
<li>
<a href="#" class="hover:text-accent transition-colors foucus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent rounded-full px-2">
Australia
</a>
</li>
<li>
<a href="#" class="hover:text-accent transition-colors foucus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent rounded-full px-2">
Europe
</a>
</li>
<li>
<a href="#" class="hover:text-accent transition-colors foucus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent rounded-full px-2">
North America
</a>
</li>
<li>
<a href="#" class="hover:text-accent transition-colors foucus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent rounded-full px-2">
South America
</a>
</li>
</ul>
</div>
<div class="grid gap-3">
<p class="font-bold underline decoration-accent decoration-4 underline-offset-2 tracking-wide px-2">Contact Us</p>
<ul aria-label="About Traverse">
<li>
<a href="#" class="hover:text-accent transition-colors foucus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent rounded-full px-2">
Email
</a>
</li>
<li>
<a href="#" class="hover:text-accent transition-colors foucus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent rounded-full px-2">
Instagram
</a>
</li>
<li>
<a href="#" class="hover:text-accent transition-colors foucus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent rounded-full px-2">
Facebook
</a>
</li>
<li>
<a href="#" class="hover:text-accent transition-colors foucus:outline-none focus-visible:ring-4 ring-offset-2 ring-offset-bkg ring-accent rounded-full px-2">
Twitter
</a>
</li>
</ul>
</div>
</nav>
</div>
</footer>
</div>
<script type="module" src="/main.js"></script>
</body>
</html>