Difference between revisions of "Team:CHINA CD UESTC/Gallery"
Line 1: | Line 1: | ||
− | |||
{{Template:Team:CHINA_CD_UESTC/menu}} | {{Template:Team:CHINA_CD_UESTC/menu}} | ||
− | |||
<!DOCTYPE html> | <!DOCTYPE html> | ||
<!-- saved from url=(0028)http://www.whitefrontier.ch/ --> | <!-- saved from url=(0028)http://www.whitefrontier.ch/ --> | ||
− | <html | + | <html > |
<head> | <head> | ||
+ | <script type="text/javascript" src="https://2015.igem.org/Team:CHINA_CD_UESTC/homeJS.js?action=raw&ctype=text/js"></script> | ||
− | + | <link rel="stylesheet" href="https://2015.igem.org/Team:CHINA_CD_UESTC/Template:RightStyle.css?action=raw&ctype=text/css" type="text/css" /> | |
</head> | </head> | ||
− | <style type="text/css"> | + | <style type="text/css"> |
/************************************************* | /************************************************* | ||
− | + | whole right section | |
− | + | https://static.igem.org/mediawiki/2015/4/44/CHINA_CD_UESTC_TEAMbg.jpg | |
− | + | background-size: 180px; | |
***********************************************/ | ***********************************************/ | ||
#RightSection { | #RightSection { | ||
− | + | position: fixed; | |
− | + | left: 260px; | |
− | + | top: 0; | |
− | + | right: 0; | |
− | + | height:100%; | |
− | + | background:#F0F0F0; | |
− | + | background-image:url("https://static.igem.org/mediawiki/2015/4/44/CHINA_CD_UESTC_TEAMbg.jpg"); | |
− | + | overflow-y: scroll; | |
− | + | background-repeat: repeat; | |
− | + | background-size: 180px; | |
− | + | transition: all 200ms ease-out; | |
− | + | transform: translate3d(0, 0, 0); | |
− | + | z-index:1; | |
} | } | ||
/**************gallery******************/ | /**************gallery******************/ | ||
− | .gallery- | + | .gallery-items { |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
width:1000px; | width:1000px; | ||
− | margin:10px 0 0 | + | height: 1000px; |
+ | margin:10px 0 0 0; | ||
+ | position: relative; | ||
+ | left: -150px; | ||
} | } | ||
− | . | + | .gallery-items a { |
display:inline-block; | display:inline-block; | ||
− | height: | + | height:150px; |
position:relative; | position:relative; | ||
− | width: | + | width:230px; |
margin-left: 10px; | margin-left: 10px; | ||
margin-right: 10px; | margin-right: 10px; | ||
margin-top: 10px; | margin-top: 10px; | ||
− | |||
− | |||
} | } | ||
− | . | + | .gallery-items a img { |
cursor:pointer; | cursor:pointer; | ||
− | display:block; | + | display:inline-block; |
height:100%; | height:100%; | ||
left:0px; | left:0px; | ||
Line 67: | Line 58: | ||
top:0px; | top:0px; | ||
width:100%; | width:100%; | ||
− | z-index:1; | + | z-index:0; |
+ | border: 10px solid #fff; | ||
+ | box-shadow: 1px 1px 3px rgba(0,0,0,0.1); | ||
+ | |||
-moz-user-select: none; | -moz-user-select: none; | ||
Line 86: | Line 80: | ||
transition-duration:0.5s; | transition-duration:0.5s; | ||
} | } | ||
− | . | + | .gallery-items li:hover img{ |
border:15px solid #fff; | border:15px solid #fff; | ||
cursor:default; | cursor:default; | ||
− | height: | + | height:190%; |
position:absolute; | position:absolute; | ||
− | width: | + | width:190%; |
− | z-index: | + | z-index:51; |
box-shadow:1px 1px 5px #888; | box-shadow:1px 1px 5px #888; | ||
Line 108: | Line 102: | ||
/* custom focus rules */ | /* custom focus rules */ | ||
− | . | + | .gallery-items li:hover:nth-child(3n+1) img{ |
− | left: | + | left: -100px; |
+ | z-index: 50; | ||
} | } | ||
− | . | + | .gallery-items li:hover:nth-child(3n+2) img{ |
− | left:- | + | left:-200px; |
+ | z-index: 50; | ||
+ | |||
} | } | ||
− | . | + | .gallery-items li:hover:nth-child(3n+3) img{ |
− | left:- | + | left:-300px; |
+ | z-index: 50; | ||
+ | |||
} | } | ||
− | . | + | .gallery-items li:hover:nth-child(n) img{ |
− | top: | + | top:-100px; |
+ | z-index: 50; | ||
+ | |||
} | } | ||
− | . | + | .gallery-items li:hover:nth-child(n+7) img{ |
top:-150px; | top:-150px; | ||
+ | z-index: 50; | ||
+ | |||
} | } | ||
− | . | + | .gallery-items li:hover:nth-child(n+10) img{ |
top:-295px; | top:-295px; | ||
+ | z-index: 50; | ||
+ | |||
} | } | ||
− | + | p { | |
− | + | text-align: left; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | /***********select-gallery*********/ |
− | display: | + | .gallery-container{ |
+ | width: 60%; | ||
+ | margin: 30px auto; | ||
+ | display: block; | ||
+ | } | ||
+ | .gallery-container label{ | ||
+ | font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; | ||
+ | width: 25%; | ||
+ | height: 30px; | ||
+ | cursor: pointer; | ||
+ | color: #777; | ||
+ | text-shadow: 1px 1px 1px rgba(255,255,255,0.8); | ||
+ | line-height: 33px; | ||
+ | font-size: 19px; | ||
+ | background: #gallerygallerygallery; | ||
+ | background: -moz-linear-gradient(top, #gallerygallerygallery 1%, #eaeaea 100%); | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#gallerygallerygallery), color-stop(100%,#eaeaea)); | ||
+ | background: -webkit-linear-gradient(top, #gallerygallerygallery 1%,#eaeaea 100%); | ||
+ | background: -o-linear-gradient(top, #gallerygallerygallery 1%,#eaeaea 100%); | ||
+ | background: -ms-linear-gradient(top, #gallerygallerygallery 1%,#eaeaea 100%); | ||
+ | background: linear-gradient(top, #gallerygallerygallery 1%,#eaeaea 100%); | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#gallerygallerygallery', endColorstr='#eaeaea',GradientType=0 ); | ||
+ | float:left; | ||
+ | box-shadow: 0px 0px 0px 1px #aaa, 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 1px 2px rgba(0,0,0,0.2); | ||
+ | } | ||
+ | .gallery-container label.gallery-label-type-all{ | ||
+ | border-radius: 3px 0px 0px 3px; | ||
+ | } | ||
+ | .gallery-container label.gallery-label-type-3{ | ||
+ | border-radius: 0px 3px 3px 0px; | ||
+ | } | ||
+ | .gallery-container input.gallery-selector-type-all:checked ~ label.gallery-label-type-all, | ||
+ | .gallery-container input.gallery-selector-type-1:checked ~ label.gallery-label-type-1, | ||
+ | .gallery-container input.gallery-selector-type-2:checked ~ label.gallery-label-type-2, | ||
+ | .gallery-container input.gallery-selector-type-3:checked ~ label.gallery-label-type-3{ | ||
+ | background: #646d93; | ||
+ | background: -moz-linear-gradient(top, #646d93 0%, #7c87ad 100%); | ||
+ | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#646d93), color-stop(100%,#7c87ad)); | ||
+ | background: -webkit-linear-gradient(top, #646d93 0%,#7c87ad 100%); | ||
+ | background: -o-linear-gradient(top, #646d93 0%,#7c87ad 100%); | ||
+ | background: -ms-linear-gradient(top, #646d93 0%,#7c87ad 100%); | ||
+ | background: linear-gradient(top, #646d93 0%,#7c87ad 100%); | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646d93', endColorstr='#7c87ad',GradientType=0 ); | ||
+ | color: #424d71; | ||
+ | text-shadow: 0px 1px 1px rgba(255,255,255,0.3); | ||
+ | box-shadow: 0px 0px 0px 1px #40496e, 0 1px 2px rgba(0,0,0,0.1) inset; | ||
+ | } | ||
+ | .gallery-container input{ | ||
+ | display: none; | ||
} | } | ||
− | |||
− | |||
+ | |||
+ | |||
+ | .gallery-items li{ | ||
+ | margin: 0px; | ||
+ | float: left; | ||
+ | width: 300px; | ||
+ | height: 200px; | ||
+ | -webkit-transition: all 0.6s ease-in-out; | ||
+ | -moz-transition: all 0.6s ease-in-out; | ||
+ | -o-transition: all 0.6s ease-in-out; | ||
+ | -ms-transition: all 0.6s ease-in-out; | ||
+ | transition: all 0.6s ease-in-out; | ||
+ | } | ||
+ | .gallery-container input.gallery-selector-type-1:checked ~ .gallery-items .gallery-item-type-1, | ||
+ | .gallery-container input.gallery-selector-type-2:checked ~ .gallery-items .gallery-item-type-2, | ||
+ | .gallery-container input.gallery-selector-type-3:checked ~ .gallery-items .gallery-item-type-3{ | ||
+ | opacity: 1; | ||
+ | -webkit-transform: scale(1.1); | ||
+ | -moz-transform: scale(1.1); | ||
+ | -o-transform: scale(1.1); | ||
+ | -ms-transform: scale(1.1); | ||
+ | transform: scale(1.1); | ||
+ | } | ||
+ | .gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1), | ||
+ | .gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2), | ||
+ | .gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3){ | ||
+ | opacity: 0.1; | ||
+ | -webkit-transform: scale(0.5); | ||
+ | -moz-transform: scale(0.5); | ||
+ | -o-transform: scale(0.5); | ||
+ | -ms-transform: scale(0.5); | ||
+ | transform: scale(0.5); | ||
+ | } | ||
+ | .gallery-container input.gallery-selector-type-1:checked ~ .gallery-items li:not(.gallery-item-type-1) span, | ||
+ | .gallery-container input.gallery-selector-type-2:checked ~ .gallery-items li:not(.gallery-item-type-2) span, | ||
+ | .gallery-container input.gallery-selector-type-3:checked ~ .gallery-items li:not(.gallery-item-type-3) span{ | ||
+ | display:none; | ||
+ | } | ||
+ | .bigger-index:hover { | ||
+ | position: fixed; | ||
+ | z-index: 1000!important; | ||
} | } | ||
+ | /**********select-gallery over*******/ | ||
#firstTitle { | #firstTitle { | ||
− | + | margin-left: 100px; | |
} | } | ||
</style> | </style> | ||
<body id="homeIndexBody"> | <body id="homeIndexBody"> | ||
− | + | <div id="RightSection"></div> | |
− | + | <div id="title"> | |
− | + | <div id="firstTitle"> | |
− | + | <p> | |
+ | <B>GALLERY</B> | ||
+ | </p> | ||
+ | </div> | ||
+ | </div> | ||
− | + | <div id="RightContent"> | |
− | + | <div class="transparent_class "> | |
− | + | <p class="blockWords"> | |
− | + | 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. | |
+ | </p> | ||
+ | </div> | ||
− | + | <div id="RightContentText"> | |
− | + | <section class="gallery-container"> | |
− | + | ||
− | + | <input id="select-type-all" name="radio-set-1" type="radio" class="gallery-selector-type-all" checked="checked" /> | |
− | + | <label for="select-type-all" class="gallery-label-type-all">All</label> | |
− | + | ||
− | + | ||
− | + | ||
− | + | <input id="select-type-1" name="radio-set-1" type="radio" class="gallery-selector-type-1" /> | |
− | + | <label for="select-type-1" class="gallery-label-type-1">Daily life</label> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <input id="select-type-2" name="radio-set-1" type="radio" class="gallery-selector-type-2" /> | ||
+ | <label for="select-type-2" class="gallery-label-type-2">Entertainment</label> | ||
+ | <input id="select-type-3" name="radio-set-1" type="radio" class="gallery-selector-type-3" /> | ||
+ | <label for="select-type-3" class="gallery-label-type-3">Experiment</label> | ||
+ | <div class="clr"></div> | ||
+ | <ul class="gallery-items"> | ||
+ | <li class="gallery-item-type-2"> | ||
+ | <a> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | ||
+ | </li> | ||
+ | <li class="gallery-item-type-1"> | ||
+ | <a> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | ||
+ | </li> | ||
+ | <li class="gallery-item-type-1"> | ||
+ | <a> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | ||
+ | </li> | ||
+ | <li class="gallery-item-type-2"> | ||
+ | <a> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | ||
+ | </li> | ||
+ | <li class="gallery-item-type-3"> | ||
+ | <a> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | ||
+ | </li> | ||
+ | <li class="gallery-item-type-1"> | ||
+ | <a> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | ||
+ | </li> | ||
+ | <li class="gallery-item-type-3"> | ||
+ | <a> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | ||
+ | </li> | ||
+ | <li class="gallery-item-type-1"> | ||
+ | <a> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | ||
+ | </li> | ||
+ | <li class="gallery-item-type-2"> | ||
+ | <a> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG" width="400px" height="400px"></a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </section> | ||
+ | </div> | ||
− | + | </div> | |
− | + | ||
− | + | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 05:19, 26 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.