anna-dan-wedding-site/index.html

195 lines
8.7 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Anna & Dan</title>
<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/all.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media-queries.css">
</head>
<body>
<!-- Top menu -->
<nav class="navbar navbar-dark fixed-top navbar-expand-md navbar-no-bg">
<div class="container">
<a class="navbar-brand" href="index.html">Anna & Dan</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link scroll-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#our-story">Our Story</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#details">Wedding Details</a>
</li>
<li class="nav-item">
<a class="nav-link scroll-link" href="#rsvp">RSVP</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Top content -->
<div class="home" id="home">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2 text">
<h1 class="wow fadeInLeftBig pb-5">Anna & Dan are getting married!</h1>
<div class="top-big-link wow fadeInUp pt-5">
<a class="btn btn-primary btn-link-1 scroll-link" href="#details">Get all the details</a>
<a class="btn btn-primary btn-link-2 scroll-link" href="#rsvp">RSVP</a>
</div>
</div>
</div>
</div>
</div>
<!-- About us -->
<div class="our-story-container section-container section-container-gray-bg" id="our-story">
<div class="container">
<div class="row">
<div class="col-12 col-lg-7 our-story-box wow fadeInLeft">
<div class="our-story-box-text">
<h3>About Us</h3>
<p class="medium-paragraph">Despite having known each other throughout their time at SSU (go Vikings!), Anna and Dan had their first official date on December 11 2014. They met for tea, and at the parlor Dan found Anna vivaciously correcting typos in an already published book. The rest is history!</p>
<p>The lovely couple were promised two years later, on January 15th 2016. This is a tradition in Anna's family, and signifies the couples' committment to each other and to their future together.</p>
<p>They took the next step on October 20, 2017 during a beautiful vacation at Disney World in Florida. During a night at Belle's Castle for a Halloween celebration, Dan (dressed like Prince Adam) got down on one knee to propose to Anna (dressed like Belle!). The rest of the night was filled with 'they're engaged!!!!!' and singing "Tale as Old as Time".</p>
<p>...and shortly after, still at Disney, Anna reciprocated and proposed to Dan <i class="fas fa-heart"></i></p>
</div>
</div>
<div class="col-12 col-lg-5 our-story-box wow fadeInUp">
<div class="our-story-box-img">
<img src="img/about.jpg" alt="Anna and Dan sitting and looking into each other's eyes" data-at2x="img/about.jpg">
</div>
</div>
</div>
</div>
</div>
<!-- details -->
<div class="details-container section-container" id="details">
<div class="container">
<div class="row">
<div class="col details section-description wow fadeIn">
<h2>Our wedding details</h2>
<div class="divider-1 wow fadeInUp"><span></span></div>
<p>We can't wait to celebrate our future life together with all our friends and family. All details for the ceremony and registry are below.</p>
</div>
</div>
<div class="row">
<div class="col-md-4 details-box wow fadeInUp">
<h3>When <i class="fas fa-angle-right"></i></h3>
<div class="details-box-date"><i class="far fa-calendar"></i> October 20, 2019</div>
<p>The ceremony will take place on October 20, 2019. It begin at 2pm with the reception following at 4pm.</p>
<p>Add the events to your calendar with <a href="files/Anna__Dans_Wedding_Schedule.ics">this ICS file</a>, which can be imported into any kind of calendar.</p>
</div>
<div class="col-md-4 details-box wow fadeInDown">
<h3>Where <i class="fas fa-angle-right"></i></h3>
<div class="details-box-date"><i class="fas fa-map-signs"></i> beautiful North Shore of Massachusetts</div>
<p>The wedding ceremony will take place at St. Ann's Church in Peabody, MA: <a href="https://goo.gl/maps/Rb2oaYKVbEb5qvtQA">140 Lynn St, Peabody, MA</a></p>
<p>The reception will follow, at the Hellenic Community Center in Ipswich: <a href="https://www.google.com/maps/place/Hellenic+Community+Center/@42.6696378,-70.8415109,17z/data=!3m1!4b1!4m5!3m4!1s0x89e318ec7b64f835:0xa1cc8d6807bfd7c6!8m2!3d42.6696339!4d-70.8393222">117 County Rd, Ipswich, MA</a> </p>
</div>
<div class="col-md-4 details-box wow fadeInUp">
<h3>Registry <i class="fas fa-angle-right"></i></h3>
<div class="details-box-date"><i class="fas fa-gift"></i> thank you!</div>
<p>We are asking that folks contribute to our honeymoon trip to Disney World! Our trip registry is here: <a href="https://disney.honeymoonwishes.com/Honeymoon-Registry-388035-Walt-Disney-World-Resort-Anna-Andrews-Dan-Allen.html">https://disney.honeymoonwishes.com/Honeymoon-Registry-388035-Walt-Disney-World-Resort-Anna-Andrews-Dan-Allen.html</a></p>
</div>
</div>
</div>
</div>
<!-- rsvp -->
<div class="rsvp-container section-container" id="rsvp">
<div class="container">
<div class="row">
<div class="col rsvp section-description wow fadeIn">
<h2>RSVP</h2>
<p>Kindly let us know if you will be able to attend our wedding!</p>
<form action="https://script.google.com/macros/s/AKfycbzAPmI049Uh-lBkJA-VWs_5BGgv3TxUlsdwI-z8eHMrW0Kwr2Y/exec" method="get">
<div class="form-group row">
<label for="name" class="col-4 col-form-label">Name</label>
<div class="col-8">
<input id="name" name="name" placeholder="Name" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<label for="email" class="col-4 col-form-label">Email</label>
<div class="col-8">
<input id="email" name="email" placeholder="Email" type="text" class="form-control" required="required">
</div>
</div>
<div class="form-group row">
<label class="col-4">Are you attending?</label>
<div class="col-8" id="attending-choice">
<div class="form-check form-check-inline">
<input name="attending" id="attending_0" type="radio" class="form-check-input" value="yes" required="required" checked>
<label for="attending_0" class="form-check-label">Yes</label>
</div>
<div class="form-check form-check-inline">
<input name="attending" id="attending_1" type="radio" class="form-check-input" value="no" required="required">
<label for="attending_1" class="form-check-label">No</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-4 col-8">
<button name="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<p>We are so excited to share our big day with all of you! If you have any problems using this website, please contact Vicky Steeves at <a href="mailto:victoriaisteeves@gmail.com">victoriaisteeves@gmail.com</a></p>
</div>
<div class="row">
<div class="col footer-bottom">
<a class="scroll-link" href="#home"><i class="fas fa-chevron-up"></i></a>
</div>
</div>
</div>
</footer>
<!-- Javascript -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/jquery-migrate-3.0.0.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/retina-1.1.0.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>