Difference between revisions of "Team:CHINA CD UESTC/hp education"
Line 40: | Line 40: | ||
display: inline; | display: inline; | ||
} | } | ||
+ | |||
.cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg, | .cr-gallery input.cr-selector-img-1:checked ~ .cr-bgimg, | ||
.cr-bgimg div span:nth-child(1){ | .cr-bgimg div span:nth-child(1){ | ||
Line 62: | 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:120px; | ||
+ | display:block; | ||
+ | width:20px; | ||
+ | height:20px; | ||
+ | -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:20px;} | ||
+ | input[value="two"], input[value="two"] + label[class="re_label"] {left:80px;} | ||
+ | input[value="three"], input[value="three"] + label[class="re_label"] {left:140px;} | ||
+ | input[value="four"], input[value="four"] + label[class="re_label"] {left:200px;} | ||
+ | input[value="five"], input[value="five"] + label[class="re_label"] {left:260px;} | ||
+ | input[value="six"], input[value="six"] + label[class="re_label"] {left:320px;} | ||
+ | input[value="seven"], input[value="seven"] + label[class="re_label"] {left:380px;} | ||
+ | input[value="eight"], input[value="eight"] + label[class="re_label"] {left:460px;} | ||
+ | |||
+ | input[class="re_radio"] + label[class="re_label"] { | ||
+ | background:rgba(255, 239, 97, 0.39); | ||
+ | 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:#FFEA36; | ||
+ | -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; | ||
Line 67: | Line 302: | ||
} | } | ||
</style> | </style> | ||
− | + | ||
</style> | </style> | ||
<body id="homeIndexBody"> | <body id="homeIndexBody"> | ||
Line 214: | Line 449: | ||
On June 19th 2015, following our experiment team head instructor Lixia Tang, we team members went to the experimental primary school of UESTC to demonstrate an interesting synthetic biology project to students. Because students had learned the growth process of silkworms before, Mrs Tang introduced some fundamental synthetic biology research results like colorized silkworms, colorized roses and so on. Furthermore, students also learned biological terms like DNA, RNA. Subsequently, Kun Yan took a hero of “ The Avengers” as an example to explain the main processes of synthetic biology experiments. By telling these, he led to iGEM, introducing many interesting iGEM projects of previous years. In the meantime, the students were keeping high enthusiasm, answered a lot of questions correctly. Finally, we organized each student to draw a picture about what synthetic biology project they want to do in the future and to share with others. After the activity, we gave every kids a nite writer pen as gifts. We deeply felt kids’ vigorous vitality and unlimited dream. Meanwhile we also planted a little iGEM seed in kids’ hearts, hoping it would sprout, bloom and fruit. | On June 19th 2015, following our experiment team head instructor Lixia Tang, we team members went to the experimental primary school of UESTC to demonstrate an interesting synthetic biology project to students. Because students had learned the growth process of silkworms before, Mrs Tang introduced some fundamental synthetic biology research results like colorized silkworms, colorized roses and so on. Furthermore, students also learned biological terms like DNA, RNA. Subsequently, Kun Yan took a hero of “ The Avengers” as an example to explain the main processes of synthetic biology experiments. By telling these, he led to iGEM, introducing many interesting iGEM projects of previous years. In the meantime, the students were keeping high enthusiasm, answered a lot of questions correctly. Finally, we organized each student to draw a picture about what synthetic biology project they want to do in the future and to share with others. After the activity, we gave every kids a nite writer pen as gifts. We deeply felt kids’ vigorous vitality and unlimited dream. Meanwhile we also planted a little iGEM seed in kids’ hearts, hoping it would sprout, bloom and fruit. | ||
</p> | </p> | ||
− | + | <br> | |
− | + | <div id="gal"> | |
+ | <nav class="galnav"> | ||
+ | <ul> | ||
+ | <li> | ||
+ | <input class="re_radio" type="radio" name="btn" value="one" checked="checked"/> | ||
+ | <label class="re_label" for="btn"></label> | ||
+ | <figure class="entypo-forward"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG"/> | ||
+ | <figcaption> | ||
+ | <nav role='navigation'> | ||
+ | <p>we organized each student to draw a picture about what synthetic biology project they want to do in the future and to share with others. </p> | ||
+ | </nav> | ||
+ | </figcaption> | ||
+ | </figure> | ||
+ | </li> | ||
+ | <li> | ||
+ | <input class="re_radio" type="radio" name="btn" value="two"/> | ||
+ | <label class="re_label" for="btn"></label> | ||
+ | <figure class="entypo-forward"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG"/> | ||
+ | <figcaption> | ||
+ | <nav role='navigation'> | ||
+ | <p>we organized each student to draw a picture about what synthetic biology project they want to do in the future and to share with others. </p> | ||
+ | </nav> | ||
+ | </figcaption> | ||
+ | </figure> | ||
+ | </li> | ||
+ | <li> | ||
+ | <input class="re_radio" type="radio" name="btn" value="three"/> | ||
+ | <label class="re_label" for="btn"></label> | ||
+ | <figure class="entypo-forward"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG"/> | ||
+ | <figcaption> | ||
+ | <nav role='navigation'> | ||
+ | <p>we organized each student to draw a picture about what synthetic biology project they want to do in the future and to share with others. </p> | ||
+ | </nav> | ||
+ | </figcaption> | ||
+ | </figure> | ||
+ | </li> | ||
+ | <li> | ||
+ | <input class="re_radio" type="radio" name="btn" value="four"/> | ||
+ | <label class="re_label" for="btn"></label> | ||
+ | <figure class="entypo-forward"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG"/> | ||
+ | <figcaption> | ||
+ | <nav role='navigation'> | ||
+ | <p>we organized each student to draw a picture about what synthetic biology project they want to do in the future and to share with others. </p> | ||
+ | </nav> | ||
+ | </figcaption> | ||
+ | </figure> | ||
+ | </li> | ||
+ | <li> | ||
+ | <input class="re_radio" type="radio" name="btn" value="five"/> | ||
+ | <label class="re_label" for="btn"></label> | ||
+ | <figure class="entypo-forward"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG"/> | ||
+ | <figcaption> | ||
+ | <nav role='navigation'> | ||
+ | <p>we organized each student to draw a picture about what synthetic biology project they want to do in the future and to share with others. </p> | ||
+ | </nav> | ||
+ | </figcaption> | ||
+ | </figure> | ||
+ | </li> | ||
+ | <li> | ||
+ | <input class="re_radio" type="radio" name="btn" value="six"/> | ||
+ | <label class="re_label" for="btn"></label> | ||
+ | <figure class="entypo-forward"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG"/> | ||
+ | <figcaption> | ||
+ | <nav role='navigation'> | ||
+ | <p>we organized each student to draw a picture about what synthetic biology project they want to do in the future and to share with others. </p> | ||
+ | </nav> | ||
+ | </figcaption> | ||
+ | </figure> | ||
+ | </li> | ||
+ | <li> | ||
+ | <input class="re_radio" type="radio" name="btn" value="seven"/> | ||
+ | <label class="re_label" for="btn"></label> | ||
+ | <figure class="entypo-forward"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG"/> | ||
+ | <figcaption> | ||
+ | <nav role='navigation'> | ||
+ | <p>we organized each student to draw a picture about what synthetic biology project they want to do in the future and to share with others. </p> | ||
+ | </nav> | ||
+ | </figcaption> | ||
+ | </figure> | ||
+ | </li> | ||
+ | <li> | ||
+ | <input class="re_radio" type="radio" name="btn" value="eight"/> | ||
+ | <label class="re_label" for="btn"></label> | ||
+ | <figure class="entypo-forward"> | ||
+ | <img src="https://static.igem.org/mediawiki/2015/3/32/CHINA_CD_UESTC_hku01.JPG"/> | ||
+ | <figcaption> | ||
+ | <nav role='navigation'> | ||
+ | <p>we organized each student to draw a picture about what synthetic biology project they want to do in the future and to share with others. </p> | ||
+ | </nav> | ||
+ | </figcaption> | ||
+ | </figure> | ||
+ | </li> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </ul> | ||
+ | </nav> | ||
+ | </div> | ||
</div> | </div> | ||
Revision as of 03:22, 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.