(29 intermediate revisions by the same user not shown) | |||
Line 114: | Line 114: | ||
/********************************* BANNER ********************************/ | /********************************* BANNER ********************************/ | ||
− | .banner { | + | .banner { |
background: url(https://static.igem.org/mediawiki/2016/5/5c/T--Bordeaux--SleepyBanner.jpg) no-repeat center center scroll; | background: url(https://static.igem.org/mediawiki/2016/5/5c/T--Bordeaux--SleepyBanner.jpg) no-repeat center center scroll; | ||
margin:0 auto; | margin:0 auto; | ||
− | padding : | + | padding-top:42%; |
-webkit-background-size: cover; | -webkit-background-size: cover; | ||
-moz-background-size: cover; | -moz-background-size: cover; | ||
-o-background-size: cover; | -o-background-size: cover; | ||
− | background-size: cover | + | background-size: cover |
} | } | ||
Line 276: | Line 276: | ||
background-color:#000000; | background-color:#000000; | ||
color:#72c9b6; | color:#72c9b6; | ||
+ | } | ||
+ | |||
+ | /********************************* CAROUSEL ********************************/ | ||
+ | |||
+ | .container{ | ||
+ | margin: 4% auto; | ||
+ | width: 210px; | ||
+ | height: 140px; | ||
+ | position: relative; | ||
+ | perspective: 1000px; | ||
+ | } | ||
+ | #carousel{ | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | position: absolute; | ||
+ | transform-style: preserve-3d; | ||
+ | animation: rotation 20s infinite linear; | ||
+ | } | ||
+ | |||
+ | #carousel:hover{ | ||
+ | animation-play-state: paused; | ||
+ | } | ||
+ | |||
+ | #carousel figure{ | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | width: 186px; | ||
+ | height: 116px; | ||
+ | left: 10px; | ||
+ | top: 10px; | ||
+ | background: black; | ||
+ | overflow: hidden; | ||
+ | border: solid 5px black; | ||
+ | } | ||
+ | |||
+ | #carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(2) { transform: rotateY(20deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(3) { transform: rotateY(40deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(4) { transform: rotateY(60deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(5) { transform: rotateY(80deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(6) { transform: rotateY(100deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(7) { transform: rotateY(120deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(8) { transform: rotateY(140deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(9) { transform: rotateY(160deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(10) { transform: rotateY(180deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(11) { transform: rotateY(200deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(12) { transform: rotateY(220deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(13) { transform: rotateY(240deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(15) { transform: rotateY(260deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(16) { transform: rotateY(280deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(17) { transform: rotateY(300deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(18) { transform: rotateY(320deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(19) { transform: rotateY(340deg) translateZ(500px);} | ||
+ | #carousel figure:nth-child(20) { transform: rotateY(360deg) translateZ(500px);} | ||
+ | |||
+ | img{ | ||
+ | |||
+ | cursor: pointer; | ||
+ | transition: all .5s ease; | ||
+ | } | ||
+ | |||
+ | @keyframes rotation{ | ||
+ | from{ | ||
+ | transform: rotateY(0deg); | ||
+ | } | ||
+ | to{ | ||
+ | transform: rotateY(360deg); | ||
+ | } | ||
} | } | ||
Line 298: | Line 366: | ||
.column img { width: 100%; padding: 5px 0px;} | .column img { width: 100%; padding: 5px 0px;} | ||
.logo{display:none}; | .logo{display:none}; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.icon {display:block;} | .icon {display:block;} | ||
.highlight {padding:15px 5px;} | .highlight {padding:15px 5px;} |
Latest revision as of 00:11, 20 October 2016