Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                $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);
	}
}

              
            
!

JS

              
                // 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 //

});

              
            
!
999px

Console