Happy Independence day India

HTML
<p> Saare jahaan se accha <br> <br> Hindustan Hamara <span> 70 </span> <p id="next"> Years of Independence for <div> INDIA</div>
SCSS
body { font: 400 1em/1.5 "Neuton"; background: #010100; color: rgba(255,255,255,.25); text-align: center; margin: 0 ; overflow:hidden; } p { text-transform: uppercase; letter-spacing: .5em; display: inline-block; border-width: 2px 0; padding: 0.5em 0em; position: absolute; top: 8%; left: 50%; width: 40em; margin: 0 0 0 -20em; span { font: 700 16em/1 "Oswald", sans-serif; letter-spacing: 0; padding: .0em 0 .325em; display: block; margin: 0 auto; text-shadow: 0 0 80px rgba(255,255,255,.5); /* Clip Background Image */ background: url("http://d2ndwzy1vf3r2d.cloudfront.net/ImageStore/images/politics/politics_latestnews/freedom%20fifhters-647x450.jpg") repeat-y; -webkit-background-clip: text; background-clip: text; /* Animate Background Image */ -webkit-text-fill-color: transparent; -webkit-animation: aitf 30s linear infinite; -text-fill-color: transparent; animation: aitf 30s linear infinite; /* Activate hardware acceleration for smoother animations */ -webkit-transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; transform: translate3d(0,0,0); backface-visibility: hidden; } } #next { text-transform: uppercase; letter-spacing: .5em; display: inline-block; border-width: 2px 0; padding: 0.5em 0em; position: absolute; top: 72%; left: 50%; width: 40em; margin: 0 0 0 -20em; } div { position: absolute; top: 80%; left: 50%; width: 40em; margin: 0 0 0 -20em; font-size:32px; letter-spacing:0.2em; background: url("http://www.techicy.com/wp-content/uploads/2015/01/Indian-Flag-Wallpapers-HD-Images-Free-Download-2.jpg") repeat-y; -webkit-background-clip: text; background-clip: text; /* Animate Background Image */ -webkit-text-fill-color: transparent; -webkit-animation: aitf 60s linear infinite; text-fill-color: transparent; animation: aitf 60s linear infinite; /* Activate hardware acceleration for smoother animations */ -webkit-transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; transform: translate3d(0,0,0); backface-visibility: hidden; } /* Animate Background Image */ @-webkit-keyframes aitf { 0% { background-position: 45% 0%; } 50% { background-position: 45% 200%; } 100%{background-position: 45% 0%; } }
JAVASCRIPT
Expand for more options Login