<div>
  <div class="card">
    <div class="card__left">
      <div class="card__content">
        <div class="center-text">
          A text <br />
          was written<br />
          here 
        </div>
        <div>
          <div class="card__content__icon" style="background-image: url('https://rampages.us/topsakal/wp-content/themes/egr-faculty/images/chem-icon.png')">
          </div>
        </div>
        <div class="center-text">
          <small>
            Some caption <br />
            or something else <br />
            here
          </small>
        </div>
      </div>
    </div>
    <div class="card__right">
    <div class="card__content">
        <div>
          <div class="card__content__icon align-top" style="background-image: url('https://rampages.us/topsakal/wp-content/themes/egr-faculty/images/chem-icon.png')">
        </div>
        <div>
          <h2>
            MY <br />
            BUSINESS  <br />
            CARD
          </h2>
        </div>
        <div>
          Some caption or <br />
          something else here <br />
          <b>mail@domain.com</b>
        </div>
      </div>      
    </div>
  </div>
</div>
$size: 100;

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  background-color: rgb(230,230,230);
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.2)
}

.card{
  width: calc(550px * #{$size / 100 });
  height: calc(450px * #{$size / 100 });
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  transform: rotate(-30deg);
  position: relative;
  z-index:1;
  
  &__left{
    background-color: rgba(230,230,230,1);
    width: 50%;
    transform: rotate(-6deg) skew(-6deg, -6deg);
    margin-right: -3px;
    border: 1px solid rgba(20,20,20, .2);
  }
  
  &__content {
    height: calc(100% - (80px * #{$size / 100 }));
    width: auto;
    margin: calc(18px * #{$size / 100 });
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    
    &__icon{
      display: flex;
      height: 64px;
      width: 64px;
      background-position: center bottom;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
  }
  
  &__content div{
    align-self: center; 
    margin-top: 8px;
  }
  
  &__right{
    background-color: rgba(230, 230, 230, 1);
    background-image: url(https://cdn1.designhill.com/uploads/pagefile/1541507080-14850242055be188084ba336-15014674.svg?ver=2.10.37);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
    transform: rotate(6deg) skew(6deg, 6deg);
    margin-left: -3px;
    color: rgb(32,32,32);
    border: 1px solid rgba(20,20,20, .3);
  }
  
  &::before{
    content: '';
    background-color: rgba(0,0,0,.7);
    position:absolute;
    bottom: 5px;
    right: calc(210px * #{$size / 100 });
    height: calc(130px * #{$size / 100 });
    width: calc(130px * #{$size / 100 });
    transform: rotate(45deg) skew(-32deg, -32deg);
    z-index:-1;
    box-shadow: 
      calc(180px* #{$size / 100 }) 
      calc(180px * #{$size / 100 }) 
      calc(30px * #{$size / 100 }) 
      calc(45px * #{$size / 100 }) 
      rgba(0,0,0,0.8);
  }
}

.center-text{
  text-align: center;
}
.align-top{
  position: absolute;
  top: 48px;
  left: 48px;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.