"
Team:Valencia Biocampus/ArtAndMore
From 2014.igem.org
(Difference between revisions)
| Line 5: | Line 5: | ||
<html> | <html> | ||
| + | <style> | ||
| + | .pics { | ||
| + | margin:auto; | ||
| + | margin:0px auto; | ||
| + | position:relative; | ||
| + | height:500px; | ||
| + | width:800px; | ||
| + | } | ||
| + | .pics a { | ||
| + | background:#fff; | ||
| + | display:inline; | ||
| + | float:left; | ||
| + | width:auto; | ||
| + | padding:10px 10px 30px 10px; | ||
| + | text-align:center; | ||
| + | text-decoration:none; | ||
| + | color:#333; | ||
| + | font-size:28px; | ||
| + | font-family:'Nothing You Could Do', cursive; | ||
| + | font-weight:bold; | ||
| + | -webkit-box-shadow:0px 0px 10px rgba(0,0,0,1); | ||
| + | -moz-box-shadow:0px 0px 10px rgba(0,0,0,1); | ||
| + | box-shadow:0px 0px 10px rgba(0,0,0,1); | ||
| + | -webkit-transition:all .30s; | ||
| + | -moz-transition:all .30s; | ||
| + | -o-transition:all .30s; | ||
| + | transition:all .30s; | ||
| + | position:absolute; | ||
| + | } | ||
| + | .pics img { | ||
| + | display:block; | ||
| + | padding-bottom:20px; | ||
| + | } | ||
| + | .pics a:hover { | ||
| + | z-index:100; | ||
| + | } | ||
| + | .pics a:after { | ||
| + | content:attr(title); | ||
| + | } | ||
| + | /* Pictures placement, scaling and rotation */ | ||
| + | |||
| + | .pics li:nth-child(1n) a { | ||
| + | -webkit-transform:rotate(30deg) scale(0.7,0.7); | ||
| + | -moz-transform:rotate(30deg) scale(0.7,0.7); | ||
| + | transform:rotate(30deg) scale(0.7,0.7); | ||
| + | top:0%; | ||
| + | left:60%; | ||
| + | } | ||
| + | .pics li:nth-child(2n) a { | ||
| + | -webkit-transform:rotate(-30deg) scale(0.7,0.7); | ||
| + | -moz-transform:rotate(-30deg) scale(0.7,0.7); | ||
| + | transform:rotate(-30deg) scale(0.7,0.7); | ||
| + | top:40%; | ||
| + | left:80%; | ||
| + | } | ||
| + | .pics li:nth-child(3n) a { | ||
| + | -webkit-transform:rotate(40deg) scale(0.7,0.7); | ||
| + | -moz-transform:rotate(40deg) scale(0.7,0.7); | ||
| + | transform:rotate(40deg) scale(0.7,0.7); | ||
| + | top:50%; | ||
| + | left:-10%; | ||
| + | } | ||
| + | .pics li:nth-child(4n) a { | ||
| + | -webkit-transform:rotate(-30deg) scale(0.7,0.7); | ||
| + | -moz-transform:rotate(-30deg) scale(0.7,0.7); | ||
| + | transform:rotate(-30deg) scale(0.7,0.7); | ||
| + | top:0%; | ||
| + | left:-10%; | ||
| + | } | ||
| + | .pics li:nth-child(5n) a { | ||
| + | -webkit-transform:rotate(-20deg) scale(0.8,0.8); | ||
| + | -moz-transform:rotate(-20deg) scale(0.8,0.8); | ||
| + | transform:rotate(-20deg) scale(0.8,0.8); | ||
| + | top:50%; | ||
| + | left:20%; | ||
| + | z-index:3; | ||
| + | } | ||
| + | .pics li:nth-child(6n) a { | ||
| + | -webkit-transform:rotate(30deg) scale(0.7,0.7); | ||
| + | -moz-transform:rotate(30deg) scale(0.7,0.7); | ||
| + | transform:rotate(30deg) scale(0.7,0.7); | ||
| + | top:60%; | ||
| + | left:55%; | ||
| + | } | ||
| + | .pics li:nth-child(7n) a { | ||
| + | -webkit-transform:rotate(10deg) scale(0.7,0.7); | ||
| + | -moz-transform:rotate(10deg) scale(0.7,0.7); | ||
| + | transform:rotate(10deg) scale(0.7,0.7); | ||
| + | top:0%; | ||
| + | left:25%; | ||
| + | } | ||
| + | |||
| + | /* Pictures rotation and scaling on hover */ | ||
| + | |||
| + | .pics li:nth-child(n) a:hover { | ||
| + | -webkit-transform:rotate(0deg) scale(1,1); | ||
| + | -moz-transform:rotate(0deg) scale(1,1); | ||
| + | transform:rotate(0deg) scale(1,1); | ||
| + | } | ||
| + | </style> | ||
<div class="container"> | <div class="container"> | ||
</html> | </html> | ||
Revision as of 18:41, 29 September 2014
Art & More
Video
All our videos coming soon
Photo
All our pictures coming soon
Drawings
A compilation of all our drawings
Epigenethic Music
Surprise! :)
