anna-dan-wedding-site/index.html

218 lines
11 KiB
HTML
Raw Normal View History

2019-08-01 21:15:20 +00:00
<!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>
2019-08-01 21:15:20 +00:00
</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">
2019-08-01 21:15:20 +00:00
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2 text">
<h1 class="wow fadeInLeftBig">Anna & Dan are getting married!</h1>
<br/><br/><br/>
<div class="top-big-link wow fadeInUp">
<a class="btn btn-primary btn-link-1 scroll-link" href="#details">Get all the details</a>
2019-08-01 21:15:20 +00:00
<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">
<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 Disneyland 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 'their engaged!!!!!' and singing "Tale as Old as Time".</p>
<p>...and shortly after, Anna reciprocated and proposed to Dan <i class="fas fa-heart"></i></p>
2019-08-01 21:15:20 +00:00
</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">
<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>
2019-08-01 21:15:20 +00:00
</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>MORE INFO COMING SOON.</p>
2019-08-01 21:15:20 +00:00
</div>
<div class="col-md-4 details-box wow fadeInDown">
<h3><a href="#">Where</a> <i class="fas fa-angle-right"></i></h3>
<div class="details-box-date"><i class="far fa-calendar"></i> February 2018</div>
<p>MORE INFO COMING SOON.</p>
2019-08-01 21:15:20 +00:00
</div>
<div class="col-md-4 details-box wow fadeInUp">
<h3><a href="#">Registry</a> <i class="fas fa-angle-right"></i></h3>
<p>We are asking that folks contribute to our honeymoon trip to Disneyland! You can find our registry for that trip 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">
<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">
2019-08-01 21:15:20 +00:00
<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" id="number-guests">
<label for="number-of-guests" class="col-4 col-form-label">How many guests are attending?</label>
<div class="col-8">
<select id="number-of-guests" name="number-of-guests" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</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>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-md-5 footer-left">
<p>&copy; Bootstrap 4 One Page Website Tutorial. Download it for free on <a href="http://azmind.com">AZMIND</a>.</p>
</div>
<div class="col-md-6 offset-md-1 footer-right">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-dribbble"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-pinterest"></i></a>
</div>
</div>
2019-08-01 21:15:20 +00:00
<div class="row">
<div class="col footer-bottom">
<a class="scroll-link" href="#top-content"><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>
2019-08-01 21:15:20 +00:00
<script>
$(':radio[name=attending]').change(function(){
$('#number-guests').toggle();
});
</script>
</body>
</html>