Email Optin
A Pen by Adam Rasheed on CodePen.
A Pen by Adam Rasheed on CodePen.
<div class="optin-container"> | |
<div class="cta">Sign Up for my Newsletter</div> | |
<form class="form hidden"> | |
<input type="email" id="email" name="email" placeholder="johndoe@gmail.com" /> | |
<input type="submit" value="Submit" /> | |
</form> | |
</div><!--end .container--> |
$( document ).ready(function() { | |
$(".cta").click(function() { | |
$("form").slideDown(250); | |
// if form is visible | |
if ($("form").is(":visible")) { | |
// change .cta cursor to default | |
$(".cta").css('cursor', 'default'); | |
} | |
$("#email").focus(); | |
}); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,300) | |
// Colors | |
$gray: #EEEEEE | |
$orange: #FF9966 | |
$red: #E52B50 | |
$darkred: #9C2542 | |
$text: #212121 | |
* | |
box-sizing: border-box | |
body | |
background: $gray | |
color: $text | |
font: | |
family: 'Source Sans Pro' | |
size: 16px | |
padding: 4rem 2rem 2rem | |
display: flex | |
justify-content: center | |
flex-flow: row wrap | |
.optin-container | |
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22) | |
width: 30rem | |
.cta | |
background: $red | |
color: white | |
cursor: pointer | |
display: block | |
font-size: 2rem | |
line-height: 1 | |
padding: 1.75rem 1rem | |
text-align: center | |
text-decoration: none | |
width: 100% | |
@media screen and (max-width: 600px) | |
line-height: 1.4 | |
padding: 1.25rem 1rem | |
form | |
background: $darkred | |
display: flex | |
flex-flow: row nowrap | |
padding: 1rem | |
maring: 0 | |
input | |
padding: .75rem | |
margin: 0 | |
&[type="email"] | |
border: none | |
font-size: 1rem | |
flex: 1 | |
outline: $red | |
&:focus | |
outline: .25rem solid $red | |
&[type="submit"] | |
background: linear-gradient(lighten($red, 5%), lighten($red, 0%)) | |
cursor: pointer | |
color: white | |
border: none | |
font-size: 1rem | |
margin: 0 0 0 1rem | |
padding: 0 3rem | |
transition: all .25s ease-in-out | |
&:hover | |
background: linear-gradient(lighten($red, 6%), lighten($red, 1%)) | |
@media screen and (max-width: 600px) | |
flex-flow: row wrap | |
input | |
padding: 1rem !important | |
margin: 0 !important | |
flex: 100% | |
&[type="submit"] | |
margin-top: 1rem !important | |
.hidden | |
display: none | |