Difference between revisions of "Team:CHINA CD UESTC/hp education"
Line 7: | Line 7: | ||
<link rel="stylesheet" href="https://2015.igem.org/Team:CHINA_CD_UESTC/Template:RightStyle.css?action=raw&ctype=text/css" type="text/css" /> | <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> | ||
Line 64: | Line 63: | ||
background-size: 400%; | background-size: 400%; | ||
} | } | ||
+ | /*************gallery 2***********/ | ||
+ | #gal { | ||
+ | position:relative; | ||
+ | width:700px; | ||
+ | height:400px; | ||
+ | margin:0 auto; | ||
+ | top:100px; | ||
+ | background:#000; | ||
+ | } | ||
+ | #gal:after { | ||
+ | content:''; | ||
+ | position:absolute; | ||
+ | bottom:24px; | ||
+ | right:0; | ||
+ | left:0; | ||
+ | width:100%; | ||
+ | height:1px; | ||
+ | background:rgba(255,255,255,0.35); | ||
+ | z-index:3; | ||
+ | } | ||
+ | #gal ul {list-style-type:none;} | ||
+ | input[class="re_radio"], input[class="re_radio"] + label[class="re_label"] { | ||
+ | position:absolute; | ||
+ | bottom:80px; | ||
+ | display:block; | ||
+ | width:22px; | ||
+ | height:22px; | ||
+ | -webkit-border-radius:50%; | ||
+ | -moz-border-radius:50%; | ||
+ | border-radius:50%; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | input[class="re_radio"] { | ||
+ | opacity:0; | ||
+ | z-index:200; | ||
+ | } | ||
+ | input[value="one"], input[value="one"] + label[class="re_label"] {left:30px;} | ||
+ | input[value="two"], input[value="two"] + label[class="re_label"] {left:90px;} | ||
+ | input[value="three"], input[value="three"] + label[class="re_label"] {left:150px;} | ||
+ | input[value="four"], input[value="four"] + label[class="re_label"] {left:210px;} | ||
+ | input[value="five"], input[value="five"] + label[class="re_label"] {left:270px;} | ||
+ | input[value="six"], input[value="six"] + label[class="re_label"] {left:330px;} | ||
+ | input[value="seven"], input[value="seven"] + label[class="re_label"] {left:390px;} | ||
+ | input[value="eight"], input[value="eight"] + label[class="re_label"] {left:470px;} | ||
+ | |||
+ | input[class="re_radio"] + label[class="re_label"] { | ||
+ | background:rgba(243,243,243,0.55); | ||
+ | z-index:7; | ||
+ | -webkit-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); | ||
+ | -moz-box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); | ||
+ | box-shadow:0px 0px 0px 0px rgba(255,255,255,0.15); | ||
+ | -webkit-transition:all .3s; | ||
+ | -moz-transition:all .3s; | ||
+ | -o-transition:all .3s; | ||
+ | transition:all .3s; | ||
+ | } | ||
+ | [class*="entypo-"]:before { | ||
+ | position:absolute; | ||
+ | font-family: 'entypo', sans-serif; | ||
+ | } | ||
+ | figure[class*="entypo-"]:before { | ||
+ | left:10px; | ||
+ | top:5px; | ||
+ | font-size:2rem; | ||
+ | color:rgba(255,255,255,0); | ||
+ | z-index:1; | ||
+ | -webkit-transition:color .1s; | ||
+ | -moz-transition:color .1s; | ||
+ | -o-transition:color .1s; | ||
+ | transition:color .1s; | ||
+ | } | ||
+ | a[class*="entypo-"]:before { | ||
+ | top:8px; | ||
+ | left:9px; | ||
+ | font-size:1.5rem; | ||
+ | color:white; | ||
+ | } | ||
+ | a:hover[class*="entypo-"]:before { | ||
+ | color:white; | ||
+ | } | ||
+ | figure, figure img, figcaption { | ||
+ | position:absolute; | ||
+ | top:0; | ||
+ | right:0; | ||
+ | } | ||
+ | figure { | ||
+ | bottom:0; | ||
+ | left:0; | ||
+ | width:600px; | ||
+ | height:300px; | ||
+ | display:block; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | figure img { | ||
+ | bottom:0; | ||
+ | left:0; | ||
+ | display:block; | ||
+ | width:700px; | ||
+ | height:400px; | ||
+ | z-index:1; | ||
+ | -webkit-transform:translateX(600px); | ||
+ | -moz-transform:translateX(600px); | ||
+ | -ms-transform:translateX(600px); | ||
+ | -o-transform:translateX(600px); | ||
+ | transform:translateX(600px); | ||
+ | -webkit-transition:all .15s .15s, z-index 0s; | ||
+ | -moz-transition:all .15s .15s, z-index 0s; | ||
+ | -o-transition:all .15s .15s, z-index 0s; | ||
+ | transition:all .15s .15s, z-index 0s; | ||
+ | } | ||
+ | figcaption { | ||
+ | display:block; | ||
+ | width:270px; | ||
+ | height:300px; | ||
+ | padding-top:20px; | ||
+ | background-image:radial-gradient(rgba( 255,255,255,0.3), transparent); | ||
+ | background-size:600px 600px; | ||
+ | background-repeat:no-repeat; | ||
+ | background-position:-300px -150px; | ||
+ | text-align:center; | ||
+ | z-index:3; | ||
+ | -webkit-box-shadow:-5px 0px 20px rgba(0,0,0,0.1); | ||
+ | -moz-box-shadow:-5px 0px 20px rgba(0,0,0,0.1); | ||
+ | box-shadow:-5px 0px 20px rgba(0,0,0,0.1); | ||
+ | -webkit-transform:translateX(300px); | ||
+ | -moz-transform:translateX(300px); | ||
+ | -ms-transform:translateX(300px); | ||
+ | -o-transform:translateX(300px); | ||
+ | transform:translateX(300px); | ||
+ | -webkit-transition:all .35s; | ||
+ | -moz-transition:all .35s; | ||
+ | -o-transition:all .35s; | ||
+ | transition:all .35s; | ||
+ | } | ||
+ | |||
+ | figcaption nav ul {display:block;padding-top:10px;} | ||
+ | figcaption nav ul li {display:inline-block;margin-left:5px;} | ||
+ | figcaption nav ul li a { | ||
+ | position:relative; | ||
+ | display:block; | ||
+ | width:40px; | ||
+ | height:40px; | ||
+ | background:rgba(255,255,255,0.2); | ||
+ | text-decoration:none; | ||
+ | color:white; | ||
+ | -webkit-border-radius:50%; | ||
+ | -moz-border-radius:50%; | ||
+ | border-radius:50%; | ||
+ | -webkit-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0); | ||
+ | -moz-box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0); | ||
+ | box-shadow:inset 0px 0px 0px 0px rgba(255,255,255,0); | ||
+ | -webkit-transition:all .15s; | ||
+ | -moz-transition:all .15s; | ||
+ | -o-transition:all .15s; | ||
+ | transition:all .15s; | ||
+ | } | ||
+ | figcaption nav ul li a:hover { | ||
+ | background:rgba(255,255,255,0); | ||
+ | -webkit-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1); | ||
+ | -moz-box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1); | ||
+ | box-shadow:inset 0px 0px 0px 2px rgba(255,255,255,1); | ||
+ | } | ||
+ | figcaption p { | ||
+ | padding:50px 15px; | ||
+ | font-family:'Titillium Web', sans-serif; | ||
+ | font-weight:300; | ||
+ | color:#333; | ||
+ | background-image:-webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,0.35)), color-stop(0.3, rgba(255,255,255,0.35)), color-stop(0.3, transparent), color-stop(0.7, transparent), color-stop(0.7, rgba(255,255,255,0.35)), to(rgba(255,255,255,0.35))); | ||
+ | background-image:-webkit-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); | ||
+ | background-image:-moz-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); | ||
+ | background-image:-o-linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); | ||
+ | background-image:linear-gradient(rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.35) 30%, transparent 30%, transparent 70%, rgba(255,255,255,0.35) 70%, rgba(255,255,255,0.35) 100%); | ||
+ | background-size:1px 100%; | ||
+ | background-repeat:no-repeat; | ||
+ | background-position:50% 0%; | ||
+ | } | ||
+ | |||
+ | input[class="re_radio"]:hover + label[class="re_label"] { | ||
+ | background:rgba(255,255,255,0.6); | ||
+ | } | ||
+ | input[class="re_radio"]:checked + label[class="re_label"] { | ||
+ | background:rgba(130,195,217,0.9); | ||
+ | -webkit-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3); | ||
+ | -moz-box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3); | ||
+ | box-shadow:0px 0px 0px 5px rgba(255,255,255,0.3); | ||
+ | } | ||
+ | input[class="re_radio"]:checked + label[class="re_label"]:before {} | ||
+ | input[class="re_radio"]:checked ~ figure img { | ||
+ | z-index:2; | ||
+ | -webkit-transform:translatex(0px); | ||
+ | -moz-transform:translatex(0px); | ||
+ | -ms-transform:translatex(0px); | ||
+ | -o-transform:translatex(0px); | ||
+ | transform:translatex(0px); | ||
+ | -webkit-transition:all .15s, z-index 0s; | ||
+ | -moz-transition:all .15s, z-index 0s; | ||
+ | -o-transition:all .15s, z-index 0s; | ||
+ | transition:all .15s, z-index 0s; | ||
+ | } | ||
+ | input[class="re_radio"]:checked ~ figure[class*="entypo-"]:before { | ||
+ | z-index:3; | ||
+ | color:rgba(255,255,255,0.5); | ||
+ | -webkit-transition:color .5s; | ||
+ | -moz-transition:color .5s; | ||
+ | -o-transition:color .5s; | ||
+ | transition:color .5s; | ||
+ | } | ||
+ | input[class="re_radio"]:checked ~ figure figcaption { | ||
+ | z-index:8; | ||
+ | -webkit-transform:translateX(0px); | ||
+ | -moz-transform:translateX(0px); | ||
+ | -ms-transform:translateX(0px); | ||
+ | -o-transform:translateX(0px); | ||
+ | transform:translateX(0px); | ||
+ | -webkit-transition:all .35s, .7s; | ||
+ | -moz-transition:all .35s, .7s; | ||
+ | -o-transition:all .35s, .7s; | ||
+ | transition:all .35s, .7s; | ||
+ | } | ||
+ | .entypo-forward { | ||
+ | margin: 0; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | border: 20px solid #FDFDFD; | ||
+ | |||
+ | } | ||
+ | .entypo-forward p { | ||
+ | color: #000; | ||
+ | font-size: 20px; | ||
+ | font-family: 'Microsoft YaHei' | ||
+ | } | ||
+ | |||
+ | /********end of gallery 2*********/ | ||
p { | p { | ||
text-align: left; | text-align: left; |
Revision as of 03:50, 22 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.