CodePen Embed - Material Design Cards

<html>
<head>
  <title>Simple VCard</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto+Condensed" rel="stylesheet">
</head>
<body>

  <div class="site-content">
    <div class="logo-wrap">
      <h2 class="title-logo">ALI <br /> AAS</h2>
    </div>
    <div class="header-wrap">
      <h3 class="text-header">Boston designer and <br />front-end developer<br />building products <br /><strong>throughtbot</strong></h3>
    </div>
    <div class="img-wrap" style="background-image:url('https://static.pexels.com/photos/193355/pexels-photo-193355.jpeg'); background-repeat: no-repeat; background-size: cover; height: 500px; width: 50%; position: absolute; right: 0; top: 20px;"></div>
    <div class="btn-wrap">
      <div class="hamburger"></div>
    </div>
    <div class="menu-wrap">
      <ul class="primary-menus">
        <li><a href="#">Dribble</a></li>
        <li><a href="#">Github</a></li>
        <li><a href="#">Behance</a></li>
      </ul>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>

  $steel-grey: #434549;
  $golden-fizz: #E3E520;
  $barberry: #CFD01B;
  $aluminium: #85878B;
  $rio-grande: #BBBC31;
  $earls-green: #ABAC15;

  $primary-font : 'Montserrat', sans-serif;
  $secondary-font : 'Roboto Condensed', sans-serif;

  body {
    padding: 0;
    margin: 0;
    background: $barberry;
    .site-content {
      width: 70%;
      height: 500px;
      overflow: hidden;
      margin: auto;
      background: $steel-grey;
      position: relative;
      -webkit-box-shadow: 0px 0px 57px -5px rgba(67,69,73,1);
    -moz-box-shadow: 0px 0px 57px -5px rgba(67,69,73,1);
    box-shadow: 0px 0px 57px -5px rgba(67,69,73,1);
    .logo-wrap {
      float: left;
      margin: 50px 70px;
      width: 100%;
      h2.title-logo {
        margin: 0;
        font-family: $secondary-font;
        color: $golden-fizz;
        font-weight: 300;
        text-transform: uppercase;
        font-size: 2em;
        letter-spacing: 6px;
      }
    }
    .header-wrap {
      margin: 0 100px;
      h3.text-header {
        position: relative;
        font-family: $primary-font;
        color: #ffffff;
        font-size: 2.5em;
        font-weight: 700;
        text-shadow: 1px 1px 1px rgba(43, 43, 43, 0.64);
        z-index: 2;
      }
      strong {
        color: $golden-fizz;
      }
    }
    }
    .menu-wrap {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background: $golden-fizz;
      height: 0;
      transition: all .9s ease-in-out;
      z-index: 8;
      ul.primary-menus {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
      padding: 0;
      margin: 0;
      visibility: hidden;
      opacity: 0;
      transition: all .9s ease-in-out;
    }
    li {
      list-style: none;
      line-height: 1.5;
      top: -350px;
        position: relative;
      a {
        text-decoration: none;
        font-family: $primary-font;
        font-weight: 700;
        font-size: 3em;
        color: $steel-grey;
        position: relative;
        transition: all .3s ease-in-out;

        &:before {
          position: absolute;
          content: "";
          height: 4px;
          width: 0;
          background: $steel-grey;
          bottom: -3px;
            left: 0;
            right: 0;
            transition: all .3s ease-in-out;
        }

        &:hover:before {
          width: 100%;
        }
      }
    }
    .active-primary-menus {
      visibility: visible !important;
      opacity: 1 !important;
    }
    }
    .active {
      height: 100%;
    }
    .btn-wrap {
      cursor: pointer;
      position: absolute;
      right: 80px;
      top: 50px;
      width: 50px;
      height: 50px;
      background: $golden-fizz;
      border-radius: 100%;
      -webkit-box-shadow: 0px 0px 57px -5px rgba(67,69,73,1);
    -moz-box-shadow: 0px 0px 57px -5px rgba(67,69,73,1);
    box-shadow: 0px 0px 57px -5px rgba(67,69,73,1);
    transition: all .3s ease-in-out;
    z-index: 9;
    .hamburger {
      position: relative;
      width: 50%;
        height: 2px;
        margin: 50% auto;
      background: $steel-grey;

      &:before {
        position: absolute;
          content: "";
          width: 100%;
          height: 2px;
          top: -18px;
          left: 0;
          right: 0;
          margin: 50% auto;
        background: $steel-grey;
      }

      &:after {
        position: absolute;
          content: "";
          width: 100%;
          height: 2px;
          top: -8px;
          left: 0;
          right: 0;
          margin: 50% auto;
        background: $steel-grey;
      }
    }
    .active-menu {
      height: 0;
      transition: all .9s ease-in-out;

      &:before {
        background: #ffffff;
        top: -15px;
        transform: rotate(130deg);
        transition: all .9s ease-in-out;
      }

      &:after {
        background: #ffffff;
        top: -15px;
        transform: rotate(227deg);
        transition: all .9s ease-in-out;
      }
    }
    }
    .active-btn-wrap {
      background: $steel-grey;
    }
  }

View Compiled

$(document).ready(function(){

  function openMenu() {
    $('.btn-wrap').click(function(e){
      e.preventDefault();
      if ($('.btn-wrap').hasClass('active-btn-wrap')) {
        $(this).removeClass('active-btn-wrap');
        setTimeout(function(){
          $('ul.primary-menus').removeClass('active-primary-menus');
        }, 500);
        setTimeout(function() {
          $('ul.primary-menus li:nth-child(1)').css('top', '-350px');
          $('ul.primary-menus li:nth-child(1)').css('transition', 'all .7s ease-in-out');
        }, 100);
        setTimeout(function() {
          $('ul.primary-menus li:nth-child(2)').css('top', '-350px');
          $('ul.primary-menus li:nth-child(2)').css('transition', 'all .7s ease-in-out');
        }, 200);
        setTimeout(function() {
          $('ul.primary-menus li:nth-child(3)').css('top', '-350px');
          $('ul.primary-menus li:nth-child(3)').css('transition', 'all .7s ease-in-out');
        }, 300);
      }else {
        $(this).addClass('active-btn-wrap');
        setTimeout(function(){
          $('ul.primary-menus').addClass('active-primary-menus');
        }, 500);
        setTimeout(function(){
          $('ul.primary-menus li:nth-child(1)').css('top', '0px');
          $('ul.primary-menus li:nth-child(1)').css('transition', 'all .7s ease-in-out');
        }, 1300)
        setTimeout(function(){
          $('ul.primary-menus li:nth-child(2)').css('top', '0px');
          $('ul.primary-menus li:nth-child(2)').css('transition', 'all .7s ease-in-out');
        }, 1000)
        setTimeout(function(){
          $('ul.primary-menus li:nth-child(3)').css('top', '0px');
          $('ul.primary-menus li:nth-child(3)').css('transition', 'all .7s ease-in-out');
        }, 700)
      }

      if ($('.menu-wrap').hasClass('active')) {
        setTimeout(function(){
          $('.menu-wrap').removeClass('active');
        }, 500)
      }else {
        setTimeout(function(){
          $('.menu-wrap').addClass('active'); 
        }, 500)
        
      }
      
      if ($('.hamburger').hasClass('active-menu')) {
        $('.hamburger').removeClass('active-menu');
      }else {
        $('.hamburger').addClass('active-menu');
      }
    
    })
  }

  openMenu();

})

This Pen is owned by Donya.Gholiha on CodePen. It is a fork of this Pen.

See more by @Donyagholiha on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.