<div class="container"> 
  <div class="card">
    <div class="blue">
    <div class="spacer"></div>
    <p class="left-line">This is some sample text for the paragraph just to see what it is going to look like in the browser.</p>
    <a href="#" class="circle-btn"></a>
    <div class="back"><p>This is the back of the card</p></div>
  <div class="card">
    <div class="top-box">
    <p class="dark">To finish everything off I've added some additional text here.</p>

$primary: #1B36FF;
$secondary: #FF007F;
$dark: rgba(black, .8);
$font-1:'Roboto Mono', monospace;
$font-2:'Roboto Slab', serif;

* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  line-height: 1.688;
body {
  background: lighten($primary, 42%);

.dark {
  color: $dark;

h1 {
  padding-top: .3em;
  font-family: $font-2;
  font-weight: 200;
  font-size: 8em;

.spacer {
  padding: 2.5em 0;

  border-left: .2em solid rgba(white, .3);
  margin-left: 1em;

p {
  font-family: $font-1;
  font-size: 1.8em;
  text-align: left;
  padding: 1em;
  color: rgba(white, .9);

a {
  text-decoration: none;

  position: relative;
  height: 100vh;
  margin: auto;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 10vw;
  padding: 0;
  align-items: center;

.card {
  position: relative;
  font-size: 10px;
  display: inline-block;
  background: white;
  width: 350px;
  overflow: hidden;
  margin: 3vh auto;
  border-radius: 8px;
  box-shadow: -5px 19px 38px 5px rgba(0,0,0,0.30), 5px 15px 15px 2px rgba(0,0,0,0.22);
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.095);
  .back {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background: white;
  .blue {
  background: $primary;
  color: white;
  height: 100%;
  width: 100%;

 .flipped {
  -webkit-transform: rotateY( 180deg );
  -moz-transform: rotateY( 180deg );
  -o-transform: rotateY( 180deg );
  transform: rotateY( 180deg );

.circle-btn {
  display: block;
  height: 58px;
  width: 58px;
  background: #FF007F;
  border-radius: 50%;
  position: absolute;
  border: 1px solid darken($secondary, 10%);
  left: 77%;
  bottom: 8%;
  text-align: center;
  transition: 0.36s cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: 0.05s;
  box-shadow: 0 10px 31px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.24);

  &:before {
    display: block;
    color: white;
    text-shadow: 0px 1px 5px rgba(0,0,0,.5);
    font-size: 35px;
    line-height: 57px;
    font-weight: 300;
    padding: 0;
    font-family: $font-2;
  &:hover {
    //box-shadow: 0 10px 20px 5px rgba(0,0,0,0.12), 0 7px 18px 8px rgba(0,0,0,0.25);
        -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
    transform: translateZ(0) scale(1.1, 1.1);
    transition-delay: 0s;
  &:active {
    transform: scale(1.1, 1.0);
  .top-box {
    height: 65%;
    width: 100%;
    background: {
    image: url('https://material-design.storage.googleapis.com/publish/material_v_9/0Bx4BSt6jniD7Sy1kVWlTS1NnNGM/style_imagery_bestpractices_focus5.png');
      size: cover;
      repeat: no-repeat;
      position: center center;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.