pyropm.github.io/index.html at main · PyroPM/pyropm.github.io · GitHub

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sarah & Sean</title>
  </head>
  <body>
    <div class="container">
      <div class="flex header">
        <div class="left corner">
          <div class="img"></div>
        </div>
        <div class="middle">
          <img src="./photos/header.png"/>
          <h1>Sarah Hodges & Sean Mapes</h1>
        </div>
        <div class="right corner">
          <div class="img"></div>
        </div>
      </div>

      <nav>
        <a href="#about">About</a>
        <a href="#travel">Travel & Lodging</a>
        <a href="#registry">Registry</a>
        <a href="#faqs">FAQs</a>
      </nav>

      <div class="flex">
        <div class="left border">
          <div class="img"></div>
        </div>
        <div class="right border">
          <div class="img"></div>
        </div>

        <div class="middle">
          <h1 id="about">The <span class="cursive">Wedding</span> Day</h1>
          <h3>Saturday, November 9th, 2024</h3>
          <h3><span class="cursive"><a href="https://weeksfarmnc.com" target="_blank">Weeks Farm</a></span>, North Carolina</h3>
          <h3><span class="cursive">Reception to follow</span></h3>

          <img height="48px" src="./photos/spacer.png"/>

          <h1><span class="cursive">Special Note</span></h1>
          <p>We realize that there is a lot of controversy regarding the upcoming presidential election and that our wedding will take place only a few days after it's been decided. Please keep talk of the election or politics in general to a minimum as fellow guests may or may not share your views.</p>
          <p><strong>Once the knot is tied, we are all family!</strong></p>

          <img height="48px" src="./photos/spacer.png"/>

          <h1 id="travel">Travel & Lodging</h1>
          <p>The wedding is between Morehead City and Jacksonville in the Crystal Coast of North Carolina. To get here, you can either drive or fly to New Bern, Jacksonville, Wilmington, Greenville, or Raleigh, and drive to the area.</p>

          <h2>Airports</h2>
          <p>New Bern has a regional airport (<a href="https://www.flyewn.com/" target="_blank">Coastal Carolina Regional Airport, <strong>EWN</strong></a>) which is about 45 minutes away from Morehead City. Additionally, Jacksonville has a regional airport (<a href="https://flyoaj.com/" target="_blank">Albert J. Ellis Airport, <strong>OAJ</strong></a>) which is about 1-1.5 hours away.</p>
	        <h3>Airports in the area:</h3>
          <p><a href="https://flyewn.com/" target="_blank">Coastal Carolina Regional Airport, <strong>EWN</strong></a>: About 45 minutes away</p>
          <p><a href="https://flyoaj.com/" target="_blank">Albert J. Ellis Airport, <strong>OAJ</strong></a>: About 60 - 90 minutes away</p>
	        <p><a href="https://flyilm.com/" target="_blank">Wilmington International Airport, <strong>ILM</strong></a>: About 2 hours away</p>
	        <p><a href="https://rdu.com/" target="_blank">Raleigh-Durham International Airport, <strong>RDU</strong></a>: About 2.5 - 3 hours away</p>
          <p><a href="https://flypgv.com/" target="_blank">Pitt-Greenville Airport, <strong>PGV</strong></a>: About 1.5 - 2 hours away</p>

          <h2>Hotels</h2>
          <p>We recommend staying in or around Morehead City. There is a <a href="https://www.hilton.com/en/hotels/mornchx-hampton-morehead-city/">Hampton Inn</a> and a <a href="https://www.ihg.com/holidayinnexpress/hotels/us/en/morehead-city/mrhnc/hoteldetail">Holiday Inn Express & Suites</a> located in Morehead City. Both of these are close to the venue, as well as Atlantic Beach and Fort Macon State Park. There is also a <a href="https://www.bestwestern.com/en_US/book/hotels-in-swansboro/best-western-plus-silver-creek-inn/propertyCode.34140.html">Best Western</a> down the road in Cedar Point, as well as plenty of <a href="https://airbnb.com/">Airbnbs</a> in the surronding area if you'd like.</p>

          <img height="48px" src="./photos/spacer.png"/>

          <h1 id="registry">Registry</h1>
          <p>Our <a href="https://www.amazon.com/wedding/share/sarahhodgesandseanmapes" target="_blank">Amazon Registry</a> has some items that we would like to have. While we appreciate the registry being used, we also don't want you to be limited by it or obligated to use it.</p>

          <img height="48px" src="./photos/spacer.png"/>

          <h1 id="faqs">FAQs</h1>
          <h3>What is the attire?</h3>
          <p>Dress code is business casual, but please leave your jeans in the car! Our primary colors are navy blue and celadon. Please avoid navy suits and celadon if possible, as to not be confused with the wedding party. If it is unreasonable to get a different color such as in the case of a navy suit, that will be alright.</p>
	  <p>We plan on having a fire outside after dinner, so if you would like to avoid your clothes smelling like smoke, bringing a more casual change of clothes is recommended!</p>
          <h3>What about gifts?</h3>
          <p>We are registed at <a href="#registry">Amazon Registry</a> with options in various price ranges. We have been very blessed with enough love, laughter, and furniture to fill a home. Our next goal is to move into a home where we can raise a family... so if you would like to contribute to our house fund that would be greatly appreciated! If you'd like to give us a card or help us in our journey for our first home, there will be a box at the wedding for them.</p>
          <p>We do understand that everyone has varying financial situations. Your presence on our special day and your prayers are the greatest gift we could ask for!</p>
          <h3>What is around the area to do?</h3>
          <p><a href="https://www.ncparks.gov/state-parks/fort-macon-state-park">Fort Macon State Park</a>: Located about 30 minutes from the venue (or about 15 minutes from Morehead City) is Fort Macon State Park in Atlantic Beach. The fort itself was built post-war of 1812 in order to protect the ports of Beaufort and Morehead City. Fort Macon had a key role in the Civil War, originally commanded by the Confederates before being taken by the Union in 1862. Following the war, the fort was occupied twice more during the Spanish-American War and World War II. Additionally, the Beaufort Inlet which borders Fort Macon and the harbor around it was targeted by many pirates, including Blackbeard himself, before eventually shipwrecking on Ocracoke Island about 4 hours north. Aside from the history, Fort Macon has long stretches of beach (Sean proposed here!), allowing for (likely frigid) swimming, boating, fishing, and a nice 3.3 mile trail going through the forest and the dunes. Be sure to check out the fort on an individal or guided tour and catch one of the historical reenactments!</p>
          <p><a href="https://www.cherrypoint.marines.mil/">MCAS Cherry Point</a> and <a href="https://www.lejeune.marines.mil/">Camp Lejeune</a>: If you are more of a modern history fan, there are 2 Marine Corps bases within an hour of the venue. Camp Lejeune is in Jacksonville on NC-24, and MCAS Cherry Point is in Havelock on US-17. While you will not be allowed on either base, you can visit the <a href="https://havelockevents.com/?_ga-ft=Zrk18A.AA.AA.AA.AA.DGBolkQlTRiOAw4bvHysDQ..0">Havelock Vistor Center</a> near MCAS Cherry Point which doubles as an aviation history museum, featuring retired military aircraft.</p>
          <p><a href="https://visitnewbern.com/new-bern-downtown/">Historic Downtown New Bern</a>: Did you know that Raleigh wasn't always the capital of North Carolina? Located about 45 minutes from both the venue and Morehead City is the original state capital, New Bern. Historic Downtown New Bern is one of our frequent destinations for us, as it's location on the river with rich history, family-friendly park, farmer's market every Saturday morning, and very good restaurants (<a href="http://www.morganstavernnewbern.com/">Morgan's Tavern</a> is our favorite!) Also located in downtown is <a href="https://visitnewbern.com/tryon-palace/">Tryon Palace</a>, where the British once ruled before the Americans took over and founded the state of North Carolina. The drugstore where the famous Pepsi was first created is still standing in New Bern as well. If you do visit, keep your eyes peeled for all of the bear statues throughout the city! In Switzerland, "Bern" means bear, leading to New Bern's nickname Bear Town.</p>

          <img height="48px" src="./photos/spacer.png"/>

          <h1 id="countdown" class="cursive"></h1>
      </div>
    </div>

    <div class="flex footer">
      <div class="left bottom_corner">
        <div class="img"></div>
      </div>
      <div class="middle">
        <h2><span class="gold">S ✝ S</span></h2>
        <p class="smaller">Though one may be overpowered by another, two can withstand him. And a threefold cord is not quickly broken. <span class="reference">- Ecclesiastes 4:12 (NKJV)</span></p>
      </div>
      <div class="right bottom_corner">
        <div class="img"></div>
      </div>
    </div>

  </body>
  <style>
    .home-desc {
      display: none;
    }

    :root {
      --navy:           rgb(0, 0, 54);
      --seafoam:        #B8D1AE;
      --gold:           #DDAE48;
      --orange:         #DD8848;

      --header-size:    250px;
      --button-size:    60px;
      --footer-size:    200px;
    }

    @font-face { font-family: Lora; src: url(Lora-Regular.ttf); }
    @font-face { font-family: AlexBrush; src: url(AlexBrush-Regular.ttf); }

    html, body {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      z-index: -1;

      font-family: 'Lora', sans-serif;

      color: var(--seafoam);
      background-color: var(--navy);
    }

    .cursive {
      font-family: 'AlexBrush';
    }
    .gold {
      color: var(--gold);
    }

    h1 > .cursive {
      font-size: 48px;
    }
    h2 > .cursive {
      font-size: 28px;
    }
    h3 > .cursive {
      font-size: 24px;
    }
    a {
      color: var(--gold);
      transition: all 0.125s ease-in-out;
    }
    a:hover {
      color: var(--orange);
    }

    .header {
      width: 100%;
    }
    .header > h1, h2, h3, p, ul {
      width: 100%;
      text-align: center;
    }
    .header > .middle > img {
      display: block;
      margin: auto;
      height: 300px;
    }

    nav {
      display: flex;
      justify-content: center;
      width: 100%;
    }
    nav a {
      order: 1;
      margin: 0;
      padding: 8px 0px;
      width: 100%;

      text-align: center;
      text-decoration: none;
      text-transform: uppercase;
      font-size: larger;
      font-weight: bold;

      color: var(--navy);
      background-color: var(--seafoam);

      transition: all 0.125s ease-in-out;
    }
    nav a:hover {
      color: var(--navy);
      background-color: var(--orange);
    }

    .flex {
      display: flex;
      justify-content: center;
    }

    .left {
      order: 1;
      min-width: 20%;
      max-width: 200px;
      overflow: hidden;
    }

    .middle {
      order: 2;
      width: 100%;
    }
    .middle > h1, h2, h3, p {
      width: 100%;
      text-align: center;
    }
    .middle > img {
      display: block;
      margin: auto;
    }

    .right {
      order: 3;
      min-width: 20%;
      max-width: 200px;
      overflow: hidden;
    }

    .corner {
      display: inline-block;
    }
    .corner > .img {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .left.corner {
      background-image: url("./photos/corner_left.png");
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .right.corner {
      background-image: url("./photos/corner_right.png");
      background-repeat: no-repeat;
      background-size: 100%;
    }

    .border {
      display: inline-block;
    }
    .border > .img {
      position: relative;
      width: 100%;
      height: 100%;
      z-index: -1;

      background-repeat: repeat;
      background-image: url("./photos/sparkles.png");
    }
    .left.border {
      background: linear-gradient(to left, var(--navy),       rgba(0, 0, 54, 0.0)),
                  linear-gradient(to top, var(--navy), 150px, rgba(0, 0, 54, 0.0));
    }
    .right.border {
      background: linear-gradient(to right, var(--navy),      rgba(0, 0, 54, 0.0)),
                  linear-gradient(to top, var(--navy), 150px, rgba(0, 0, 54, 0.0));
    }

    .footer {
      margin-top: -128px;
      width: 100%;
      min-height: 246px;
    }
    .footer > h1, h2, h3, p {
      width: 100%;
      text-align: center;
    }
    .footer > .left > .img, .footer > .right > .img {
      height: 246px;
    }
    .footer > .left, .footer > .middle, .footer > .right {
      align-self: flex-end;
    }

    .bottom_corner {
      display: inline-block;
      z-index: 3;
    }
    .left.bottom_corner {
      background-image: url("./photos/corner_bottom_left.png");
      background-repeat: no-repeat;
      background-size: 100%;
    }
    .right.bottom_corner {
      background-image: url("./photos/corner_bottom_right.png");
      background-repeat: no-repeat;
      background-size: 100%;
    }

    @media only screen and (max-width: 768px) {
      .header > .middle > img {
        height: 150px;
      }
      .header > .left, .header > .right {
        min-width: 20%;
      }

      nav {
        flex-direction: column;
      }

      .left, .right {
        min-width: 10%;
      }

      .footer > .left, .footer > .right {
        min-width: 20%;
      }
      .footer {
        min-height: 300px;
      }
      .footer > .left > .img, .footer > .right > .img {
        height: 149px;
      }
    }

  </style>
  <script>
    var countDownDate = new Date("Nov 9, 2024").getTime();
    var now = new Date().getTime();

    var distance = countDownDate - now;

    var days = Math.floor(distance / (1000 * 60 * 60 * 24));

    document.getElementById("countdown").innerHTML = days + " days to go!"

    if (distance < 0) {
      clearInterval(x);
      document.getElementById("countdown").innerHTML = "Today is the day!";
    }
  </script>
</html>