210 lines
9.5 KiB
HTML
210 lines
9.5 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="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,600">
|
||
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:300">
|
||
|
|
<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="#top-content">Top</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="top-content">
|
||
|
|
<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>
|
||
|
|
<div class="description wow fadeInLeftBig">
|
||
|
|
<p>A real Viking wedding!</p>
|
||
|
|
</div>
|
||
|
|
<div class="top-big-link wow fadeInUp">
|
||
|
|
<a class="btn btn-primary btn-link-1" 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">
|
||
|
|
<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">They had a cute date</p>
|
||
|
|
<p>And now they are getting married!</p>
|
||
|
|
<p>And we are all so excited!</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">
|
||
|
|
<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>Squeeeee they are getting married!</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 service will be at XX:YYam, followed by the reception and luncheon at XX:YYpm.</p>
|
||
|
|
</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>We will be married in </p>
|
||
|
|
</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>
|
||
|
|
<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 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>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(':radio[name=attending]').change(function(){
|
||
|
|
$('#number-guests').toggle();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|