Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <!-- SVG Definitions. Think of this like a set of icon fonts, or an image sprite. -->
<svg class="hidden">
  <defs>
    <g id="svg-dgr">
      <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M67.74 50.286c0 5.776 3 10.848 7.525 13.752h3.021v-3.844c-3.401-1.992-5.687-5.682-5.687-9.908 0-6.339 5.139-11.478 11.478-11.478 2.691 0 5.161.931 7.118 2.482h3.842v-3.118c-2.899-2.624-6.743-4.223-10.96-4.223-9.023 0-16.337 7.314-16.337 16.337z"/>
      <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M49.525 72.148l7.991-7.991h-6.109v-.013l-.05.002-.071-.004-4.882 4.882 3.121 3.124zm1.83-38.104c-8.313 0-15.051 6.739-15.051 15.051 0 8.289 6.701 15.009 14.98 15.048l1.119-1.119v-.02h.02l3.334-3.334h-4.402c-5.84 0-10.574-4.734-10.574-10.574s4.734-10.574 10.574-10.574 10.574 4.734 10.574 10.574c0 2.588-.933 4.957-2.477 6.794v.085l.02-.02 3.048 3.048h.126c2.33-2.647 3.76-6.103 3.76-9.907 0-8.313-6.739-15.052-15.051-15.052z"/>
      <path fill-rule="evenodd" clip-rule="evenodd" fill="#fff" d="M31.748 39.682l8.193-8.193-3.637-3.637-8.427 8.427c1.477.909 2.789 2.056 3.871 3.403zm-3.195 3.195c1.274 1.746 2.035 3.891 2.035 6.218 0 5.84-4.734 10.574-10.574 10.574s-10.574-4.734-10.574-10.574 4.734-10.574 10.574-10.574c1.639 0 3.186.384 4.57 1.05l3.292-3.292c-2.29-1.408-4.977-2.235-7.863-2.235-8.313 0-15.051 6.739-15.051 15.051 0 8.313 6.739 15.051 15.051 15.051s15.051-6.739 15.051-15.051c0-3.565-1.246-6.835-3.317-9.413l-3.194 3.195zm-3.969-3.306l-3.504 3.504 3.637 3.637 3.836-3.836c-1.025-1.404-2.386-2.544-3.969-3.305z"/>
    </g><!-- #svg-dgr -->
    <path id="svg-arrow" d="m384 213l-192 0l0-96l-139 139l139 139l0-96l193 0c23 0 42-19 42-43c0-24-20-43-43-43z"/>
    <path id="svg-mail" d="m440 103l-368 0c-7 0-13 6-13 13l0 27c0 1 1 2 2 3l194 110c0 1 1 1 1 1c1 0 2 0 2-1l188-110c1-1 3-2 5-3c1-1 2-1 2-3l0-24c0-7-6-13-13-13z m11 80c-1-1-2-1-3 0l-106 62c-1 0-1 1-2 2c0 1 1 2 1 3l106 115c1 0 2 1 3 1c0 0 1-1 1-1c1 0 2-1 2-3l0-177c0-1 0-2-2-2z m-140 83c-1-1-2-1-4-1l-42 25c-5 3-12 3-17 1l-37-22c-1-1-3 0-4 1l-142 131c-1 1-1 2-1 3c0 1 1 2 1 3c3 1 5 2 7 2l364 0c2 0 3-1 3-2c1-2 1-3 0-4z m-135-12c1-1 1-2 1-3c0-1-1-2-2-2l-111-64c-1-1-2 0-4 0c-1 1-1 2-1 3l0 167c0 1 1 2 2 3c0 0 1 0 1 0c1 0 2 0 2-1z"/>
    <path id="svg-twitter" d="m453 134c-14 6-30 11-46 12c16-10 29-25 35-44c-15 9-33 16-51 19c-15-15-36-25-59-25c-45 0-81 36-81 81c0 6 1 12 2 18c-67-3-127-35-167-84c-7 12-11 25-11 40c0 28 15 53 36 68c-13-1-25-4-36-11c0 1 0 1 0 2c0 39 28 71 65 79c-7 2-14 3-22 3c-5 0-10-1-15-2c10 32 40 56 76 56c-28 22-63 35-101 35c-6 0-13 0-19-1c36 23 78 36 124 36c149 0 230-123 230-230c0-3 0-7 0-10c16-12 29-26 40-42z"/>
    <path id="svg-left" d="m293 115c4-6 11-9 20-9c8 0 15 3 21 9c13 12 13 26 0 41c0 0-96 100-96 100c0 0 96 99 96 99c13 15 13 29 0 41c-6 6-13 8-21 8c-8 0-15-2-20-8c0 0-116-121-116-121c-6-5-8-11-8-19c0-8 2-15 8-20c70-74 109-114 116-121"/>
    <path id="svg-github" d="m256 61c-110 0-200 90-200 200c0 88 58 163 137 189c10 2 14-4 14-9c0-5-1-17-1-34c-55 12-67-27-67-27c-9-23-22-29-22-29c-18-13 1-12 1-12c20 1 31 20 31 20c18 31 47 22 58 17c2-13 7-22 13-27c-45-5-91-22-91-99c0-21 7-39 20-53c-2-5-9-25 2-53c0 0 17-5 55 21c16-5 33-7 50-7c17 0 34 2 50 7c38-26 55-21 55-21c11 28 4 48 2 53c13 14 20 32 20 53c0 77-46 94-91 99c7 6 14 18 14 37c0 27 0 48 0 55c0 5 3 11 13 9c80-26 137-101 137-189c0-110-90-200-200-200z"/>
    <path id="svg-web" d="m256 64c-106 0-192 86-192 192c0 106 86 192 192 192c106 0 192-86 192-192c0-106-86-192-192-192z m-139 217l30 0c5 38 21 73 45 101c-39-20-67-57-75-101z m30-50l-30 0c8-44 36-81 75-101c-24 28-40 63-45 101z m84 117c-17-18-28-41-33-67l33 0z m0-117l-33 0c5-26 16-49 33-67z m164 0l-30 0c-5-38-21-73-45-101c39 20 67 57 75 101z m-114 117l0-67l33 0c-5 26-16 49-33 67z m0-117l0-67c17 18 28 41 33 67z m39 151c24-28 40-62 45-101l30 0c-8 44-36 81-75 101z"/>
    <path id="svg-linkedin" d="m413 72l-314 0c-15 0-27 12-27 26l0 316c0 14 12 26 27 26l314 0c15 0 27-12 27-26l0-316c0-14-12-26-27-26z m-232 314l-55 0l0-176l55 0z m-27-200c-18 0-32-14-32-32c0-17 14-32 32-32c17 0 31 15 31 32c0 18-14 32-31 32z m232 200l-55 0l0-86c0-20 0-46-28-46c-29 0-33 22-33 45l0 87l-55 0l0-176l53 0l0 24l1 0c7-14 25-28 51-28c56 0 66 36 66 83l0 97z"/>
    <path id="svg-reddit" d="m485 251c0-29-24-53-53-53c-12 0-24 5-34 13c0 0 0 0 0 0c-35-22-80-36-131-38l30-85l75 18c0 24 20 43 43 43c24 0 44-19 44-43c0-24-20-43-44-43c-18 0-33 11-39 27l-89-22l-37 105c-53 1-100 15-136 38c-10-8-22-13-34-13c-30 0-53 24-53 53c0 18 9 34 24 44c-1 5-1 11-1 16c0 76 92 138 206 138c113 0 206-62 206-138c0-5-1-10-2-15c16-10 25-27 25-45z m-159 68c-18 0-33-14-33-32c0-18 15-33 33-33c18 0 32 15 32 33c0 18-14 32-32 32z m6 56c-1 1-24 24-77 24c-53 0-74-24-75-25c-3-3-2-9 1-12c4-2 9-2 12 1c0 1 18 20 62 20c45 0 65-20 65-20c3-3 9-3 12 0c3 3 3 8 0 12z m-174-88c0-18 14-33 32-33c18 0 33 15 33 33c0 18-15 32-33 32c-18 0-32-14-32-32z"/>
  </defs>
</svg>

<div class="card">
  <!-- Use two card links to toggle between click to toggle and click to go back to initial state -->
  <a id="cardLinkFront" class="card-link card-link--front linkblock" href="#cardLinkFront">
    <div class="card__front">
      <div class="top-circle">
        <svg class="top-circle__arrow" viewBox="0 0 512 512">
          <use xlink:href="#svg-arrow"/>
        </svg>
      </div>
      <div class="logo logo--front-card">
        <svg class="svg-dgr" viewBox="0 20 100 60">
          <use xlink:href="#svg-dgr"/>
        </svg>
      </div><!-- .logo -->
      <div class="text">
        <h1 class="name" data-name="Steven Sinatra">Steven Sinatra</h1>
        <div class="tagline">Front-end web design/veloper</div>
      </div><!-- .text -->
    </div><!-- .card__front -->
  </a><!-- #cardLinkFront -->
  <div class="card__back">
    <div class="clearfix"></div>
    <div class="card__header" data-name="Steven Sinatra">
      <a id="cardLinkFront" class="card-link card-link--back linkblock" href="#cardLinkBack">
        <svg class="card-link--back__arrow" viewBox="0 0 512 512">
          <use xlink:href="#svg-left"/>
        </svg>
      </a>
      <svg class="svg-dgr svg-dgr--header" viewBox="0 20 100 60">
        <use xlink:href="#svg-dgr"/>
      </svg>
    </div>

    <div class="mindbar"></div>
    <div class="clearfix"></div>

    <a href="mailto:ohai@diagramatics.me" target="_blank" class="contact contact--email">
      <svg class="contact__icon svg-email" viewBox="0 0 512 512">
        <use xlink:href="#svg-mail"/>
      </svg>
      <span class="contact__text">ohai<span class="contact__text--highlight">[at]</span>diagramatics.me</span>
    </a><!-- .contact--email -->
    <a href="https://twitter.com/diagramatics" target="_blank" class="contact contact--twitter">
      <svg class="contact__icon svg-twitter" viewBox="0 0 512 512">
        <use xlink:href="#svg-twitter"/>
      </svg>
      <span class="contact__text"><span class="contact__text--highlight">@</span>diagramatics</span>
    </a><!-- .contact--twitter -->
    <a href="https://github.com/diagramatics" target="_blank" class="contact contact--github">
      <svg class="contact__icon svg-github" viewBox="0 0 512 512">
        <use xlink:href="#svg-github"/>
      </svg>
      <span class="contact__text"><span class="contact__text--highlight">/</span>diagramatics<span class="contact__text--highlight">/</span></span>
    </a><!-- .contact--github -->
    <a href="http://diagramatics.me" target="_blank" class="contact contact--web">
      <svg class="contact__icon svg-web" viewBox="0 0 512 512">
        <use xlink:href="#svg-web"/>
      </svg>
      <span class="contact__text">diagramatics<span class="contact__text--highlight">.me</span></span>
    </a><!-- .contact--web -->
    <a href="https://linkedin.com/in/diagramatics" target="_blank" class="contact contact--linkedin">
      <svg class="contact__icon svg-linkedin" viewBox="0 0 512 512">
        <use xlink:href="#svg-linkedin"/>
      </svg>
      <span class="contact__text"><span class="contact__text--highlight">in/</span>diagramatics</span>
    </a><!-- .contact--linkedin -->
    <a href="http://www.reddit.com/user/diagramatics/" target="_blank" class="contact contact--reddit">
      <svg class="contact__icon svg-reddit" viewBox="0 0 512 512">
        <use xlink:href="#svg-reddit"/>
      </svg>
      <span class="contact__text"><span class="contact__text--highlight">/u/</span>diagramatics</span>
    </a><!-- .contact--reddit -->
    <div class="sidepeek"><span class="sidepeek__text">Contact</span></div>
  </div><!-- .card__back -->
</div>

<div class="note">Click on the card to see the back.</div>

<!-- I hate how Typekit needs you to use JavaScript, please don't count this as JS, please... -->
<script type="text/javascript" src="//use.typekit.net/cpi3gpl.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
              
            
!

CSS

              
                $color-background: #f40924;
$page-background: #f8f8f8;
$card-back-background: #e8e8e8;
$card-back-color: #333;

$contact-width: 250px;
$contact-height: 28px;
$contact-amount: 7;

$serif: "freight-micro-pro", serif;
$sans-serif: "freight-sans-pro", sans-serif;

$animation-flip-length: 1.5s;

// Settings part
$card-height: 320px;
$card-width: 427px;
$logo-space: 100px; // For calculation on padding and margin offsets
$logo-height: $card-height - ($logo-space * 2); 
$card-header-height: 50px;


// Helpers

.hidden {
  display: none;
}

.linkblock {
  display: block;
  text-decoration: none;
}

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

.clearfix {
  @include clearfix;
}

// Animations
@keyframes arrowRotateY {
  0% {
    transform: rotate(0);
    fill: white;
  }
  
  25% {
    transform: translateX(-$card-width / 7 / 2 - 10px) 
               translateY(-20px)
               rotateY(90deg)
               rotateX(-60deg);
    fill: transparent;
  }
  
  50% {
    transform: translateY(-20px) 
               rotateY(-180deg);
    fill: transparent;
  }
  
  75% {
    transform: translateX($card-width / 7 / 2 + 10px)
               translateY(-20px) 
               rotateY(-270deg)
               rotateX(20deg);
  }
  
  85% {
    transform: translateX($card-width / 7 / 2 + 7.5px)
               translateY(-10px) 
               rotateY(-270deg)
               rotateX(40deg);
    fill: transparent;
  }
  
  100% {
    transform: rotateY(-360deg);
    fill: white;
  }
}

@keyframes frontCardFlipBack {
  0% {
    transform: none;
  }
  
  50% {
    transform: scale(1.025)
               translateY($card-header-height / 3)
               rotateZ(1deg);
  }
  
  75% {
    transform: scale(1.025)
               translateY($card-header-height)
               rotateY(180deg)
               rotateZ(3deg);
  }
  
  100% {
    transform: scale(1)
               translateY($card-header-height)
               rotateY(180deg);
  }
}

@keyframes backCardFlipBack {
  0% {
    transform: rotateY(-180deg);
  }
  
  50% {
    transform: scale(1.03) // Make the scale slightly bigger to make the red background on the front card unseen
               rotateY(-180deg)
               translateY($card-header-height / 3)
               rotateZ(-1deg);
  }
  
  75% {
    transform: scale(1.03)
               translateY($card-header-height)
               rotateZ(-3deg);
  }
  
  100% {
    transform: scale(1)
               translateY($card-header-height);
  }
}

@keyframes backCardFlipFront {
  
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  
  100% {
    opacity: 1;
    z-index: 1;
  }
}

// Logo animation bounce, thanks to bouncejs.com

@keyframes logoBounce { 
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -7.76209, 0, 1); }
  6.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -10.43562, 0, 1); }
  10% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -9.35333, 0, 1); }
  13.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -6.28746, 0, 1); }
  16.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -2.81769, 0, 1); }
  20% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.69766, 0, 1); }
  26.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.28239, 0, 1); }
  30% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 2.04568, 0, 1); }
  33.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1.37514, 0, 1); }
  36.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.61626, 0, 1); }
  40% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.3713, 0, 1); }
  46.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.49919, 0, 1); }
  50% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.44742, 0, 1); }
  53.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.30076, 0, 1); }
  56.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.13478, 0, 1); }
  60% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.08121, 0, 1); }
  66.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.10918, 0, 1); }
  70% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.09786, 0, 1); }
  73.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.06578, 0, 1); }
  76.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0.02948, 0, 1); }
  80% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.01776, 0, 1); }
  86.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.02388, 0, 1); }
  90% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.0214, 0, 1); }
  93.333333% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.01439, 0, 1); }
  96.666667% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, -0.00645, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

// Popup, bouncejs.com
@keyframes popup { 
  0% { opacity: 0; transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.333333% { transform: matrix3d(0.32778, 0, 0, 0, 0, 0.32778, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.666667% { transform: matrix3d(0.69875, 0, 0, 0, 0, 0.69875, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.333333% { transform: matrix3d(1.1815, 0, 0, 0, 0, 1.1815, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.666667% { transform: matrix3d(1.24402, 0, 0, 0, 0, 1.24402, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20% { transform: matrix3d(1.21871, 0, 0, 0, 0, 1.21871, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.333333% { transform: matrix3d(1.14702, 0, 0, 0, 0, 1.14702, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  26.666667% { transform: matrix3d(1.06589, 0, 0, 0, 0, 1.06589, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.333333% { transform: matrix3d(0.9603, 0, 0, 0, 0, 0.9603, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.666667% { transform: matrix3d(0.94663, 0, 0, 0, 0, 0.94663, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40% { transform: matrix3d(0.95217, 0, 0, 0, 0, 0.95217, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.333333% { transform: matrix3d(0.96784, 0, 0, 0, 0, 0.96784, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  46.666667% { transform: matrix3d(0.98559, 0, 0, 0, 0, 0.98559, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% { opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  53.333333% { transform: matrix3d(1.00868, 0, 0, 0, 0, 1.00868, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.666667% { transform: matrix3d(1.01167, 0, 0, 0, 0, 1.01167, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  60% { transform: matrix3d(1.01046, 0, 0, 0, 0, 1.01046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.333333% { transform: matrix3d(1.00703, 0, 0, 0, 0, 1.00703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.666667% { transform: matrix3d(1.00315, 0, 0, 0, 0, 1.00315, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  70% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.333333% { transform: matrix3d(0.9981, 0, 0, 0, 0, 0.9981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  76.666667% { transform: matrix3d(0.99745, 0, 0, 0, 0, 0.99745, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80% { transform: matrix3d(0.99771, 0, 0, 0, 0, 0.99771, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.333333% { transform: matrix3d(0.99846, 0, 0, 0, 0, 0.99846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  86.666667% { transform: matrix3d(0.99931, 0, 0, 0, 0, 0.99931, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  93.333333% { transform: matrix3d(1.00042, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  96.666667% { transform: matrix3d(1.00056, 0, 0, 0, 0, 1.00056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { opacity: 1; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}



// And let us begin...

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  background: $page-background;
  font-family: $sans-serif;
  font-size: 16px; // Set a *rem* for everything, consistency in typography
}

.card {
  position: relative;
  width: $card-width;
  margin: 50px auto;
  animation: popup 1s forwards;
}

// The links — main star of the functionality show

.card-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  outline: none;
}

.card-link--front {
  right: 0;
  bottom: 0;
  z-index: 2;
  
  // On click
  &:target {
    // Put the click to toggle link behind
    z-index: 1;
    
    // Show the click to go back to initial state in front
    + .card__back {
      z-index: 2;
    }
    
    // Do something with the front part of the card now
    .card__front {
      @extend .card__front:hover;
      animation: frontCardFlipBack $animation-flip-length ease 1 both;
      
      // Increase specificity. This is to evade using !important
      & .top-circle.top-circle {
        transform: translateY(-$card-header-height);
        transition-delay: $animation-flip-length;
        transition-timing-function: ease-in-out;
      }
      
      & .top-circle__arrow {
        animation: none;
        opacity: 0 !important;
      }
      
      & .logo--front-card {
        animation: logoBounce $animation-flip-length linear;
      }
    }
    
    // Do something with the back of the card
    + .card__back {
        animation: backCardFlipBack $animation-flip-length ease 1 forwards;
      
      .card__header {
        height: $card-header-height;
        transition-delay: $animation-flip-length; // So the transition is being made after the animation finishes
      }
       
      @for $i from 1 to $contact-amount {
        .contact:nth-of-type(#{$i}) {
          animation: fadeIn .5s ease $animation-flip-length + ($i * .3s) - .3s forwards;
        }
      }
    
      .sidepeek {
        animation: fadeIn .5s ease $animation-flip-length + ($contact-amount * .3s) forwards;
      }
    } 
  }
}

.card-link--back:target {
  
}

.card-link--back {
  left: 5px;
  color: white;
  font-size: 1rem;
  z-index: 1;
  
  &:after {
    content: "Back";
    margin-left: -1rem;
    letter-spacing: -1em;
    line-height: $card-header-height;
    font-family: $sans-serif;
    vertical-align: top;
    opacity: 0;
    transition: all .4s ease-in-out 1s;
  }
  
  &:hover {
    &:after {
      letter-spacing: 0;
      opacity: 1;
      transition: all .4s ease-in-out;
    }
    
    .card-link--back__arrow {
      padding: $card-header-height / 6;
    }
  }
}

.card-link--back__arrow {
  width: $card-header-height;
  height: $card-header-height;
  padding: $card-header-height / 4;
  fill: white;
  transition: all .4s;
}

// Front side

.card__front {
  position: relative;
  background: $color-background;
  border-radius: 2px;
  
  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 25px;
    right: 25px;
    bottom: 25px;
    left: 25px;
    transition: all .5s;
  }
  
  &:before {
    top: 10px;
    bottom: 10px;
    border-top: 1px solid white;
    border-bottom: 1px solid white;
  }
  
  &:after {
    left: 10px; 
    right: 10px;
    border-left: 1px solid white;
    border-right: 1px solid white;
  }
  
  &:hover {
    
    &:before {
      
    }
    
    .name:after {
      opacity: 1;
      transform: translateY(0);
    }
    
    .tagline {
      opacity: 1;
      transform: translateY(0);
      transition: opacity .35s ease-out, 
                  transform .5s cubic-bezier(.17, .67, 0, 1.3);
    }
    
    .top-circle {
      transform: translateY(0);
      transition: transform .4s cubic-bezier(.17, .67, 0, 1.3);
    }
    
    .top-circle__arrow {
      opacity: 1;
      transition: all .4s;
    }
  }
}

.top-circle {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  width: $card-width / 7;
  height: $card-width / 7;
  margin: -($card-width / 7 / 2)+15px auto 0;
  background: $color-background;
  border-radius: 50%;
  overflow: hidden;
  transform: translateY($card-width / 7 / 2);
  transition: transform .4s;
}

.top-circle__arrow {
  display: block;
  height: 100%;
  padding: 20%;
  fill: white;
  opacity: 0;
  animation: arrowRotateY 2s cubic-bezier(.6, 0, .33, .33) infinite;
  transition: opacity .2s;
}

.logo {
  padding: $logo-space 0;
  margin-bottom: -$logo-space;
}

.svg-dgr {
  display: block;
  height: $logo-height;
  margin: 0 auto;
}

.text {
  height: $logo-space;
  color: white;
  text-align: center;
}

.name {
  position: relative;
  margin: 0;
  color: darken($color-background, 10%);
  font-family: $serif;
  font-size: 2.4rem;
  letter-spacing: -2px;
  text-shadow: 0px 1px 1px lighten($color-background, 5%);
  
  &:after {
    content: attr(data-name);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    font-size: .98em;
    opacity: 0;
    text-shadow: 0px 1px 1px darken($color-background, 15%);
    transform: translateY(-.1em);
    transition: opacity .3s,
                transform .4s;
  }
}

.tagline {
  margin-top: -.5em;
  opacity: 0;
  transform: translateY($card-height / 4);
  transition: opacity .2s, 
              transform .3s ease-in-out;
}

// Back side

.card__back {
  position: relative;
  height: $card-height;
  background: $card-back-background;
  border-left: 5px solid rgba(black, .1);
  border-right: 5px solid rgba(black, .1);
  color: $card-back-color;
  text-align: center;
  backface-visibility: hidden;
  transition: height .4s ease-in-out;
  
  // Using border-bottom messes the top header, so use a pseudo-element.
  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: rgba(black, .1);
  }
}

.card__header {
  position: absolute;
  right: 5px;
  bottom: $card-height;
  left: 5px;
  height: 0;
  background: $color-background;
  font-family: $serif;
  font-size: 2rem;
  text-align: center;
  overflow: hidden;
  box-shadow: inset 0 -2px 1px rgba(black, .2);
  transition: all .4s ease-in-out;
  transition-delay: 0;
  
  &:after {
    content: attr(data-name);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    background: $color-background;
    color: white;
    letter-spacing: -.3em;
    opacity: 0;
    transition: opacity .4s, letter-spacing .3s cubic-bezier(.3, .15, 0, 1.3);
    overflow: hidden;
  }
  
  // Increase specificity
  &.card__header.card__header:hover:after {
    letter-spacing: 0;
    opacity: 1;
  }
}

.svg-dgr--header {
  display: inline-block;
  height: $card-header-height - 10px;
  margin-top: ($card-header-height - ($card-header-height - 10px)) / 2;
}

.mindbar {
  position: relative;
  z-index: -1;
  &:before,
  &:after {
    content: '';
    float: left;
    height: 5px;
  }
  
  &:before {
    width: 30%;
    background: #2a9bd3;
  }
  
  &:after {
    width: 70%;
    margin-top: -5px;
    margin-left: 30%;
    background: $card-back-color;
  }
}

.contact {
  display: inline-block;
  position: relative;
  min-width: $contact-width;
  height: $contact-height + ($contact-height / 5)*2;
  margin: 10px 20px 0;
  padding: $contact-height / 5 $contact-height / 3;
  border: thin dashed rgba(black, .1);
  opacity: 0;
  z-index: -1;
  
  &:before,
  &:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  
  &:before {
    background: #555;
    transform: translateX(0) translateY(0);
  }
  
  &:after {
    background: $card-back-background;
    transition: all .4s;
  }
  
  &:hover {
    &:after,
    .contact__icon,
    .contact__text {
      transform: translateX(3px) translateY(-5px);
      transition-timing-function: cubic-bezier(.3, .15, 0, 1.5);
    }
    
    &:after {
      box-shadow: 1px 1px 1px rgba(black, .2);
      border-left-width: 3px;
    }
  }
}

.contact__icon,
.contact__text {
  position: relative;
  z-index: 2;
  transition: all .4s;
}

.contact {
  &--email:hover {
    .contact__icon {
      fill: $color-background;
    }
    
    .contact__text--highlight {
      color: $color-background;
    }

    &:after {
      border-left: 3px solid $color-background;
    }
  }
  
  &--twitter:hover {
    .contact__icon {
      fill: #55acee;
    }
    
    .contact__text--highlight {
      color: #55acee;
    }

    &:after {
      border-left: 3px solid #55acee;
    }
  }
  
  &--github:hover {
    .contact__icon {
      fill: #4183c4;
    }
    
    .contact__text--highlight {
      color: #4183c4;
    }

    &:after {
      border-left: 3px solid #4183c4;
    }
  }
  
  &--web:hover {
    .contact__icon {
      fill: $color-background;
    }
    
    .contact__text--highlight {
      color: $color-background;
    }

    &:after {
      border-left: 3px solid $color-background;
    }
  }
  
  &--linkedin:hover {
    .contact__icon {
      fill: #0976b4;
    }
    
    .contact__text--highlight {
      color: #0976b4;
    }

    &:after {
      border-left: 3px solid #0976b4;
    }
  }
  
  &--reddit:hover {
    .contact__icon {
      fill: #ff4500;
    }
    
    .contact__text--highlight {
      color: #ff4500;
    }

    &:after {
      border-left: 3px solid #ff4500;
    }
  }
}

.contact__icon {
  width: $contact-height;
  height: $contact-height;
  padding: $contact-height / 5;
  fill: $card-back-color;
}

.contact__text {
  display: inline-block;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: $contact-height;
  vertical-align: top;
}

.contact__text--highlight {
  transition: all .4s;
}

.sidepeek {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

.sidepeek__text {
  display: block;
  width: $card-height;
  margin-top: $card-height / 3;
  color: rgba(#333, .2);
  opacity: .5;
  font-size: 5rem;
  transform: rotate(-90deg) translateY($card-height / 2.25);
}

// Others

.note {
  width: $card-width * 4/3;
  margin: 20px auto;
  padding: 10px 0;
  border-bottom: 3px solid $color-background;
  font-family: $serif;
  font-size: 1.6rem;
  text-align: center;
  border-radius: 100px;
}
              
            
!

JS

              
                // You would expect SOMETHING in here. But there's none. Ha ha! C'est bon, non?
              
            
!
999px

Console