CSS
html, body {
height: 100%;
margin: 0;
}
body {
-ms-flex-align: center;
align-items: center;
background: #eee;
display: -ms-flexbox;
display: flex;
font: 16px/1.1 "Montserrat", sans-serif;
}
.card,
.envelope {
background: #fff;
box-shadow: 0 8px 3px -1px rgba(0, 0, 0, .7);
height: 21em;
margin: 0 auto;
padding: 2em;
position: relative;
width: 15em;
}
.envelope {
background: #cb231c;
box-shadow: 0 3px 2px rgba(0, 0, 0, .8);
margin: -2em -2em;
position: absolute;
transform: rotate(-8deg);
z-index: -1;
}
h1 {
font-size: 2.5em;
font-weight: 600;
margin: 0;
text-transform: uppercase;
width: 90%;
}
em {
color: #cc2119;
font-style: normal;
}
.heart {
position: absolute;
bottom: 4em;
right: 4em;
}
.heart:before,
.heart:after {
background: #cd231b;
border-radius: 50px 50px 0 0;
content: "";
height: 25px;
left: 15px;
position: absolute;
transform: rotate(-45deg);
transform-origin: 0 100%;
width: 15px;
}
.heart:after {
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
}
