<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/chrisdothtml/pen/EaBOLq?limit=all&page=2&q=club" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='//fonts.googleapis.com/css?family=Open+Sans:400,600'>
<style class="cp-pen-styles">* {
margin: 0;
padding: 0;
color: inherit;
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
*:focus {
outline: none;
}
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #ecf0f1;
font-family: 'Open Sans', sans-serif;
overflow: hidden;
}
h1, h2, h3, h4, h5 {
font-weight: normal;
}
form {
display: block;
}
label,
input {
display: block;
}
.animate, .btn, .btn span, .overlay .overlay-content, .overlay .overlay-content .overlay-close, .overlay .overlay-content .signup-form input {
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
main {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.main-heading {
line-height: 100%;
font-weight: 600;
font-size: 28px;
text-transform: uppercase;
}
.btn {
display: block;
height: 50px;
line-height: 50px;
border: 0;
text-align: center;
cursor: pointer;
border-radius: 5px;
}
.btn span {
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
}
.btn span .fa {
margin-left: 8px;
font-size: 18px;
vertical-align: middle;
}
.btn:not(.btn-outline) {
background-color: #fff;
}
.btn:not(.btn-outline) span {
color: #666;
}
.btn:not(.btn-outline):hover {
background-color: #f7f7f7;
}
.btn.btn-outline {
background-color: transparent;
border: 1px solid #fff;
}
.btn.btn-outline span {
color: #fff;
}
.btn.btn-outline:hover {
background-color: #fff;
}
.btn.btn-outline:hover span {
color: #666;
}
.popup-trigger {
width: 175px;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
-webkit-box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.05);
box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.05);
}
.overlay {
width: 100%;
height: 100%;
overflow: auto;
float: left;
position: fixed;
top: 0;
left: 0;
z-index: 5;
opacity: 0;
-webkit-transform: translateY(200px);
transform: translateY(200px);
-webkit-transition: opacity 0.5s, z-index 0s 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, z-index 0s 0.5s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s, z-index 0s 0.5s;
transition: opacity 0.5s, transform 0.5s, z-index 0s 0.5s, -webkit-transform 0.5s;
}
.overlay .overlay-background {
background-color: rgba(44, 62, 80, 0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
.overlay .overlay-content {
width: 100%;
max-width: 530px;
margin: 100px auto 0;
padding: 0 15px;
color: #fff;
position: relative;
z-index: 10;
}
.overlay .overlay-content .overlay-close {
display: block;
font-size: 35px;
cursor: pointer;
position: absolute;
top: 0;
right: 15px;
}
.overlay .overlay-content .overlay-close:hover {
opacity: .8;
}
.overlay .overlay-content .blurb {
margin-top: 35px;
line-height: 100%;
font-weight: 600;
font-size: 18px;
}
.overlay .overlay-content .blurb-tagline {
display: block;
margin-top: 10px;
line-height: 100%;
font-size: 14px;
}
.overlay .overlay-content .signup-form {
margin-top: 35px;
}
.overlay .overlay-content .signup-form label {
line-height: 100%;
margin-bottom: 5px;
font-size: 14px;
}
.overlay .overlay-content .signup-form input {
background-color: transparent;
width: 100%;
height: 30px;
margin-bottom: 20px;
padding: 0 8px;
border: 1px solid rgba(254, 254, 254, 0.3);
border-radius: 5px;
}
.overlay .overlay-content .signup-form input:hover, .overlay .overlay-content .signup-form input:focus {
border-color: #fff;
}
.overlay .overlay-content .signup-form .submit-btn {
width: 150px;
}
.overlay.open {
z-index: 15;
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: opacity 0.5s, z-index 0s, -webkit-transform 0.5s;
transition: opacity 0.5s, z-index 0s, -webkit-transform 0.5s;
transition: opacity 0.5s, transform 0.5s, z-index 0s;
transition: opacity 0.5s, transform 0.5s, z-index 0s, -webkit-transform 0.5s;
}
.overlay.short .overlay-content {
margin: 30px auto;
}
@media (max-width: 600px) {
.overlay .overlay-content {
margin: 25px auto;
}
}
</style></head><body>
<main role="main">
<button class="popup-trigger btn" id="popup-trigger"><span>Signup Now<i class="fa fa-plus-square-o"></i></span></button>
</main>
<div class="overlay" id="overlay">
<div class="overlay-background" id="overlay-background"></div>
<div class="overlay-content" id="overlay-content">
<div class="fa fa-times fa-lg overlay-close" id="overlay-close"></div>
<h1 class="main-heading">Signup Now</h1>
<h3 class="blurb">Creating an account is free —</h3><span class="blurb-tagline">and won't take longer than a couple of seconds.</span>
<form class="signup-form" method="post" action="#" novalidate="novalidate">
<label for="signup-name">Full Name</label>
<input id="signup-name" type="text" name="name" autocomplete="off"/>
<label for="signup-email">Email Address</label>
<input id="signup-email" type="email" name="email" autocomplete="off"/>
<label for="signup-pw">Password</label>
<input id="signup-pw" type="password" name="pw" autocomplete="off"/>
<label for="signup-cpw">Confirm Password</label>
<input id="signup-cpw" type="password" name="cpw" autocomplete="off"/>
<button class="btn btn-outline submit-btn"><span>signup</span></button>
</form>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >(function() {
var calculateHeight;
calculateHeight = function() {
var $content, contentHeight, finalHeight, windowHeight;
$content = $('#overlay-content');
contentHeight = parseInt($content.height()) + parseInt($content.css('margin-top')) + parseInt($content.css('margin-bottom'));
windowHeight = $(window).height();
finalHeight = windowHeight > contentHeight ? windowHeight : contentHeight;
return finalHeight;
};
$(document).ready(function() {
$(window).resize(function() {
if ($(window).height() < 560 && $(window).width() > 600) {
$('#overlay').addClass('short');
} else {
$('#overlay').removeClass('short');
}
return $('#overlay-background').height(calculateHeight());
});
$(window).trigger('resize');
// open
$('#popup-trigger').click(function() {
return $('#overlay').addClass('open').find('.signup-form input:first').select();
});
// close
return $('#overlay-background,#overlay-close').click(function() {
return $('#overlay').removeClass('open');
});
});
}).call(this);
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiPGFub255bW91cz4iXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFBQSxNQUFBOztFQUFBLGVBQUEsR0FBa0IsUUFBQSxDQUFBLENBQUE7QUFFakIsUUFBQSxRQUFBLEVBQUEsYUFBQSxFQUFBLFdBQUEsRUFBQTtJQUFBLFFBQUEsR0FBVyxDQUFBLENBQUUsa0JBQUY7SUFDWCxhQUFBLEdBQWdCLFFBQUEsQ0FBUyxRQUFRLENBQUMsTUFBVCxDQUFBLENBQVQsQ0FBQSxHQUE4QixRQUFBLENBQVMsUUFBUSxDQUFDLEdBQVQsQ0FBYSxZQUFiLENBQVQsQ0FBOUIsR0FBcUUsUUFBQSxDQUFTLFFBQVEsQ0FBQyxHQUFULENBQWEsZUFBYixDQUFUO0lBQ3JGLFlBQUEsR0FBZSxDQUFBLENBQUUsTUFBRixDQUFTLENBQUMsTUFBVixDQUFBO0lBRWYsV0FBQSxHQUFpQixZQUFBLEdBQWUsYUFBbEIsR0FBcUMsWUFBckMsR0FBdUQ7QUFFckUsV0FBTztFQVJVOztFQVVsQixDQUFBLENBQUUsUUFBRixDQUFXLENBQUMsS0FBWixDQUFrQixRQUFBLENBQUEsQ0FBQTtJQUVqQixDQUFBLENBQUUsTUFBRixDQUFTLENBQUMsTUFBVixDQUFpQixRQUFBLENBQUEsQ0FBQTtNQUVoQixJQUFHLENBQUEsQ0FBRSxNQUFGLENBQVMsQ0FBQyxNQUFWLENBQUEsQ0FBQSxHQUFxQixHQUFyQixJQUE2QixDQUFBLENBQUUsTUFBRixDQUFTLENBQUMsS0FBVixDQUFBLENBQUEsR0FBb0IsR0FBcEQ7UUFDQyxDQUFBLENBQUUsVUFBRixDQUFhLENBQUMsUUFBZCxDQUF1QixPQUF2QixFQUREO09BQUEsTUFBQTtRQUdDLENBQUEsQ0FBRSxVQUFGLENBQWEsQ0FBQyxXQUFkLENBQTBCLE9BQTFCLEVBSEQ7O2FBS0EsQ0FBQSxDQUFFLHFCQUFGLENBQXdCLENBQUMsTUFBekIsQ0FBZ0MsZUFBQSxDQUFBLENBQWhDO0lBUGdCLENBQWpCO0lBU0EsQ0FBQSxDQUFFLE1BQUYsQ0FBUyxDQUFDLE9BQVYsQ0FBa0IsUUFBbEIsRUFUQTs7O0lBWUEsQ0FBQSxDQUFFLGdCQUFGLENBQW1CLENBQUMsS0FBcEIsQ0FBMEIsUUFBQSxDQUFBLENBQUE7YUFDekIsQ0FBQSxDQUFFLFVBQUYsQ0FDQyxDQUFDLFFBREYsQ0FDVyxNQURYLENBRUMsQ0FBQyxJQUZGLENBRU8sMEJBRlAsQ0FFa0MsQ0FBQyxNQUZuQyxDQUFBO0lBRHlCLENBQTFCLEVBWkE7OztXQWtCQSxDQUFBLENBQUUsb0NBQUYsQ0FBdUMsQ0FBQyxLQUF4QyxDQUE4QyxRQUFBLENBQUEsQ0FBQTthQUM3QyxDQUFBLENBQUUsVUFBRixDQUFhLENBQUMsV0FBZCxDQUEwQixNQUExQjtJQUQ2QyxDQUE5QztFQXBCaUIsQ0FBbEI7QUFWQSIsInNvdXJjZXNDb250ZW50IjpbImNhbGN1bGF0ZUhlaWdodCA9IC0+XG5cdFxuXHQkY29udGVudCA9ICQoJyNvdmVybGF5LWNvbnRlbnQnKVxuXHRjb250ZW50SGVpZ2h0ID0gcGFyc2VJbnQoJGNvbnRlbnQuaGVpZ2h0KCkpICsgcGFyc2VJbnQoJGNvbnRlbnQuY3NzKCdtYXJnaW4tdG9wJykpICsgcGFyc2VJbnQoJGNvbnRlbnQuY3NzKCdtYXJnaW4tYm90dG9tJykpXG5cdHdpbmRvd0hlaWdodCA9ICQod2luZG93KS5oZWlnaHQoKVxuXHRcblx0ZmluYWxIZWlnaHQgPSBpZiB3aW5kb3dIZWlnaHQgPiBjb250ZW50SGVpZ2h0IHRoZW4gd2luZG93SGVpZ2h0IGVsc2UgY29udGVudEhlaWdodFxuXHRcblx0cmV0dXJuIGZpbmFsSGVpZ2h0XG5cbiQoZG9jdW1lbnQpLnJlYWR5IC0+XG5cdFxuXHQkKHdpbmRvdykucmVzaXplIC0+XG5cdFx0XG5cdFx0aWYgJCh3aW5kb3cpLmhlaWdodCgpIDwgNTYwIGFuZCAkKHdpbmRvdykud2lkdGgoKSA+IDYwMFxuXHRcdFx0JCgnI292ZXJsYXknKS5hZGRDbGFzcyAnc2hvcnQnXG5cdFx0ZWxzZVxuXHRcdFx0JCgnI292ZXJsYXknKS5yZW1vdmVDbGFzcyAnc2hvcnQnXG5cdFx0XG5cdFx0JCgnI292ZXJsYXktYmFja2dyb3VuZCcpLmhlaWdodCBjYWxjdWxhdGVIZWlnaHQoKVxuXHRcblx0JCh3aW5kb3cpLnRyaWdnZXIgJ3Jlc2l6ZSdcblx0XG5cdCMgb3BlblxuXHQkKCcjcG9wdXAtdHJpZ2dlcicpLmNsaWNrIC0+XG5cdFx0JCgnI292ZXJsYXknKVxuXHRcdFx0LmFkZENsYXNzICdvcGVuJ1xuXHRcdFx0LmZpbmQoJy5zaWdudXAtZm9ybSBpbnB1dDpmaXJzdCcpLnNlbGVjdCgpXG5cdFxuXHQjIGNsb3NlXG5cdCQoJyNvdmVybGF5LWJhY2tncm91bmQsI292ZXJsYXktY2xvc2UnKS5jbGljayAtPlxuXHRcdCQoJyNvdmVybGF5JykucmVtb3ZlQ2xhc3MgJ29wZW4nIl19
//# sourceURL=coffeescript
//# sourceURL=pen.js
</script>
</body></html>
