-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfaq.html
366 lines (332 loc) · 17.1 KB
/
faq.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
<!doctype html>
<html lang="en" data-bs-theme="auto">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wedding J&M - F.A.Q.</title>
<meta name="description" content="Answers to frequently asked questions and other information relevant to Julia and Maggie's Wedding at Planet Bluegrass.">
<meta name="author" content="Julia Kent">
<!-- Preload Bootstrap CSS -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" as="style">
<!-- Load Bootstrap CSS from CDN -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Custom CSS -->
<link href="./css/custom.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="favicon_io/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="favicon_io/android-chrome-512x512.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
<link rel="manifest" href="favicon_io/site.webmanifest">
<link rel="icon" href="favicon_io/favicon.ico" type="image/x-icon">
<!-- Preload Banner Image -->
<link rel="preload" href="../images/foreheadkiss.webp" as="image">
<style>
.jumbotron-faq {
background-image: url("../images/foreheadkiss.webp");
}
.faq-question {
display: flex;
align-items: center;
cursor: pointer;
font-size: 1.25rem;
text-align: left;
}
.faq-question i {
transition: transform 0.2s ease;
}
.faq-question.collapsed i {
transform: rotate(180deg);
}
.faq-question {
border: none;
background: none;
color: inherit;
padding: 0;
}
@media (max-width: 768px) {
.d-inline-flex {
width: 100%
}
.btn, .bt.faq-question {
width: 100%;
}
.container-icon {
text-align: right;
width: 55%;
}
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
<symbol id="check2" viewBox="0 0 16 16">
<path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z"/>
</symbol>
<symbol id="circle-half" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 0 8 1v14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
</symbol>
<symbol id="moon-stars-fill" viewBox="0 0 16 16">
<path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
<path d="M10.794 3.148a.217.217 0 0 1 .412 0l.387 1.162c.173.518.579.924 1.097 1.097l1.162.387a.217.217 0 0 1 0 .412l-1.162.387a1.734 1.734 0 0 0-1.097 1.097l-.387 1.162a.217.217 0 0 1-.412 0l-.387-1.162A1.734 1.734 0 0 0 9.31 6.593l-1.162-.387a.217.217 0 0 1 0-.412l1.162-.387a1.734 1.734 0 0 0 1.097-1.097l.387-1.162zM13.863.099a.145.145 0 0 1 .274 0l.258.774c.115.346.386.617.732.732l.774.258a.145.145 0 0 1 0 .274l-.774.258a1.156 1.156 0 0 0-.732.732l-.258.774a.145.145 0 0 1-.274 0l-.258-.774a1.156 1.156 0 0 0-.732-.732l-.774-.258a.145.145 0 0 1 0-.274l.774-.258c.346-.115.617-.386.732-.732L13.863.1z"/>
</symbol>
<symbol id="sun-fill" viewBox="0 0 16 16">
<path d="M8 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0zm0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13zm8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5zM3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8zm10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0zm-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0zm9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707zM4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708z"/>
</symbol>
</svg>
<nav class="navbar navbar-expand-md fixed-top">
<div class="container-fluid nav-text-container" style="margin: 0; padding: 0;">
<a class="navbar-brand nav-link fw-bold py-1 px-0 active" href="index.html" style="font-size: 1em;">
<img src="images/JandM.svg" alt="J&M" style="height: 1.5em;">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ms-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link fw-bold py-1 px-0" href="rsvp.html">R.S.V.P.</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bold py-1 px-0" href="story.html">Story</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bold py-1 px-0" href="schedule.html">Schedule</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bold py-1 px-0" href="travel.html">Travel</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bold py-1 px-0" href="faq.html">F.A.Q.</a>
</li>
<li class="nav-item">
<a class="nav-link fw-bold py-1 px-0" href="thank-you.html">Gratitude</a>
</li>
</ul>
</div>
</div>
</nav>
<main class="main-content">
<div class="jumbotron jumbotron-fluid jumbotron-faq">
<div class="container">
<h1 class="display-4">F.A.Q.</h1>
<p class="lead">Get the Scoop</p>
</div>
</div>
<div class="container">
<h1 class="mt-3" style="margin-bottom: 1rem">Questions</h1>
<p class="d-inline-flex gap-1">
<button class="faq-question btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRSVP" aria-expanded="false" aria-controls="collapseRSVP">
<span>
When is the R.S.V.P. deadline?
</span>
<div class="container-icon">
<i class="fas fa-chevron-down ms-2"></i>
</div>
</button>
</p>
<div class="collapse" id="collapseRSVP">
<div class="card card-body"><p>
Kindly R.S.V.P. by June 23, 2025. We need an accurate guest count and cannot accept any more guests after that date.
</p></div>
</div>
<br>
<p class="d-inline-flex gap-1">
<button class="faq-question btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWeather" aria-expanded="false" aria-controls="collapseWeather">
<span>
What will the weather be like?
</span>
<div class="container-icon">
<i class="fas fa-chevron-down ms-2"></i>
</div>
</button>
</p>
<div class="collapse" id="collapseWeather">
<div class="card card-body"><p>
While mountain meteorology is famously unpredictable, we anticipate <b>mid-80s</b> during the ceremony, with a chill down to <b>50°F</b> in the evening. <br><br>
Colorado has a semi-arid climate which means our daily temperature swings are probably larger than our East coast guests are used to. Bring a layer!
</p></div>
</div>
<br>
<p class="d-inline-flex gap-1">
<button class="faq-question btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseParking" aria-expanded="false" aria-controls="collapseParking">
<span>
Where should I park?
</span>
<div class="container-icon">
<i class="fas fa-chevron-down ms-2" style="text-align:right"></i>
</div>
</button>
</p>
<div class="collapse" id="collapseParking">
<div class="card card-body"><p>
There is plenty of free parking near the entrance of the venue.
</p></div>
</div>
<br>
<p class="d-inline-flex gap-1">
<button class="faq-question btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseShoes" aria-expanded="false" aria-controls="collapseShoes">
<span>
What kind of shoes should/shouldn't I wear?
</span>
<div class="container-icon">
<i class="fas fa-chevron-down ms-2"></i>
</div>
</button>
</p>
<div class="collapse" id="collapseShoes">
<div class="card card-body"><p>
The ceremony will be outside without paved paths, so wear appropriate footwear. Stilettos not recommended.
</p></div>
</div>
<br>
<p class="d-inline-flex gap-1">
<button class="faq-question btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePhotos" aria-expanded="false" aria-controls="collapsePhotos">
<span>
Is it okay to take pictures with our phones and cameras during the wedding?
</span>
<div class="container-icon">
<i class="fas fa-chevron-down ms-2"></i>
</div>
</button>
</p>
<div class="collapse" id="collapsePhotos">
<div class="card card-body"><p>
Please refrain from taking photos during the ceremony. No phones or cameras allowed.<br><br>
Afterwards, go wild!
</p></div>
</div>
<br>
<p class="d-inline-flex gap-1">
<button class="faq-question btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseAltitude" aria-expanded="false" aria-controls="collapseAltitude">
<span>
Do I need to be concerned about the altitude?
</span>
<div class="container-icon">
<i class="fas fa-chevron-down ms-2"></i>
</div>
</button>
</p>
<div class="collapse" id="collapseAltitude">
<div class="card card-body">
<p>Our venue is at an altitude of 5,371 feet. If you're coming from sea level, the things to keep in mind are:
<ul style="list-style-type: none; padding-left: 0;">
<li>1. Sunscreen is a must! The sun's rays are stronger up here and you can burn faster.</li>
<li>2. Drink LOTS of water! To ward off headaches, drink an extra liter or two.</li>
<li>3. Watch your alcohol. We want you to party and have a good time, but please be mindful that you will get drunk much faster in Colorado.</li>
</ul>
</p>
</div>
</div>
<br>
<p class="d-inline-flex gap-1">
<button class="faq-question btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDog" aria-expanded="false" aria-controls="collapseDog">
<span>
Can I bring my dog?
</span>
<div class="container-icon">
<i class="fas fa-chevron-down ms-2"></i>
</div>
</button>
</p>
<div class="collapse" id="collapseDog">
<div class="card card-body"><p>
Dogs are not allowed at the venue, as much as we all love our four-legged friends.
</p></div>
</div>
<br>
<p class="d-inline-flex gap-1">
<button class="faq-question btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseName" aria-expanded="false" aria-controls="collapseName">
<span>
Are you changing your last names?
</span>
<div class="container-icon">
<i class="fas fa-chevron-down ms-2"></i>
</div>
</button>
</p>
<div class="collapse" id="collapseName">
<div class="card card-body"><p>
We aren't officially changing our names (hello paperwork!), but we're open to suggestions to unofficially title our new family unit. Kent-Sawyers or Sawyers-Kent? Something entirely new? Maybe down the road.
</p></div>
</div>
<br>
<p class="d-inline-flex gap-1">
<button class="faq-question btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseRegistry" aria-expanded="false" aria-controls="collapseRegistry">
<span>
Do you have a registry?
</span>
<div class="container-icon">
<i class="fas fa-chevron-down ms-2"></i>
</div>
</button>
</p>
<div class="collapse" id="collapseRegistry">
<div class="card card-body"><p>
Your presence is all the gift we need! Seriously, thank you for celebrating our union with us. We know a lot of our guests had to make sacrifices to make it, and we are so grateful.<br><br>
If you do feel called to give more, we put together a honey moon fund and wish-list to give you some ideas of items that will help build our life together.
Here is our optional <a href="https://www.zola.com/registry/maggieandjulia2025" class="text-body-secondary">registry</a>.</p></div>
</div>
<br>
<p class="d-inline-flex gap-1">
<button class="faq-question btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseContact" aria-expanded="false" aria-controls="collapseContact">
<span>
Who can I ask if I have more questions?
</span>
<div class="container-icon">
<i class="fas fa-chevron-down ms-2"></i>
</div>
</button>
</p>
<div class="collapse" id="collapseContact">
<div class="card card-body"><p>
You can contact both Maggie and Julia with questions about the wedding by emailing us at [email protected].</p></div>
</div>
<br>
<script>
document.addEventListener('DOMContentLoaded', function() {
const collapseButton = document.querySelector('[data-bs-target="#collapseExample"]');
const collapseIcon = collapseButton.querySelector('i');
collapseButton.addEventListener('click', function() {
if (collapseButton.getAttribute('aria-expanded') === 'true') {
collapseIcon.classList.remove('fa-chevron-down');
collapseIcon.classList.add('fa-chevron-up');
} else {
collapseIcon.classList.remove('fa-chevron-up');
collapseIcon.classList.add('fa-chevron-down');
}
});
});
</script>
<div class="text-center" style="padding-bottom: 1rem">
<img loading="lazy"
sizes="(max-width: 962px) 30vw, (max-width: 1200px) 200px, 200px"
srcset="
images/PixelHeart_ti7bw3/PixelHeart_ti7bw3_c_scale,w_200.png 200w,
images/PixelHeart_ti7bw3/PixelHeart_ti7bw3_c_scale,w_709.png 709w,
images/PixelHeart_ti7bw3/PixelHeart_ti7bw3_c_scale,w_962.png 962w"
src="images/PixelHeart_ti7bw3/PixelHeart_ti7bw3_c_scale,w_962.png"
alt="Pixel Rainbow Heart">
</div>
</div>
</main>
<footer class="py-3 my-4 border-top bg-light">
<div class="container d-flex justify-content-between align-items-center">
<div class="col-md-4 text-center text-md-start">
<p class="mb-0 text-body-secondary"><a href="https://github.com/jukent/maggie-and-julia" class="text-body-secondary">Coded by Julia</a><br>with lots of love for Maggie</p>
</div>
<div id="countdown" class="col-md-4 mb-0 text-body-secondary text-center"></div>
<div class="col-md-4 text-center text-md-end">
<p class="mb-0 text-body-secondary">Banner Photography by<br><a href="https://angiewilderphoto.com/" class="text-body-secondary">Angie Wilder</a></p>
</div>
</div>
</footer>
<script src="./js/custom.js"></script>
<!-- Preload Bootstrap JS -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" as="script">
<!-- Load Bootstrap JS from CDN -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" defer></script>
</body>
</html>