<div class="wrap"> <!--main container-->
<div class="gift-card-box"> <!--white area which holda the card & UI-->
<div class="confirmation"> <!--section only seen after card is sent-->
<!--the ring and check mark-->
<svg class="all-good" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 130.2 130.2">
<circle class="path circle" fill="none" stroke="#777" stroke-width="6" stroke-miterlimit="10" cx="65.1" cy="65.1" r="62.1"/>
<polyline class="path check" fill="none" stroke="#777" stroke-width="6" stroke-linecap="round" stroke-miterlimit="10" points="100.2,40.2 51.5,88.8 29.8,67.5 "/>
</svg>
<!--message to say say it was successful-->
<p class="success">Right on! Send another?</p>
</div>
<!--card iteself - parent container-->
<div class="card">
<!--design for the card front. Bg image is in the css-->
<div class="front">
<!--logo container-->
<div class="front-logo-cnt">
<!--apple logo-->
<svg class="apple-logo" xmlns="http://www.w3.org/2000/svg" width="256" height="315" viewBox="0 0 256 315">
<path fill="#fff" d="M213.803394,167.030943 C214.2452,214.609646 255.542482,230.442639 256,230.644727 C255.650812,231.761357 249.401383,253.208293 234.24263,275.361446 C221.138555,294.513969 207.538253,313.596333 186.113759,313.991545 C165.062051,314.379442 158.292752,301.507828 134.22469,301.507828 C110.163898,301.507828 102.642899,313.596301 82.7151126,314.379442 C62.0350407,315.16201 46.2873831,293.668525 33.0744079,274.586162 C6.07529317,235.552544 -14.5576169,164.286328 13.147166,116.18047 C26.9103111,92.2909053 51.5060917,77.1630356 78.2026125,76.7751096 C98.5099145,76.3877456 117.677594,90.4371851 130.091705,90.4371851 C142.497945,90.4371851 165.790755,73.5415029 190.277627,76.0228474 C200.528668,76.4495055 229.303509,80.1636878 247.780625,107.209389 C246.291825,108.132333 213.44635,127.253405 213.803394,167.030988 M174.239142,50.1987033 C185.218331,36.9088319 192.607958,18.4081019 190.591988,0 C174.766312,0.636050225 155.629514,10.5457909 144.278109,23.8283506 C134.10507,35.5906758 125.195775,54.4170275 127.599657,72.4607932 C145.239231,73.8255433 163.259413,63.4970262 174.239142,50.1987249"/>
</svg>
<!--p class="card-description">$100</p-->
</div>
</div>
<!--design for the back of the card-->
<div class="back">
<!--input fields-->
<form class="form" autocomplete="off" novalidate>
<fieldset>
<label for="card-number">From:</label>
<input type="text" class="input-card-info" maxlength="30" autofocus />
</fieldset>
<fieldset>
<label for="card-holder">To:</label>
<input type="text" class="input-card-info" maxlength="30" />
</fieldset>
<fieldset>
<label for="card-holder">Message:</label>
<input type="text" class="input-card-info input-card-info--lg" maxlength="80" />
</fieldset>
</form>
</div>
</div>
<!--buttons parent-->
<div class="button-cnt">
<!--initial button-->
<button id="btn-card-flip" class="primary-cta">Customise</button>
<!--the two buttons which appear once card is flipped-->
<button id="close" class="secondary-cta secondary-cta--done hidden">Close</button>
<button id="btn-card-send" class="secondary-cta secondary-cta--send hidden">Send</button>
</div>
</div>
</div>$off_white: #F8FAFF;
$bright_pink: #F4157E;
$dull_pink: #CD106E;
$white: #fff;
*,
*::before,
*::after {
box-sizing: border-box;
}
html,
body {
background: #12c2e9; /* fallback for old browsers */
background: -webkit-linear-gradient(
to right,
#f64f59,
#c471ed,
#12c2e9
); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(
to right,
#f64f59,
#c471ed,
#12c2e9
); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
min-height: 100%;
font-family: "Open sans", sans-serif;
}
/*--------------------
container
--------------------*/
.wrap {
margin: 150px auto 30px;
position: relative;
width: 460px;
background: $white;
border-radius: 15px;
padding: 272px 45px 30px;
box-shadow: 0 10px 40px hsla(0, 0, 0, 0.1);
}
/*--------------------
confirmation
--------------------*/
.confirmation {
position: absolute;
top: 96px;
left: 0;
right: 0;
opacity: 0;
transition: opacity 300ms ease 300ms;
&.visible {
opacity: 1;
}
}
.all-good {
display: block;
margin: 40px auto 0;
width: 60px;
}
.apple-logo {
fill: $white;
display: block;
margin: 0 auto;
width: 80px;
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 0;
&.circle {
-webkit-animation: dash 0.9s ease-in-out;
animation: dash 0.9s ease-in-out;
}
&.line {
stroke-dashoffset: 1000;
-webkit-animation: dash 0.9s 0.35s ease-in-out forwards;
animation: dash 0.9s 0.35s ease-in-out forwards;
}
&.check {
stroke-dashoffset: -100;
-webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
animation: dash-check 0.9s 0.35s ease-in-out forwards;
}
}
p {
text-align: center;
margin: 20px 0 60px;
font-size: 1.25em;
&.success {
color: #777;
}
}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes dash-check {
0% {
stroke-dashoffset: -100;
}
100% {
stroke-dashoffset: 900;
}
}
@keyframes dash-check {
0% {
stroke-dashoffset: -100;
}
100% {
stroke-dashoffset: 900;
}
}
/*--------------------
Buttons
--------------------*/
.button-cnt {
display: flex;
justify-content: space-around;
width: 100%;
}
button {
border: none;
position: absolute;
height: 64px;
z-index: 2;
top: 300px;
cursor: pointer;
font-size: 18px;
text-align: center;
text-decoration: none;
transition: all 150ms ease;
outline: none !important;
}
.primary-cta {
background: $bright_pink;
border-radius: 10px;
box-shadow: 0 10px 60px -10px $dull_pink;
color: white;
padding: 0 24px;
pointer-events: auto;
width: 250px;
z-index: 9;
transition: all 150ms ease;
will-change: transform, box-shadow, background;
&.hidden {
opacity: 0;
pointer-events: none;
}
}
.secondary-cta {
background: $bright_pink;
border-radius: 10px;
padding: 0 24px;
pointer-events: auto;
width: 150px;
z-index: 9;
transition: all 150ms ease;
will-change: transform, box-shadow, background;
position: relative;
&--done {
background: transparent;
color: $bright_pink;
}
&--send {
border:1px solid $bright_pink;
box-shadow: 0 10px 60px -10px $dull_pink;
color: $white;
}
&.hidden {
opacity: 0;
pointer-events: none;
}
}
/*--------------------
Form
--------------------*/
.form {
fieldset {
border: none;
padding: 10px 0;
label {
display: inline-block;
color: #444;
font-size: 12px;
padding: 4px;
margin: 5px;
}
input {
background-color: $white;
width: 100%;
height: 38px;
color: #000;
padding: 8px;
border-radius: 5px;
font-size: 16px;
outline: none !important;
border: 1px solid hsla(0, 0, 0, 0.3);
position: absolute;
right: 24px;
box-shadow: inset 0 1px 4px hsla(0, 0, 0, 0.2);
&.input-card-info {
display: inline-block;
width: 300px;
&--lg {
height: 100px;
}
}
}
.select {
position: relative;
&::after {
content: "";
border-top: 8px solid #222;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
position: absolute;
z-index: 2;
top: 14px;
right: 10px;
pointer-events: none;
}
select {
appearance: none;
position: absolute;
padding: 0;
border: none;
width: 100%;
outline: none !important;
top: 6px;
left: 6px;
background: none;
:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #000;
}
}
}
}
}
/*--------------------
Credit Card
--------------------*/
.gift-card-box {
perspective: 1000;
width: 400px;
height: 280px;
position: absolute;
top: -112px;
left: 50%;
transform: translateX(-50%);
.flip {
transform: rotateY(180deg);
}
.front {
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/341817/imitation_apple_design1.jpg');
background-size: contain;
}
.front,
.back {
width: 400px;
height: 250px;
border-radius: 15px;
backface-visibility: hidden;
position: absolute;
color: #fff;
font-family: sans-serif;
top: 0;
left: 0;
box-shadow: 0 1px 6px hsla(0, 0, 0, 0.3);
&.back {
background: linear-gradient(269.85deg, #F23C2D 1.71%, #F8A80C 99.93%);
}
}
.card {
transition: 600ms;
transform-style: preserve-3d;
position: relative;
transition: all 1s ease-in-out;
&.whoosh {
animation: whooshAnimation 2400ms;
}
}
@keyframes whooshAnimation {
0% {
}
50% {
transform: translateY(-150vh);
}
75% {
transform: translateX(150vw);
}
100% {
}
}
.front-logo-cnt {
display: flex;
flex-direction: column;
height: 100%;
align-items: center;
justify-content: center;
width: 100%;
}
.font-logo {
width: 300px;
}
.card-description {
font-family: sans-serif;
line-height: 1.4;
text-align: center;
}
.front {
z-index: 2;
transform: rotateY(0deg);
}
.back {
transform: rotateY(180deg);
}
}
// Sources of snippets and inspiration:
// Button style & interaction https://codepen.io/bosworthco/pen/RjErEj
// Card flip https://codepen.io/supah/pen/OMdPpW
// Apple too, i guess
// I know jquery is old fashioned, but i'm more of a UX/UI designer these days
// tilts the buttons on hover
$('.primary-cta, .secondary-cta').tilt({ scale: 1.1, speed: 1000 });
//flip the card to the back and change UI
$('#btn-card-flip').click(function() { // 'customise' button is pressed
$('.card').addClass('flip'); // card flips over
$("input:text:visible:first").focus(); //first field of form in auto-focus
$('#btn-card-flip').addClass('hidden'); // 'customise' button goes invisible//
$('.secondary-cta').removeClass('hidden'); // 'secondary' button appear //
});
//send the card
$('#btn-card-send').click(function() { // 'send' button is pushed
$('.card').addClass('whoosh'); // slides card up out of view
$('.confirmation').addClass('visible'); // show success message
setTimeout(function(){
$('input:text').val(''); }, 300);//scrub the input fields when card when is off canvas
setTimeout(function(){
$('.card').removeClass('whoosh');}, 2400);//resets for the next send
setTimeout(function(){
$('.confirmation').removeClass('visible');}, 1600);//resets for the next send
$("input:text:visible:first").focus(); //first field of form in auto-focus
});
//flip the card to the front and change UI
$('#close').click(function() { // 'close' button is pressed
$('.card').removeClass('flip'); // card flips over
$('#btn-card-flip').removeClass('hidden'); // 'customise' button becomes visible //
$('.secondary-cta').addClass('hidden'); // 'send/close' buttons go invisible //
});
External CSS
This Pen doesn't use any external CSS resources.