updated content to match, added ics file

This commit is contained in:
Vicky Steeves 2019-08-02 13:38:49 -04:00 committed by Remi Rampin
parent cddec9dee4
commit 6db64deacc
4 changed files with 284 additions and 274 deletions

View File

@ -1,11 +1,7 @@
@import url('../webfonts/OpenSans-Regular.ttf');
@import url('../webfonts/Montserrat-Regular.ttf');
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-weight: 300;
color: #888;
color: #262626;
line-height: 30px;
text-align: center;
}
@ -16,7 +12,6 @@ a, a:hover, a:focus { color: #9b59b6; text-decoration: none; transition: all .3s
h1, h2 {
margin-top: 10px;
font-family: 'Montserrat', sans-serif;
font-size: 38px;
font-weight: 300;
color: #555;
@ -24,7 +19,6 @@ h1, h2 {
}
h3 {
font-family: 'Montserrat', sans-serif;
font-size: 22px;
font-weight: 300;
color: #555;
@ -264,7 +258,7 @@ img { max-width: 100%; }
.details-box-date {
padding-bottom: 10px;
font-size: 14px;
color: #aaa;
color: #444;
text-transform: uppercase;
}
@ -320,23 +314,9 @@ footer {
padding: 40px 0 0 0;
background: #444;
color: #aaa;
text-align: left;
text-align: center;
}
.footer-left a { color: #ddd; border-bottom: 1px dashed #ddd; }
.footer-left a:hover, .footer-left a:focus { color: #ddd; border: 0; }
.footer-right {
text-align: right;
}
.footer-right a {
margin: 0 6px;
font-size: 32px;
color: #aaa;
}
.footer-right a:hover, .footer-right a:focus { color: #eee; }
.footer-bottom {
padding-bottom: 25px;
text-align: center;

View File

@ -0,0 +1,57 @@
BEGIN:VCALENDAR
VERSION:2.0
PRODID:-//ical.marudot.com//iCal Event Maker
X-WR-CALNAME:Anna & Dan's Wedding Schedule
CALSCALE:GREGORIAN
BEGIN:VTIMEZONE
TZID:America/New_York
TZURL:http://tzurl.org/zoneinfo-outlook/America/New_York
X-LIC-LOCATION:America/New_York
BEGIN:DAYLIGHT
TZOFFSETFROM:-0500
TZOFFSETTO:-0400
TZNAME:EDT
DTSTART:19700308T020000
RRULE:FREQ=YEARLY;BYMONTH=3;BYDAY=2SU
END:DAYLIGHT
BEGIN:STANDARD
TZOFFSETFROM:-0400
TZOFFSETTO:-0500
TZNAME:EST
DTSTART:19701101T020000
RRULE:FREQ=YEARLY;BYMONTH=11;BYDAY=1SU
END:STANDARD
END:VTIMEZONE
BEGIN:VEVENT
DTSTAMP:20190802T170839Z
UID:20190802T170839Z-1253731853@marudot.com
DTSTART;TZID=America/New_York:20191020T140000
DTEND;TZID=America/New_York:20191020T150000
SUMMARY:Wedding Ceremony
URL:https%3A%2F%2Fgoo.gl%2Fmaps%2FX2FURRZ8fFPYRHjk7
LOCATION:St. Ann's Church\, 140 Lynn St\, Peabody\, MA 01960
TRANSP:OPAQUE
X-MICROSOFT-CDO-BUSYSTATUS:BUSY
BEGIN:VALARM
ACTION:DISPLAY
DESCRIPTION:Wedding Ceremony
TRIGGER:-P1D
END:VALARM
END:VEVENT
BEGIN:VEVENT
DTSTAMP:20190802T170839Z
UID:20190802T170839Z-1615865158@marudot.com
DTSTART;TZID=America/New_York:20191020T160000
DTEND;TZID=America/New_York:20191020T200000
SUMMARY:Reception
URL:https%3A%2F%2Fgoo.gl%2Fmaps%2FQw1Rib1jKoiQwvL36
LOCATION: Hellenic Community Center\, 117 County Rd\, Ipswich\, MA 01938
TRANSP:OPAQUE
X-MICROSOFT-CDO-BUSYSTATUS:BUSY
BEGIN:VALARM
ACTION:DISPLAY
DESCRIPTION:Reception
TRIGGER:-P1D
END:VALARM
END:VEVENT
END:VCALENDAR

View File

@ -1,218 +1,195 @@
<!doctype html>
<html lang="en">
<head>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<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">
<!-- 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>
</head>
<body>
<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 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">
<div class="container">
<!-- Top content -->
<div class="home">
<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>
<a class="btn btn-primary btn-link-2 scroll-link" href="#rsvp">RSVP</a>
</div>
</div>
</div>
<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">
<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">
<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">
<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>
<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>
<!-- 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>
</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>
<!-- 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>
<!-- 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>
</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>
</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>
</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>
<!-- 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>
<!-- 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">
<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>
<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>
</body>
</html>

View File

@ -1,63 +1,59 @@
<!doctype html>
<html lang="en">
<head>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 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>
<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">
<!-- 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>
</head>
<body>
<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">
</div>
</div>
</nav>
<!-- Top content -->
<div class="home">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2 text">
<h1 class="wow fadeInLeftBig">Thank you for RSVP-ing!</h1>
<div class="top-big-link wow fadeInUp">
</div>
</div>
</div>
</div>
<!-- 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">
</div>
</div>
</nav>
<!-- 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>
<!-- Top content -->
<div class="home">
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2 text">
<h1 class="wow fadeInLeftBig">Thank you for RSVP-ing!</h1>
</div>
</div>
</div>
</div>
</body>
<!-- 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>