<div class="business-card bottom">
  <div class="profile">
    <div class="profile-image"></div>
    <h5><b>Jesper O. Christensen</b></h5>
    <p>
      Software Developer<br />
      <b><a href="https://dk.linkedin.com/in/jesper-oddershede-christensen-74608566">Linkedin</a></b><br />
      <b><a href="https://twitter.com/Karnich">Twitter</a></b>
      <p>
  </div>
  <div class="logo">
    <img src="http://caveofcode.com/wp-content/uploads/2016/12/dojo-name.png" class="resize" />
  </div>
</div>
<div class="business-card top" id="business-card" data-animating="false">
  <div class="profile">
    <div class="profile-image"></div>
    <h5><b>Jesper O. Christensen</b></h5>
    <p>
      Software Developer<br />
      <b><a href="https://dk.linkedin.com/in/jesper-oddershede-christensen-74608566">Linkedin</a></b><br />
      <b><a href="https://twitter.com/Karnich">Twitter</a></b>
      <p>
  </div>
  <div class="logo" id="logo">
    <img src="http://caveofcode.com/wp-content/uploads/2016/12/dojo-name.png" class="resize" />
  </div>
</div>
body {
  background: url("http://caveofcode.com/wp-content/uploads/2016/03/wood8.jpg") repeat;
  overflow: hidden;
}

.business-card {
  background-color: white;
  width: 440px;
  height: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  padding: 0;
  cursor: pointer;
}

.profile-image {
  top: 0;
  left: 0;
  margin: auto;
  margin-bottom: 12px;
  margin-top: 50px;
  width: 98px;
  height: 98px;
  border-radius: 49px;
  -webkit-border-radius: 49px;
  -moz-border-radius: 49px;
  background: url(http://caveofcode.com/wp-content/uploads/2016/03/pic.jpg) no-repeat;
}

img.resize {
  width: 210px;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

.bottom,
.bottom:before,
.bottom:after {
  background-color: white;
  border: 0px solid #ccc;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.1), 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.bottom:before,
.bottom:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  left: 12px;
  top: 12px;
}

.bottom:after {
  left: 7px;
  top: 7px;
}

.logo {
  padding-top: 100px;
  width: 50%;
  height: 100%;
  text-align: center;
}

.profile {
  width: 50%;
  height: 100%;
  float: right;
  text-align: center;
  padding: 1px;
}

.profile p {
  font-size: xx-small;
  margin-bottom: 4px;
  font-style: oblique;
}

.profile b {
  font-size: x-small;
}

.top {
  z-index: 10;
}
require(["dojo/fx", "dojo/dom", "dojo/dom-style", "dojo/on", "dojo/domReady!"],
  function(coreFx, dom, style, on) {
    var dropButton = dom.byId("business-card");
    var slideDownPos = 120;
    var slideLeftPos = 1000;
    var bottomStackPos = 28;
    var originalPos = 0;

    var step1 = coreFx.slideTo({
      node: dropButton,
      top: slideDownPos,
      left: slideLeftPos,
      units: "px",
      onEnd: function(node) {
        style.set(node, "z-index", "-10");
      },
      duration: 300
    });

    var step2 = coreFx.slideTo({
      node: dropButton,
      top: bottomStackPos,
      left: bottomStackPos,
      units: "px",
      onEnd: function(node) {
        style.set(node, "z-index", "10");
        style.set(node, "top", originalPos);
        style.set(node, "left", originalPos);
        node.setAttribute("data-animating", false);
      },
      duration: 300
    });

    on(dropButton, "click", function() {
      // prevent clicking while its animating
      if (dropButton.getAttribute("data-animating") !== "true") {
        dropButton.setAttribute("data-animating", true);
        coreFx.chain([step1, step2]).play();
      }

    });
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js
  2. https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js
  3. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js