Difference between revisions of "Team:CHINA CD UESTC/Gallery"
Line 34: | Line 34: | ||
/**************gallery******************/ | /**************gallery******************/ | ||
− | + | .gallery-container2 { | |
− | .gallery{ | + | padding:10px 0 0 0 ; |
− | + | position:relative; | |
− | + | width:90%; | |
− | + | ||
− | + | border-radius:5px; | |
} | } | ||
− | + | ||
− | . | + | /* css3 photo gallery styles */ |
− | + | .gallery2 { | |
− | + | width:1000px; | |
+ | margin:10px 0 0 40px; | ||
} | } | ||
− | . | + | .gallery2 a { |
− | + | display:inline-block; | |
− | + | height:200px; | |
− | + | position:relative; | |
+ | width:250px; | ||
+ | margin-left: 20px; | ||
+ | margin-right: 20px; | ||
+ | margin-top: 20px; | ||
+ | border: 10px solid #F2FFDE; | ||
+ | border-radius: 5px; | ||
} | } | ||
− | . | + | .gallery2 a img { |
− | + | cursor:pointer; | |
− | + | display:block; | |
− | + | height:100%; | |
+ | left:0px; | ||
+ | position:absolute; | ||
+ | top:0px; | ||
+ | width:100%; | ||
+ | z-index:1; | ||
+ | -moz-user-select: none; | ||
+ | -khtml-user-select: none; | ||
+ | user-select: none; | ||
+ | |||
+ | -moz-box-sizing:border-box; | ||
+ | -webkit-box-sizing:border-box; | ||
+ | box-sizing:border-box; | ||
+ | |||
+ | -webkit-transition-property:width, height, top, bottom, left, right, z-index, border; | ||
+ | -webkit-transition-duration:0.5s; | ||
+ | -moz-transition-property:width, height, top, bottom, left, right, z-index, border; | ||
+ | -moz-transition-duration:0.5s; | ||
+ | -o-transition-property:width, height, top, bottom, left, right, z-index, border; | ||
+ | -o-transition-duration:0.5s; | ||
+ | transition-property:width, height, top, bottom, left, right, z-index, border; | ||
+ | transition-duration:0.5s; | ||
} | } | ||
− | . | + | .gallery2 a:focus img { |
− | . | + | border:15px solid #fff; |
− | + | cursor:default; | |
− | + | height:250%; | |
+ | position:absolute; | ||
+ | width:250%; | ||
+ | z-index:25; | ||
+ | |||
+ | box-shadow:1px 1px 5px #888; | ||
+ | -moz-box-shadow:1px 1px 5px #888; | ||
+ | -webkit-box-shadow:1px 1px 5px #888; | ||
+ | -webkit-transition-property:width, height, top, bottom, left, right, z-index, border; | ||
+ | -webkit-transition-duration:0.5s; | ||
+ | -moz-transition-property:width, height, top, bottom, left, right, z-index, border; | ||
+ | -moz-transition-duration:0.5s; | ||
+ | -o-transition-property:width, height, top, bottom, left, right, z-index, border; | ||
+ | -o-transition-duration:0.5s; | ||
+ | transition-property:width, height, top, bottom, left, right, z-index, border; | ||
+ | transition-duration:0.5s; | ||
+ | } | ||
+ | |||
+ | /* custom focus rules */ | ||
+ | .gallery2 a:focus:nth-child(3n+1) img { | ||
+ | left:150px; | ||
+ | } | ||
+ | .gallery2 a:focus:nth-child(3n+2) img { | ||
+ | left:-50px; | ||
+ | } | ||
+ | .gallery2 a:focus:nth-child(3n+3) img { | ||
+ | left:-250px; | ||
+ | } | ||
+ | .gallery2 a:focus:nth-child(-n+3) img { | ||
+ | top:140px; | ||
+ | } | ||
+ | .gallery2 a:focus:nth-child(n+7) img { | ||
+ | top:-150px; | ||
+ | } | ||
+ | .gallery2 a:focus:nth-child(n+10) img { | ||
+ | top:-295px; | ||
+ | } | ||
+ | |||
+ | /* extra close layer */ | ||
+ | .gallery2 .close { | ||
+ | background:transparent; | ||
+ | cursor:pointer; | ||
+ | display:none; | ||
+ | height:352px; | ||
+ | left:170px; | ||
+ | position:absolute; | ||
+ | top:160px; | ||
+ | width:500px; | ||
+ | z-index:30; | ||
+ | } | ||
+ | .gallery2 a:focus ~ .close { | ||
+ | display:block; | ||
} | } | ||
p { | p { | ||
Line 82: | Line 161: | ||
<div id="RightContentText"> | <div id="RightContentText"> | ||
− | + | <div class="gallery-container2" id="gallery-container2"> | |
− | <div class="gallery"> | + | <div class="gallery2"> |
− | + | <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | |
− | + | <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | |
− | + | <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | |
− | + | <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | |
− | + | <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | |
− | + | <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | |
− | + | <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | |
− | + | <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | |
− | + | <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | |
− | + | <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | |
− | + | <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | |
− | + | <a tabindex="1"><img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | |
− | + | <span class="close"></span> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
+ | |||
Revision as of 02:36, 22 August 2015
<!DOCTYPE html>
GALLERY
We are a skillful and persistent group of nine Finns. We started as a group of students who didn't really know each other, assuming that we were going to spend our summer studying synthetic biology with strange colleagues. In the end we got a bunch of new friends and (in addition to studying synthetic biology) we just might have spent one of the best summers of our lives.