Inspired by @lauraalpinto: https://codepen.io/lauraalpinto/pen/qLzGBX?editors=0100
A Pen by Martin Møller Skarbiniks Pedersen on CodePen.
Inspired by @lauraalpinto: https://codepen.io/lauraalpinto/pen/qLzGBX?editors=0100
A Pen by Martin Møller Skarbiniks Pedersen on CodePen.
.card | |
.card-back | |
.line-numbers | |
div 1 | |
div 2 | |
div 3 | |
div 4 | |
div 5 | |
div 6 | |
div 7 | |
div 8 | |
div 9 | |
code | |
span.variable const | |
span.function aboutMe | |
span.operator = | |
span { | |
.indent | |
span.property name | |
span.operator : | |
span.string 'Martin Møller Skarbiniks Pedersen' | |
span , | |
.indent | |
span.property title | |
span.operator : | |
span.string 'Unix Guru' | |
span , | |
.indent | |
span.property contact | |
span.operator : | |
span { | |
.indent | |
span.property email | |
span.operator : | |
span.string 'martin@linux.com' | |
span , | |
.indent | |
span.property website | |
span.operator : | |
span.string 'wiki.20dage.dk' | |
span } | |
span } | |
.card-front | |
.line-numbers | |
div 1 | |
div 2 | |
div 3 | |
div 4 | |
div 5 | |
div 6 | |
div 7 | |
div 8 | |
div 9 | |
code | |
span.variable this | |
span . | |
span.method addEventListener | |
span ( | |
span.string 'mouseover' | |
span , | |
span.function () => | |
span { | |
.indent | |
span.variable this | |
span . | |
span.property flipCard | |
span = | |
span.boolean true | |
span ; | |
span }); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
// Colors | |
$blue: #29b6f6; | |
$green: #9ccc65; | |
$purple: #BA68C8; | |
$yellow: #FDD835; | |
$orange: #f57c00; | |
$red: #ef5350; | |
$cyan: #4dd0e1; | |
$pink: #E91E63; | |
$black-dark: #101010; | |
$black-light: #2c3e50; | |
$bg1: #E91E63; | |
$bg2: #9C27B0; | |
$white: whitesmoke; | |
$monospace: Consolas, "Lucida Console", monospace; | |
*, *:before, *:after { | |
box-sizing: border-box; | |
outline: none; | |
} | |
html { | |
font-family: 'Source Sans Pro', sans-serif; | |
font-size: 16px; | |
font-smooth: auto; | |
font-weight: 300; | |
line-height: 1.5; | |
color: #444; | |
} | |
body { | |
position: relative; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
width: 100%; | |
height: 100vh; | |
background: linear-gradient(45deg, $bg1, $bg2); | |
} | |
code { | |
font-family: "Lucida Console", Monaco, monospace; | |
font-size: 14px; | |
} | |
.card { | |
position: relative; | |
width: 30rem; | |
height: 15rem; | |
perspective: 150rem; | |
&-front, | |
&-back { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
margin: auto; | |
border-radius: 5px; | |
box-shadow: 0 1.5rem 4rem rgba(black, 0.4); | |
transition: 0.9s cubic-bezier(.25,.8,.25,1); | |
//transform-origin: left center; | |
backface-visibility: hidden; | |
overflow: hidden; | |
&:before, | |
&:after { | |
position: absolute; | |
} | |
&:before { | |
top: -40px; | |
right: -40px; | |
content: ''; | |
width: 80px; | |
height: 80px; | |
background-color: rgba(white,0.08); | |
transform: rotate(45deg); | |
z-index: 1; | |
} | |
&:after { | |
content: '+'; | |
top: 0; | |
right: 5px; | |
font-size: 24px; | |
transform: rotate(45deg); | |
z-index: 2; | |
} | |
} | |
&-front { | |
width: 100%; | |
height: 100%; | |
background: linear-gradient(45deg, $black-dark, $black-light); | |
&:after { | |
color: darken($black-light,6%); | |
} | |
} | |
&-back { | |
background: linear-gradient(-45deg, $black-dark, $black-light); | |
transform: rotateX(180deg); | |
&:after { | |
color: darken($black-light,15%); | |
} | |
} | |
&:hover &-front { | |
transform: rotateX(-180deg); | |
} | |
&:hover &-back { | |
transform: rotateX(0deg); | |
//z-index: 2 !important; | |
} | |
.line-numbers { | |
@extend code; | |
position: absolute; | |
top: 0; | |
left: 0; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
//width: 20px; | |
height: 100%; | |
margin: 0; | |
padding: 0 10px; | |
background-color: rgba(white,0.03); | |
font-size: 13px; | |
//line-height: 2.15; | |
> div { | |
padding: 2.5px 0; | |
opacity: 0.15; | |
} | |
} | |
code { | |
color: $white; | |
} | |
.indent { | |
padding-left: 30px; | |
} | |
.operator { | |
color: $cyan; | |
} | |
.string { | |
color: $green; | |
} | |
.variable { | |
color: $purple; | |
} | |
.property { | |
color: $red; | |
} | |
.method { | |
color: $blue; | |
} | |
.function { | |
color: $yellow; | |
} | |
.boolean { | |
color: $cyan; | |
} | |
} | |
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" /> | |
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" /> |