Skip to content

Instantly share code, notes, and snippets.

@kevincolten

kevincolten/index.html

Last active November 1, 2015 18:05
Show Gist options
  • Save kevincolten/c29c26de813a19426f69 to your computer and use it in GitHub Desktop.
Save kevincolten/c29c26de813a19426f69 to your computer and use it in GitHub Desktop.
Download ZIP
Laura + Kevin Wedding Site
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Laura + Kevin</title>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
<style>
.first.card {
min-height: 37rem;
}
#owl-demo .item {
display: flex;
justify-content: center;
align-items: center;
}
#owl-demo .item img{
display: block;
}
body {
font-family: "Josefin Slab";
font-size: 18px;
}
.navy-blue {
background-color: rgb(0, 0, 102);
}
.navy-blue-text{
color: rgb(0, 0, 102) !important;
}
</style>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar-fixed">
<nav class="navy-blue">
<div class="nav-wrapper">
<a href="#!" class="brand-logo center">Laura <span class="fa fa-heart-o"></span> Kevin</a>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col s12">
<div class="card">
<div class="card-content navy-blue-text">
<span class="card-title"><i class="fa navy-blue-text fa-calendar"></i> Date</span>
<center>
<h1>Friday</h1>
<h3>February 12, 2016</h3>
<h5>6:00pm</h5>
</center>
</div>
<div class="card-action">
<a href="./wedding.ics" class="navy-blue-text">iCal</a>
<a class="navy-blue-text" href="https://www.google.com/calendar/render?action=TEMPLATE&tmeid=NGgyZ2JsOXIxczJraGdpMHFlb2t2bTFxaTQga2V2aW5jb2x0ZW5AbQ&[email protected]&sf=true&output=xml#eventpage_6">Google</a>
<a class="navy-blue-text" href="./wedding.ics">Outlook</a>
</div>
</div>
<div class="card">
<form action="https://docs.google.com/forms/d/10u8z4065jSwmgJOx94Vy2AlaK-rbThxB5zZbLhL2wBs/formResponse" method="POST" target="_blank" onsubmit="">
<div class="card-content">
<span class="card-title navy-blue-text"><i class="fa navy-blue-text fa-envelope"></i> RSVP</span>
<div class="row">
<div class="input-field col s12">
<i class="prefix fa navy-blue-text fa-users"></i>
<textarea class="materialize-textarea" name="entry.2046129288" id="entry_2046129288"></textarea>
<label class="navy-blue-text" for="entry_2046129288">Attendees:</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input type="radio" class="with-gap" name="entry.2028019353" value="Yes" id="group_2028019353_1">
<label class="navy-blue-text" for="group_2028019353_1">Accept With Pleasure!</label>
</div>
<div class="input-field col s6">
<input type="radio" class="with-gap" name="entry.2028019353" value="No" id="group_2028019353_2">
<label for="group_2028019353_2" class="navy-blue-text">Decline with Regret</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="prefix fa navy-blue-text fa-pencil"></i>
<textarea class="materialize-textarea" name="entry.1362937693"></textarea>
<label for="entry_1362937693" class="navy-blue-text">Note:</label>
</div>
</div>
<input type="hidden" name="draftResponse" value="[,,&quot;7298221383045234970&quot;]">
<input type="hidden" name="pageHistory" value="0">
<input type="hidden" name="fvv" value="0">
<input type="hidden" name="fbzx" value="7298221383045234970">
</div>
<div class="card-action">
<button type="submit" name="submit" class="btn waves-effect waves-light navy-blue">Submit</button>
</div>
</form>
</div>
<div class="card">
<div class="card-content navy-blue-text">
<span class="card-title"><i class="fa navy-blue-text fa-gift"></i></span>
<p>The presence of our dearest friends and family is plenty while we celebrate the beginning of our lives together. But for the more traditional guests, we are registered at Amazon.com</p>
</div>
<div class="card-action">
<a href="#" class="navy-blue-text ">Amazon Gift Registry</a>
</div>
</div>
<div class="card">
<div class="card-image">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3446.7238180780955!2d-97.76450588425404!3d30.244951416026286!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8644b4e741315c75%3A0xc3df9caf6ccc2e78!2sGreen+Pastures+Restaurant!5e0!3m2!1sen!2sus!4v1445300272611" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<div class="card-content">
<h3>Green Pastures</h3>
<h5>811 W Live Oak<br>Austin, TX 78704 </h5>
</div>
<div class="card-action">
<a href="http://greenpasturesrestaurant.com/page/o965/Green_Pastures.html" class="navy-blue-text">Website</a>
</div>
</div>
<div class="card">
<div class="card-image">
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><img src="lk-01.jpg"></div>
<div class="item"><img src="lk-02.jpg"></div>
<div class="item"><img src="lk-03.jpg"></div>
<div class="item"><img src="lk-04.jpg"></div>
<div class="item"><img src="lk-05.jpg"></div>
<div class="item"><img src="lk-06.jpg"></div>
<div class="item"><img src="lk-07.jpg"></div>
<div class="item"><img src="lk-08.jpg"></div>
<div class="item"><img src="lk-09.jpg"></div>
<div class="item"><img src="lk-10.jpg"></div>
<div class="item"><img src="lk-11.jpg"></div>
<div class="item"><img src="lk-12.jpg"></div>
<div class="item"><img src="lk-13.jpg"></div>
<div class="item"><img src="lk-14.jpg"></div>
<div class="item"><img src="lk-15.jpg"></div>
<div class="item"><img src="lk-16.jpg"></div>
<div class="item"><img src="lk-17.jpg"></div>
<div class="item"><img src="lk-18.jpg"></div>
</div>
</div>
<div class="card-content">
<p>I am a very simple card. I am good at containing small bits of information.
I am convenient because I require little markup to use effectively.</p>
</div>
</div>
</div>
</div>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/js/materialize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>
<script>
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : false, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem: true,
autoHeight : true
});
FastClick.attach(document.body);
});
</script>
</body>
</html>
Raw
wedding.ics
View raw

(Sorry about that, but we can’t show files that are this big right now.)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment