Line 3: | Line 3: | ||
<style type='text/css'> | <style type='text/css'> | ||
+ | /* SLIDER (For Willhelm)*/ | ||
+ | .container-slider { | ||
+ | display:flex-inline; | ||
+ | width:70vw; | ||
+ | height:20vw; | ||
+ | overflow:hidden; | ||
+ | justify-content:center; | ||
+ | } | ||
+ | .simple-ss { | ||
+ | min-width:212vw; | ||
+ | min-height:20vw; | ||
+ | background-color:red; | ||
+ | margin:auto; | ||
+ | background-image:url("https://scontent-cdg2-1.xx.fbcdn.net/t31.0-8/14500282_10210865910546577_6345672906618524454_o.jpg"); | ||
+ | background-position:0; | ||
+ | background-repeat:no-repeat; | ||
+ | background-size:212vw 20vw; | ||
+ | display:flex; | ||
+ | justify-content: flex-start; | ||
+ | |||
+ | /* ANIMATING STUFF */ | ||
+ | animation-name: slide; | ||
+ | animation-duration: 20s; | ||
+ | animation-direction: normal; | ||
+ | animation-timing-function: ease; | ||
+ | animation-iteration-count: infinite; | ||
+ | } | ||
+ | |||
+ | /* NOTE CODEPEN AUTOGENERATING -PREFIXES */ | ||
+ | @keyframes slide { | ||
+ | 0% {background-position:0 0;} | ||
+ | 16.66% {background-position:0 0;} | ||
+ | 33.32% {background-position:-71vw 0;} | ||
+ | 49.98% {background-position:-71vw 0;} | ||
+ | 66.64% {background-position:-142vw 0;} | ||
+ | 83.30% {background-position:-142vw 0;} | ||
+ | 100% {background-position:0 0;} | ||
+ | } | ||
#top_title, #sideMenu{ | #top_title, #sideMenu{ |
Revision as of 16:05, 13 October 2016