<!-- Design Inc Business Card -->

<div class="row">
    <div class="small-7 medium-5 large-4 column end small-centered card">
        <div class="card-top">
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/94278/design-inc-logo-color.svg" class="card-img" /></div>
        <div class="thunderstone">
            <div id="circleDrop" class="circle-button"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/324479/close.svg" class="close" /></div>
        </div>
        <div class="card-middle">
            <p class="more">Design Mantra</p>
            <h4 class="more">“I'm an irrational optimist and anything is possible.”</h4>
        </div>
        <div class="card-bottom text-center">
            <h2 class="card-title">Chris Cashion</h2>
            <p class="more">Visual | Interaction | Front End</p>
            <a href="http://designinc.com/cash" target="_blank">
            <button class="o-btn o-btn--lg o-btn--full">Book Me</button>
            </a>
        </div>        
    </div>
</div>
*, *:before, *:after {
  box-sizing: border-box;
}

body {
  background-color: #f2f2f2;
}

.card {
  position: relative;
  top: 150px;
  border-radius: 1.5em;
  padding: 0;
  box-shadow: 0px 0px 15px 1px rgba(150, 150, 201, 0.3);
  -webkit-animation: appear 1s ease-out forwards;
          animation: appear 1s ease-out forwards;
}

.card:hover {
box-shadow: 0px 0px 30px 2px rgba(150, 150, 150, 0.5);
  -webkit-animation: appear 1s ease-out forwards;
          animation: appear 1s ease-out forwards;
}
    
.card:nth-child(even) {
  margin: 0 1em;
}

.card-top {
  background: #fafafa;
  padding: 5em;
  border-top-left-radius: 1.5em;
  border-top-right-radius: 1.5em;
}

.card-top .card-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 8em;
  width: auto;
  -webkit-animation: thunderstone-icon-move 5s ease-in-out infinite;
          animation: thunderstone-icon-move 5s ease-in-out infinite;
}

.thunderstone {
  position: relative;
  height: 0;
  width: 0;
  border-left: 0em solid transparent;
  border-right: 0em solid transparent;
  border-top: 0em solid #B2DCE5;
  margin: 0 auto -.5em auto;
  top: 20px;
  z-index: 1;
}

.card-middle {
  display: none;
  background: #e6e6ec;
  padding: 3em 1em 2em 1em;
}

.card-middle p {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  color: #6a6a6a;
}

.card-middle h4 {
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  color: #000;
  font-size: 20px;
}

.card-bottom {
  background: #fff;
  padding: 3em 1em 3em 1em;
  border-bottom-left-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
}

.card-bottom p {
  color: #6a6a6a;
  letter-spacing: .5px;
}

.card-bottom .card-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 40px;
  color: #000;
}

.circle-button {
  position: absolute;
  bottom: 0;
  right: 4em;
  width: 50px;
  height: 50px;
  font-size: 1.5em;
  color: #fff;
  background: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.275);
  outline: none;
  cursor: pointer;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.circle-button .close {
  -webkit-transition: -webkit-transform 400ms ease;
  transition: -webkit-transform 400ms ease;
  transition: transform 400ms ease;
  transition: transform 400ms ease, -webkit-transform 400ms ease;
}

.circle-button:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.275);
}

.closeRotate {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.o-btn--full {
    width: 50%;
    text-align: center;
}

.o-btn--lg {
    padding: 12px 36px;
}

.o-btn {
    line-height: 1.15;
    display: inline-block;
    font-family: inherit;
    font-weight: 500;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    margin: 0;
    cursor: pointer;
    overflow: visible;
    padding: 14px 24px;
    height: auto;
    border: 1px solid transparent;
    border-radius: 2px;
    vertical-align: middle;
    -webkit-appearance: none;
    color: white;
    fill: white;
    background-color: #1279FF;
    box-shadow: 0 1px 1px 0 rgba(0,0,0,0.24);
}

.o-btn:hover {
    background-color: #1d62bc;
}

@-webkit-keyframes thunderstone-icon-move {
  50% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}

@keyframes thunderstone-icon-move {
  50% {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
  }
}
$('#circleDrop').click(function(){
  $('.card-middle').slideToggle();
  $('.close').toggleClass('closeRotate');
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css
  2. https://cdn.jsdelivr.net/foundation/5.5.0/css/foundation.css
  3. //fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900&subset=latin,latin-ext
  4. //fonts.googleapis.com/css?family=Lato:100,300,400,700,900

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js