Difference between revisions of "Team:CHINA CD UESTC/hp education"
Line 43: | Line 43: | ||
} | } | ||
− | . | + | .gallery{ |
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
position: relative; | position: relative; | ||
+ | text-align: center; | ||
} | } | ||
.clr{ | .clr{ | ||
Line 112: | Line 113: | ||
box-shadow: 0px 1px 1px rgba(0,0,0,0.1); | box-shadow: 0px 1px 1px rgba(0,0,0,0.1); | ||
} | } | ||
− | .cr- | + | .cr-gallery{ |
width: 600px; | width: 600px; | ||
height: 400px; | height: 400px; | ||
Line 121: | Line 122: | ||
box-shadow: 1px 1px 3px rgba(0,0,0,0.1); | box-shadow: 1px 1px 3px rgba(0,0,0,0.1); | ||
} | } | ||
− | .cr- | + | .cr-gallery label{ |
font-style: italic; | font-style: italic; | ||
width: 150px; | width: 150px; | ||
Line 134: | Line 135: | ||
z-index: 1000; | z-index: 1000; | ||
} | } | ||
− | .cr- | + | .cr-gallery label:before{ |
content:''; | content:''; | ||
width: 34px; | width: 34px; | ||
Line 146: | Line 147: | ||
z-index:-1; | z-index:-1; | ||
} | } | ||
− | .cr- | + | .cr-gallery label:after{ |
width: 1px; | width: 1px; | ||
height: 400px; | height: 400px; | ||
Line 161: | Line 162: | ||
right: 0px; | right: 0px; | ||
} | } | ||
− | .cr- | + | .cr-gallery label.cr-label-img-4:after{ |
width: 0px; | width: 0px; | ||
} | } | ||
− | .cr- | + | .cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1, |
− | .cr- | + | .cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2, |
− | .cr- | + | .cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3, |
− | .cr- | + | .cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4{ |
color: #68abc2; | color: #68abc2; | ||
} | } | ||
− | .cr- | + | .cr-gallery input.cr-selector-img-1:checked ~ label.cr-label-img-1:before, |
− | .cr- | + | .cr-gallery input.cr-selector-img-2:checked ~ label.cr-label-img-2:before, |
− | .cr- | + | .cr-gallery input.cr-selector-img-3:checked ~ label.cr-label-img-3:before, |
− | .cr- | + | .cr-gallery input.cr-selector-img-4:checked ~ label.cr-label-img-4:before{ |
background: #fff; | background: #fff; | ||
box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6); | box-shadow: 0px 0px 0px 4px rgba(104,171,194,0.6); | ||
} | } | ||
− | .cr- | + | .cr-gallery input{ |
display: none; | display: none; | ||
} | } | ||
Line 215: | Line 216: | ||
text-indent: -9000px; | text-indent: -9000px; | ||
} | } | ||
− | .cr- | + | .cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg, |
.cr-bgimg div span:nth-child(1){ | .cr-bgimg div span:nth-child(1){ | ||
background-image: url(https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG); | background-image: url(https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG); | ||
} | } | ||
− | .cr- | + | .cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg, |
.cr-bgimg div span:nth-child(2){ | .cr-bgimg div span:nth-child(2){ | ||
background-image: url(https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG); | background-image: url(https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG); | ||
} | } | ||
− | .cr- | + | .cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg, |
.cr-bgimg div span:nth-child(3){ | .cr-bgimg div span:nth-child(3){ | ||
background-image: url(https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG); | background-image: url(https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG); | ||
} | } | ||
− | .cr- | + | .cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg, |
.cr-bgimg div span:nth-child(4){ | .cr-bgimg div span:nth-child(4){ | ||
background-image: url(https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG); | background-image: url(https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG); | ||
Line 243: | Line 244: | ||
background-position: -450px 0px; | background-position: -450px 0px; | ||
} | } | ||
− | .cr- | + | .cr-gallery input:checked ~ .cr-bgimg div span{ |
-webkit-animation: scaleOut 0.6s ease-in-out; | -webkit-animation: scaleOut 0.6s ease-in-out; | ||
-moz-animation: scaleOut 0.6s ease-in-out; | -moz-animation: scaleOut 0.6s ease-in-out; | ||
Line 270: | Line 271: | ||
100%{ transform: scale(1.5); opacity: 0; } | 100%{ transform: scale(1.5); opacity: 0; } | ||
} | } | ||
− | .cr- | + | .cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg div span:nth-child(1), |
− | .cr- | + | .cr-gallery input.cr-selector-img-2:checked ~ .cr-bgimg div span:nth-child(2), |
− | .cr- | + | .cr-gallery input.cr-selector-img-3:checked ~ .cr-bgimg div span:nth-child(3), |
− | .cr- | + | .cr-gallery input.cr-selector-img-4:checked ~ .cr-bgimg div span:nth-child(4) |
{ | { | ||
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; | -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out, z-index 0s linear 0.6s; | ||
Line 333: | Line 334: | ||
transition: opacity 0.8s ease-in-out; | transition: opacity 0.8s ease-in-out; | ||
} | } | ||
− | .cr- | + | .cr-gallery input:checked ~ .cr-titles h3 span{ |
opacity: 0; | opacity: 0; | ||
text-shadow: 0px 0px 30px #fff; | text-shadow: 0px 0px 30px #fff; | ||
} | } | ||
− | .cr- | + | .cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(1), |
− | .cr- | + | .cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(1), |
− | .cr- | + | .cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(1), |
− | .cr- | + | .cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(1){ |
opacity: 1; | opacity: 1; | ||
text-shadow: 0px 0px 1px #fff; | text-shadow: 0px 0px 1px #fff; | ||
} | } | ||
− | .cr- | + | .cr-gallery input.cr-selector-img-1:checked ~ .cr-titles h3:nth-child(1) span:nth-child(2), |
− | .cr- | + | .cr-gallery input.cr-selector-img-2:checked ~ .cr-titles h3:nth-child(2) span:nth-child(2), |
− | .cr- | + | .cr-gallery input.cr-selector-img-3:checked ~ .cr-titles h3:nth-child(3) span:nth-child(2), |
− | .cr- | + | .cr-gallery input.cr-selector-img-4:checked ~ .cr-titles h3:nth-child(4) span:nth-child(2){ |
opacity: 1; | opacity: 1; | ||
} | } | ||
/* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */ | /* Media Query: Let's show the inputs on mobile sized browsers because they probably don't support the label trick: */ | ||
@media screen and (max-width: 768px) { | @media screen and (max-width: 768px) { | ||
− | .cr- | + | .cr-gallery input{ |
display: inline; | display: inline; | ||
width: 24%; | width: 24%; | ||
Line 359: | Line 360: | ||
position: relative; | position: relative; | ||
} | } | ||
− | .cr- | + | .cr-gallery label{ |
display: none; | display: none; | ||
} | } | ||
Line 383: | Line 384: | ||
<div id="RightContentText"> | <div id="RightContentText"> | ||
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5" style="background-position: 0px 669px;"> | <div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5" style="background-position: 0px 669px;"> | ||
− | <div class=" | + | <div class="gallery clearfix"> |
<div id="content" class="grid_12"> | <div id="content" class="grid_12"> | ||
Line 416: | Line 417: | ||
</div> | </div> | ||
− | <div class=" | + | <div class="gallery"> |
− | <section class="cr- | + | <section class="cr-gallery"> |
<input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/> | <input id="select-img-1" name="radio-set-1" type="radio" class="cr-selector-img-1" checked/> |
Revision as of 10:40, 21 August 2015
<!DOCTYPE html>
DESCRIPTION
Do you know how to solve energy crisis utilizing biological methods? Have you ever heard about constructing a cell with enzyme? Nothing is too strange in the nature. There are many special properties of bacteria in the nature such as producing electricity, being attracted by magnet. Please read the description!
EDUCATION
We conducted interviews with the professor of the Hong Kong University Medicine School. Professor Zhaoyi Hu gave us many precious advice from the perspective of the safety.In the end, our members also get the chance to learn the general processes of sample treatment in medical research as well as separation and preservation methods of some bacteria strains.