.main.card
.main-helper.card-helper
.image.float-left
%img{:src => "https://bit.ly/14bsqFY"}
.content.float-left
.title.bold
n:sevn
.subtitle
web dev + design
.subtitle.bold
%br
sven flickinger
.subtitle
web developer
.foooter.clear.center
munich, germany //
hc4e2k@gmail.com
View Compiled
@import url(https://fonts.googleapis.com/css?family=Droid+Sans);
* {
position: relative;
color: #000;
font-size: 14px;
font-family: 'Droid Sans', sans-serif;
}
a,
a:link,
a:hover,
a:visited {
color: #000;
text-decoration: none;
}
a:hover {
color: red;
}
#POSITION-RELATIVE,
#position-relative,
* {
position: relative;
}
#FLOAT-LEFT,
.float-left {
float: left;
}
#CLEAR,
.clear {
clear: both;
}
#CENTER,
.center {
text-align: center;
}
#BOLD,
.bold {
font-weight: bold;
}
#CARD,
.card,
.card-helper,
.card:before,
.card:after {
width: 320px;
height: 160px;
box-shadow: -4px 4px 24px rgba(0, 0, 0, 0.5);
padding: 20px;
border-radius: 8px;
background: #fff;
}
.card {
transform: rotate(-40deg) rotateX(20deg) rotateY(30deg);
-webkit-transform: rotate(-40deg) rotateX(20deg) rotateY(30deg);
margin: 80px auto;
}
.card-helper {
position: absolute;
top: 0;
left: 0;
}
.card:before,
.card:after {
content: "";
position: absolute;
left: 0;
background-image: url("https://bit.ly/14bsqFY");
background-repeat: no-repeat;
background-position: 20px 20px;
background-size: 130px;
}
.card:before {
transform: rotate(8deg);
-webkit-transform: rotate(8deg);
top: -20px;
z-index: -1;
}
.card:after {
transform: rotate(16deg);
-webkit-transform: rotate(16deg);
top: -40px;
z-index: -2;
}
.image {
margin: 0 20px 15px 0;
}
.image img {
width: 130px;
height: 130px;
border-radius: 4px;
}
.title {
font-size: 32px;
}
.card:hover {
transform: none;
-webkit-transform: none;
}
.card:hover:before,
.card:hover:after {
top: 0;
}
.card:hover:before {
transform: rotate(-32deg) rotateX(20deg) rotateY(30deg);
-webkit-transform: rotate(-24deg) rotateX(20deg) rotateY(30deg);
}
.card:hover:after {
transform: rotate(-32deg) rotateX(20deg) rotateY(30deg);
-webkit-transform: rotate(-32deg) rotateX(20deg) rotateY(30deg);
}
.card,
.card:before,
.card:after,
.card:hover,
.card:hover:before,
.card:hover:after {
transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
}
.card,
.card:before,
.card:after {
transition-delay: 0.8s;
-webkit-transition-delay: 0.8s;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.