|
|
| Line 121: |
Line 121: |
| | </div> | | </div> |
| | </nav> | | </nav> |
| − | <style type="text/css"> | + | </body> |
| | | | |
| − | * {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | box-sizing: border-box; }
| |
| − |
| |
| − | body {
| |
| − | width: 100%;
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | font-family: 'Ubuntu' !important; }
| |
| − |
| |
| − | img.center {
| |
| − | display: block;
| |
| − | margin: 0 auto; }
| |
| − |
| |
| − | .pdfbtn {
| |
| − | width: 100%;
| |
| − | margin: 20px 0 10px 0;
| |
| − | padding: 10px 20px;
| |
| − | border-radius: 5px;
| |
| − | background-color: #556b7e;
| |
| − | color: white;
| |
| − | display: block;
| |
| − | position: relative; }
| |
| − | .pdfbtn i {
| |
| − | position: absolute;
| |
| − | right: 50px;
| |
| − | top: 50%;
| |
| − | transform: translateY(-50%); }
| |
| − |
| |
| − | .brown-btn {
| |
| − | background-color: #95CAA7; }
| |
| − |
| |
| − | .hp-title {
| |
| − | position: relative;
| |
| − | top: 20px;
| |
| − | text-align: center;
| |
| − | font-size: 60px;
| |
| − | font-weight: 700;
| |
| − | font-family: 'Arizonia' !important;
| |
| − | }
| |
| − |
| |
| − | .hp-bg-container {
| |
| − | overflow: hidden;
| |
| − | position: relative;
| |
| − | max-height: none;
| |
| − | background-color: #ffffff; }
| |
| − | .hp-bg-container > img {
| |
| − | width: 100%;
| |
| − | margin-top: -45px; }
| |
| − |
| |
| − | .hp-main-container {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | padding: 50px 7%;
| |
| − | min-height: 200vh;
| |
| − | overflow: hidden; }
| |
| − |
| |
| − | .hp-main-content {
| |
| − | background-color: white;
| |
| − | width: 80%;
| |
| − | margin-left: 10%;
| |
| − | padding: 50px;
| |
| − | margin-top: 40px;
| |
| − | min-height: 300vh;
| |
| − | z-index: 10; }
| |
| − |
| |
| − | .img-container {
| |
| − | width: 100%;
| |
| − | text-align: left;
| |
| − | display: none; }
| |
| − | .img-container img {
| |
| − | width: 100%; }
| |
| − |
| |
| − | .pdf-container {
| |
| − | width: 100%;
| |
| − | text-align: center;
| |
| − | height: 90vh;
| |
| − | display: none; }
| |
| − |
| |
| − | .top {
| |
| − | position: fixed;
| |
| − | right: 50px;
| |
| − | bottom: 50px;
| |
| − | height: 50px;
| |
| − | width: 50px;
| |
| − | cursor: pointer; }
| |
| − | .top img {
| |
| − | width: 100%; }
| |
| − |
| |
| − | #HQ_page .text-area p {
| |
| − | font-size: 22px;
| |
| − | font-family: 'Ubuntu';
| |
| − | font-weight: 500; }
| |
| − |
| |
| − | .my-main-container {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | padding: 50px 7%;
| |
| − | min-height: 200vh;
| |
| − | overflow: hidden; }
| |
| − |
| |
| − | .main-content {
| |
| − | background-color: white;
| |
| − | width: 80%;
| |
| − | margin-left: 10%;
| |
| − | padding: 50px;
| |
| − | min-height: 180vh;
| |
| − | z-index: 10; }
| |
| − |
| |
| − | .text-area {
| |
| − | margin-bottom: 80px; }
| |
| − | .text-area h1 {
| |
| − | font-size: 60px;
| |
| − | font-weight: 700;
| |
| − | font-family: 'Arizonia' !important;
| |
| − | text-align: center;
| |
| − | margin: 0 auto !important;
| |
| − | }
| |
| − | .text-area p {
| |
| − | font-size: 22px;
| |
| − | font-weight: 500;
| |
| − | margin: 0px auto !important;
| |
| − | }
| |
| − | video {
| |
| − | position:relative;
| |
| − | width: 78%;
| |
| − | height:auto;
| |
| − | margin-top:60px;
| |
| − | margin-left:10vw;
| |
| − | margin-right:10vw;
| |
| − | }
| |
| − | @media screen and (min-width: 432px){
| |
| − |
| |
| − | .carousel-container{
| |
| − | max-width: 1000px;
| |
| − | position: relative;
| |
| − | margin: auto;
| |
| − | }
| |
| − |
| |
| − | .mySlides{
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | .prev, .next{
| |
| − | cursor: pointer;
| |
| − | position: absolute;
| |
| − | top:50%;
| |
| − | width: auto;
| |
| − | margin-top: -22px;
| |
| − | padding: 16px;
| |
| − | color: white !important;
| |
| − | font-weight: bold;
| |
| − | font-size: 18px;
| |
| − | transition: 0.6s ease;
| |
| − | border-radius: 0 3px 3px 0;
| |
| − | }
| |
| − | .prev{
| |
| − | left: 0;
| |
| − | }
| |
| − |
| |
| − | .next{
| |
| − | right: 0;
| |
| − | border-radius: 3px 0 0 3px;
| |
| − | }
| |
| − |
| |
| − | .next:hover, .prev:hover{
| |
| − | background-color: rgba(0,0,0,0.6);
| |
| − | }
| |
| − |
| |
| − | .numbertext{
| |
| − | color: #f2f2f2;
| |
| − | font-size: 12px;
| |
| − | padding: 8px 12px;
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | }
| |
| − |
| |
| − | .dot{
| |
| − | cursor: pointer;
| |
| − | height: 13px;
| |
| − | width: 13px;
| |
| − | margin: 0 2px;
| |
| − | background-color: #bbb;
| |
| − | border-radius: 50%;
| |
| − | display: inline-block;
| |
| − | transition: background-color 0.6s ease;
| |
| − | bottom: 0;
| |
| − | }
| |
| − |
| |
| − | .active, .dot:hover{
| |
| − | background-color: #717171;
| |
| − | }
| |
| − |
| |
| − | .fade{
| |
| − | -webkit-animation-name:fade;
| |
| − | -webkit-animation-duration:1.5s;
| |
| − | animation-name: fade;
| |
| − | animation-duration: 1.5s;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | img.center {
| |
| − | margin: 0 auto; }
| |
| − |
| |
| − | @-webkit-keyframes fade {
| |
| − | form {opacity: .4}
| |
| − | to {opacity: 1}
| |
| − | }
| |
| − |
| |
| − | @keyframes fade{
| |
| − | from {opacity: .4}
| |
| − | to {opacity: 1}
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | <body>
| |
| − | <div class="hp-bg-container">
| |
| − | <img src="https://static.igem.org/mediawiki/2017/f/f4/T--CSMU_NCHU_Taiwan--team.png">
| |
| − | <div class="hp-main-container">
| |
| − | <h1 class="hp-title">Attribution</h1>
| |
| − | <div class="hp-main-content">
| |
| − | <div class="text-area">
| |
| − | <p>We would like to thank all those who have helped us along the iGEM journey</p>
| |
| − | </div>
| |
| − | <div class="pdf-area">
| |
| − | <span class="pdfbtn brown-btn" id="public-btn-1">Members<i class="fa fa-caret-down" aria-hidden="true"></i></span>
| |
| − | <div class="img-container" id="public-1">
| |
| − | KUAN-CHEN WU: Leader, HP, Wet Lab, Prototype, Presentation<br>
| |
| − | YU-CHI LIANG : Vice Leader, HP<br>
| |
| − | WEI-TING HSIAO: Art Design, HP<br>
| |
| − | CHUNG-HSUAN HSIAO: Wet Lab, Presentation, Wiki<br>
| |
| − | YU-HSIN HUANG: Wiki, Record, HP<br>
| |
| − | TING-CHEN CHANG :HP, Record, HP vice manager<br>
| |
| − | CHI-WEI TSENG: Wet Lab<br>
| |
| − | GUAN-TIING HUANG: Wiki, Record, HP<br>
| |
| − | YI-HSUAN HSU: HP, Art Design, InterLab<br>
| |
| − | TUNG-YU CHIEN: Art Design, HP<br>
| |
| − | CHAN-YU YEH :Dry Lab, InterLab, Modeling, Presentation<br>
| |
| − | YI-CHUN LIAO: Wet Lab , Presentation<br>
| |
| − | YU-XUAN LAI : Wet Lab, Presentation, HP<br>
| |
| − | JUI-TANG KU : HP<br>
| |
| − | YU-HSUAN CHENG: Art Design, HP, InterLab<br>
| |
| − | JUN-HAO LAI : HP, HP manager, Presentation<br>
| |
| − | HAO-YUEH CHIANG: Art Design, HP<br>
| |
| − | SHIH-HUA LAI: Wet Lab, HP, Presentation<br>
| |
| − | CHIEH YU CHO : Art Design & Annimation <br>
| |
| − | CIAN-YU YEH: Wet Lab
| |
| − |
| |
| − | </div>
| |
| − | <span class="pdfbtn brown-btn" id="public-btn-2">Instructors<i class="fa fa-caret-down" aria-hidden="true"></i></span>
| |
| − | <div class="img-container" id="public-2">
| |
| − | Dr. PHIL (PEI-HONG) CHEN: <br>
| |
| − | Dr. Chen set up the BioLab in Mingdao since 2014 and led a team beginning iGEM then. In 2016, the School officially announced Mingdao High School BioLab facility for genetic engineering, molecular biology and iGEM. We as students are very luck in Mingdao High School having course and competition for synthetic biology study. We appreciate his effort and time giving us an amazing experience in the life of high school. <br>
| |
| − |
| |
| − | Contact: phil@mingdao.edu.tw
| |
| − |
| |
| − | <br><br>
| |
| − |
| |
| − | Mrs. CHIA-LE MENG:<br>
| |
| − | She is an experienced lab assistant helping us in dry lab & web lab training as well as school affairs. She engaged in iGEM team NCTU-Formosa in 2010 and 2011 shares many ideas about project idea and human practices with us.<br>
| |
| − |
| |
| − | Contact: chialemeng@mingdao.edu.tw
| |
| − |
| |
| − | <br><br>
| |
| − |
| |
| − | </div>
| |
| − | <span class="pdfbtn brown-btn" id="public-btn-3">Advisor<i class="fa fa-caret-down" aria-hidden="true"></i></span>
| |
| − | <div class="img-container" id="public-3">
| |
| − | KEVIN (YU-TENG) LI:<br>
| |
| − | He is a team captain of Mingdao iGEM 2016. He shared idea and experience about iGEM competition with us. He helps us build up wiki a lot and gives valuable comments.
| |
| − | <br><br>
| |
| − | </div>
| |
| − | <span class="pdfbtn brown-btn" id="public-btn-4">Special thanks<i class="fa fa-caret-down" aria-hidden="true"></i></span>
| |
| − | <div class="img-container" id="public-4">
| |
| − | IGEM TEAM CCU-TAIWAN, NATIONAL CHUNG CHENG UNIVERSITY <br>
| |
| − |
| |
| − | IGEM TEAM NCHU-TAICHUNG, NATIONAL CHUNG HSING UNIVERSITY <br>
| |
| − |
| |
| − | IGEM TEAM NCTU-FORMOSA, NATIONAL CHIAO TUNG UNIVERSITY <br>
| |
| − |
| |
| − | MR. CHING-KUEI LIN, CEO, SHIN YAN SHENO PRECISION INDUSTRIAL CO., LTD. <br>
| |
| − |
| |
| − |
| |
| − | DR. DAVID J. WESTENBERG, MISSOURI S&T., UNITED STATES <br>
| |
| − |
| |
| − | DR. HAU-YOU TZENG, NATIONAL CHUNG HSING UNIVERSITY <br>
| |
| − |
| |
| − | PROF. JASON C. HUANG, AIDS PREVENTION & RESEARCH CENTER, NATIONAL YANG MING UNIVERSITY
| |
| − |
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | <span class="pdfbtn brown-btn" id="public-btn-5">Our Sponsors<i class="fa fa-caret-down" aria-hidden="true"></i></span>
| |
| − | <div class="img-container" id="public-5">
| |
| − | MINGDAO HIGH SCHOOL<br>
| |
| − | HAN GENE TECHNOLOGIES LTD. <br>
| |
| − | CATCHGENE BIOTECH LTD. <br>
| |
| − | UNI-ONWARD BIOTECH CORP. <br>
| |
| − | BIO FUTURE BIOTECH LTD. <br>
| |
| − | GENEAID BIOTECH LTD. <br>
| |
| − | GENOMICS BIOSCI & TECH, LTD<br>
| |
| − | TS STEEL. CORP.
| |
| − |
| |
| − |
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="top">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/5/58/T--Mingdao--go_to_top.jpg" alt="">
| |
| − | </div>
| |
| − |
| |
| − |
| |
| − | </body>
| |
| − | <script type="text/javascript">
| |
| − | $(document).ready(function(){
| |
| − |
| |
| − | for( var i = 1; i < 6; i++){
| |
| − | $('#public-btn-' + i).click( toggleContainer(i) );
| |
| − | }
| |
| − |
| |
| − | $('.top').on('click', function(){
| |
| − | $('html, body').animate({scrollTop: '0px'}, 500);
| |
| − | });
| |
| − |
| |
| − | });
| |
| − |
| |
| − | function toggleContainer(i){
| |
| − | return function(){
| |
| − | if($('#public-'+i).is(":visible")){
| |
| − | $('#public-'+i).slideToggle(500);
| |
| − | }
| |
| − | else{
| |
| − | $('.img-container:visible').slideToggle(500);
| |
| − | $('#public-'+i).slideToggle(500);
| |
| − | }
| |
| − | $('.hp-bg-container').css('max-height','none')
| |
| − | $('.main-content').css('min-height','200vh')
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | var slideIndex = 1;
| |
| − | showSlides(slideIndex,"y-slide");
| |
| − | showSlides(slideIndex,"syn-slide");
| |
| − | showSlides(slideIndex,"street-slide");
| |
| − | showSlides(slideIndex,"booth-slide");
| |
| − |
| |
| − |
| |
| − | function plusSlides(n, slidename){
| |
| − | showSlides(slideIndex += n, slidename);
| |
| − | }
| |
| − |
| |
| − | function currentSlide(n, slidename) {
| |
| − | showSlides(slideIndex = n, slidename);
| |
| − | }
| |
| − |
| |
| − | function showSlides(n, slidename){
| |
| − | var i;
| |
| − | var slides = document.getElementsByClassName(slidename);
| |
| − | // var dots = document.getElementsByClassName("dot");
| |
| − | if ( n > slides.length) { slideIndex = 1;}
| |
| − | if ( n < 1) { slideIndex = slides.length;}
| |
| − |
| |
| − | for ( i = 0 ; i < slides.length; i++){
| |
| − | slides[i].style.display = "none";
| |
| − | }
| |
| − |
| |
| − | // for (i = 0; i < dots.length; i++){
| |
| − | // dots[i].className = dots[i].className.replace("active","");
| |
| − | // }
| |
| − | slides[slideIndex-1].style.display="block";
| |
| − | // dots[slideIndex-1].className += " active";
| |
| − | }
| |
| − |
| |
| − | </script>
| |
| − | </body>
| |
| | | | |
| | </html> | | </html> |
