<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.