Difference between revisions of "Team:Tokyo Tech/Team"

(Prototype team page)
 
Line 1: Line 1:
−
{{Tokyo_Tech}}
+
{{TokyoTech/css/reset}}
 +
{{TokyoTech/css/main}}
 +
<!DOCTYPE html>
 
<html>
 
<html>
 +
<title>Coli Sapiens</title>
 +
<meta charset="UTF-8">
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<link rel="stylesheet" href="main.css">
 +
<style>
 +
body,h1,h2,h3,h4,h5 {font-family: "Arial", sans-serif}
 +
body {font-size:16px;}
 +
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
 +
.w3-half img:hover{opacity:1}
 +
</style>
 +
<body>
  
−
<div class="column two_thirds_size" >
+
<div id="loader-bg">
 +
  <div id="loader">
 +
    <div class="photo-show">
 +
    <img src="https://static.igem.org/mediawiki/2017/f/f4/T--TokyoTech--load_1.png" width="600">
 +
    <img src="https://static.igem.org/mediawiki/2017/4/43/T--TokyoTech--load_2.png" width="600">
 +
    </div>
 +
  </div>
 +
</div>
  
−
<h1>Team</h1>
+
<!-- Sidebar/menu -->
−
<p>In this page you can introduce your team members, instructors, and advisors. </p>
+
<nav class="w3-sidebar w3-red w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:300px;font-weight:bold;" id="mySidebar"><br>
 +
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width:100%;font-size:20px">Close Menu</a>
 +
  <div class="w3-container" style="margin-top: 20px;margin-bottom: 25px" id="wrap">
 +
    <img src="https://static.igem.org/mediawiki/2017/a/a8/T--TokyoTech--logo_white_bright_10211603.png" style="width: 100%">
 +
  </div>
  
 +
  <div style="padding-top: 15px; padding-left: 25px; id="wrap">
  
−
<h3>What should this page contain?</h3>
+
  <div id="contents" style="z-index: 10">
−
<ul>
+
−
<li> Include pictures of your teammates, don’t forget instructors and advisors! </li>
+
−
<li>You can add a small biography or a few words from each team member, to tell us what you like, and what motivated you to participate in iGEM.</li>
+
−
<li>Take team pictures! Show us your school, your lab and little bit of your city.</li>
+
−
<li>Remember that image galleries can help you showcase many pictures while saving space.</li>
+
−
</ul>
+
−
</div>
+
  
 +
    <ul class="click_menu_checkbox vertm_down">
 +
    <li style="margin-bottom: 10px; border: 5px double #fff; border-radius: 10px;">
 +
    <input type="checkbox" id="vmcb-a" />
 +
    <label for="vmcb-a"><a href="https://2017.igem.org/Team:TokyoTech">Home</a></label>
 +
    </li>
 +
    <li style="margin-bottom: 10px; border: 5px double #fff; border-radius: 10px">
 +
    <input type="checkbox" id="vmcb-b" />
 +
    <label for="vmcb-b"><a href="https://2017.igem.org/Team:TokyoTech/Medal">Achievements</a></label>
 +
    </li>
 +
    <li style="margin-bottom: 10px; border: 5px double #fff; border-radius: 10px">
 +
    <input type="checkbox" id="vmcb-c" />
 +
    <label for="vmcb-c"><a>Project</a></label>
 +
    <ul>
 +
      <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/Description" class="w3-bar-item w3-button w3-hover-white">Description</a></li>
 +
      <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/Project/Basic_Parts" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Basic Parts</a></li>
 +
      <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/Project/Composite_Parts" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Composite Parts</a></li>
 +
    </ul>
 +
    </li>
  
 +
    <li style="margin-bottom: 10px; border: 5px double #fff; border-radius: 10px">
 +
    <input type="checkbox" id="vmcb-d" />
 +
    <label for="vmcb-d"><a>Experiment</a></label>
 +
    <ul>
  
−
<div class="column third_size" >
+
        <li>
−
<div class="highlight decoration_A_full">
+
        <input type="checkbox" id="vmcb-d1" />
−
<h3>Inspiration</h3>
+
        <label for="vmcb-d1"><a href="https://2017.igem.org/Team:TokyoTech/Experiment/Overview" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white" style="text-align: center;">Overview</a></label>
−
<p>You can look at what other teams did to get some inspiration! <br />
+
        </li>
−
Here are a few examples:</p>
+
 
−
<ul>
+
        <li style="padding-bottom: 10px; padding-top: 5px">
−
<li><a href="https://2014.igem.org/Team:METU_Turkey_team">2014 METU Turkey </a></li>
+
        <input type="checkbox" id="vmcb-d2" />
−
<li><a href="https://2014.igem.org/Team:Colombia/Members">2014 Colombia</a></li>
+
          <label for="vmcb-d2"><a style="text-align: center;">Bacteria to <br>Human Cells ▼</a></label>
−
<li><a href="https://2014.igem.org/Team:Stony_Brook/Team">2014 Stony Brook</a></li>
+
            <ul>
−
<li><a href="https://2014.igem.org/Team:OUC-China/Team">2014 OUC-China</a></li>
+
              <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/Experiment/TraI_Assay" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">TraI Assay</a></li>
−
</ul>
+
              <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/Experiment/TraI_Improvement" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">TraI Improvement <br>Assay</a></li>
 +
              <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/Experiment/TraR_Reporter_Assay" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white" >TraR Reporter <br>Assay</a></li>
 +
              <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/Experiment/Transcriptome_Analysis" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Transcriptome <br>Analysis</a></li>
 +
              <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/Experiment/Chimeric_Transcription_Factor" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Chimeric <br> Transcription <br> Factor Assay</a></li>
 +
            </ul>
 +
      </li>
 +
 
 +
      <li style="padding-bottom: 3px">
 +
      <input type="checkbox" id="vmcb-d3" />
 +
    <label for="vmcb-d3"><a style="text-align: center;">Human Cells to <br>Bacteria ▼</a></label>
 +
        <ul>
 +
          <li><a href="https://2017.igem.org/Team:TokyoTech/Experiment/AHK4_Assay" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">AHK4 Assay</a></li>
 +
          </ul>
 +
        </li>
 +
 
 +
        <li>
 +
        <input type="checkbox" id="vmcb-d4" />
 +
    <label for="vmcb-d4"><a href="https://2017.igem.org/Team:TokyoTech/InterLab" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white" style="text-align: center;">InterLab</a></label>
 +
        </li>
 +
    </ul>
 +
    </li>
 +
 
 +
 
 +
    <li style="margin-bottom: 10px; text-align: center; border: 5px double #fff; border-radius: 10px">
 +
    <input type="checkbox" id="vmcb-e" />
 +
    <label for="vmcb-e"><a href="https://2017.igem.org/Team:TokyoTech/Model">Modelling</a></label>
 +
    </li>
 +
 
 +
    <li style="margin-bottom: 10px; text-align: center; border: 5px double #fff; border-radius: 10px">
 +
    <input type="checkbox" id="vmcb-f" />
 +
    <label for="vmcb-f"><a>Human Practices</a></label>
 +
    <ul>
 +
    <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/HP" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Overview</a></li>
 +
    <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/HP/Silver" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Silver</a></li>
 +
    <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/HP/Gold_Integrated" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Gold (Integrated)</a></li>
 +
    <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/Demonstrate" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Demonstrate</a></li>
 +
    <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/Collaborations" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Collaborations</a></li>
 +
    </ul>
 +
    </li>
 +
 
 +
    <li style="margin-bottom: 10px; text-align: center; border: 5px double #fff; border-radius: 10px">
 +
    <input type="checkbox" id="vmcb-g" />
 +
    <label for="vmcb-g"><a>About us</a></label>
 +
    <ul>
 +
    <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/Team" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Team</a></li>
 +
    <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/Attributions" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Attributions</a></li>
 +
    <li style="text-align: center;"><a href="https://2017.igem.org/Team:TokyoTech/Sponsors" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Sponsors</a></li>
 +
    </ul>
 +
    </li>
 +
    </ul>
 +
    </div>
 +
 
 +
  </div>
 +
</nav>
 +
 
 +
<!-- Top menu on small screens -->
 +
<header class="w3-container w3-top w3-hide-large w3-red w3-xlarge w3-padding">
 +
  <a href="javascript:void(0)" class="w3-button w3-red w3-margin-right" onclick="w3_open()"><img src="http://www.adultb2b.biz/wp-content/themes/adultb2b%20-%20new/assets/images/menuBtn.png" style="width: 30px"></a>
 +
  <span style="padding-top: 5px">iGEM Tokyo Tech</span>
 +
</header>
 +
 
 +
<!-- Overlay effect when opening sidebar on small screens -->
 +
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
 +
 
 +
<!-- PAGE CONTENT! -->
 +
<div class="w3-main" style="margin-left:340px;margin-right:40px">
 +
 
 +
  <!-- Overview -->
 +
  <div class="w3-container" style="margin-top:20px">
 +
    <h1 class="w3-xxxlarge w3-text-red" style="padding-bottom: 10px;padding-top: 10px"><b>Team Introduction</b></h1>
 +
    <hr style="width:50px;border:5px solid red" class="w3-round">
 +
    <div class="w3-container" id="team" style="margin-top:30px;text-align: center;margin-bottom:20px">
 +
    <img src="https://static.igem.org/mediawiki/2017/0/00/T--TokyoTech--team_photo_min.jpg" style="max-width:80%">
 +
    </div>
 +
    <p style="font-size: 16px;">　Our team, iGEM 2017 Team TokyoTech consists of 12 undergrad students. At an early stage of our project, our team got together, trying to figure out what we could do with synthetic biology. Since then, we encouraged each other, worked together, and overcome difficulties. Now, we are ready to show our achievement.
 +
    </p>
 +
  </div>
 +
 
 +
<hr>
 +
 
 +
  <div class="w3-row-padding">
 +
    <div class="w3-col m4 w3-margin-bottom">
 +
      <div class="w3-light-grey">
 +
        <img src="https://static.igem.org/mediawiki/2017/a/a5/T--TokyoTech--member_hasegawa.jpg" style="width:100%">
 +
        <div class="w3-container">
 +
          <h3>Hazuki Hasegawa</h3>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="w3-col m4 w3-margin-bottom">
 +
      <div class="w3-light-grey">
 +
        <img src="https://static.igem.org/mediawiki/2017/7/70/T--TokyoTech--member_motai.jpg" style="width:100%">
 +
        <div class="w3-container">
 +
          <h3>Kazunori Motai</h3>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="w3-col m4 w3-margin-bottom">
 +
      <div class="w3-light-grey">
 +
        <img src="https://static.igem.org/mediawiki/2017/d/d4/T--TokyoTech--member_arakaki.jpg" style="width:100%">
 +
        <div class="w3-container">
 +
          <h3>Saki Arakaki</h3>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
 
 +
<hr>
 +
 
 +
    <div class="w3-row-padding">
 +
    <div class="w3-col m4 w3-margin-bottom">
 +
      <div class="w3-light-grey">
 +
        <img src="https://static.igem.org/mediawiki/2017/7/70/T--TokyoTech--member_umedera.jpg" style="width:100%">
 +
        <div class="w3-container">
 +
          <h3>Kohei Umedera</h3>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="w3-col m4 w3-margin-bottom">
 +
      <div class="w3-light-grey">
 +
        <img src="https://static.igem.org/mediawiki/2017/e/e4/T--TokyoTech--member_fujita.jpg" style="width:100%">
 +
        <div class="w3-container">
 +
          <h3>Hajime Fujita</h3>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="w3-col m4 w3-margin-bottom">
 +
      <div class="w3-light-grey">
 +
        <img src="https://static.igem.org/mediawiki/2017/8/8d/T--TokyoTech--member_yasue.jpg" style="width:100%">
 +
        <div class="w3-container">
 +
          <h3>Takuma Yasue</h3>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
 +
 
 +
<hr>
 +
 
 +
    <div class="w3-row-padding">
 +
    <div class="w3-col m4 w3-margin-bottom">
 +
      <div class="w3-light-grey">
 +
        <img src="https://static.igem.org/mediawiki/2017/8/87/T--TokyoTech--member_tkg.jpg" style="width:100%">
 +
        <div class="w3-container">
 +
          <h3>Michio Takagi</h3>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
 
</div>
 
</div>
 +
 +
<div class="w3-container" id="contact" style="margin-top:20px">
 +
<p id="pageTop" style="text-align:right"><a href="#wrap"><img src="https://static.igem.org/mediawiki/2017/0/0d/T--TokyoTech--page_top_2.png" style="width:200px"></a></p>
 
</div>
 
</div>
 +
 +
<!-- W3.CSS Container -->
 +
<div class="w3-light-grey w3-container w3-padding-32" style="margin-top:75px;padding-right:58px"><p class="w3-right"><a href="http://96haji.me/" title="W3.CSS" target="_blank" class="w3-hover-opacity">Hajime Fujita with W3.CSS: All Rights Reserved</a></p></div>
 +
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 +
<script>
 +
// Script to open and close sidebar
 +
function w3_open() {
 +
    document.getElementById("mySidebar").style.display = "block";
 +
    document.getElementById("myOverlay").style.display = "block";
 +
}
 +
 +
function w3_close() {
 +
    document.getElementById("mySidebar").style.display = "none";
 +
    document.getElementById("myOverlay").style.display = "none";
 +
}
 +
</script>
 +
<script>
 +
// Modal Image Gallery
 +
function onClick(element) {
 +
  document.getElementById("img01").src = element.src;
 +
  document.getElementById("modal01").style.display = "block";
 +
  var captionText = document.getElementById("caption");
 +
  captionText.innerHTML = element.alt;
 +
}
 +
$(function() {
 +
  var h = $(window).height();
 +
 +
  $('#wrap').css('display','none');
 +
  $('#loader-bg ,#loader').height(h).css('display','block');
 +
});
 +
 +
$(window).load(function () { //全ての読み込みが完了したら実行
 +
  $('#loader-bg').delay(900).fadeOut(800);
 +
  $('#loader').delay(600).fadeOut(300);
 +
  $('#wrap').css('display', 'block');
 +
});
 +
</script>
 +
<script>
 +
//■page topボタン
 +
$(function(){
 +
var topBtn=$('#pageTop');
 +
topBtn.hide();
 +
 +
//◇ボタンの表示設定
 +
$(window).scroll(function(){
 +
  if($(this).scrollTop()>80){
 +
    //---- 画面を80pxスクロールしたら、ボタンを表示する
 +
    topBtn.fadeIn();
 +
  }else{
 +
    //---- 画面が80pxより上なら、ボタンを表示しない
 +
    topBtn.fadeOut();
 +
  }
 +
});
 +
 +
// ◇ボタンをクリックしたら、スクロールして上に戻る
 +
topBtn.click(function(){
 +
  $('body,html').animate({
 +
  scrollTop: 0},500);
 +
  return false;
 +
});
 +
 +
});
 +
</script>
 +
 +
</body>
 
</html>
 
</html>

Revision as of 07:55, 6 May 2018

Template:TokyoTech/css/reset Template:TokyoTech/css/main <!DOCTYPE html> Coli Sapiens

iGEM Tokyo Tech

Team Introduction

　Our team, iGEM 2017 Team TokyoTech consists of 12 undergrad students. At an early stage of our project, our team got together, trying to figure out what we could do with synthetic biology. Since then, we encouraged each other, worked together, and overcome difficulties. Now, we are ready to show our achievement.

Hazuki Hasegawa

Kazunori Motai

Saki Arakaki

Kohei Umedera

Hajime Fujita

Takuma Yasue

Michio Takagi

Hajime Fujita with W3.CSS: All Rights Reserved