forked from rampatra/wedding-website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·439 lines (416 loc) · 21.7 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
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
<!doctype html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Cece and Jacobs Wedding Website</title>
<meta name="description" content="We would like to invite you to our big day.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" content="#8fa0c7">
<meta property="og:title" content="Cece and Jacobs Wedding Website!">
<meta property="og:description" content="We would like to invite you to our big day.">
<meta property="og:type" content="website">
<link rel="apple-touch-icon" sizes="180x180" href="img/RealImg/2.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/RealImg/2.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/RealImg/2.png">
<link rel="manifest" href="manifest.json">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#c2adcf">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/styles.min.css">
<link rel="stylesheet" href="css/queries.css">
<link rel="stylesheet" href="node_modules/animate.css/animate.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<script src="js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>
</head>
<body id="top">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<section class="hero">
<section class="navigation">
<header>
<div class="header-content">
<div class="logo"><a href="#"><img src="img/RealImg/2.png" alt="Logo" ></a></div>
<!-- natural image size 500x500-->
<div class="header-nav">
<nav>
<ul class="primary-nav">
<li><a href="#intro">How We Met</a></li>
<li><a href="#events">Events</a></li>
<li><a href="#eng-pics">Engagement</a></li>
<li class="hidden-sm hidden-xs"><a href="#video-bg">Venue </a></li>
</ul>
<ul class="member-actions">
<li><a href="#map" class="login">Venue</a></li>
<li><a href="#rsvp" class="btn-white btn-small">RSVP</a></li>
</ul>
</nav>
</div>
<div class="navicon">
<a class="nav-toggle" href="#"><span></span></a>
</div>
</div>
</header>
</section>
<div class="container">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="hero-content text-center">
<!--<h1>Cece and Jacob</h1>-->
<!--<a href="#" class="btn btn-fill btn-large btn-margin-right">Scroll Down</a> -->
</div>
</div>
</div>
</div>
<div class="down-arrow floating-arrow"><a href="#invitation"><i class="fa fa-angle-down"></i></a></div>
</section>
<section id="invitation" class="section-padding" >
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h3>We are getting married!</h3>
<p>Our wedding date is August 6th, 2022 and we would love for you to join the celebration!</p>
<div class="share-bar"></div>
</div>
</div>
</div>
</section>
<section id="intro">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h3 class="header">How We Met</h3>
</div>
</div>
<div class="row">
<div class="col-md-3 hidden-sm hidden-xs">
<img src="img/eng_pics/babycec.png" class="wp1">
</div>
<div class="col-md-6">
<p>
Cece and Jacob’s love story begins sometime back in high school. While neither of them remember when they met, they became good acquaintance friends while attending Trinity’s high school ministry together. At some point, each remembers telling maid of honor Elizabeth that they thought the other was cute, though both dismissed it as a simple crush and went about their lives.
<br>Fast forward to summer 2018, where Cece and Jacob spent all summer doing children’s ministry together and hanging out at college ministry. Thus begins their love story. After weeks of running kids’ camps together, they both wanted to make a move. After bridesmaid Vanessa threw a lovely Christmas in July party, Jacob and Cece decided to drive down to Newport Beach to hang out and watch the sunset, and the rest is history! They’ve hiked peaks in Zion National Park, spent summers at the beach together, hosted many dinner parties with friends, and become best friends through their years together. They’re looking forward to the adventure of marriage and are so excited that you are helping them start it off with a party!
<br> After the wedding, Cece and Jacob will be moving across the country to Princeton, New Jersey as Cece begins her masters program at Princeon Theological Seminary. Prayers are appreciated for a smooth transition!
</p>
</div>
<div class="col-md-3 hidden-sm hidden-xs">
<img src="img/eng_pics/babyjake.png" class="wp2">
</div>
</div>
<div class="row">
<div class="col-sm-4 col-sm-push-2 col-xs-6 hidden-md hidden-lg"><img src="img/eng_pics/babycec.png" class="wp8"></div>
<div class="col-sm-4 col-sm-push-2 col-xs-6 hidden-md hidden-lg"><img src="img/eng_pics/babyjake.png" class="wp9"></div>
</div>
</div>
</section>
<section class="events section-padding" id="events">
<div class="container">
<div class="row">
<div class="col-md-12">
<h3 class="header">Events</h3>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-12 col-xs-12 leftcol">
<div class="wp3">
<h5>Ceremony<span class="time">4:30PM - 5:30PM</span></h5>
<p>We will be having a traditional Christian ceremony, officiated by Tanner Lowe,
Cece and Jacob's college ministry pastor, who has had a tremendous impact in their lives.
</p>
</div>
<div class="wp5">
<h5>Cocktail Hour <span class="time">5:45PM - 6:45PM</span></h5>
<p>Between the ceremony and the reception, there will be a brief cocktail hour with light refreshments.
</p>
</div>
<div class="wp7">
<h5>Reception <span class="time">6:45PM - 10:00PM</span></h5>
<p>The reception will include dinner, speeches, and a dance party to celebrate the newlyweds, followed by a send off into their future endeavors.
</p>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12 rightcol">
<div class="col-md-12">
<h3 class="header">Important Details</h3>
</div>
<div class="wp4">
<h5>Heat <span class="time"></span></h5>
<p>The ceremony, cocktail hour, and reception will be held outdoors in August, so it will likely be quite hot until the sun is set.
Wear sunscreen, bring a light jacket for the evening, and remember to drink lots of water!</p>
</div>
<div class="wp6">
<h5>Parking/Driving <span class="time">Arrive to park at 4:00PM</span></h5>
<p>The venue is in a back country area, and driving to the actual location can be difficult. Because of the very limited parking,
carpooling is <b>strongly</b> encouraged. Drive slow and safe! As you near the location, you will see signs pointing to the parking area. From there, a shuttle will take you up the final hill to the location.
</p>
</div>
<div class="wp7">
<h5>Health and Safety<span class="time"></span></h5>
<p>While the wedding is outdoors with plenty of ventilation, we appreciate your extra efforts to maintain a safe environment for all guests, especially those who are immunocompromised. The groom himself is in this camp as many of you know, so we kindly ask that if you or someone in your party feel under the weather, are exposed to Covid-19, or test positive for Covid-19 that you stay home and rest up.
</p>
</div>
</div>
</div>
<div class="row section-padding">
<div class="col-md-4 col-md-offset-4 text-center">
<a class="btn btn-accent btn-small" data-toggle="modal" data-target="#dc-modal">
<i class="fa fa-barcode"></i> Dress code
</a>
</div>
</div>
<div class="row">
<div class="col-xs-12 section-border section-padding">
</div>
</div>
</div>
<div id="dc-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span>
</button>
<h3 class="text-center section-padding">Dress Code</h3>
<p>
<strong>The wedding is an August wildflower garden party, so the dress code is semi-formal/festive. The majority of the evening will be spent on grass, so we advise against stilletto heels in favor of a block heel, wedge, or sandal/flat. Think pretty floral dresses, summery fabrics that won't make you too warm, nice pants and button downs for the lads, etc.Remember to consider the heat, and wear what makes you feel comfortable and confident.<br>
</strong>
<br>
</p>
</div>
</div><!--/.modal-content -->
</div><!-- /.modal-dialog -->
! </div><!-- /.modal -->
</section>
<section id="eng-pics" class="section-padding">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h3 class="header">The Couple Through the Years</h3>
</div>
</div>
<div class="row">
<div class="col-md-2">
<a class="fancybox" rel="group" href="img/eng_pics/IMG_0074.jpg">
<div class="img-wrap">
<div class="overlay">
<i class="fa fa-search"></i>
</div>
<img src="img/eng_pics/IMG_0074.jpg" alt=""/>
</div>
</a>
</div>
<div class="col-md-2">
<a class="fancybox" rel="group" href="img/eng_pics/IMG_0483.jpg">
<div class="img-wrap">
<div class="overlay">
<i class="fa fa-search"></i>
</div>
<img src="img/eng_pics/IMG_0483.jpg" alt=""/>
</div>
</a>
</div>
<div class="col-md-2">
<a class="fancybox" rel="group" href="img/eng_pics/IMG_0567.JPG">
<div class="img-wrap">
<div class="overlay">
<i class="fa fa-search"></i>
</div>
<img src="img/eng_pics/IMG_0567.JPG" alt=""/>
</div>
</a>
</div>
<div class="col-md-2">
<a class="fancybox" rel="group" href="img/eng_pics/IMG_0549.jpg">
<div class="img-wrap">
<div class="overlay">
<i class="fa fa-search"></i>
</div>
<img src="img/eng_pics/IMG_0549.jpg" alt=""/>
</div>
</a>
</div>
<div class="col-md-2">
<a class="fancybox" rel="group" href="img/eng_pics/IMG_0602.jpg">
<div class="img-wrap">
<div class="overlay">
<i class="fa fa-search"></i>
</div>
<img src="img/eng_pics/IMG_0602.jpg" alt=""/>
</div>
</a>
</div>
<div class="col-md-2">
<a class="fancybox" rel="group" href="img/eng_pics/IMG_7445.JPG">
<div class="img-wrap">
<div class="overlay">
<i class="fa fa-search"></i>
</div>
<img src="img/eng_pics/IMG_7445.JPG" alt=""/>
</div>
</a>
</div>
</div>
</div>
<div class="container">
<div class="row hidden-lg hidden-md hidden-xs">
<div class="col-xs-12 section-border section-padding"></div>
</div>
</div>
<!--<div class="row">
<div class="col-md-12">
<div class="diamond floating-logo">
<img src="img/sketch-logo.png" alt="Sketch Logo">
<div class="ring"></div>
</div>
</div>
</div>-->
</section>
<section id="registry" class="section-padding">
<h1 class="text-center"> <a href="https://www.target.com/gift-registry/gift/ceceandjacob">Registry</a></h1>
<p class="text-center"> We registered at Target, click the word Registry to view! <br>
Cash gifts are also greatly appreciated, as we will be moving about a two weeks after the wedding into our first (unfurnished) appartment all the way in Princeton, New Jersey! This means we have a limited ability to shift large gifts, as we are planning on flying.
</p>
</section>
<section id="video-bg" class="hidden-sm hidden-xs">
<div id="bgndVideo" class="player"
data-property="{videoURL:'https://www.youtube.com/watch?v=a38cfewB98Q',containment:'#video-bg',autoPlay:true, mute:true, showControls:false, startAt:381, stopAt:445, opacity:1, loop:true}">
</div>
<div id="video-content">
<h5>Outreach Farm Project</h5>
<p>Fallbrook CA</p>
</div>
</section>
<section id="map" class="section-padding">
<div class="text-center">
<h3>How do I get there?</h3>
<p>It's way easier than you think!</p>
</div>
<div id="map-canvas"></div>
<div id="map-content-wrapper" class="container pointer-events-none">
<div class="row">
<div class="col-xs-offset-1 col-xs-10 col-md-offset-3 col-md-6">
<div class="text-center">
<div id="btn-show-content" class="toggle-map-content pointer-events-auto">
<i class="fa fa-info-circle"></i> Show info
</div>
</div>
<div id="map-content" class="pointer-events-auto">
<div class="row">
<div class="col-md-6">
<h5>Outreach Farm Project</h5>
<p>974 Rice Canyon Road, Fallbrook CA 92028</p>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3331.3182820816446!2d-117.15159218480218!3d33.38885958079162!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80db80ca056e6811%3A0x29210e8db296ea36!2sOutreach%20Farm%20Project!5e0!3m2!1sen!2sus!4v1655250532781!5m2!1sen!2sus" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" &maptype=satellite></iframe>
</div>
<div class="col-md-6">
<h5>Jacob and Cece's Phone Numbers</h5>
<p><i class="fa fa-mobile"></i> <a href="tel://+17143947378">+1 714 394-7378</a><br>
<i class="fa fa-mobile"></i> <a href="tel://+17146141713">+1 714 614-1713</a></p>
</div>
</div>
<div class="row text-center">
<div class="col-md-6" style="padding: 5px;">
</div>
<div class="col-md-6" style="padding: 5px;">
<a class="btn btn-accent btn-small" id="btn-show-map"><i class="fa fa-map-marker"></i> Show
map</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="hotels text-center" id="hotels">
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<h1>Avaliable Hotels</h1>
<p>
<div>
<h2><a href="https://www.marriott.com/en-us/hotels/ontst-springhill-suites-temecula-valley-wine-country/overview/?scid=bb1a189a-fec3-4d19-a255-54ba596febe2&y_source=1_MjgxODQzNS03MTUtbG9jYXRpb24ud2Vic2l0ZQ%3D%3D">
Mariott suites</a></h2><br>
</div>
<div><h2><a href="https://www.caesars.com/harrahs-socal/hotel?utm_campaign=GMB&utm_source=google&utm_medium=local&utm_term=Harrah%27sResortSouthernCalifornia&utm_content=Hotel">
Harrahs</a></h2></div>
<div><h2><a href="https://www.hilton.com/en/hotels/cldtmgi-hilton-garden-inn-temecula/?SEO_id=GMB-AMER-GI-CLDTMGI&y_source=1_Mjc3Mjk2ODctNzE1LWxvY2F0aW9uLndlYnNpdGU%3D">
Hilton</a></h2></div>
</p>
</div>
</div>
</div>
</section>
<section class="rsvp text-center" id="rsvp">
<div id="rsvp-modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>×</span>
</button>
<div class="section-padding">
<h3>Thank you!</h3>
<p>We are looking forward to seeing you on our big day!</p>
<div id="add-to-cal"></div>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3>What are you waiting for?</h3>
<p>We would greatly appreciate if you could RSVP before July 15th.</p>
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfGhWfDuqnglKEkfE0Sciqarul8Kay_YKvLbOBjUTVvofiLTw/viewform?embedded=true" width="640" height="830" frameborder="0" marginheight="0" marginwidth="0">Loading…</iframe>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center content">
<span class="to-top-wrapper"><a href="#top" class="to-top"><i class="fa fa-angle-up"></i></a></span>
<p>Crafted by Jacob, mostly by hand, with lots of love for Cece</p>
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>
<script src="js/jquery.fancybox.pack.js"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.mb.YTPlayer.min.js"></script>
<script src="node_modules/waypoints/lib/jquery.waypoints.min.js"></script>
<script src="js/vendor/ouical.js"></script>
<script src="js/scripts.min.js"></script>
<script async defer
src="httphttps://maps.googleapis.com/maps/api/js?key=AIzaSyBlPw3GQYI3faa_9mRE6plWuM7xNEmrwH0&callback=initMaps://maps.googleapis.com/maps/api/js?key=AIzaSyBlPw3GQYI3faa_9mRE6plWuM7xNEmrwH0&callback=initMap"></script>
<!-- Google Analytics -->
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function () {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-46465113-4', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>