|
@font-face { |
|
font-family: 'Princess'; |
|
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/PrincesSANDTHEFROG.woff") format("woff"); |
|
font-weight: normal; |
|
font-style: normal; |
|
} |
|
body { |
|
margin: 0; |
|
font-family: 'Princess'; |
|
height: 100vh; |
|
overflow: hidden; |
|
} |
|
body .container { |
|
height: 0px; |
|
left: 0; |
|
position: absolute; |
|
right: 0; |
|
margin: auto; |
|
} |
|
body .container .wrap { |
|
background: white; |
|
position: absolute; |
|
height: 100vh; |
|
width: 100%; |
|
} |
|
body .container video { |
|
mix-blend-mode: multiply; |
|
top: calc(50% + 40px); |
|
position: absolute; |
|
left: 0; |
|
width: 940px; |
|
-webkit-transform: translateY(-50%); |
|
transform: translateY(-50%); |
|
right: 0; |
|
margin: auto; |
|
} |
|
body .container img.a { |
|
position: absolute; |
|
top: 0; |
|
width: 100%; |
|
left: 0; |
|
z-index: 0; |
|
} |
|
body .container img.b { |
|
position: absolute; |
|
mix-blend-mode: exclusion; |
|
width: 640px; |
|
top: calc(50% - 40px); |
|
-webkit-transform: translateY(-50%); |
|
transform: translateY(-50%); |
|
position: absolute; |
|
left: 0; |
|
right: 0; |
|
margin: auto; |
|
} |
|
body .container_inner { |
|
mix-blend-mode: lighten; |
|
} |
|
body .container_inner h1 { |
|
color: white; |
|
font-weight: normal; |
|
font-size: 15px; |
|
opacity: 0; |
|
-webkit-transition: all 0.8s 0.2s; |
|
transition: all 0.8s 0.2s; |
|
} |
|
body .container_inner p { |
|
color: white; |
|
opacity: 0.6; |
|
line-height: 18px; |
|
font-size: 9px; |
|
margin: 16px 0; |
|
opacity: 0; |
|
-webkit-transition: all 0.8s 0.4s; |
|
transition: all 0.8s 0.4s; |
|
} |
|
body .container_inner img { |
|
opacity: 0; |
|
-webkit-transition: all 0.8s 0.3s; |
|
transition: all 0.8s 0.3s; |
|
} |
|
body .container_inner a { |
|
color: white; |
|
font-size: 12px; |
|
border-bottom: 1px solid white; |
|
opacity: 0; |
|
-webkit-transition: all 0.8s 0.5s; |
|
transition: all 0.8s 0.5s; |
|
} |
|
body .container .wrap_inner { |
|
position: absolute; |
|
top: calc(50%); |
|
text-align: center; |
|
position: absolute; |
|
left: -69px; |
|
right: 0; |
|
mix-blend-mode: screen; |
|
margin: auto; |
|
width: 280px; |
|
-webkit-transform: translateY(-50%); |
|
transform: translateY(-50%); |
|
} |
|
|
|
.button { |
|
position: absolute; |
|
z-index: 3; |
|
color: white; |
|
background: rgba(61, 21, 24, 0.54); |
|
display: block; |
|
width: 132px; |
|
text-align: center; |
|
border-radius: 2px; |
|
top: 50%; |
|
padding: 13px; |
|
right: 0; |
|
margin: auto; |
|
-webkit-transform: translateY(-50%); |
|
transform: translateY(-50%); |
|
font-size: 12px; |
|
left: -90px; |
|
cursor: pointer; |
|
-webkit-transition: background .7s; |
|
transition: background .7s; |
|
} |
|
.button:hover { |
|
background: #3d1518; |
|
} |
|
|
|
/* YAY CSS TRICKS! */ |
|
img.a { |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
/* Preserve aspet ratio */ |
|
min-width: 100%; |
|
min-height: 100%; |
|
} |
|
|
|
#bg { |
|
position: fixed; |
|
top: -50%; |
|
left: -50%; |
|
width: 200%; |
|
height: 200%; |
|
} |
|
|
|
#bg img { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
margin: auto; |
|
min-width: 50%; |
|
min-height: 50%; |
|
} |
This comment has been minimized.
as seen here https://codepen.io/jcoulterdesign/pen/QagxgJ/