.signup-form
form action=""
fieldset.email-card
h1 Anthropologie
h2 Enjoy
h1 Free Shipping
h2 on your next order
input type="email" placeholder="Email Address"
br
button type="button" class="next action-button" value="Next" Continue →
br
button type="button" No, Thanks
fieldset.phone-card
h1 Anthropologie
h2 Enjoy
h1 Free Shipping
h2 on your next order
p By signing up via text, you agree to receive recurring automated marketing text messages from Anthropologie at the cell number used when signing up. Consent is not a condition of any purchase. Msg & data rates may apply.
input type="text" placeholder="Mobile Number"
button type="button"
| GET FREE SHIPPING NOW
br
| when you signup for email and text
View Compiled
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Playfair+Display:400,600&display=swap')
$body-bg: #fff8dc
$form-bg: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/image-from-rawpixel-id-2211858-jpeg.jpg"
$primary-text-color: #fff9d9
$primary-sans-serif: 'Open Sans Condensed'
$primary-serif: 'Playfair Display'
*
padding: 0
margin: 0
box-sizing: border-box
body
display: grid
height: 100vh
width: 100vw
align-items: center
justify-items: center
background: $body-bg
.signup-form
height: 725px
width: 725px
background: url($form-bg) center center no-repeat
background-size: cover
text-align: center
padding: 50px
position: relative
h1, h2
color: $primary-text-color
font-weight: normal
h1
font-family: $primary-serif
h1:nth-of-type(1)
font-size: 28px
letter-spacing: 4px
h1:nth-of-type(2)
font-size: 42px
letter-spacing: 4px
h2
font-size: 24px
margin: 40px 0
h2, p, input, button
font-family: $primary-sans-serif
input
border: 1px solid black
input, button
width: 70%
line-height: 60px
height: 60px
padding-left: 5px
font-size: 24px
p
width: 70%
margin: 0 auto
text-align: left
color: $primary-text-color
margin-bottom: 20px
button
margin-top: 40px
border: none
color: white
button:nth-of-type(1)
background: #8fb8c5
button:nth-of-type(2)
background: #236385
.phone-card button
height: 120px
line-height: 30px
background: #305e7e
fieldset
border: 0 none
position: relative
&:not(:first-of-type)
display: none
View Compiled
var current_fs, next_fs, previous_fs;
var left, opacity, scale;
var animating;
$(".next").click(function(){
if(animating) return false;
animating = true;
current_fs = $(this).parent();
next_fs = $(this).parent().next();
next_fs.show();
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
scale = 0;
left = (now * 50)+"%";
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 600,
complete: function(){
current_fs.hide();
animating = false;
},
easing: 'easeInOutBack'
});
});
This Pen doesn't use any external CSS resources.