Difference between revisions of "Team:TokyoTech"

 
(260 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
{{TokyoTech/header}}
+
{{TokyoTech/css/reset}}
−
 
+
{{TokyoTech/css/main}}
 +
<!DOCTYPE html>
 
<html>
 
<html>
−
<head>
+
<title>Coli Sapiens</title>
−
<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>
  
−
<meta charset="utf-8" />
+
<div id="loader-bg">
−
<meta name="viewport" content="width=device-width, initial-scale=1" />
+
  <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>
  
−
<link href="https://fonts.googleapis.com/css?family=Istok+Web" rel="stylesheet">
+
<!-- Sidebar/menu -->
−
<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700" rel="stylesheet">
+
<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>
  
−
</head>
+
  <div style="padding-top: 15px; padding-left: 25px; id="wrap">
  
−
<body>
+
  <div id="contents" style="z-index: 10">
  
−
<div class="container">
+
    <ul class="click_menu_checkbox vertm_down">
−
<div id="main">
+
    <li style="margin-bottom: 10px; border: 5px double #fff; border-radius: 10px;">
−
<h2>Elements</h2>
+
    <input type="checkbox" id="vmcb-a" />
−
</div>
+
    <label for="vmcb-a"><a href="https://2017.igem.org/Team:TokyoTech">Home</a></label>
−
<section class="paragraph">
+
    </li>
−
<h1>Heading 1 With Paragraph</h1>
+
    <li style="margin-bottom: 10px; border: 5px double #fff; border-radius: 10px">
−
<p>Lorem Ipsum available, but the majority have suffered This alteration in some from, by injected is a humour, or randomised words which don't look even sligh is made believable. If to use and yammi passage of Lorem Ipsum, you need to be sure there isn't by pioneer designer anything embarrassing hidden in the middle of</p>
+
    <input type="checkbox" id="vmcb-b" />
−
</section>
+
    <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>
  
−
<section class="blockquote">
+
    <li style="margin-bottom: 10px; border: 5px double #fff; border-radius: 10px">
−
<h1>Blockquote</h1>
+
    <input type="checkbox" id="vmcb-d" />
−
<blockquote>Injected humour, or randomised words which don’t look even sligh is made  believable If  to use and passage of Lorem Ipsum.Hello Im Secspaire.</blockquote>
+
    <label for="vmcb-d"><a>Experiment</a></label>
−
</section>
+
    <ul>
  
−
<section class="unordered-list">
+
        <li>
−
<h1>Unordered List</h1>
+
        <input type="checkbox" id="vmcb-d1" />
−
<p>Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected<br><br> is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer.</p>
+
        <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>
−
<ul class="unordarlist">
+
        </li>
−
<li>
+
−
All the Lorem Ipsum generators on the Internet tend to repeat.
+
−
</li>
+
−
<li>
+
−
Making this the first true generator on the Internet.
+
−
</li>
+
−
<li>
+
−
The generated Lorem ipsum doler set emet.
+
−
</li>
+
−
<li>
+
−
Always free from repetition injected.
+
−
</li>
+
−
</ul>
+
−
</section>
+
  
−
<section class="performatted">
+
        <li style="padding-bottom: 10px; padding-top: 5px">
−
<h1>Preformatted</h1>
+
        <input type="checkbox" id="vmcb-d2" />
−
<pre><code>i = 0;
+
          <label for="vmcb-d2"><a style="text-align: center;">Bacteria to <br>Human Cells ▼</a></label>
 +
            <ul>
 +
              <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>
 +
              <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>
  
−
while (!deck.isInOrder()) {
+
      <li style="padding-bottom: 3px">
−
print 'Iteration ' + i;
+
      <input type="checkbox" id="vmcb-d3" />
−
deck.shuffle();
+
    <label for="vmcb-d3"><a style="text-align: center;">Human Cells to <br>Bacteria ▼</a></label>
−
i++;
+
        <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>
  
−
print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
+
        <li>
−
</section>
+
        <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>
  
−
<section class="alternate&icon">
 
−
<div class="col-md-12">
 
−
<div class="row">
 
−
<div class="col-md-6">
 
−
<h1>Alternate</h1>
 
−
<p>All the Lorem Ipsum generators on the Internet tend to repeat.</p><hr>
 
−
<p>Making this the first true generator on the Internet.</p><hr>
 
−
<p>The generated Lorem ipsum doler set emet.</p><hr>
 
−
<p>Always free from repetition injected.</p><hr>
 
−
</div>
 
−
<div class="col-md-6">
 
−
<h1>Icons</h1>
 
−
<li class="fa fa-facebook" aria-hidden="true"></li>
 
−
<li class="fa fa-twitter" aria-hidden="true"></li>
 
−
<li class="fa fa-google-plus" aria-hidden="true"></li>
 
−
<li class="fa fa-pinterest" aria-hidden="true"></li>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</section>
 
  
−
<section class="table">
+
    <li style="margin-bottom: 10px; text-align: center; border: 5px double #fff; border-radius: 10px">
−
<div class="container">
+
    <input type="checkbox" id="vmcb-e" />
−
<div class="row">
+
    <label for="vmcb-e"><a href="https://2017.igem.org/Team:TokyoTech/Model">Modelling</a></label>
−
<div class="col-md-12">
+
    </li>
−
<h1>Table</h1><br>
+
−
<h4>Default</h4>
+
−
<div class"row">
+
−
<div class="table-responsive">
+
−
<table class="table table-hover">
+
−
<thead>
+
−
<tr>
+
−
<th>Name</th>
+
−
<th>Description</th>
+
−
<th>Price</th>
+
−
</tr>
+
−
</thead>
+
−
<tbody>
+
−
<tr>
+
−
<td>Item One</td>
+
−
<td>Ante turpis integer aliquet porttitor.</td>
+
−
<td>29.99</td>
+
−
</tr>
+
−
<tr>
+
−
<td>Item Two</td>
+
−
<td>Vis ac commodo adipiscing arcu aliquet.</td>
+
−
<td>19.99</td>
+
−
</tr>
+
−
<tr>
+
−
<td>Item Three</td>
+
−
<td> Morbi faucibus arcu accumsan lorem.</td>
+
−
<td>29.99</td>
+
−
</tr>
+
−
<tr>
+
−
<td>Item Four</td>
+
−
<td>Vitae integer tempus condimentum.</td>
+
−
<td>19.99</td>
+
−
</tr>
+
−
<tr>
+
−
<td>Item Five</td>
+
−
<td>Ante turpis integer aliquet porttitor.</td>
+
−
<td>29.99</td>
+
−
</tr>
+
−
</tbody>
+
−
<tfoot>
+
−
<tr>
+
−
<td></td>
+
−
<td></td>
+
−
<td>100.00</td>
+
−
</tr>
+
−
</tfoot>
+
−
</table>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="row">
+
−
<div class="col-md-12">
+
−
<h1>Alternate</h1><br>
+
−
<h4>Default</h4>
+
−
<div class"row">
+
−
<div class="table-responsive">
+
−
<table class="table table-bordered">
+
−
<thead>
+
−
<tr>
+
−
<th>Name</th>
+
−
<th>Description</th>
+
−
<th>Price</th>
+
−
</tr>
+
−
</thead>
+
−
<tbody>
+
−
<tr>
+
−
<td>Item One</td>
+
−
<td>Ante turpis integer aliquet porttitor.</td>
+
−
<td>29.99</td>
+
−
</tr>
+
−
<tr>
+
−
<td>Item Two</td>
+
−
<td>Vis ac commodo adipiscing arcu aliquet.</td>
+
−
<td>19.99</td>
+
−
</tr>
+
−
<tr>
+
−
<td>Item Three</td>
+
−
<td> Morbi faucibus arcu accumsan lorem.</td>
+
−
<td>29.99</td>
+
−
</tr>
+
−
<tr>
+
−
<td>Item Four</td>
+
−
<td>Vitae integer tempus condimentum.</td>
+
−
<td>19.99</td>
+
−
</tr>
+
−
<tr>
+
−
<td>Item Five</td>
+
−
<td>Ante turpis integer aliquet porttitor.</td>
+
−
<td>29.99</td>
+
−
</tr>
+
−
</tbody>
+
−
<tfoot>
+
−
<tr>
+
−
<td></td>
+
−
<td></td>
+
−
<td>100.00</td>
+
−
</tr>
+
−
</tfoot>
+
−
</table>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</section>
+
  
−
<section class="button">
+
    <li style="margin-bottom: 10px; text-align: center; border: 5px double #fff; border-radius: 10px">
−
<div class="container">
+
    <input type="checkbox" id="vmcb-f" />
−
<h1>Buttons</h1>
+
    <label for="vmcb-f"><a>Human Practices</a></label>
−
<section>
+
    <ul>
−
<div class="row">
+
    <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>
−
<div class="col-md-12">
+
    <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>
−
<p>
+
    <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>
−
<div class="col-md-4">
+
    <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>
−
<div class="row">
+
    <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>
−
<a href="#" type="button" class="btn btn-tobais btn-defalt hover-off">DEFALT</a>
+
    </ul>
−
  <a href="#" type="button" class="btn btn-tobais btn-special">SPECIAL <span class="ion-ios-cloud-download" aria-hidden="true"></span></a>
+
    </li>
−
</div>
+
−
</div>
+
−
<div class="col-md-4">
+
−
<div class="row">
+
−
<a href="#" type="button" class="btn btn-tobais btn-big hover-off">BIG</a>
+
−
<a href="#" type="button" class="btn btn-tobais btn-small hover-off">SMALL</a>
+
−
</div>
+
−
</div>
+
−
<div class="col-md-4">
+
−
<div class="row">
+
−
<button type="button" class="btn-tobais btn-disabled" disabled>DISABLED</button>
+
−
</div>
+
−
</div>
+
−
</p>
+
−
</div>
+
−
</div>
+
−
<div class="row">
+
−
<div class="col-md-12">
+
−
<p>
+
−
<div class="col-md-4">
+
−
+
−
<div class="row">
+
−
<a href="#" type="button" class="btn btn-tobais btn-fit hover-off">FIT</a>
+
−
</div>
+
−
</div>
+
−
<div class="col-md-4">
+
−
<div class="row">
+
−
<a href="#" type="button" class="btn btn-tobais btn-fit-small hover-off">FIT+SMALL</a>
+
−
</div>
+
−
</div>
+
−
</p>
+
−
</div>
+
−
</div>
+
−
</section>
+
−
</div>
+
−
</section>
+
  
−
<section class="contact-form">
+
    <li style="margin-bottom: 10px; text-align: center; border: 5px double #fff; border-radius: 10px">
−
<div class="container">
+
    <input type="checkbox" id="vmcb-g" />
−
<!-- Form -->
+
    <label for="vmcb-g"><a>About us</a></label>
−
<section>
+
    <ul>
−
<div class="row">
+
    <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>
−
<div class="col-md-12">
+
    <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>
−
<h1>From</h1>
+
    <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>
−
<form>
+
    </ul>
−
<div class="row">
+
    </li>
−
<div class="col-md-6">
+
    </ul>
−
<div class="form-group">
+
    </div>
−
<input type="text" class="form-control" name="name" id="name" placeholder="Name"/>
+
−
</div>
+
−
</div>
+
−
<div class="col-md-6">
+
−
<div class="form-group">
+
−
<input type="email" class="form-control" name="email" id="email" placeholder="Email" />
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="row">
+
−
<div class="col-md-12">
+
−
<form>
+
−
<select class="form-control">
+
−
<option selected="selected">Select Category</option>
+
−
<option>1</option>
+
−
<option>2</option>
+
−
<option>3</option>
+
−
<option>4</option>
+
−
<option>5</option>
+
−
</select>
+
−
</form>
+
−
</div>
+
−
</div>
+
−
<div class="row">
+
−
<div class="col-md-12">
+
−
<div class="row">
+
−
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left">
+
−
  <label class="checkbox-inline">
+
−
  <input type="checkbox" id="inlineCheckbox1" value="option1"> Low
+
−
</label>
+
−
</div>
+
−
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-center">
+
−
  <label class="checkbox-inline">
+
−
  <input type="checkbox" id="inlineCheckbox2" value="option2"> Normal
+
−
</label>
+
−
    </div>
+
−
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-right">
+
−
    <label class="checkbox-inline">
+
−
  <input type="checkbox" id="inlineCheckbox3" value="option3"> High
+
−
</label>
+
−
    </div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="row">
+
−
<div class="col-md-12">
+
−
<div class="row">
+
−
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-left">
+
−
    <label class="radio-inline">
+
−
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> Apple
+
−
</label>
+
−
</div>
+
−
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 text-center">
+
−
    <label class="radio-inline">
+
−
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> Mango
+
−
</label>
+
−
  </div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="row">
+
−
<div class="col-md-12">
+
−
<div class="from-group">
+
−
<textarea class="form-control" rows="2" name="message" id="message" placeholder="Message..."></textarea>
+
−
</div>
+
−
<p>
+
−
  <a href="#" type="button" class="btn btn-tobais btn-send">SEND MESSAGE</a>
+
−
  <a href="#" type="button" class="btn btn-tobais btn-reset">RESET</a>
+
−
</p>
+
−
</div>
+
−
</div>
+
−
</form>
+
−
</div>
+
−
</div>
+
−
</section>
+
−
</div>
+
−
</section>
+
  
−
<section class ="fit-image">
+
  </div>
−
<div class="container">
+
</nav>
−
<h1>IMAGE</h1><br>
+
−
<h4>FIT</h4>
+
−
<div class="row">
+
−
+
−
<div class="col-md-12">
+
−
<img src="images/fit_image.jpg" class="img-responsive img-fit" alt="Responsive image" />
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</section>
+
  
−
<section class="grid-image">
+
<!-- Top menu on small screens -->
−
<div class="container">
+
<header class="w3-container w3-top w3-hide-large w3-red w3-xlarge w3-padding">
−
<div class="tiles">
+
  <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>
−
<h4>GRID</h4>
+
  <span style="padding-top: 5px">iGEM Tokyo Tech</span>
−
<div class="row">
+
</header>
−
<div class="col-md-4">
+
−
<img src="images/6.jpg" class="img-responsive" alt="Responsive image" />
+
−
</div>
+
−
<div class="col-md-4">
+
−
<img src="images/8.jpg" class="img-responsive" alt="Responsive image"/>
+
−
</div>
+
−
<div class="col-md-4">
+
−
<img src="images/4.jpg" class="img-responsive" alt="Responsive image" />
+
−
</div>
+
−
</div>
+
−
<div class="row">
+
−
<div class="col-md-4">
+
−
<img src="images/5.jpg" class="img-responsive" alt="Responsive image" />
+
−
</div>
+
−
<div class="col-md-4">
+
−
<img src="images/1.jpg" class="img-responsive" alt="Responsive image"/>
+
−
</div>
+
−
<div class="col-md-4">
+
−
<img src="images/2.jpg" class="img-responsive" alt="Responsive image" />
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</section>
+
  
−
<section class="image-text">
+
<!-- Overlay effect when opening sidebar on small screens -->
−
<div class="container">
+
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
−
<div class="row">
+
−
<div class="col-md-4">
+
−
<img src="images/8.jpg" class="img-responsive" alt="Responsive image"/>
+
−
</div>
+
−
<div class="col-md-8">
+
−
<p class="image-text-text">Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer designer anything embarrassing hidden in the middle of text.<br><br>
+
−
Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer designer anything embarrassing hidden in the middle of text.</p>
+
−
</div>
+
−
</div>
+
−
<div class="row">
+
−
<div class="col-md-4 col-md-push-8">
+
−
<img src="images/2.jpg" class="img-responsive" alt="Responsive image"/>
+
−
</div>
+
−
<div class="col-md-8 col-md-pull-4">
+
−
<p class="image-text-text">Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer designer anything embarrassing hidden in the middle of text.<br><br>
+
−
Lorem Ipsum available, but the majority have suffered This alteration in some form, by injected is a humour, or randomised words which don’t look even sligh is made  believable. If  to use and yammi passage of Lorem Ipsum, you need to be sure there isn’t by pioneer designer anything embarrassing hidden in the middle of text.</p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</section>
+
−
</div>
+
  
−
<section class="contact">
+
<!-- PAGE CONTENT! -->
−
<div class="container">
+
<div class="w3-main" style="margin-left:340px;margin-right:40px" id="wrap">
−
<div class="row">
+
−
<div class="col-md-8">
+
−
<h1 class="">GET IN TOUCH</h1>
+
−
<form>
+
−
<div class="row">
+
−
<div class="col-md-6">
+
−
<div class="form-group">
+
−
<input type="text" class="form-control gt" name="name" id="name" placeholder="Name"/>
+
−
</div>
+
−
</div>
+
−
<div class="col-md-6">
+
−
<div class="form-group">
+
−
<input type="email" class="form-control gt" name="email" id="email" placeholder="Email" />
+
−
</div>
+
−
</div>
+
−
</div>
+
−
<div class="row">
+
−
<div class="col-md-12">
+
−
<div class="from-group">
+
−
<textarea class="form-control gt" rows="2" name="message" id="message" placeholder="Message..."></textarea>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</form>
+
−
<div class="form-group"  align="right">
+
−
    <div class="col-sm-offset-2 col-sm-10">
+
−
      <a href="#" type="submit" class="btn btn-tobais btn-send-2">SEND</a>
+
−
    </div>
+
−
</div>
+
−
</div>
+
−
<div class="col-md-4">
+
−
<h1 class="">CONTACT INFO</h1>
+
−
<p>Simple words that are so easy to forget. Every day when I wake up I try to remind myself of just that: Be Useful</p>
+
−
<p><Strong>Address: </Strong> 36th Street, Block A, Mischigan, USA</p>
+
−
<p><Strong>Call:</Strong> 444 123 025 12</p>
+
−
<p><Strong>Fax: </Strong>444 123 025 12</p>
+
−
<p><Strong>Email: </Strong>color@gmail.com</p>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</section>
+
  
−
<section class="social-contact-icon">
+
<div class="w3-container" id="overview" style="margin-top:20px">
−
<div class="container">
+
<div class="photo-show" style="padding-bottom: 20%">
−
<div class="row">
+
   
−
<div class="col-md-12 col-xs-12">
+
<img src="https://static.igem.org/mediawiki/2017/1/14/T--TokyoTech--slideshow_no.2_2.jpg">
−
<ul class="text-center social-contact">
+
<img src="https://static.igem.org/mediawiki/2017/9/95/T--TokyoTech--slideshow_no.2_1.jpg">
−
<li class="social-icons">
+
<img src="https://static.igem.org/mediawiki/2017/4/4d/T--TokyoTech--slideshow_no.2_3.jpg">
−
<a href="#" class="icon style2 fa-facebook"><span class="label">Facebook</span></a>
+
<img src="https://static.igem.org/mediawiki/2017/1/14/T--TokyoTech--slideshow_no.2_2.jpg">
−
</li>
+
<img src="https://static.igem.org/mediawiki/2017/9/95/T--TokyoTech--slideshow_no.2_1.jpg">
−
<li class="social-icons">
+
<img src="https://static.igem.org/mediawiki/2017/4/4d/T--TokyoTech--slideshow_no.2_3.jpg">
−
<a href="#" class="icon style2 fa-twitter"><span class="label">Twitter</span></a>
+
<img src="https://static.igem.org/mediawiki/2017/1/14/T--TokyoTech--slideshow_no.2_2.jpg">
−
</li>
+
<img src="https://static.igem.org/mediawiki/2017/9/95/T--TokyoTech--slideshow_no.2_1.jpg">
−
<li class="social-icons">
+
<img src="https://static.igem.org/mediawiki/2017/4/4d/T--TokyoTech--slideshow_no.2_3.jpg">
−
<a href="#" class="icon style2 fa-google-plus"><span class="label">GooglePlus</span></a>
+
<img src="https://static.igem.org/mediawiki/2017/1/14/T--TokyoTech--slideshow_no.2_2.jpg">
−
</li>
+
<img src="https://static.igem.org/mediawiki/2017/9/95/T--TokyoTech--slideshow_no.2_1.jpg">
−
<li class="social-icons">
+
<img src="https://static.igem.org/mediawiki/2017/4/4d/T--TokyoTech--slideshow_no.2_3.jpg">
−
<a href="#" class="icon style2 fa-pinterest"><span class="label">pinterest</span></a>
+
<img src="https://static.igem.org/mediawiki/2017/1/14/T--TokyoTech--slideshow_no.2_2.jpg">
−
</li>
+
<img src="https://static.igem.org/mediawiki/2017/9/95/T--TokyoTech--slideshow_no.2_1.jpg">
−
<li class="social-icons">
+
<img src="https://static.igem.org/mediawiki/2017/4/4d/T--TokyoTech--slideshow_no.2_3.jpg">
−
<a href="#" class="icon style2 fa-stumbleupon"><span class="label">Stumbleupon</span></a>
+
<img src="https://static.igem.org/mediawiki/2017/1/14/T--TokyoTech--slideshow_no.2_2.jpg">
−
</li>
+
<img src="https://static.igem.org/mediawiki/2017/9/95/T--TokyoTech--slideshow_no.2_1.jpg">
−
<li class="social-icons">
+
<img src="https://static.igem.org/mediawiki/2017/4/4d/T--TokyoTech--slideshow_no.2_3.jpg">
−
<a href="#" class="icon style2 fa-tumblr"><span class="label">tumblr</span></a>
+
<img src="https://static.igem.org/mediawiki/2017/1/14/T--TokyoTech--slideshow_no.2_2.jpg">
−
</li>
+
<img src="https://static.igem.org/mediawiki/2017/9/95/T--TokyoTech--slideshow_no.2_1.jpg">
−
<li class="social-icons">
+
<img src="https://static.igem.org/mediawiki/2017/4/4d/T--TokyoTech--slideshow_no.2_3.jpg">
−
<a href="#" class="icon style2 fa-instagram"><span class="label">Instagram</span></a>
+
</div><!--aspslide-->
−
</li>
+
</div>
−
<li class="social-icons">
+
−
<a href="#" class="icon style2 fa-reddit-alien"><span class="label">reddit-alien</span></a>
+
−
</li>
+
−
<li class="social-icons">
+
−
<a href="#" class="icon style2 fa-dribbble"><span class="label">Dribbble</span></a>
+
−
</li>
+
−
<li class="social-icons">
+
−
<a href="#" class="icon style2 fa-behance"><span class="label">Behance</span></a>
+
−
</li>
+
−
<li class="social-icons">
+
−
<a href="#" class="icon style2 fa-linkedin"><span class="label">Linkedin</span></a>
+
−
</li>
+
−
<li class="social-icons">
+
−
<a href="#" class="icon style2 fa-vk"><span class="label">vk</span></a>
+
−
</li>
+
−
</ul>
+
−
</div>
+
−
</div>
+
−
</div>
+
−
</section>
+
  
−
<section class="footer">
+
<div class="w3-container" id="overview" style="padding-top:20%;padding-bottom: 15px;text-align: center;">
−
<footer>
+
<center><hr style="width:300px;border:3px solid red;" class="w3-round"></center>
−
<div class="container">
+
</div>
−
<div class="row">
+
 
−
<div class="col-sm-8 col-xs-9">
+
  <!-- Overview -->
−
<p class="right-color">&copy; Copyright 2016. All rights reserved by <a href="https://themewagon.com/" target="_blank">ThemeWagon</a></p>
+
  <div class="w3-container" id="overview" style="padding-top:5px;padding-bottom: 5px;text-align: center;">
−
</div>
+
    <h4 style="text-indent: 1em;color: #4a0f0c">Do you want to photosynthesize or fix nitrogen by yourself?</h4>
−
<div class="col-sm-4 col-xs-3" align="right">
+
    <h4 style="text-indent: 1em;color: #4a0f0c">
−
<a href="#" id="back-to-top" class="top" >TOP <i class="fa fa-angle-up" aria-hidden="true"></i> </a>
+
    If one-time cancer treatment lasts forever, don't you think it's amazing?</h4>
−
</div>
+
</div>
−
</div>
+
 
−
</div>
+
<div class="w3-container" id="overview" style="padding-top:5px;padding-bottom: 5px;text-align: center;">
−
</footer>
+
<center><hr style="width:300px;border:3px solid red" class="w3-round"></center>
−
</section>
+
</div>
 +
 
 +
<div class="w3-container" id="overview" style="padding-top:15px;padding-bottom: 15px;text-align: center;color: #4a0f0c">
 +
    <p style="text-indent: 1em;font-size: 18px;padding-top: 15px">
 +
    If you could co-exist with bacteria, you could be a super human. We named this new type of human 'Coli Sapiens.' Currently, however, there's no way to co-culture bacteria and human cells under <span style="font-style: italic;">in vitro</span> conditions. If you'd like to co-culture them <b>artificially</b>, you have to clear two tasks below.</p>
 +
</div>
 +
 
 +
<div class="w3-container" id="overview" style="padding-top:15px;padding-bottom: 15px;text-align: center;color: #4a0f0c;border: 5px">
 +
<center>
 +
<h4 style="text-indent: 1em;color: #4a0f0c">
 +
1. Establishing a cross-kingdom talk between human cells and bacteria</h4>
 +
<h4 style="text-indent: 1em;color: #4a0f0c">
 +
2. Sustaining the balance between human cells and bacteria</h4>
 +
</center>
 +
</div>
 +
 
 +
<center>
 +
<div class="w3-container" id="overview" style="padding-top:15px;padding-bottom: 15px;text-align: center;color: #4a0f0c;border: 5px">
 +
 
 +
<p style="font-size:18px;text-align:center">
 +
To clear these tasks, we tried to establish a cross-kingdom talk and creating a co-culture model.</p>
 +
 
 +
</div>
 +
</center>
 +
<hr>
 +
 
 +
  <div class="scale" id="overview" style="margin-top:10px;text-align: center;">
 +
    <img src="https://static.igem.org/mediawiki/2017/4/40/Top_image12.png" alt="John" style="width:80%">
 +
  </div>
 +
 
 +
<hr>
 +
 
 +
<div class="w3-container" id="contact" style="margin-top:20px">
 +
    <p style="font-size: 18px;text-indent: 1em">In a real world, multiple kinds of organisms co-exist and the ecosystem is sustained by their mutual dependence. However, in iGEM community, it's been a standard to use single organism in project and it's not an overstatement that most teams don't take it into account. Therefore, to target "true human organism", it's necessary to establish the system that human cells and bacteria co-exist under <span style="font-style: italic;">in vitro</span> conditions. Our co-culture system will be a big progress for iGEM and synthetic biology.
 +
    </p>
 +
  </div>
 +
 
 +
  <hr>
 +
 
 +
 
 +
<!-- End page content -->
 +
</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>
 +
 
 +
<!-- 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;
 +
});
  
−
<!-- Scripts -->
+
});
−
<script src="assets/js/jquery-3.1.0.min.js"></script>
+
</script>
−
<script src="assets/js/bootstrap.min.js"></script>
+
−
<script src="assets/js/jquery.magnific-popup.min.js"></script>
+
  
−
<script src="assets/js/script.js"></script>
+
</body>
−
+
−
<!--  ===== Scroll to Top ====  -->
+
−
<script>
+
−
if ($('#back-to-top').length) {
+
−
    $('#back-to-top').on('click', function (e) {
+
−
        e.preventDefault();
+
−
        $('html,body').animate({
+
−
            scrollTop: 0
+
−
        }, 700);
+
−
    });
+
−
}
+
−
</script>
+
−
+
−
</body>
+
 
</html>
 
</html>

Latest revision as of 02:56, 2 November 2017

<!DOCTYPE html> Coli Sapiens

iGEM Tokyo Tech

Do you want to photosynthesize or fix nitrogen by yourself?

If one-time cancer treatment lasts forever, don't you think it's amazing?

If you could co-exist with bacteria, you could be a super human. We named this new type of human 'Coli Sapiens.' Currently, however, there's no way to co-culture bacteria and human cells under in vitro conditions. If you'd like to co-culture them artificially, you have to clear two tasks below.

1. Establishing a cross-kingdom talk between human cells and bacteria

2. Sustaining the balance between human cells and bacteria

To clear these tasks, we tried to establish a cross-kingdom talk and creating a co-culture model.

John

In a real world, multiple kinds of organisms co-exist and the ecosystem is sustained by their mutual dependence. However, in iGEM community, it's been a standard to use single organism in project and it's not an overstatement that most teams don't take it into account. Therefore, to target "true human organism", it's necessary to establish the system that human cells and bacteria co-exist under in vitro conditions. Our co-culture system will be a big progress for iGEM and synthetic biology.

Hajime Fujita with W3.CSS: All Rights Reserved