-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
167 lines (151 loc) · 6.69 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
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Steph and Matt - 2025</title>
<link rel="stylesheet" href="css/style.css">
<meta name="description" content="Wedding Invitation and RSVP">
<meta property="og:title" content="Wedding Invitation & RSVP">
<meta property="og:type" content="website">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:image:alt" content="">
<link rel="icon" href="./favicon.ico" sizes="any">
<link rel="icon" href="./icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="icon.png">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<header>
<h1>Steph and Matt - 2025</h1>
</header>
<main>
<section id="image-carousel">
<div class="carousel-container">
<img src="img/img1.png" alt="Wedding Image 1" class="active">
<img src="img/img2.png" alt="Wedding Image 2">
<img src="img/img3.png" alt="Wedding Image 3">
<img src="img/img4.jpg" alt="Wedding Image 4">
<!-- Add more images as needed -->
</div>
</section>
<div id="scrollable-content">
<section id="wedding-details">
<h2>Wedding Details</h2>
<div class="faq-container">
<div class="faq-item">
<h3 class="faq-question">When and where is the wedding?</h3>
<div class="faq-answer">
<p>Join us in celebrating the marriage of Steph and Matt on September 13, 2025 at the Abel Farm.</p>
<p>The address is 253001 Range Road 245, Alberta</p>
<p>Google Maps has the best directions, so we suggest using that over Apple Maps which does not have good directions.</p>
<p>Range Road 245 is gravel so please plan accordingly.</p>
</div>
</div>
<div class="faq-item">
<h3 class="faq-question">RSVP Deadline?</h3>
<div class="faq-answer">
<p>Please RSVP no later than May 1, 2025</p>
<p>If you are unable to RSVP before that date, we may not be able to accommodate you at our wedding.</p>
</div>
</div>
<div class="faq-item">
<h3 class="faq-question">Will this be an indoors or outdoors event?</h3>
<div class="faq-answer">
<p>The ceremony, cocktail hour, and reception will all be held outdoors.</p>
</div>
</div>
<div class="faq-item">
<h3 class="faq-question">What time does it all start?</h3>
<div class="faq-answer">
<p>The ceremony begins at exactly 4pm. Please ensure you arrive with enough time to park, meet & greet, and find your seats.</p>
</div>
</div>
<div class="faq-item">
<h3 class="faq-question">What is the dress code?</h3>
<div class="faq-answer">
<p>We would love if everyone could dress up in Semi-Formal wear. Please no jeans.</p>
<p>Please keep the outdoors nature of the wedding in mind when dressing for the occasion.</p>
</div>
</div>
<div class="faq-item">
<h3 class="faq-question">Parking?</h3>
<div class="faq-answer">
<p>While there is a fair amount of space for parking, please consider carpooling to reduce the number of vehicles</p>
<p>We will be arranging for a bus to take people from the hotel in Strathmore to the ceremony. The bus will be taking guests back to Strathmore periodically throughout the evening.</p>
<p>Alternatively, the Wheatland Taxi is also available at your own cost.</p>
</div>
</div>
<div class="faq-item">
<h3 class="faq-question">Sleeping arrangements?</h3>
<div class="faq-answer">
<p>We have an arrangement with the Travelodge in Strathmore.</p>
<p>Although we were unable to block rooms for the wedding, they will provide you with a discount if you mention the Abel-Beemer Wedding</p>
<p>Due to us being unable to block rooms, please ensure you book your room ASAP!</p>
</div>
</div>
<div class="faq-item">
<h3 class="faq-question">Is there a gift registry?</h3>
<div class="faq-answer">
<p>There is no registry, and having everyone present to celebrate our big day is your gift to us!</p>
<p>Please do not bring gifts.</p>
</div>
</div>
</div>
</section>
<section id="rsvp">
<h2>RSVP</h2>
<form id="rsvp-form">
<label for="name">Guest Name:</label>
<input type="text" id="name" name="name" placeholder="eg. John Smith" required>
<label for="attending">I am attending!</label>
<input type="checkbox" id="attending" name="attending" required>
<label>Diet Restrictions:</label>
<div id="diet-restrictions">
<div>
<input type="checkbox" id="vegetarian" name="diet" value="Vegetarian">
<label for="vegetarian">Vegetarian</label>
</div>
<div>
<input type="checkbox" id="vegan" name="diet" value="Vegan">
<label for="vegan">Vegan</label>
</div>
<div>
<input type="checkbox" id="glutenFree" name="diet" value="Gluten-free">
<label for="glutenFree">Gluten-free</label>
</div>
<div>
<input type="checkbox" id="dairyFree" name="diet" value="Dairy-free">
<label for="dairyFree">Dairy-free</label>
</div>
<div>
<input type="checkbox" id="nutAllergy" name="diet" value="Nut allergy">
<label for="nutAllergy">Nut allergy</label>
</div>
<div>
<input type="checkbox" id="shellfishAllergy" name="diet" value="Shellfish allergy">
<label for="shellfishAllergy">Shellfish allergy</label>
</div>
<div>
<input type="checkbox" id="other" name="diet" value="Other">
<label for="other">Other</label>
</div>
<div id="other-diet-container" style="display: none;">
<input type="text" id="otherDiet" name="other-diet" placeholder="Please specify">
</div>
</div>
<label for="plusOnes">Plus One(s):</label>
<input type="text" id="plusOnes" name="name" placeholder="eg. Jane Smith, Little Bobby Smith">
<button type="submit">RSVP Now!</button>
</form>
</section>
</div>
<div id="rsvp-banner" class="hidden">
<p>Thank you for your RSVP!</p>
</div>
</main>
<button id="rsvp-float-btn" class="rsvp-float-btn">RSVP Now</button>
<script src="js/app.js"></script>
</body>
</html>