-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
266 lines (231 loc) · 11.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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Jordan & Mary - 5/25/14</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:700,400' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/styles.css" media="screen">
<link rel="shortcut icon" href="favicon.ico?v=20190125" type="image/x-icon">
</head>
<body>
<div class="header">
<div class="container">
<nav class="navbar navbar-inverse" role="navigation">
<div class="navbar-header">
<button type="button" id="nav-toggle" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand scroll-top">welcome</a>
</div>
<!--/.navbar-header-->
<div id="main-nav" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="#" class="scroll-link" data-id="story">our story</a></li>
<li><a href="#" class="scroll-link" data-id="photos">photos</a></li>
<li><a href="#" class="scroll-link" data-id="reception">reception</a></li>
<li><a href="#" class="scroll-link" data-id="rsvp">RSVP</a></li>
<li><a href="#" class="scroll-link" data-id="registry">registry</a></li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
<!--/.navbar-->
</div>
<!--/.container-->
</div>
<!--/.header-->
<div class="page-section intro">
<div class="container">
<div class="headline">
<h1>Jordan & Mary</h1>
<p class="lead">May 25, 2014<br />Farm Kitchen</p>
</div>
<div class="introbuttons">
<p>
<a href="#" class="scroll-link btn btn-dark" data-id="story">Read our story</a>
</p>
</div>
</div>
<!--/.container-->
</div>
<!--/.page-section-->
<div id="story" class="page-section">
<div class="container bubble storybubble">
<h2><a href="#" class="scroll-link" data-id="story">our story</a></h2>
<div class="two-col">
<p>In true Seattle fashion, we met on a rainy Sunday evening at St. Mark’s Cathedral, after the Compline service.</p>
<h3>A rainy night and a cathedral</h3>
<p>Mary immediately noticed the handsome and quiet newcomer to the group, who struck her as a Mr. Darcy type (which inevitably caused a few heart palpitations). At the same time, Jordan was surreptitiously eyeing this sunny, lovely girl and wanting to find out who she was.</p>
<p>Even before mutual friends and housemates made the introductions, there was an undeniable spark of magic between us.</p>
<h3>Adventure begins</h3>
<p>Over the course of more Compline services, rock-climbing trips, and pub outings with our friends, our friendship grew. Encouraged by family and friends, we started dating in February 2012.</p>
<p>Our relationship blossomed over good books, culinary outings, laughter, and shared enthusiasm for traveling. In June 2013, Jordan proposed in the place where we first met… and Mary said yes!</p>
<h3>Home sweet home</h3>
<p>Although we were planning to get married the following year, God had other plans in mind for us. Thanks to some good timing and some generous help from Mary’s parents, we were able to find a cozy house in the Phinney Ridge neighborhood to call home—so we decided not to waste any more time.</p>
<p>On August 11th, 2013, we made our vows in a private ceremony at Jordan’s parents’ home in West Seattle. Surrounded by beautiful views of Puget Sound and our immediate families, we couldn’t have dreamed of a more perfect wedding.</p>
<p>But we knew we still wanted to celebrate with our extended family and all our amazing friends who supported us along our journey.</p>
</div>
</div>
<!--/.container-->
<div class="container nextnav">
<p><a href="#" class="scroll-link btn btn-dark" data-id="photos">Browse our photos</a></p>
</div>
</div>
<!--/#story-->
<div id="photos" class="page-section">
<div class="container bubble photogallery">
<h2><a href="#" class="scroll-link" data-id="photos">photos</a></h2>
<!-- photo gallery using ResponsiveSlides.js -->
<div class="rslides_container">
<ul class="rslides">
<li><img src="photogallery/photogal01_1840_B.jpg" alt=""></li>
<li><img src="photogallery/photogal02_1840.jpg" alt=""></li>
<li><img src="photogallery/photogal03_1840.jpg" alt=""></li>
<li><img src="photogallery/photogal04_1840.jpg" alt=""></li>
<li><img src="photogallery/photogal05_1840.jpg" alt=""></li>
<li><img src="photogallery/photogal06_1840.jpg" alt=""></li>
<li><img src="photogallery/photogal07_1840.jpg" alt=""></li>
<li><img src="photogallery/photogal08_1840.jpg" alt=""></li>
<li><img src="photogallery/photogal09_1840.jpg" alt=""></li>
<li><img src="photogallery/photogal10_1840.jpg" alt=""></li>
<li><img src="photogallery/photogal11_1840.jpg" alt=""></li>
<li><img src="photogallery/photogal12_1840.jpg" alt=""></li>
<li><img src="photogallery/photogal13_1840.jpg" alt=""></li>
<li><img src="photogallery/photogal14_1840.jpg" alt=""></li>
<li><img src="photogallery/photogal15_1840.jpg" alt=""></li>
</ul>
</div>
<p>Thank you to <a href="http://francesandfern.com/" target="_blank">Frances & Fern</a> for the beautiful photos. You can see more on our <a href="https://www.flickr.com/photos/jordan_buckley/sets/72157641986794334/" target="_blank">Flickr photostream</a>.</p>
</div>
<!--/.container-->
<div class="container nextnav">
<p><a href="#" class="scroll-link btn btn-dark" data-id="reception">Come celebrate with us</a></p>
</div>
</div>
<!--/#photos-->
<div id="reception" class="page-section">
<div class="container bubble">
<h2><a href="#" class="scroll-link" data-id="reception">Reception</a></h2>
<p>We would love to have you join us for our wedding reception! Here are the details:</p>
<h3>Location</h3>
<!-- <div class="row"> -->
<!-- <div class="col-sm-3"> -->
<p><a href="https://secure.farmkitchen.com/" target="_blank">Farm Kitchen</a><br />
24309 Port Gamble Rd NE<br />
Poulsbo, Washington</p>
<!-- </div>
<div class="col-sm-6"> -->
<p>
<a class="btn btn-dark" href="https://maps.google.com/maps?saddr=Seattle,+WA&daddr=Farm+Kitchen,+Port+Gamble+Rd+NE,+Poulsbo,+WA&hl=en&ll=47.718077,-122.420654&spn=0.80473,0.802002&sll=47.674561,-122.355444&sspn=0.050338,0.050125&geocode=FcJp1gIdWVy1-ClVM-iTLBCQVDGa1URpRmUlEA%3BFbsq2QIdR4qx-CEO-mtGWK_3kinnf24OphiQVDEO-mtGWK_3kg&oq=farm+k&mra=ls&t=m&z=10" target="_blank">Get directions</a>
<a class="btn btn-dark" href="http://www.wsdot.wa.gov/Ferries/Schedule/ScheduleDetail.aspx?tripdate=20140525&departingterm=7&arrivingterm=3&roundtrip=true" target="_blank">View ferry times</a>
</p>
<!-- </div>
</div> -->
<h3>Time</h3>
<p>Sunday, May 25, 2014 at 3:00pm</p>
<h3>Festivities</h3>
<p>Come celebrate with us in the beautiful rustic setting of Farm Kitchen.</p>
<p>There will be food, drink, music, dancing, and good times!</p>
</div>
<!--/.container-->
<div class="container nextnav">
<p><a href="#" class="scroll-link btn btn-dark" data-id="rsvp">Let us know you’re coming</a></p>
</div>
</div>
<!--/#reception-->
<div id="rsvp" class="page-section">
<div class="container bubble">
<h2><a href="#" class="scroll-link" data-id="rsvp">RSVP</a></h2>
<p>Please RSVP by April 20 so we can plan for you. Thanks!</p>
<p><a href="https://jordanandmary.wufoo.com/forms/jordan-marys-wedding-reception-rsvp/" class="btn btn-dark" target="_blank">RSVP</a></p>
</div>
<!--/.container-->
<div class="container nextnav">
<p><a href="#" class="scroll-link btn btn-dark" data-id="registry">Send us on our honeymoon</a></p>
</div>
</div>
<!--/#rsvp-->
<div id="registry" class="page-section">
<div class="container bubble">
<h2><a href="#" class="scroll-link" data-id="registry">registry</a></h2>
<p>If you’d like to give us a gift, we would really appreciate contributions to our <a href="http://www.honeyfund.com/wedding/jordanandmary" target="_blank">honeymoon fund</a>! After the reception, we’re heading to beautiful Costa Rica for some R&R. You could <a href="http://www.honeyfund.com/wedding/jordanandmary" target="_blank">help us get there, feed us while we’re there, or send us on some sightseeing adventures</a>!</p>
<p><a href="http://www.honeyfund.com/wedding/jordanandmary" class="btn btn-dark" target="_blank">Contribute to our honeymoon fund</a></p><br />
<p>If you’d prefer to get us a physical gift, we are also registered at <a href="http://www1.macys.com/registry/wedding/guest/?registryId=2140218" target="_blank">Macy’s</a> and <a href="http://www.amazon.com/registry/wedding/2GQG70G8C5HQU" target="_blank">Amazon</a>.</p>
<p>Thank you! We hope to see you May 25!</p>
</div>
<!--/.container-->
<div class="container bubble" id="postscript">
<p>This website was created by <a href="https://twitter.com/jbkly" target="_blank">Jordan Buckley</a></p>
</div>
</div>
<!--/#registry-->
<!--______________________ JavaScript _______________________-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
// navigation click actions
$('.scroll-link').on('click', function(event){
event.preventDefault();
var sectionID = $(this).attr("data-id");
scrollToID('#' + sectionID, 750);
});
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
// mobile nav toggle
$('#nav-toggle').on('click', function (event) {
event.preventDefault();
$('#main-nav').toggleClass("open");
});
});
// scroll function
function scrollToID(id, speed){
var offSet = 50;
var targetOffset = $(id).offset().top - offSet;
var mainNav = $('#main-nav');
$('html,body').animate({scrollTop:targetOffset}, speed);
if (mainNav.hasClass("open")) {
mainNav.css("height", "1px").removeClass("in").addClass("collapse");
mainNav.removeClass("open");
}
}
if (typeof console === "undefined") {
console = {
log: function() { }
};
}
</script>
<!--ResponsiveSlides.js code-->
<script src="js/responsiveslides.min.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 1100, // Integer: Speed of the transition, in milliseconds
timeout: 5000, // Integer: Time between slide transitions, in milliseconds
pager: true, // Boolean: Show pager, true or false
nav: true, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: false, // Boolean: Pause on hover, true or false
pauseControls: false, // Boolean: Pause when hovering controls, true or false
prevText: "", // String: Text for the "previous" button
nextText: "", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "", // Selector: Declare custom pager navigation
namespace: "centered-btns", // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});
});
</script>
</body>
</html>