Difference between revisions of "Team:CSMU NCHU Taiwan"

 
(44 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
{{CSMU_NCHU_Taiwan}}
 
 
{{:Team:CSMU_NCHU_Taiwan/Templates/Header}}
 
{{:Team:CSMU_NCHU_Taiwan/Templates/Header}}
 
<html lang="en">
 
<html lang="en">
 +
<style type="text/css">
  
−
<head>
+
#home-img{
−
<meta charset="UTF-8" />
+
  width: 100%;
−
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
+
  height: 100vh;
−
<script type="text/javascript">
+
  position: relative;
−
$(function(){
+
  z-index: 10;
−
$("ul.navigation > li:has(ul) > a").append('<div class="arrow-bottom"></div>');
+
  background-image: url('https://static.igem.org/mediawiki/2017/0/02/T--CSMU_NCHU_Taiwan--home_img.png');
−
$("ul.navigation > li ul li:has(ul) > a").append('<div class="arrow-right"></div>');
+
  background-repeat: no-repeat;
−
});
+
  background-size:cover;
−
</script>
+
  background-attachment: fixed;
−
<style type="text/css">
+
}
  
−
/* 初始化 */
+
#home-cover{
−
body, ul, li, a{
+
  padding: 0 10%;
−
margin: 0;
+
}
−
padding: 0;
+
−
text-decoration:none;
+
−
}
+
−
ul, li {
+
−
list-style: none;
+
−
}
+
−
/* 選單 li 之樣式 */
+
−
ul.navigation li {
+
−
      position: relative;
+
−
float: left;
+
−
}
+
−
/* 選單 li 裡面連結之樣式 */
+
−
ul.navigation li a{
+
−
display: block;
+
−
padding: 12px 20px;
+
−
background: #FFF4C1;
+
−
                                font-size: 20px;
+
−
color: #000000;
+
−
}
+
−
/* 特定在第一層，以左邊灰線分隔 */
+
−
       
+
−
ul.navigation > li > a:hover{
+
−
color: #666;
+
−
background: #DDD
+
−
}
+
−
/* 特定在第一層 > 第二層或以後下拉部分之樣式 */
+
−
ul.navigation ul{
+
−
display: none;
+
−
float:right;
+
−
position:absolute;
+
−
right: 20px;
+
−
margin: 0;
+
−
}
+
−
/* 當第一層選單被觸發時，指定第二層顯示 */
+
−
ul.navigation li:hover > ul{
+
−
display: block;
+
−
}
+
−
/* 特定在第二層或以後下拉部分 li 之樣式 */
+
−
ul.navigation ul li {
+
−
border-bottom: 1px solid #DDD;
+
−
}
+
−
/* 特定在第二層或以後下拉部分 li （最後一項不要底線）之樣式 */
+
−
ul.navigation ul li:last-child {
+
−
border-bottom: none;
+
−
}
+
−
/* 第二層或以後選單 li 之樣式 */
+
−
ul.navigation ul a {
+
−
width: 120px;
+
−
padding: 10px 12px;
+
−
color: #666;
+
−
                font-size: 13px;
+
−
background: #EEE;
+
−
}
+
−
ul.navigation ul a:hover {
+
−
background: #9999FF;
+
−
}
+
−
/* 第三層之後，上一層的選單觸發則顯示出來（皆為橫向拓展） */
+
−
ul.navigation ul li:hover > ul{
+
−
display: block;
+
−
position: absolute;
+
−
top: 0;
+
−
left: 100%;
+
−
}
+
−
/* 箭頭向下 */
+
−
.arrow-bottom {
+
−
display: inline-block;
+
−
margin-left: 5px;
+
−
border-top: 4px solid #FFF;
+
−
border-right: 4px solid transparent;
+
−
border-left: 4px solid transparent;
+
−
width: 1px;
+
−
height: 1px;
+
−
}
+
−
</style>
+
−
</head>
+
  
 +
.top {
 +
  position: fixed;
 +
  right: 50px;
 +
  bottom: 50px;
 +
  height: 50px;
 +
  width: 50px;
 +
  cursor: pointer; }
 +
  .top img {
 +
    width: 100%; }
 +
 +
</style>
 
<body>
 
<body>
 +
    <div id="home-img"></div>
 +
    <div id="home-cover">
 +
      <img src="https://static.igem.org/mediawiki/2017/5/5e/T--CSMU_NCHU_Taiwan--home_cover.png" alt="" style="width:100%;">
 +
      <img src="https://static.igem.org/mediawiki/2017/d/da/T--CSMU_NCHU_Taiwan--sponsors3.png" alt="" style="width:100%" align="right">
 +
    </div>
  
−
<ul class="navigation" weight=100%>
+
    <div class="top">
−
<li>
+
      <img src="https://static.igem.org/mediawiki/2017/5/52/T--CSMU_NCHU_Taiwan--top.png" alt="">
−
<a href="#">選單內容 1</a>
+
    </div>
−
<ul>
+
</body>
−
<li><a href="#">選單內容 1 - 1</a></li>
+
−
<li><a href="#">選單內容 1 - 2</a></li>
+
−
</ul>
+
−
</li>
+
−
<li>
+
−
<a href="#">選單內容 2</a>
+
−
<ul>
+
−
<li><a href="#">選單內容 2 - 1</a></li>
+
−
<li><a href="#">選單內容 2 - 2</a></li>
+
−
</ul>
+
−
</li>
+
−
<li><a href="#">選單內容 3</a></li>
+
−
<li><a href="#">選單內容 4</a></li>
+
−
<li><a href="#">選單內容 5</a></li>
+
−
<li><a href="#">選單內容 6</a></li>
+
−
<li><a href="#">選單內容 7</a></li>
+
−
</ul>
+
  
−
<div class="column full_size" >
+
  <script type="text/javascript">
−
<p style="font-size:30px;padding-top:60px">We are CSMU_NCHU_Taiwan from Taichung,Taiwan</p>
+
$(document).ready(function(){
−
</div>
+
  
−
<div class="logo" align="right">
+
     
  
−
</div>
+
      $('.top').on('click', function(){
 +
      $('html, body').animate({scrollTop: '0px'}, 500);
 +
    });
  
−
<div class="column full_size"></div>
+
});
  
−
<div class="column full_size" >
+
function toggleContainer(i){
−
<h2> Our project description </h2>
+
  return function(){
−
<p style="font-size:20px">For the first part of our project- an aflatoxin detecting strip - our bacteria will be able to produce a fusion protein containing:</p>
+
      if($('#public-'+i).is(":visible")){
−
<p style="font-size:18px">1. scFv (Single-chain variable fragment) that can recognize aflatoxin and bind to it Specifically.</p>
+
        $('#public-'+i).slideToggle(500);
−
<p style="font-size:18px">2. RFP that make the protein more easy to observe.</p>
+
      }
−
<p style="font-size:18px">3. His Tag acts as the antigen of the secondary antibody.</p>
+
      else{
−
<p style="font-size:18px">Using this fusion protein we will create a strip that detects the presence of aflatoxin in food.</p>
+
        $('.img-container:visible').slideToggle(500);
−
<br>
+
        $('#public-'+i).slideToggle(500);
−
<p style="font-size:20px">For the second part of our project - an aflatoxin degrading enzyme-  our bacteria will be able to produce:</p>
+
      }
−
<p style="font-size:18px">1. An enzyme(FGD) that can degrade aflatoxin.</p>
+
      $('.hp-bg-container').css('max-height','none')
−
<p style="font-size:18px">2. An enzyme that can produce the cofactor(F420H2) of the enzyme(FGD).</p>
+
      $('.main-content').css('min-height','200vh')
−
<p style="font-size:18px">Our bacteria will be engineered to release these enzymes (FGD) that can protect the digestive system and human body by degrading the aflatoxin before this harmful substance is absorbed.</p>
+
  }
−
</div>
+
}
  
−
<div class="column full_size" >
+
 
−
<h2> More about us </h2>
+
</script>
−
<p style="font-size:18px">Facebook: <a href="https://www.facebook.com/IGEM-CSMU-X-NCHU-785205914980916/">IGEM CSMU X NCHU</a></p>
+
−
<p style="font-size:18px">Youtube: <a href="https://www.youtube.com/channel/UCjUI2xlK0O9CMdYZyiPoMmw">CSMU NCHU Taiwan iGEM</a></p>
+
−
</div>
+
−
</body>
+
 
</html>
 
</html>

Latest revision as of 08:24, 1 November 2017

HOME