Difference between revisions of "Team:TCFSH Taiwan/Team"

 
(42 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
{{TCFSH_Taiwan}}
 +
{{TCFSH_Taiwan/Navigation}}
 
<html>
 
<html>
 
<head>
 
<head>
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
<meta charset="UTF-8">
−
<style>
+
 
−
#home_logo, #sideMenu { display:none; }
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
−
  #sideMenu, #top_title, .patrollink  {display:none;}
+
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
−
  #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
 
−
  body {background-color:white; }
+
<style type="text/css">
−
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }}
+
#sideMenu, #top_title {display:none;}
−
.content{
+
#content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
−
            background-color: lightblue;
+
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
#top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
 +
 
 +
 
 +
html, body, div, span, applet, object, iframe,
 +
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 +
a, abbr, acronym, address, big, cite, code,
 +
del, dfn, em, font, img, ins, kbd, q, s, samp,
 +
small, strike, strong, sub, tt, var,
 +
b, u, i, center,
 +
dl, dt, dd, ol, ul, li,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    outline: 0;
 +
 
 
}
 
}
−
body{
 
−
        margin:0;
 
−
        background-color: rgb(77, 89, 127);
 
−
    }
 
−
.TCFSH_Taiwan{
 
−
                left:15px;
 
−
                position:relative;
 
−
                top: 10px;
 
−
    } 
 
−
    .main-container{
 
−
                    background:rgb(230, 236, 255);
 
−
                    position:fixed;
 
−
                    width:100vw;
 
−
                    height:auto;
 
−
                    z-index:999;
 
−
                    }
 
  
  
−
    .dropbtn{
+
* {
−
                  margin-top:5px;
+
  font-family: 'Open Sans', sans-serif;
 +
    font-weight: 300;
 
}
 
}
−
     .dropdown:hover .dropdown-content{
+
body{
−
                  display: block;
+
     background-color:rgb(51,51,51) !important;
 +
    line-height:1;
 +
}
 +
h1{
 +
background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg');
 +
}
 +
.bigphoto{
 +
      margin: auto;
 +
      display: block;
 +
    }
 +
/*大圖*/
 +
@media screen and (min-width: 768px) {
 +
  .img-container{
 +
    height:100vh ;
 +
    overflow:hidden ;
 +
    width:100%;
 +
  }
 +
  .main-img{
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    width: 100%;
 +
    margin: auto;
 +
    z-index:999;
 +
    }
 +
}
 +
@media screen and (orientation: portrait) {
 +
    .img-container{
 +
        height:auto;
 +
        overflow:none;
 +
        width:100%;
 +
    }
 +
    .main-img{
 +
        top: 0;
 +
        bottom: 0;
 +
        left: 0;
 +
        right: 0;
 +
        width: 100%;
 +
        margin: auto;
 +
        z-index:999;
 +
    }
 +
}
 +
/*scroll navigaiton*/
 +
nav {
 +
  padding: 18px;
 +
  position: fixed;
 +
  height: auto;
 +
  left:0.5vw;
 +
  width: auto;
 +
  z-index: 9999;
 +
  top:25%;
 +
  margin: auto;
 
}
 
}
  
 +
nav .wrapper {
 +
  padding: 0;
 +
  width:100%;
 +
  height: 785px;
 +
}
  
−
   
+
nav .nodes {
−
    .dropbtn span:after{
+
  position: relative;
−
    width: 0;
+
  margin-top: 1px;
−
    height: 0;
+
  margin-left: 1px;
−
    border: 0.313em solid transparent;
+
−
    border-bottom: none;
+
−
    border-top-color:black;
+
−
    content: '';
+
−
    vertical-align: middle;
+
−
    display: inline-block;
+
−
    position: relative;
+
−
    right: -0.313em; /* 5 */
+
−
                text-decoration:none !important;
+
−
                list-style-type:none !important;            
+
−
              }
+
  
−
  .dropdown{
+
}
−
      float:left;
+
−
      text-decoration:none !important;
+
−
      list-style-type:none !important;
+
−
      }
+
−
    ul>.dropdown>a{
+
−
                color:black !important;
+
−
                list-style-type:none !important;
+
−
                text-decoration:none !important;
+
−
                text-align:left;
+
−
              }
+
−
    li .dropdown{
+
−
                display: inline-block;
+
−
                }
+
−
               
+
−
      .dropdown  a, .dropbtn {
+
−
                      display: inline-block;
+
−
                      text-align: center;
+
−
                      text-color: black;
+
−
                      padding-right: 10px;
+
−
                      margin-right: 10px;
+
−
                      text-decoration: none !important;   
+
−
                    }
+
−
.main-menu{
+
−
      position:relative;
+
−
      list-style-type: none !important;
+
−
      margin-right:1px;
+
−
      display:block;
+
−
      float:right !important;
+
−
      font-weight:400 !important;
+
−
      font-size:20px;
+
−
      font-family:"Open Sans",serif,sans-serif;
+
−
      }
+
  
 +
.line {
 +
  position: absolute;
 +
  width:1px;
 +
  height:350px;
 +
  top: 13px;
 +
}
 +
.line .red {
 +
  width:1px;    /*調line長度*/
 +
  height:47%; /*line寬度*/
 +
  position:relative;
  
−
                /*下拉式menu*/
+
}
  
−
    .dropdown a:hover, .dropdown:hover .dropbtn{
+
.line .blue {
−
                                            color:red !important;
+
  width: 1px;   /*line寬度*/
−
                                            }
+
  height: 15%;  /*調line長度*/
 +
  position:relative;
 +
  left:51px;
  
 +
}
 +
.line .red-container {
 +
  position:relative;
 +
  width: 4px;
 +
}
 +
.line .red {
 +
  background-color:#00D6FF;/*cover line color*/
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
}
 +
.line .blue {
 +
  background-color: white;/*line color*/
 +
  *zoom: 1;
 +
  background-size: 100%;
 +
 +
}
  
−
    .dropdown-content{  
+
.node {
−
                      display:none;
+
  margin-left: 40px;/*調node間距*/
−
                      background: rgb(157, 136, 210);
+
  width: 20px;
−
                      position:absolute;
+
  height: 20px;
−
                      width:auto !important;
+
   margin-top: 30px;
−
                     
+
−
                    }
+
−
    .dropdown-content a{
+
−
                        color: black;
+
−
                        padding:15px;
+
−
                        text-decoration: none;
+
−
                        display: block;
+
−
                        text-align:left !important;
+
−
                        size:1em;
+
−
                        }
+
−
                       
+
−
   
+
−
    .dropdown-content a:hover{
+
−
                              color: red;
+
−
                        }
+
−
 
+
−
* {box-sizing:border-box}
+
−
body {font-family: Verdana,sans-serif;margin:0}
+
−
.mySlides {display:none}
+
−
 
+
−
/* Slideshow container */
+
−
.slideshow-container {
+
−
   max-width: 800px;
+
 
   position: relative;
 
   position: relative;
−
  margin: auto;
 
 
}
 
}
−
 
+
.node .splash {
−
/* Next & previous buttons */
+
   box-shadow: 0px 0px 8px 2px rgba(69, 174, 233, 0.53);
−
.prev, .next {
+
  transform: translateZ(0px) scale(1);
−
   cursor: pointer;
+
 
   position: absolute;
 
   position: absolute;
−
  top: 50%;
+
   width: 20px;
−
   width: auto;
+
   height: 20px;
−
   padding: 16px;
+
   border-radius: 100%;
−
   margin-top: -22px;
+
   pointer-events: none;
−
   color: white;
+
   opacity: 1;
−
  font-weight: bold;
+
−
   font-size: 18px;
+
−
  transition: 0.6s ease;
+
−
  border-radius: 0 3px 3px 0;
+
 
}
 
}
 +
.node.active .active-circle {
 +
  transform: scale(1);
 +
  opacity: 1;
 +
  background:white;/*active circle color*/
 +
  left:1.6px; 
 +
}
 +
.node.active .splash {
 +
  transition: transform 1200ms, opacity 1500ms;
 +
  transform: translateZ(0px) scale(2.5);
 +
  opacity: 0 !important;
  
−
/* Position the "next button" to the right */
 
−
.next {
 
−
  right: 0;
 
−
  border-radius: 3px 0 0 3px;
 
 
}
 
}
 +
.node.active .inactive-circle {
 +
  transition: opacity 200ms;
 +
  opacity: 0;
 +
}
 +
.node .active-circle {
 +
  transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.7);
 +
  position: absolute;
 +
  opacity: 0;
 +
  width: 20px;
 +
  height: 20px;
 +
  border-radius: 100%;
 +
  background-color: #4b1202;
 +
  *zoom: 1;
 +
  background-size: 100%;
  
−
/* On hover, add a black background color with a little bit see-through */
 
−
.prev:hover, .next:hover {
 
−
  background-color: rgba(0,0,0,0.8);
 
 
}
 
}
−
 
+
.node .active-circle .cover {
−
 
+
  transform: translateZ(0px);
−
/* Number text (1/3 etc) */
+
  width: 16px;
−
.numbertext {
+
   height: 16px;
−
   color: #f2f2f2;
+
   background:red;/*active circle color */
−
   font-size: 12px;
+
   border-radius: 100%;
−
   padding: 8px 12px;
+
 
   position: absolute;
 
   position: absolute;
−
   top: 0;
+
   top: 2px;
 +
  left: 2px;
 
}
 
}
  
−
/* The dots/bullets/indicators */
+
.node .inactive-circle {
−
.dot {
+
   transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
−
   cursor:pointer;
+
   width: 14px;
−
   height: 13px;
+
   height: 14px;
−
   width: 13px;
+
   display: block;
−
   margin: 0 2px;
+
   background: #000;
−
   background-color: #bbb;
+
  position: absolute;
−
   border-radius: 50%;
+
   border-radius: 100%;
−
   display: inline-block;
+
   border: 2px solid white;
−
   transition: background-color 0.6s ease;
+
  top: 3px;
 +
  left: 3px;
 +
}
 +
.node:hover {
 +
  cursor: pointer;
 +
}
 +
.node:hover .active-circle {
 +
   transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.84);
 
}
 
}
  
−
.active, .dot:hover {
+
.node:hover .inactive-circle {
−
   background-color: #717171;
+
   transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
 +
  transform: scale(0.85);
 
}
 
}
  
 +
/*left-topic*/
 +
 +
.topic{
 +
    position:relative;
 +
    margin-top:0vh !important;
 +
    width:200px;
 +
    height:auto;
 +
    left:210px;
 +
    float:right;
 +
    color:#F3F7F7;
 +
}
 +
.text_color{
 +
    color:#F3F7F7;
 +
    font-size:12pt !important;
 +
}
 +
/*content*/
 +
.content_container{
 +
    position:relative;
 +
    left:6.5vw;
 +
    right:6.5vw;
 +
    margin:0 auto;
 +
    width:60vw;
 +
    height:auto;
 +
}
 
.title{
 
.title{
 
     font-size:25pt !important;
 
     font-size:25pt !important;
−
     color:rgb(0, 206, 255);
+
     color:#ffd11a;
−
     border-left:3px solid rgb(0, 206, 255);
+
    text-shadow:1px 1px 10px rgb(153, 153, 255);
−
     padding-left:150px !important;   
+
     border-left:3px solid rgb(153, 153, 255);
 +
     padding-left:10px !important;   
 
     margin-top:20px;
 
     margin-top:20px;
 
     margin-bottom:10px;
 
     margin-bottom:10px;
 
     font-weight:bold;
 
     font-weight:bold;
 
}
 
}
−
 
+
.content{
−
.team{
+
     font-size:15pt !important;
−
     color:#F3F7F7;
+
 
     text-align:justify;
 
     text-align:justify;
 
     text-indent:2em;
 
     text-indent:2em;
−
     padding-left:200px;
+
    color:#F3F7F7;
−
     padding-right:200px;
+
     padding-left:40px;
 +
     padding-top:15px;
 +
    padding-bottom:15px;
 +
}
 +
 
 +
/*second title*/
 +
.content-1{
 +
    font-size:19pt !important;
 +
    text-align:justify;
 +
    color:#cc3399;
 +
    font-weight: bold !important;
 +
    padding-top:30px;
 +
    padding-bottom:10px
 +
}
 +
 
 +
.content-image{
 +
    color:#F3F7F7 !important;
 +
    font-size:11pt !important;
 
     padding-top:10px;
 
     padding-top:10px;
−
     padding-bottom:10px;
+
     padding-bottom:50px;
−
     font-size:20pt !important;
+
     width:50vw;
 +
    margin:auto;
 +
    padding-left:60px;
 
}
 
}
−
div{
+
 
−
        background-color:black;
+
.appear{
 +
    display:none;
 +
   
 +
}
 +
.list{
 +
    font-size:15pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
}
 +
.quote{
 +
    font-size:17pt !important;
 +
    text-align:justify;
 +
    color:#F3F7F7;
 +
    text-indent:2em !important;
 +
   
 
}
 
}
−
</style>
 
−
</head>
 
  
−
<body>
 
−
<div class="main-container">
 
−
    <a href="https://2017.igem.org/Team:TCFSH_Taiwan">
 
−
  <img src="https://static.igem.org/mediawiki/2017/5/53/TEAM_name_logo_Tcfsh_new.png" class="TCFSH_Taiwan" width="20%">
 
−
  </a>
 
−
      <ul class="main-menu" id="menu"  style="list-style-image: none;">
 
−
        <li class="dropdown"><a href="https://2017.igem.org/Team:TCFSH_Taiwan"  class="dropbtn">Home</a></li>
 
−
       
 
−
        <li class="dropdown">
 
−
            <a href="#" class="dropbtn"><span class="menu_sign">Project</span></a>
 
−
                  <div class="dropdown-content">
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Description">Description</a></div>
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Design">Design</a></div>
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Experiments">Experiments</a></div>
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Notebook">Notebook</a></div>
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/InterLab">InterLab</a></div>
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Contribution">Contribution</a></div>
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Model">Model</a></div>
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Proof">Results</a></div>
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Demonstrate">Demonstrate</a></div>
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Improve">Improve</a></div>
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Attributions">Attributions</a></div>
 
−
                  </div>
 
−
        </li>
 
  
−
                 
+
/*image*/
−
        <li class="dropdown">
+
.web{
−
            <a href="#" class="dropbtn"><span class="menu_sign">Awards</span></a>
+
    position:fixed !important;
−
                  <div class="dropdown-content">
+
    left:0%;
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Applied_Design">Applied Design</a></div>
+
    bottom:0%;
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Entrepreneurship">Entrepreneurship</a></div>
+
    display:block;
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Hardware">Hardware</a></div>
+
    margin: auto;
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Measurement">Measurement</a></div>
+
}
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Model">Model</a></div>
+
.right{
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Plant">Plant</a></div>
+
    position:fixed !important;
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Software">Software</a></div>
+
    bottom:-15px;
−
                  </div>
+
    right:0vw;
−
        </li>
+
    margin: auto;
−
       
+
}
−
        <li class="dropdown">
+
−
            <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Parts" class="dropbtn"><span class="menu_sign">Parts</span></a>
+
−
                  <div class="dropdown-content">
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Basic_Part">Basic Parts</a></div>
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Composite_Part">Composite Parts</a></div>
+
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Part_Collection">Part Collection</a></div>
+
−
                  </div>
+
−
        </li>
+
  
−
       
 
−
        <li class="dropdown">
 
−
            <a href="#" class="dropbtn"><span class="menu_sign">Human Practices</span></a>
 
−
                  <div class="dropdown-content">
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/HP/Silver">Silver HP</a></div>
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/HP/Gold_Integrated">Integrated and Gold</a></div>
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Engagement">Public Engagement</a></div>
 
−
                  </div>
 
−
        </li>
 
−
 
 
−
       
 
−
       
 
−
        <li class="dropdown">
 
−
            <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Attributions" class="dropbtn"><span class="menu_sign">Team</span></a>
 
−
                  <div class="dropdown-content">
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Team">Team</a></div>
 
−
                      <div><a href="https://2017.igem.org/Team:TCFSH_Taiwan/Collaborations">Collaborations</a></div>                     
 
−
                  </div>
 
−
        </li>
 
  
−
      <li class="dropdown">
 
−
            <a href="https://2017.igem.org/Team:TCFSH_Taiwan/Safety" class="dropbtn">Safety</a>             
 
−
        </li>
 
−
       
 
−
    </ul>
 
−
</div> 
 
−
</body>
 
  
 +
 +
.img-position{
 +
    position:absolute;
 +
    z-index:-1;
 +
}
 +
.box{
 +
    width:auto;
 +
    padding-top:20px;
 +
    padding-bottom:20px;
 +
}
 +
.picture{
 +
    position:relative;
 +
    left:8vw;
 +
    width:80%;
 +
    padding-bottom:10px;
 +
}
 +
 +
.picture-1{
 +
    position:relative;
 +
    left:17vw;
 +
    width:50%;
 +
    padding-bottom:10px;
 +
}
 +
 +
video {
 +
            position:relative;
 +
            width: 78%;
 +
            height:auto;
 +
            margin-top:60px;
 +
            margin-left:10vw;
 +
            margin-right:10vw;
 +
          }
 +
 +
</style>
 +
</head>
 
<body>
 
<body>
 +
<nav id="scroll">
 +
    <div class="wrapper">
 +
     
 +
      <div class="nodes">
 +
            <div class="line">
 +
                <div class="blue">
 +
                    <div class="red-container">
 +
                        <div class="red"></div>
 +
                    </div>
 +
                </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">School Introduction</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">   
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
 
 +
          <div class="node">
 +
          <div class="topic"><p class="text_color">Team Members</p></div>
 +
            <div class="active-circle">
 +
              <div class="splash"></div>
 +
              <div class="cover">   
 +
              </div>
 +
            </div>
 +
            <div class="inactive-circle">
 +
              <div class="small-cover">
 +
              </div>
 +
            </div>
 +
          </div>
 +
    </nav>
 +
  
−
<div class="slideshow-container">
+
<h1>
  
−
<div class="mySlides fade">
+
<!--video-->
−
   <div class="numbertext">1 / 3</div>
+
   <div>
−
  <img src="https://static.igem.org/mediawiki/2017/f/f7/Tcfsh_slideshow_1.jpeg" style="width:100%">
+
        <video playinline autoplay  controls="true">
−
</div>
+
            <source src="https://static.igem.org/mediawiki/2017/7/7b/Tcfshtaiwan_introduce.mp4" type="video/mp4";>
 +
        </video>
 +
    </div>
 +
<!--wiki content-->
  
−
<div class="mySlides fade">
 
−
  <div class="numbertext">2 / 3</div>
 
−
  <img src="https://static.igem.org/mediawiki/2017/5/5f/Tcfsh_slideshow_2n.jpeg" style="width:100%">
 
−
</div>
 
  
−
<div class="mySlides fade">
+
<section class="content_container">
−
   <div class="numbertext">3 / 3</div>
+
   <div>
−
  <img src="https://static.igem.org/mediawiki/2017/f/fb/Tcfsh_slideshow_3n.jpeg" style="width:100%">
+
    <p class="title">School Introduction</p>
−
</div>
+
    <p class="content">In 1915, under Japanese occupation, Taiwanese forefathers Lin Lie-tang, Lin Hsien-tang, Lin Hsiung-cheng, Tsai Lien-fang, and Ku Hsien-jung pooled resources and donated land to build the high school to educate Taiwanese students with a view to awakening Taiwanese people's nationalism and cultural senses. After the foundation of the school in 1915, it has undergone several changes in the name of the school. Not until the year 2000 did the school finally get the name it now adopts, National Taichung First Senior High School. There are now 75 classes, including 63 general classes, 3 classes of high achievement in math and science, 3 class of high achievement in language, and 3 art-oriented  classes.</p>
 +
    <img src="https://static.igem.org/mediawiki/2017/8/8d/Tcfsh_school.jpeg" class="bigphoto" width="50%">
 +
    </img>
  
−
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
+
    <p class="title">Team Members</p>
−
<a class="next" onclick="plusSlides(1)">&#10095;</a>
+
    <p class="content-1">Bo-Ching Wu</p>
 +
    <img src="https://static.igem.org/mediawiki/2017/c/c9/Captain.jpeg" class="bigphoto" width="30%">
 +
    <p class="content">Hi! I'm Bo-Ching, Wu, and I am in 11th grade now. I like science and music. Hope to see you at Jamboree!</p>
 +
    <p class="content-1">Jason Yang</p>
 +
    <img src="https://static.igem.org/mediawiki/2017/3/3e/Jason_yang.jpeg" class="bigphoto" width="30%">
 +
    <p class="content">I am a grade 11 student. My favorite subject is biology, and I especially love neuroscience. The working of brain, the secret of thinking, the origin of emotion, the storage of memories……, each of them arouse my interest. The sport I like is playing table tennis and swimming. In my leisure time, I even watch top players playing table tennis on Youtube.</p>
 +
    <p class="content-1">Hao-Yun Tu</p>
 +
    <img src="https://static.igem.org/mediawiki/2017/0/08/Tuhaoyun.png" class="bigphoto" width="30%">
 +
    <p class="content">Hello everyone! I am a grade 11 student. My favorite subject is biology, especially the genetic parts. In my free time, I like to play basketball with my classmates. I also like animation a lot!</p>
 +
    <p class="content-1">Chien-Yi Chien</p>
 +
    <img src="https://static.igem.org/mediawiki/2017/1/14/Chienyi.jpeg" class="bigphoto" width="50%">
 +
    <p class="content">I am a grade 11 student. I have been interested in math since I was a little boy, especially algebra. I enjoy giving some interesting math questions to my friends and thinking together. In my free time, I like to listen to pop music. Sometimes I also like to chat with friends on philosophic perspectives.</p>
 +
    <p class="content-1">Hsin-Yu Chang</p>
 +
    <img src="https://static.igem.org/mediawiki/2017/1/1d/Hsin_yu.jpeg" class="bigphoto" width="30%">
 +
    <p class="content">Hello everyone! I am a grade 11 student. I am 175-centimeter tall! My hobby is drawing, and I'm the designer of our team logo and mascot. They are cool, right?</p>
 +
    <p class="content-1">Yen-Ling Ko</p>
 +
    <img src="https://static.igem.org/mediawiki/2017/f/fb/Yenling.jpeg" class="bigphoto" width="30%">
 +
    <p class="content">Hi, I am Yen-Ling Ko, and my favorite subject is biology. My hobbies are watching dramas, playing baseball, and counseling  others. This is my first time to participate in iGEM, and l'm looking forward to see all of you in Boston~</p>
 +
    <p class="content-1">Chia-Yang Chen</p>
 +
    <img src="https://static.igem.org/mediawiki/2017/8/8d/Chiayeng.jpeg" class="bigphoto" width="30%">
 +
    <p class="content">I am the second tallest girl in TCFSH_Taiwan. Being optimistic all the time, I like biology more than chemistry. One of my dream is to be lost in reverie all day long.</p>
 +
</section>
 +
</h1>
  
−
</div>
 
−
<br>
 
  
−
<div style="text-align:center">
+
<!--JS-->
−
  <span class="dot" onclick="currentSlide(1)"></span>
+
−
  <span class="dot" onclick="currentSlide(2)"></span>
+
−
  <span class="dot" onclick="currentSlide(3)"></span>
+
−
</div>
+
  
 
<script>
 
<script>
−
var slideIndex = 1;
 
−
showSlides(slideIndex);
 
  
−
function plusSlides(n) {
+
var $document = $( document.body );
−
  showSlides(slideIndex += n);
+
var $revealBar = $( '.red-container' );
−
}
+
var wrapperHeight = $document.height();
 +
var stepDistance = 101;
 +
var documentHeight = window.innerHeight;
 +
var positions = [];
 +
var heights = [];
 +
var elements = $( '.title' );
  
−
function currentSlide(n) {
+
// Cache heights and positions
−
   showSlides(slideIndex = n);
+
for( var i = 0; i < elements.length; i++ ) {
 +
   var $element = $(elements[i]);
 +
  var height = $element.offset().top + documentHeight;
 +
  if (height > wrapperHeight) {
 +
    height = wrapperHeight;
 +
  }
 +
  positions.push(height);
 +
  heights.push($element.height());
 
}
 
}
  
−
function showSlides(n) {
+
var $nodes =  $( '.node' );
−
  var i;
+
 
−
   var slides = document.getElementsByClassName("mySlides");
+
// Should totally be debounced /w animation frame. I know,
−
   var dots = document.getElementsByClassName("dot");
+
// this whole thing is slightly inefficient.
−
   if (n > slides.length) {slideIndex = 1}   
+
// And magic numbers too!
−
   if (n < 1) {slideIndex = slides.length}
+
$( document ).scroll( function() {
−
   for (i = 0; i < slides.length; i++) {
+
 
−
      slides[i].style.display = "none";
+
   nodeTop = $document.scrollTop() + documentHeight + 1;
 +
   var current = 0;
 +
    
 +
   // Active/non active states
 +
   for( var i = 0; i < positions.length; i++ ) {
 +
    if(nodeTop >= positions[i]-80) {
 +
      current = i;
 +
      $nodes.eq( i ).addClass( 'active' );
 +
    } else {
 +
      $nodes.eq( i ).removeClass( 'active' );
 +
    }
 
   }
 
   }
−
   for (i = 0; i < dots.length; i++) {
+
    
−
      dots[i].className = dots[i].className.replace(" active", "");
+
 
 +
  if ( current < elements.length ) {
 +
    var nextStep = (nodeTop - positions[current]) / (positions[current + 1] - positions[current]);
 +
    var totalWidth = ( current * stepDistance ) + (nextStep * stepDistance);
 +
$revealBar.height( totalWidth+25 );
 
   }
 
   }
−
  slides[slideIndex-1].style.display = "block";
+
 
−
   dots[slideIndex-1].className += " active";
+
})
 +
 
 +
// Clicking the nodes... again, nothing special ;)
 +
$nodes.each( function( index ) {
 +
  var $node = $( this );
 +
   $node.click( function() {
 +
    $('html, body').animate({ scrollTop: (positions[ index ]-documentHeight)-70}, 1000 );
 +
  });
 +
})
 +
//scroll_relocate
 +
function sticky_relocate() {
 +
    var window_top = $(window).scrollTop();
 +
    var div_top = $('.main-img').offset().top;;
 +
    if (window_top > div_top+500) {
 +
        $('#scroll').removeClass('appear');
 +
    } else {
 +
        $('#scroll').addClass('appear');
 +
    };
 +
    if(window_top > div_top+500) {
 +
        $('#web').fadeIn(200);
 +
        $('#right').fadeIn(200);
 +
    } else {
 +
        $('#web').fadeOut(200);
 +
        $('#right').fadeOut(200);
 +
    }
 
}
 
}
−
</script>
 
  
−
</body>
+
$(function () {
 +
    $(window).scroll(sticky_relocate);
 +
    sticky_relocate();
 +
});
  
  
−
<body>
 
−
<div>
 
−
<p class="title">School Introduction</p>
 
  
−
</div>
+
$(document).ready(function(
−
</body>
+
  
 +
){})
 +
 +
</script>
 +
</body>
 
</html>
 
</html>
 +
{{TCFSH_Taiwan_footer}}

Latest revision as of 08:27, 1 November 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM

School Introduction

In 1915, under Japanese occupation, Taiwanese forefathers Lin Lie-tang, Lin Hsien-tang, Lin Hsiung-cheng, Tsai Lien-fang, and Ku Hsien-jung pooled resources and donated land to build the high school to educate Taiwanese students with a view to awakening Taiwanese people's nationalism and cultural senses. After the foundation of the school in 1915, it has undergone several changes in the name of the school. Not until the year 2000 did the school finally get the name it now adopts, National Taichung First Senior High School. There are now 75 classes, including 63 general classes, 3 classes of high achievement in math and science, 3 class of high achievement in language, and 3 art-oriented classes.

Team Members

Bo-Ching Wu

Hi! I'm Bo-Ching, Wu, and I am in 11th grade now. I like science and music. Hope to see you at Jamboree!

Jason Yang

I am a grade 11 student. My favorite subject is biology, and I especially love neuroscience. The working of brain, the secret of thinking, the origin of emotion, the storage of memories……, each of them arouse my interest. The sport I like is playing table tennis and swimming. In my leisure time, I even watch top players playing table tennis on Youtube.

Hao-Yun Tu

Hello everyone! I am a grade 11 student. My favorite subject is biology, especially the genetic parts. In my free time, I like to play basketball with my classmates. I also like animation a lot!

Chien-Yi Chien

I am a grade 11 student. I have been interested in math since I was a little boy, especially algebra. I enjoy giving some interesting math questions to my friends and thinking together. In my free time, I like to listen to pop music. Sometimes I also like to chat with friends on philosophic perspectives.

Hsin-Yu Chang

Hello everyone! I am a grade 11 student. I am 175-centimeter tall! My hobby is drawing, and I'm the designer of our team logo and mascot. They are cool, right?

Yen-Ling Ko

Hi, I am Yen-Ling Ko, and my favorite subject is biology. My hobbies are watching dramas, playing baseball, and counseling others. This is my first time to participate in iGEM, and l'm looking forward to see all of you in Boston~

Chia-Yang Chen

I am the second tallest girl in TCFSH_Taiwan. Being optimistic all the time, I like biology more than chemistry. One of my dream is to be lost in reverie all day long.