<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/pieter-biesemans/pen/gXpGQR" />
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Josefin+Slab|Open+Sans|Saira+Extra+Condensed:600'>
<style class="cp-pen-styles">div {
position: absolute;
box-sizing: border-box;
margin: 0;
padding: 0;
overflow: hidden;
}
div:before, div:after {
content: '';
position: absolute;
display: block;
box-sizing: border-box;
}
body {
top: 0;
left: 0;
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
font-size: 1.65vw;
font-family: 'Open Sans', sans-serif;
background: #f4eae0;
overflow-x: hidden;
}
body .card {
top: 10vh;
left: 23vw;
width: 54vw;
height: 54vw;
background: #e3e7d9;
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}
body .card .text-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
body .card .text-bg > div {
padding: 1em 1.5em 1.5em 1.5em;
}
body .card .text-bg > div.tl {
top: 0;
left: 0;
}
body .card .text-bg > div.tr {
top: 0;
right: 0;
}
body .card .text-bg > div.bl {
bottom: 0;
left: 0;
}
body .card .text-bg > div.br {
bottom: 0;
right: 0;
}
body .card .plusses {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
body .card .plusses > div {
width: 5%;
height: 0.25%;
background: black;
transform: translate(-50%, -50%);
overflow: visible;
}
body .card .plusses > div:after {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
transform: rotate(90deg);
}
body .card .plusses > div.tl {
top: 23%;
left: 21.5%;
}
body .card .plusses > div.tr {
top: 23%;
right: 16.5%;
}
body .card .plusses > div.bl {
bottom: 20%;
left: 21.5%;
}
body .card .plusses > div.br {
bottom: 20%;
right: 16.5%;
}
body .card .text-title {
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
}
body .card .text-title > div {
width: 100%;
height: auto;
text-transform: uppercase;
}
body .card .text-title .top, body .card .text-title .bottom {
opacity: 0.75;
top: 63%;
font-size: 3.9em;
font-family: 'Saira Extra Condensed', sans-serif;
background: -webkit-linear-gradient(-45deg, #fecd80 0%, #fe6519 25%, #e40005 50%, #072c8c 75%, #3895e0 100%);
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
mix-blend-mode: multiply;
}
body .card .text-title .bottom {
top: 68%;
}
body .card .text-title .subtitle {
bottom: 10%;
padding: 0.5em;
font-family: 'Josefin Slab', serif;
}
body .card .skulls {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
body .card .skulls .skull {
opacity: 0.75;
top: 15%;
left: 25%;
width: 50%;
height: auto;
mix-blend-mode: multiply;
}
body .card .skulls .skull1 {
top: 17%;
left: 17%;
}
body .card .skulls .skull2 {
top: 16%;
left: 18%;
}
body .card .skulls .skull3 {
top: 15%;
left: 19%;
}
body .card .skulls .skull4 {
top: 15%;
left: 20%;
}
body .card .skulls .skull5 {
top: 15%;
left: 30%;
}
body .card .skulls .skull6 {
top: 15%;
left: 31%;
}
body .card .skulls .skull7 {
top: 16%;
left: 32%;
}
body .card .skulls .skull8 {
top: 17%;
left: 33%;
}
</style></head><body>
<!-- define SVG elements -->
<svg>
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#fecd80" />
<stop offset="25%" stop-color="#fe6519" />
<stop offset="50%" stop-color="#e40005" />
<stop offset="75%" stop-color="#072c8c" />
<stop offset="100%" stop-color="#3895e0" />
</linearGradient>
</defs>
</svg>
<svg>
<symbol id="skull" viewBox="0 0 50 50">
<path d="M47.2,22.9c0.4-2.1-0.7-1.4-1.4-4c-0.2-0.9-0.3-2.4-0.3-3.4c0-8.6-9-15.4-20.4-15.5v0c0,0-0.1,0-0.1,0 c0,0-0.1,0-0.1,0v0C13.5,0.1,4.5,6.9,4.5,15.5c0,0.9-0.1,2.5-0.3,3.4c-0.7,2.6-1.8,1.9-1.4,4c0.1,0.4-0.8,1.9,0.1,2.7 c1.3,1.2,1.7,11.5,2.8,12c0.9,0.4,3.7,2.2,4.4,2.5c1,0.4,1.5-0.2,1.8,0c1,0.7,3.5-0.6,4.9,0.1c1.8,1-5,2.4-5.5,5.5 c-0.4,2.3,1.4,4.5,2.1,4.3c1.7-0.5,5.1-3.4,7.8-3.5c1.9-0.1,2.4-0.1,3.8-0.1v0c0,0,0.1,0,0.1,0c0,0,0.1,0,0.1,0v0 c1.4,0,1.8-0.1,3.8,0.1c2.7,0.2,6.1,3,7.8,3.5c0.7,0.2,2.5-1.9,2.1-4.3c-0.6-3.2-7.4-4.5-5.5-5.5c1.3-0.7,3.9,0.6,4.9-0.1 c0.4-0.3,0.8,0.4,1.8,0c0.8-0.3,3.5-2.2,4.4-2.5c1.1-0.4,1.4-10.8,2.8-12C48,24.8,47.1,23.4,47.2,22.9z M15.2,31.4 c-6.7,2.7-7.4-2.5-7.8-5.4c-0.7-4.9,3.6-5.4,7.8-5.4c4.2,0,7.3,1,7.3,4S19.1,29.8,15.2,31.4z M25.1,37.8v-0.1 C25.1,37.7,25,37.7,25.1,37.8c-0.1-0.1-0.1-0.2-0.2-0.2c0,0,0,0,0,0v0.2c-1.4,1-2.9,0-2.8-1.5c1.6-2.6,1.6-4.8,2.9-4.9 c1.1,0.1,1.2,2.3,3.4,5C29,38.2,26.2,39,25.1,37.8z M42.7,25.9c-0.4,3-1.2,8.1-7.8,5.4c-3.9-1.6-7.3-3.9-7.3-6.9s3.1-4,7.3-4 C39.1,20.5,43.4,21,42.7,25.9z"/>
</symbol>
</svg>
<div class="card" id="scene">
<div class="text-bg" data-depth="0.05">
<div class="tl">
@Nick Kumbari<br>
#death
</div>
<div class="tr">
@Yoblivion<br>
#copy
</div>
<div class="bl">
Daily Vanitas
</div>
<div class="br">
006
</div>
</div>
<div class="plusses" data-depth="0.1">
<div class="tl"></div>
<div class="tr"></div>
<div class="bl"></div>
<div class="br"></div>
</div>
<div class="text-title" data-depth="0.15">
<div class="top">diplopia</div>
<div class="bottom">cornucopia</div>
<div class="subtitle">Two's a crowd</div>
</div>
<div class="skulls" data-depth="0.20">
<div class="skull skull1">
<svg id="skull" viewBox="0 0 50 50" fill='url(#gradient)'>
<use xlink:href="#skull" />
</svg>
</div>
<div class="skull skull2">
<svg id="skull" viewBox="0 0 50 50" fill='url(#gradient)'>
<use xlink:href="#skull" />
</svg>
</div>
<div class="skull skull3">
<svg id="skull" viewBox="0 0 50 50" fill='url(#gradient)'>
<use xlink:href="#skull" />
</svg>
</div>
<div class="skull skull4">
<svg id="skull" viewBox="0 0 50 50" fill='url(#gradient)'>
<use xlink:href="#skull" />
</svg>
</div>
<div class="skull skull5">
<svg id="skull" viewBox="0 0 50 50" fill='url(#gradient)'>
<use xlink:href="#skull" />
</svg>
</div>
<div class="skull skull6">
<svg id="skull" viewBox="0 0 50 50" fill='url(#gradient)'>
<use xlink:href="#skull" />
</svg>
</div>
<div class="skull skull7">
<svg id="skull" viewBox="0 0 50 50" fill='url(#gradient)'>
<use xlink:href="#skull" />
</svg>
</div>
<div class="skull skull8">
<svg id="skull" viewBox="0 0 50 50" fill='url(#gradient)'>
<use xlink:href="#skull" />
</svg>
</div>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdn.jsdelivr.net/npm/parallax-js@3.1.0/dist/parallax.min.js'></script>
<script >/*
This Codepen is in the Public Domain.
You can use it for whatever purpose you like, except evil.
Based on this amazing Dribbble shot: https://dribbble.com/shots/2753476-Double-Skull-006
Please check out Nick Kumbari's other work, follow him and send him lots of good vibes
Check out this great pen on SVG symbol re-use by Peter Mouland: https://codepen.io/peter-mouland/pen/JErvZY?editors=1000
Parallax effect made with the super-useful Parallax.js library by Mathew Wagerfield: http://matthew.wagerfield.com/parallax/
*/
var scene = document.getElementById('scene');
var parallaxInstance = new Parallax(scene);
//# sourceURL=pen.js
</script>
</body></html>
