Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html >
- <head>
- <meta charset="UTF-8">
- <title>SNACK</title>
- <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
- <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Raleway:600,900'>
- <style>
- h1 {
- font: 600 1.5em/1 'Raleway', sans-serif;
- color: rgba(0,0,0,.5);
- text-align: center;
- text-transform: uppercase;
- letter-spacing: .5em;
- position: absolute;
- top: 25%;
- width: 100%;
- }
- span, span:after {
- font-weight: 900;
- color: #efedce;
- white-space: nowrap;
- display: inline-block;
- position: relative;
- letter-spacing: .1em;
- padding: .2em 0 .25em 0;
- }
- span {
- font-size: 4em;
- z-index: 100;
- text-shadow: .04em .04em 0 #9cb8b3;
- }
- span:after {
- content: attr(data-shadow-text);
- color: rgba(0,0,0,.35);
- text-shadow: none;
- position: absolute;
- left: .0875em;
- top: .0875em;
- z-index: -1;
- -webkit-mask-image: url(http://f.cl.ly/items/1t1C0W3y040g1J172r3h/mask.png);
- }
- video#bgvid {
- position: fixed;
- top: 50%;
- left: 50%;
- min-width: 100%;
- min-height: 100%;
- width: auto;
- height: auto;
- z-index: -100;
- -ms-transform: translateX(-50%) translateY(-50%);
- -moz-transform: translateX(-50%) translateY(-50%);
- -webkit-transform: translateX(-50%) translateY(-50%);
- transform: translateX(-50%) translateY(-50%);
- background: url(image.jpg) no-repeat;
- background-size: cover;
- }
- </style>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
- </head>
- <video playsinline autoplay loop poster="image.jpg" id="bgvid">
- <source src="http://lumia.ws/1.mp4" type="video/mp4">
- <script>
- var video = document.currentScript.parentElement;
- video.volume = 0.0;
- </script>
- </video>
- <body>
- <h1>.<br><span data-shadow-text="SNACK">SNACK</span><br>.</h1>
- <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement