Freephotos.cc is LIVE!

HTML
<div class="wrapper"> <h1 data-heading="Freephotos.cc">Freephotos.cc</h1> </div> <a class="animated infinite wobble" href="https://freephotos.cc/" target="_blank">Check it out!</a>
SCSS
$red: #f3576c; $purple: #3e2e6a; $blue: #130b52; $bg: #fbe6d3; html, body { height: 100%; width: 100%; overflow: hidden; } body { background: $bg; font-family: 'Oswald', sans-serif; display: flex; justify-content: center; align-items: center; flex-direction: column; } h1 { font-size: 135px; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -50%); position: absolute; font-weight: 900; } a { font-size: 50px; text-decoration: none; color: $purple; animation-duration: 3s; animation-delay: 10s; animation-iteration-count: infinite; margin-bottom: 100px; cursor: pointer; } .wrapper { width: 100%; margin: 0 auto; height: 100%; h1 { color: $bg; text-transform: uppercase; width: 100%; text-align: center; text-shadow: -1px -1px 0 $purple, 1px -1px 0 $purple, -1px 1px 0 $purple, 1px 1px 0 $purple; &:after { content: attr(data-heading); position: absolute; left: 0; top: 0; z-index: 2; overflow: hidden; color: $red; transform: translate(0.4vw, 0.3vh); mix-blend-mode: darken; text-align: center; width: 100%; text-shadow: 1px 0px 0px $purple, 0px 1px 0px $blue, 2px 1px 0px $purple, 1px 2px 0px $blue, 3px 2px 0px $purple, 2px 3px 0px $blue, 4px 3px 0px $purple, 3px 4px 0px $blue, 5px 4px 0px $purple, 4px 5px 0px $blue, 6px 5px 0px $purple, 5px 6px 0px $blue, 7px 6px 0px $purple; } } }
JAVASCRIPT
Expand for more options Login