<svg style="display: none;">
  <symbol id="dribbble-logo" viewBox="0 0 32 32">
    <circle fill="#EA4C89" cx="16" cy="16" r="16"/><path fill="#C02261" d="M16 .002c-8.838 0-16 7.164-16 16s7.162 16 16 16 16-7.164 16-16-7.164-16-16-16zm10.498 7.744c1.72 2.184 2.773 4.912 2.855 7.88-3.59-.628-6.686-.647-9.36-.223-.34-.778-.688-1.534-1.046-2.266 2.87-1.18 5.442-2.9 7.55-5.39zm-1.84-1.912c-1.885 2.287-4.25 3.86-6.926 4.932-1.713-3.174-3.476-5.82-4.883-7.75 1.01-.247 2.062-.38 3.147-.38 3.303 0 6.325 1.207 8.66 3.198zM10.253 3.937c1.36 1.817 3.172 4.45 4.943 7.676-3.754 1.03-7.953 1.31-12.203 1.32.938-3.975 3.652-7.27 7.26-8.996zM2.633 16l.013-.43h.072c4.762 0 9.49-.313 13.73-1.562.315.643.626 1.303.93 1.982-5.577 1.635-9.054 5.305-11.437 8.797-2.054-2.35-3.304-5.424-3.304-8.786h-.002zM7.89 26.614c2.255-3.398 5.4-6.76 10.514-8.173 1.195 3.064 2.17 6.407 2.687 9.917-1.568.65-3.287 1.012-5.09 1.012-3.05 0-5.86-1.028-8.11-2.756zm15.66.41c-.548-3.208-1.444-6.267-2.522-9.103 2.338-.295 5.025-.223 8.142.35-.624 3.622-2.706 6.75-5.62 8.755v-.002z"/>
  </symbol>
</svg>

<div class="dribbble-card">
  <div class="logo">
    <svg role="img" aria-labeledby="icon-logo">
      <title id="icon-logo">Dribbble Logo</title>
      <use xlink:href="#dribbble-logo"></use>
    </svg>
    <span class="badge" aria-label="Notification badge">2</span>
  </div>
  <h3><span>x2</span> Dribbble Invite</h3>
  <a href="#0">Get</a>
</div>

$brandPrimary: #ed548f;
$brandSecondary: #50bde0;

html, body { height: 100vh; }

body {
  background: linear-gradient(45deg, darken($brandPrimary,20%) 0%, $brandPrimary 100%);
  margin: 50px;
  height: 100%;
  perspective: 2000px;
  overflow: hidden;
}

.dribbble-card {
  
  background: #fff;
  border-radius: 15px;
  padding: 130px 30px 100px;
  max-width: 300px;
  text-align: center;
  margin: 0 auto;
  transform: rotateX(32deg) rotateZ(-32deg) scale(0);
  animation: rise 1s .3s forwards;
  opacity: 0;
  will-change: transform, opacity;
  
  .logo {
    width: 150px;
    height: 150px;
    margin: 0 auto;
    border-radius: 100%;
    box-shadow: 0 0 30px darken($brandPrimary,20%);
    position: relative;
    svg {
      width: 150px;
      height: 150px;
      animation: rotate 1s forwards;
      will-change: transform;
    }
  }
  
  .badge {
    background: $brandSecondary;
    width: 40px;
    height: 40px;
    border-radius: 100%;
    color: #fff;
    display: block;
    font-size: 25px;
    line-height: 40px;
    font-weight: bold;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    animation: appear .3s 1.2s forwards;
    will-change: transform, opacity;
  }
  
  h3 {
    font-size: 25px;
    color: $brandPrimary;
    margin-bottom: 100px;
  }
  
  h3 span {
    color: $brandSecondary;
  }
  
  a {
    background: $brandPrimary;
    display: inline-block;
    color: #fff;
    padding: 8px 50px;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 20px;
    border-radius: 30px;
    font-weight: bold;
  }
  
}

@keyframes rise {
  0% {
    transform: rotateX(0) rotateZ(-0) scale(1);
  }
  50% {
    transform: rotateX(32deg) rotateZ(-32deg) scale(1.5);
  }
  100% {
    opacity: 1;
    box-shadow: -30px 30px 54px 0 rgba(0, 0, 0, 0.5);
    transform: rotateX(32deg) rotateZ(-32deg) scale(1.3);
  }
}

@keyframes appear {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(3);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes rotate {
  100% { transform: rotate(360deg); }
}

// inspiration: https://dribbble.com/shots/2827016-2-Dribbble-Invite