React for Developers at #irDevConf ■ Presentation Cover.
A Pen by Siamak Mokhtari on CodePen.
/! Created by SiamakMokhtari Twitter: @siamak. | |
.circle.jiggle | |
.hold | |
h1 React for Developers | |
h6 Hello World! | |
footer #irDevConf ■ @siamak |
React for Developers at #irDevConf ■ Presentation Cover.
A Pen by Siamak Mokhtari on CodePen.
@import url(https://fonts.googleapis.com/css?family=PT+Serif:700|Roboto+Mono); | |
* { | |
box-sizing: border-box; | |
} | |
html { | |
background-color: #FFF; | |
width: 100%; | |
height: 100%; | |
padding: 1.1rem 1.2rem; | |
font: 1rem PT Serif, Roboto Mono, sans-serif; | |
color: #FFF; | |
} | |
body { | |
display: flex; | |
position: relative; | |
width: 100%; | |
height: 100%; | |
background-color: #2C4BD6; | |
padding: 0; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
} | |
.circle { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
background-color: #2C4BD6; | |
box-shadow: 0 9px 26px -8px rgba(0, 0, 0, 0.3), | |
8px -11px 6px -12px rgba(0, 0, 0, 0.2), | |
-8px -11px 6px -12px rgba(0, 0, 0, 0.2); | |
border-radius: 100%; | |
width: 20rem; | |
max-width: 80vw; | |
z-index: 1px; | |
&:before { | |
content: ''; | |
float: right; | |
padding-bottom: 100%; | |
} | |
} | |
.hold { | |
position: relative; | |
text-align: center; | |
z-index: 2; | |
} | |
h1 { | |
font-weight: bold; | |
font-size: 3.35rem; | |
line-height: 4rem; | |
letter-spacing: -0.01em; | |
margin-top: 2rem; | |
margin-bottom: 1.25rem; | |
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.312); | |
} | |
h6 { | |
font-family: Roboto Mono; | |
font-weight: 400; | |
font-size: 1.35rem; | |
line-height: 2rem; | |
letter-spacing: -0.015em; | |
margin: 0; | |
color: #F7F3F1; | |
} | |
footer { | |
position: absolute; | |
bottom: 2em; | |
left: 50%; | |
letter-spacing: 2px; | |
transform: translateX(-50%); | |
font-size: 1.125em; | |
font-family: Roboto Mono; | |
color: #F7F3F1; | |
} | |
.jiggle { | |
will-change: transform; | |
animation: jiggle 1s infinite alternate; | |
animation-timing-function: cubic-bezier(0, 0.15, 1, 1); | |
} | |
@keyframes jiggle { | |
0% { | |
transform: translate(-50%, -50%) rotate(14deg); | |
} | |
40% { | |
transform: translate(-50%, -50%) scale(1.1); | |
} | |
70% { | |
transform: translate(-50%, -50%) scale(0.86); | |
} | |
100% { | |
transform: translate(-50%, -51%) rotate(-14deg) scale(1) | |
} | |
} |