/
index.html
242 lines (233 loc) · 13.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mandy & Joey - Wedding - July 6th, 2024</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="icon" href="favicon.ico">
</head>
<body>
<div class="">
<section class="pb-24 position-relative overflow-hidden">
<div class="container mt-12">
<div class="row">
<div class="col-12 col-lg-5 my-auto text-center animate__animated animate__fadeInUp">
<div>
<h1 class="mb-0 lh-sm mb-7 mandy-joey-logo">
<span>Mandy</span>
<span class="text-primary">&</span>
<span>Joey</span>
</h1>
<p class="mb-0 lh-lg mw-md-md mb-6">A limitless, undefined, wild dance through life.</p>
</div>
</div>
<div class="col-12 col-lg-7 mt-10 mt-lg-0">
<div class="d-md-flex flex-md-row justify-content-md-around justify-content-lg-end">
<div class="me-lg-8">
<div class="d-none d-xl-block col-12 d-flex justify-content-center">
<div class="bg-primary-light p-1 position-absolute top-0 mt-n32 animate__animated animate__fadeInUp animate__delay-1s">
</div>
</div>
<img class="img-fluid mx-auto d-block animate__animated animate__fadeInUp" src="pstls-assets/custom-images/2.jpg" alt=""><img
class="img-fluid mx-auto d-block mt-8 animate__animated animate__fadeInUp" src="pstls-assets/custom-images/4.jpg" alt="">
<div
class="d-none d-xl-block d-flex justify-content-center bg-info-light p-1 mt-7 position-absolute bottom-0 mb-n52 animate__animated animate__fadeInUp animate__delay-1s">
<div class="p-32"></div>
</div>
</div>
<div>
<img class="img-fluid mx-auto d-block mt-8 mt-md-0 animate__animated animate__fadeInUp" src="pstls-assets/custom-images/3.jpg" alt=""><img
class="img-fluid mx-auto d-block mt-8 animate__animated animate__fadeInUp" src="pstls-assets/custom-images/1.jpg" alt="">
<div
class="d-none d-xl-block d-flex justify-content-center bg-light p-1 mt-8 position-absolute bottom-0 mb-n52 animate__animated animate__fadeInUp animate__delay-1s">
<div class="p-32"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="py-24 position-relative overflow-hidden">
<div class="container">
<div class="mw-2xl mx-auto mb-12 text-center">
<h1 class="mb-6 lh-sm font-heading">
<span>These</span>
<span class="text-primary">stories</span>
</h1>
<p class="lh-lg">Over the last 10 years, we've made so many incredible memories and enjoyed every emotion under
the sun. Together, growing through these stories and the relationships built from them. We are nothing
without those stories, without those memories, without those people, without those places, without one
another.</p>
</div>
<div class="position-relative">
<div class="container">
<div class="youtube-player" data-id="Pv9OkCKk0Vk"></div>
</div>
</div>
</div>
<div class="position-absolute top-0 start-0" style="z-index: -1;">
<div class="d-none d-xl-block mt-8 p-32 bg-warning-light mw-xs animate__animated animate__fadeInLeft"></div>
<div class="d-none d-xl-block mt-8 p-32 bg-danger-light mw-xs animate__animated animate__fadeInLeft"></div>
<div class="mt-md-8 p-8 p-md-20 p-xl-32 bg-success-light mw-xs animate__animated animate__fadeInLeft"></div>
</div>
<div class="position-absolute top-0 end-0" style="z-index: -1;">
<div class="d-none d-xl-block mt-8 p-32 bg-secondary-light mw-xs animate__animated animate__fadeInRight"></div>
<div class="d-none d-xl-block mt-8 p-32 bg-primary-light mw-xs animate__animated animate__fadeInRight"></div>
<div class="mt-md-8 p-8 p-md-20 p-xl-32 bg-info-light mw-xs animate__animated animate__fadeInRight"></div>
</div>
</section>
<section class="py-28 py-xl-20">
<div class="container">
<div class="text-center mw-xl mx-auto mb-12">
<h2 class="mb-6 display-5 font-heading">Schedule</h2>
<p class="lh-lg">How the week is shaping up so far.</p>
</div>
<div class="row">
<div class="col-12 mb-8 col-lg-3 mb-lg-0 px-lg-4">
<div class="bg-light p-6">
<span style="font-size: 2rem;">🎆</span>
<h4 class="mt-8 font-heading">Welcome Party</h4>
<p class="mt-4 lh-md">Kick off the wedding week.</p>
<h6 class="mt-8 font-heading" style="font-family: var(--bs-body-font-family); font-size: .9rem; font-weight: bold;">7/4, 7pm - 11pm</h6>
<h6 class="mt-8 font-heading" style="font-family: var(--bs-body-font-family); font-size: .9rem; font-weight: bold;">Our House</h6>
<h6 class="mt-2 font-heading" style="font-family: var(--bs-body-font-family); font-size: .8rem;">W 48th St, Cleveland, Ohio</h6>
</div>
</div>
<div class="col-12 mb-8 col-lg-3 px-lg-4 mb-lg-0">
<div class="bg-info-light p-6">
<span style="font-size: 2rem;">💒</span>
<h4 class="mt-8 font-heading">Ceremony</h4>
<p class="mt-4 lh-md">A ceremony to celebrate our love.</p>
<h6 class="mt-8 font-heading" style="font-family: var(--bs-body-font-family); font-size: .9rem; font-weight: bold;">7/6, 5:30pm - 5:45pm</h6>
<h6 class="mt-8 font-heading" style="font-family: var(--bs-body-font-family); font-size: .9rem; font-weight: bold;">Truss</h6>
<h6 class="mt-2 font-heading" style="font-family: var(--bs-body-font-family); font-size: .8rem;">2061 W 25th St, Cleveland, Ohio</h6>
</div>
</div>
<div class="col-12 mb-8 col-lg-3 px-lg-4 mb-lg-0">
<div class="bg-primary-light p-6">
<span style="font-size: 2rem;">💃</span>
<h4 class="mt-8 font-heading">Reception</h4>
<p class="mt-4 lh-md">Eat, drink and dance the night away.</p>
<h6 class="mt-8 font-heading" style="font-family: var(--bs-body-font-family); font-size: .9rem; font-weight: bold;">7/6, 5:45pm - 11pm</h6>
<h6 class="mt-8 font-heading" style="font-family: var(--bs-body-font-family); font-size: .9rem; font-weight: bold;">Truss</h6>
<h6 class="mt-2 font-heading" style="font-family: var(--bs-body-font-family); font-size: .8rem;">2061 W 25th St, Cleveland, Ohio</h6>
</div>
</div>
<div class="col-12 px-lg-3 col-lg-3">
<div class="bg-dark text-white p-6">
<span style="font-size: 2rem;">🍾</span>
<h4 class="mt-8 text-white font-heading">Afters</h4>
<p class="mt-4 text-white lh-md">For those that dance and don't care about a clock.</p>
<h6 class="mt-8 font-heading" style="font-family: var(--bs-body-font-family); font-size: .9rem; font-weight: bold;">7/6, 11:30pm - whenever</h6>
<h6 class="mt-8 font-heading" style="font-family: var(--bs-body-font-family); font-size: .9rem; font-weight: bold;">The Club</h6>
<h6 class="mt-2 font-heading" style="font-family: var(--bs-body-font-family); font-size: .8rem;">Somewhere in Cleveland, Ohio</h6>
</div>
</div>
</div>
</div>
</section>
<section class="py-24 bg-light">
<div class="container">
<div class="mw-xl mx-auto text-center mb-20 mb-xl-16">
<h1 class="mb-6 lh-sm px-xl-12 font-heading">Questions</h1>
<p class="lh-lg mb-0">Common questions you might have about the wedding week, ceremony or reception.</p>
</div>
<div class="row mb-20 mb-xl-24">
<div class="col-12 col-md-6 px-xl-4 mb-8">
<div class="bg-white py-12 px-6 px-md-16">
<img class="img-fluid" src="pstls-assets/icons/faq-info.svg" alt="">
<h5 class="mt-6 lh-lg mb-5 font-heading">Can I bring a date?</h5>
<p class="text-muted lh-lg mb-0">We are only able to accommodate a specific number of guests. Those who have been given a plus one will know from their formal invitation.</p>
</div>
</div>
<div class="col-12 col-md-6 px-xl-4 mb-8">
<div class="bg-white py-12 px-6 px-md-16">
<img class="img-fluid" src="pstls-assets/icons/faq-info.svg" alt="">
<h5 class="mt-6 lh-lg mb-5 font-heading">Are children welcome?</h5>
<p class="text-muted lh-lg mb-0">Although we love your kids, this is an adults-only celebration.</p>
</div>
</div>
<div class="col-12 col-md-6 px-xl-4 mb-8">
<div class="bg-white py-12 px-6 px-md-16">
<img class="img-fluid" src="pstls-assets/icons/faq-info.svg" alt="">
<h5 class="mt-6 lh-lg mb-5 font-heading">Is there parking/transportation provided?</h5>
<p class="text-muted lh-lg mb-0">There will be complimentary valet parking at the event for those driving. For those staying in the area, we will provide an Uber voucher to help with your travels.</p>
</div>
</div>
<div class="col-12 col-md-6 px-xl-4 mb-8 mb-md-0">
<div class="bg-white py-12 px-6 px-md-16">
<img class="img-fluid" src="pstls-assets/icons/faq-info.svg" alt="">
<h5 class="mt-6 lh-lg mb-5 font-heading">What kind of food and drinks will be served?</h5>
<p class="text-muted lh-lg mb-0">You will be shown your options when we send out formal invites during the RSVP step. There will be an open bar.</p>
</div>
</div>
<div class="col-12 col-md-6 px-xl-4 mb-8">
<div class="bg-white py-12 px-6 px-md-16">
<img class="img-fluid" src="pstls-assets/icons/faq-info.svg" alt="">
<h5 class="mt-6 lh-lg mb-5 font-heading">What is black tie?</h5>
<p class="text-muted lh-lg mb-0">A dark tuxedo, or a dark suit with necktie/bow tie or a full-length formal dress.</p>
</div>
</div>
<div class="col-12 col-md-6 px-xl-4">
<div class="bg-white py-12 px-6 px-md-16">
<img class="img-fluid" src="pstls-assets/icons/faq-info.svg" alt="">
<h5 class="mt-6 lh-lg mb-5 font-heading">Is there a hotel block?</h5>
<p class="text-muted lh-lg mb-0">Yes, we have hotel blocks at <a href="https://www.ihg.com/hotelindigo/hotels/us/en/find-hotels/select-roomrate?fromRedirect=true&qSrt=sBR&qIta=99801505&icdv=99801505&qSlH=clehr&qCiD=05&qCiMy=062024&qCoD=07&qCoMy=062024&qGrpCd=LTW&qAAR=6CBARC&qRtP=6CBARC&setPMCookies=true&qSHBrC=IN&qDest=651%20Huron%20Road,%20Cleveland,%20OH,%20US&srb_u=1&qChAge=&qRmFltr=" target="_blank">Hotel Indigo</a> and The Westin (coming soon). Rooms are available on a first come first serve basis.</p>
</div>
</div>
</div>
<div class="text-center">
<img class="img-fluid" src="pstls-assets/icons/faq-info.svg" alt="">
<h1 class="mb-4 lh-sm font-heading">Other questions?</h1>
<p class="mb-8 lh-lg">Can't find the answer you’re looking for? Please reach out to us.</p>
</div>
</div>
</section>
<section class="py-24 position-relative overflow-hidden bg-dark">
<div class="position-absolute top-0 start-0 bottom-0 end-0"
style="background-image: url('pstls-assets/images/call-to-action/shadows-big.png'); background-position: center;">
</div>
<div class="position-relative container">
<div class="py-20 px-4">
<div class="mw-2xl mw-xl-xl mw-xxl-2xl mx-auto mb-8 text-center" data-aos="zoom-in"
data-aos-duration="3000">
<h1 class="mb-6 text-white lh-sm font-heading">
<span>Save The Date</span>
</h1>
<h2 class="mb-6 text-white lh-sm">
<span>July 6th, 2024</span>
</h2><h4 class="text-white lh-sm">
<span>Truss</span>
</h4><p class="text-white lh-lg">2061 W 25th St, Cleveland, Ohio</p>
<p class="mt-20 text-white mandy-joey-signature">With Love,</p>
<p class="text-white mandy-joey-signature">Mandy & Joey</p>
<p>❤️</p>
</div>
</div>
</div>
<div class="position-absolute bottom-0 start-0" style="z-index: 1; opacity: 60%;">
<div class="d-none d-xl-block p-32 bg-dark"></div>
<div class="d-none d-xl-block mt-8 p-32 bg-dark"></div>
<div class="d-none d-xl-block mt-md-8 p-16 p-md-20 p-xl-32 bg-dark"></div>
</div>
<div class="position-absolute top-0 end-0" style="z-index: 1; opacity: 60%;">
<div class="d-none d-xl-block mt-8 p-32 bg-dark"></div>
<div class="d-none d-xl-block mt-8 p-32 bg-dark"></div>
<div class="d-none d-xl-block mt-md-8 p-16 p-md-20 p-xl-32 bg-dark"></div>
</div>
</section>
</div>
<script src="js/bootstrap/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="js/main.js"></script>
</body>
</html>