Skip to content

Instantly share code, notes, and snippets.

@vsakaria
Created July 30, 2014 09:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save vsakaria/175632d607e97f5964fe to your computer and use it in GitHub Desktop.
Save vsakaria/175632d607e97f5964fe to your computer and use it in GitHub Desktop.
A Pen by Vishal Sakaria.
<div id="email_confirmation">
<div class='title'><p>resend email conformation</p></div>
<div class='description'>
<p>Pop in your email address and we’ll resend your details.<br>
Make sure you use the same email address as when you booked.
</p>
</div>
<div>
<form class="form">
<input type='text' name='email' id='email_address'>
<p>And provide us with on of the following details:</p>
<div>
<input id="booking_radio" type="radio" name="details" value="booking_number">Booking number
</div>
<input type='text' name='booking_number' id='booking_number'>
<div>
<input type="radio" name="details" value="departure_date" id="departure_radio">Departure date or event date
</div>
<input id="button" type="submit" value="Submit">
</div>
</div>
$('#booking_radio').on("click", function() {
$('#booking_number').slideDown();
});
$('#departure_radio').on("click", function() {
$('#booking_number').slideUp();
});
body {
font-family: arial;
}
#email_confirmation .title {
font-size: 18px;
margin-bottom: 28px;
}
#email_confirmation .description, #email_confirmation .form p {
font-size: 14px;
font-weight: bold;
}
#email_confirmation #booking_number{
display:none;
}
#email_confirmation #email_address, #email_confirmation #booking_number {
margin: 22px 15px;
width: 200px;
height: 20px;
}
#email_confirmation #booking_number {
margin: 4px 0px 24px 15px;
}
#email_confirmation .form p {
margin-bottom: 28px;
}
#email_confirmation #booking_radio, #email_confirmation #departure_radio {
margin-bottom: 20px;
margin-right: 15px;
}
#email_confirmation #button {
background-color: #E5E5E5;
border: 0;
width: 112px;
height: 40px;
font-size: 16px;
font-weight: bold;
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment