Difference between revisions of "Team:USTC"

 
(83 intermediate revisions by 5 users not shown)
Line 1: Line 1:
−
<!DOCTYPE html>
+
<html>
−
  <html>
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:USTC/css/reset?action=raw&ctype=text/css">
−
    <head>
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:USTC/css/materialize?action=raw&ctype=text/css">
−
      <!--Import materialize.css-->
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:USTC/css/indexstyle?action=raw&ctype=text/css">
−
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
+
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:USTC/css/fullpage?action=raw&ctype=text/css">
−
      <link rel = "stylesheet" href = "css/style.css">
+
<script type="text/javascript" src="https://2015.igem.org/Template:USTC/js/jquery?action=raw&ctype=text/javascript"></script>
−
 
+
<script type="text/javascript" src="https://2015.igem.org/Template:USTC/js/easing?action=raw&ctype=text/javascript"></script>
−
      <!--Let browser know website is optimized for mobile-->
+
<script type="text/javascript" src="https://2015.igem.org/Template:USTC/js/slimscroll?action=raw&ctype=text/javascript"></script>
−
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
<script type="text/javascript" src="https://2015.igem.org/Template:USTC/js/fullpage?action=raw&ctype=text/javascript" ></script>
−
 
+
<script type="text/javascript" src="https://2015.igem.org/Template:USTC/js/materialize?action=raw&ctype=text/javascript"></script>
−
       <style>
+
<script type="text/javascript" >
−
 
+
function checkInview(index, nextIndex, direction) {
−
       .tabs{
+
  $('.inview').css("-webkit-transition-delay", '0ms').css("-o-transition-delay", '0ms').css("transition-delay", '0ms');
−
         background-color: transparent;
+
  $('.inview').removeClass('inview');
 +
  var $section = $('#fullpage .fullpagesection').eq(nextIndex - 1);
 +
  $section.find('.check-inview').each(function(i) {
 +
    var delay = 800 + 30 * (i + 1);
 +
    $(this).css("-webkit-transition-delay", delay + 'ms').css("-o-transition-delay", delay + 'ms').css("transition-delay", delay + 'ms');
 +
    $(this).addClass('inview');
 +
  });
 +
  // here is the navigationPage's transition.
 +
  $("#navi .col.s3").css("-webkit-transition-delay", '0ms').css("-o-transition-delay", '0ms').css("transition-delay", '0ms');
 +
  $("#navi .col.s3").removeClass('inview');
 +
  if (nextIndex == 5) {
 +
    $("#navi .col.s3").each(function(i) {
 +
       var delay;
 +
      if (i < 4) {
 +
        delay = 800 + 30 * 2 * i;
 +
       } else {
 +
         delay = 800 + 30 * (2 * i - 7);
 
       }
 
       }
−
 
+
      $(this).css("-webkit-transition-delay", delay + 'ms').css("-o-transition-delay", delay + 'ms').css("transition-delay", delay + 'ms');
−
 
+
      $(this).addClass('inview');
−
 
+
     });
−
        .tabs .tab a {
+
−
    color: white;
+
−
    display: block;
+
−
    width: 100%;
+
−
     height: 100%;
+
 
   }
 
   }
−
 
+
  // here is the constitutionPage's transition.
−
      .tabs .tab a:hover {
+
  $("#constitution .container .row div").css("-webkit-transition-delay", '0ms').css("-o-transition-delay", '0ms').css("transition-delay", '0ms');
−
     color: #82d1f4;
+
  $("#constitution .container .row div").css("opacity","0");
−
}
+
  $("#constitution .container .row:eq(1) div").eq(2).css("opacity","1");
−
 
+
  $("#constitution .container .row:eq(1) div").each(function(i) {
−
.tabs .indicator {
+
     switch (i){
−
     position: absolute;
+
      case 0:$(this).css("-webkit-transform","translateX(100%)").css("-moz-transform","translateX(100%)").css("-ms-transform","translateX(100%)").css("-o-transform","translateX(100%)").css("transform","translateX(100%)");break;
−
    bottom: 0;
+
      case 1:$(this).css("-webkit-transform","translateX(50%)").css("-moz-transform","translateX(50%)").css("-ms-transform","translateX(50%)").css("-o-transform","translateX(50%)").css("transform","translateX(50%)");break;
−
    height: 2px;
+
      case 2:$(this).css("-webkit-transform","translateX(0)").css("-moz-transform","translateX(0)").css("-ms-transform","translateX(0)").css("-o-transform","translateX(0)").css("transform","translateX(0)");break;
−
    background-color: white;
+
      case 3:$(this).css("-webkit-transform","translateX(-50%)").css("-moz-transform","translateX(-50%)").css("-ms-transform","translateX(-50%)").css("-o-transform","translateX(-50%)").css("transform","translateX(-50%)");break;
−
     will-change: left, right;
+
      case 4:$(this).css("-webkit-transform","translateX(-100%)").css("-moz-transform","translateX(-100%)").css("-ms-transform","translateX(-100%)").css("-o-transform","translateX(-100%)").css("transform","translateX(-100%)");break;
 +
    }
 +
  });
 +
  $("#constitution .container .row:eq(2) div").each(function(i) {
 +
     switch (i){
 +
      case 0:$(this).css("-webkit-transform","translateX(100%)").css("-moz-transform","translateX(100%)").css("-ms-transform","translateX(100%)").css("-o-transform","translateX(100%)").css("transform","translateX(100%)");break;
 +
      case 1:$(this).css("-webkit-transform","translateX(50%)").css("-moz-transform","translateX(50%)").css("-ms-transform","translateX(50%)").css("-o-transform","translateX(50%)").css("transform","translateX(50%)");break;
 +
      case 2:$(this).css("-webkit-transform","translateX(0)").css("-moz-transform","translateX(0)").css("-ms-transform","translateX(0)").css("-o-transform","translateX(0)").css("transform","translateX(0)");break;
 +
      case 3:$(this).css("-webkit-transform","translateX(-50%)").css("-moz-transform","translateX(-50%)").css("-ms-transform","translateX(-50%)").css("-o-transform","translateX(-50%)").css("transform","translateX(-50%)");break;
 +
      case 4:$(this).css("-webkit-transform","translateX(-100%)").css("-moz-transform","translateX(-100%)").css("-ms-transform","translateX(-100%)").css("-o-transform","translateX(-100%)").css("transform","translateX(-100%)");break;
 +
    }
 +
  });
 +
  if(nextIndex==3){
 +
    $("#constitution .container .row:eq(0) div").css("opacity","1");
 +
     $("#constitution .container .row:eq(1) div").each(function(i) {
 +
      $(this).css("-webkit-transition-delay", 500 + 'ms').css("-o-transition-delay", 500 + 'ms').css("transition-delay", 500 + 'ms');
 +
      $(this).css("-webkit-transform","translateX(0)").css("-moz-transform","translateX(0)").css("-ms-transform","translateX(0)").css("-o-transform","translateX(0)").css("transform","translateX(0)").css("opacity","1");
 +
    });
 +
    $("#constitution .container .row:eq(2) div").each(function(i) {
 +
      $(this).css("-webkit-transition-delay", 500 + 'ms').css("-o-transition-delay", 500 + 'ms').css("transition-delay", 500 + 'ms');
 +
      $(this).css("-webkit-transform","translateX(0)").css("-moz-transform","translateX(0)").css("-ms-transform","translateX(0)").css("-o-transform","translateX(0)").css("transform","translateX(0)").css("opacity","1");
 +
    });
 
   }
 
   }
−
 
−
 
−
 
−
 
−
.team_logo
 
−
{
 
−
  background-image : url(img/index/team_logo.png);
 
−
  background-repeat : no-repeat;
 
−
  width : 563px;
 
−
  height : 357px;
 
−
 
 
−
  position:fixed;
 
−
  right:0;
 
−
}
 
−
 
−
body {background-position: center;
 
−
background-repeat: no-repeat;
 
−
background-attachment: fixed;}
 
−
 
−
nav{
 
−
  background-color: rgba(70, 136, 241, 0.67);
 
−
}
 
−
 
−
 
−
footer .footer-copyright{
 
−
  background-color: rgba(70, 136, 241, 0.67);
 
 
}
 
}
 +
window.onload = function() {
 +
  $('.slider').slider({
 +
    full_width: true
 +
  });
 +
  $('#fullpage').fullpage({
 +
    anchors: ['welcomePage', 'introPage', 'constitutionPage', 'tutorialPage', 'navigationsPage'],
 +
    menu: '#menu',
 +
    sectionSelector: '.fullpagesection',
 +
    onLeave: checkInview,
 +
    scrollOverflow: true
 +
  });
 +
  $(window).resize();
 +
  checkInview(0, 1, 'down');
 +
  $(".loading").fadeOut();
 +
  $("#fullpage").fadeIn();
 +
  $("#menu").fadeIn();
 +
};
 +
</script>
  
−
 
+
<div class="loading">
−
      </style>
+
  <div class="preloader-wrapper big active">
−
 
+
    <div class="spinner-layer spinner-blue">
−
 
+
      <div class="circle-clipper left">
−
 
+
        <div class="circle"></div>
−
 
+
      </div>
−
    </head>
+
      <div class="gap-patch">
−
 
+
        <div class="circle"></div>
−
    <body background="img/WP/WP3.png">
+
      </div>
−
    <div class="navbar-fixed" >
+
      <div class="circle-clipper right">
−
      <nav class ="z-depth-0  top">
+
        <div class="circle"></div>
−
     <div class="nav-wrapper  ilike-blue-container">
+
      </div>
−
       <a href="#" class="brand-logo"> <img src="img/index/igem_logo.png" alt=""></a>
+
    </div>
−
       <ul id="nav-mobile" class="right hide-on-med-and-down">
+
     <div class="spinner-layer spinner-red">
−
         <li><a href="sass.html">Project</a></li>
+
       <div class="circle-clipper left">
−
        <li><a href="badges.html">Modeling</a></li>
+
        <div class="circle"></div>
−
        <li><a href="collapsible.html">NoteBook</a></li>
+
      </div>
−
        <li><a href="collapsible.html">Human Practice</a></li>
+
      <div class="gap-patch">
−
        <li><a href="collapsible.html">Team</a></li>
+
        <div class="circle"></div>
−
        <li><a href="collapsible.html">Safety</a></li>
+
      </div>
−
       </ul>
+
      <div class="circle-clipper right">
 +
        <div class="circle"></div>
 +
       </div>
 +
    </div>
 +
    <div class="spinner-layer spinner-yellow">
 +
      <div class="circle-clipper left">
 +
         <div class="circle"></div>
 +
      </div>
 +
      <div class="gap-patch">
 +
        <div class="circle"></div>
 +
      </div>
 +
      <div class="circle-clipper right">
 +
        <div class="circle"></div>
 +
      </div>
 +
    </div>
 +
    <div class="spinner-layer spinner-green">
 +
      <div class="circle-clipper left">
 +
        <div class="circle"></div>
 +
      </div>
 +
      <div class="gap-patch">
 +
        <div class="circle"></div>
 +
      </div>
 +
      <div class="circle-clipper right">
 +
        <div class="circle"></div>
 +
       </div>
 
     </div>
 
     </div>
−
  </nav>
 
 
   </div>
 
   </div>
 +
</div>
 +
<div class="right">
 +
  <ul id="menu" hidden>
 +
    <li data-menuanchor="welcomePage" class="active"><a href="#welcomePage">Welcome</a></li>
 +
    <li data-menuanchor="introPage"><a href="#introPage">Brief Intro</a></li>
 +
    <li data-menuanchor="constitutionPage"><a href="#constitutionPage">Constitutions</a></li>
 +
    <li data-menuanchor="tutorialPage"><a href="#tutorialPage">Tutorials</a></li>
 +
    <li data-menuanchor="navigationsPage" data-hover="true" data-activates="navi-dropdown" data-gutter="-16" data-beloworigin="true" class="dropdown-button"><a href="#navigationsPage">Navigations</a></li>
 +
  </ul>
 +
</div>
 +
<ul class="dropdown-content" id="navi-dropdown">
 +
  <li><a href="https://2015.igem.org/Team:USTC/Description" class="waves-effect waves-light">Project</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Modeling" class="waves-effect waves-light">Modeling</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Results" class="waves-effect waves-light">Results</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Achievements" class="waves-effect waves-light">Achievements</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Measurement" class="waves-effect waves-light">Measurement</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Software" class="waves-effect waves-light">Software</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Parts" class="waves-effect waves-light">Parts</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Tutorials" class="waves-effect waves-light">Tutorials</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Notebook" class="waves-effect waves-light">Notebook</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Safety" class="waves-effect waves-light">Safety</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Practices" class="waves-effect waves-light">Policy&Practices</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Team" class="waves-effect waves-light">Team</a></li>
 +
  <li><a href="https://2015.igem.org/Team:USTC/Attributions" class="waves-effect waves-light">Attributions</a></li>
 +
</ul>
  
−
 
+
<div id="fullpage" hidden>
−
 
+
   <div class="fullpagesection black" data-anchor="welcomePage" id="welcome">
−
    <div class="team_logo"></div>
+
     <div class="slider fullscreen">
−
    
+
       <ul class="slides">
−
 
+
         <li> <img src="https://static.igem.org/mediawiki/2015/2/22/USTC-index-background-1.jpg"> </li>
−
 
+
         <li> <img src="https://static.igem.org/mediawiki/2015/6/6e/USTC-index-background-2.jpg"> </li>
−
<div class="container ">
+
         <li> <img src="https://static.igem.org/mediawiki/2015/a/a5/USTC-index-background-3.jpg"> </li>
−
    <div class="row ">
+
         <li> <img src="https://static.igem.org/mediawiki/2015/6/67/USTC-index-background-4.jpg"> </li>
−
     <div class="col s12">
+
−
       <ul class="tabs ">
+
−
 
+
−
         <li class="tab col s3 "><a href="#test1">
+
−
        Project
+
−
 
+
−
        </a></li>
+
−
         <li class="tab col s3"><a class="active" href="#test2">NoteBook</a></li>
+
−
         <li class="tab col s3 "><a href="#test3">Modeling</a></li>
+
−
         <li class="tab col s3"><a href="#test4">Human Practice</a></li>
+
 
       </ul>
 
       </ul>
 
     </div>
 
     </div>
−
     <div id="test1" class="col s12 ">
+
     <div class="container">
−
       <div class="row ">
+
      <div class="check-inview fadeup">
−
         <div class="col s12 m12">
+
        <h1 class="white-text"><b>Nanomachine Detecting Microbiotics</b></h1> </div>
 +
      <div class="check-inview fadeup">
 +
        <h2>In the beginning, we extracted antibiotics, assuming it to be Perseus and it was so. Time going, we found antibiotics turned out to be Ares.</h2>
 +
      </div>
 +
      <div class="check-inview fadeup center" style="text-align:center;">
 +
        <a href="#introPage">
 +
          <h2 class="white-text">Continue</h2><img src="https://static.igem.org/mediawiki/2015/1/1d/USTC-index-Down.png" style="width: 60px;" /></a>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <div class="fullpagesection blue darken-2" data-anchor="introPage" data-delay="500" id="intro">
 +
    <div class="container">
 +
      <div class="row check-inview fadeup" style="margin-bottom: 0;">
 +
        <div class="col s12">
 +
          <h5 class="white-text">In natural environment, many antibiotic substances are emitted into river in their active state, which caused tremendously challenges on human health and environment. Thus, this year we USTC develop NDM, a hardware trying to detect those molecules and hold back this situation.  Advantages of NDM including:  </h5>
 +
        </div>
 +
      </div>
 +
       <div class="row">
 +
        <div class="col s4 check-inview fadeup">
 +
          <figure><img src="https://static.igem.org/mediawiki/2015/b/b1/USTC-index-fast.png"></figure>
 +
          <div>
 +
              <h5>Rapid</h5>
 +
              <p>Detection won’t be based on fluorescence signal,  however a brand new way! Then, how much time does a detection assay cost? 1 day? 100 min? Answer is 100 SECONDS!</p>
 +
          </div>
 +
        </div>
 +
        <div class="col s4 check-inview fadeup">
 +
          <figure><img src="https://static.igem.org/mediawiki/2015/1/18/USTC-index-toolbox.png"></figure>
 +
          <div>
 +
              <h5>Convenient</h5>
 +
              <p>NDM is portable for people to operate it, and we developed a friendly GUI for better experience. Moreover, we will package bacteria into powder for iGEMers!</p>
 +
          </div>
 +
        </div>
 +
        <div class="col s4 check-inview fadeup">
 +
          <figure><img src="https://static.igem.org/mediawiki/2015/c/cd/USTC-index-gear.png"></figure>
 +
          <div>
 +
              <h5>Compatible</h5>
 +
              <p>NDM is compatible for everyone to engineer. We hope genetic modification on device level would expand.  After all, ‘M’ in NDM means much more than microbiotics!</p>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      <div class="check-inview fadeup center" style="text-align:center;">
 +
        <a href="#constitutionPage">
 +
          <img src="https://static.igem.org/mediawiki/2015/1/1d/USTC-index-Down.png" style="width: 60px;" /></a>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <div class="fullpagesection light-blue darken-3" data-anchor="constitutionPage" id="constitution">
 +
    <div class="container">
 +
      <div class="row" style="margin-bottom: 0;">
 +
         <div class="col s12">
 +
          <h4 class="white-text">Constitutions of NDM</h4>
 +
        </div>
 +
      </div>
 +
      <div class="row">
 +
        <div class="col s2"><img src="https://static.igem.org/mediawiki/2015/c/c6/USTC-index-mod-bact.png"></div>
 +
        <div class="col s2"><img src="https://static.igem.org/mediawiki/2015/1/1d/USTC-index-film.png"></div>
 +
        <div class="col s2"><br/><img src="https://static.igem.org/mediawiki/2015/c/c4/USTC-index-hako.png" style="z-index: 5;"></div>
 +
        <div class="col s2"><img src="https://static.igem.org/mediawiki/2015/9/9c/USTC-index-optical-path.png"></div>
 +
        <div class="col s2"><img src="https://static.igem.org/mediawiki/2015/d/da/USTC-index-gui.png"></div>
 +
      </div>
 +
      <div class="row">
 +
        <div class="col s2"><h5>CACCI</h5><p>Programmed bacteria to detect chemicals whatever you want</p></div>
 +
        <div class="col s2"><h5>Film</h5><p>Change the movement of bacterial to deformation of film.</p></div>
 +
        <div class="col s2"><h5>SPRING</h5><p>The main body NDM, platform provided for experiment.</p></div>
 +
        <div class="col s2"><h5>Optical path</h5><p>Detect the deformation by Michelson Interference.</p></div>
 +
        <div class="col s2"><h5>GUI</h5><p>Provide a better experience for users.</p></div>
 +
      </div>
 +
      <div style="text-align:center;">
 +
        <a href="#tutorialPage">
 +
          <img src="https://static.igem.org/mediawiki/2015/1/1d/USTC-index-Down.png" style="width: 60px;" /></a>
 +
      </div>
 +
    </div>
 +
  </div>
 +
  <div class="fullpagesection blue darken-3" data-anchor="tutorialPage" id="tutorial">
 +
    <div class="container">
 +
      <div class="row check-inview fadeup">
 +
        <div class="col s12">
 +
          <h4 class="white-text">Tutorials: Study NDM Right Now!</h4>
 +
        </div>
 +
      </div>
 +
      <div class="row check-inview fadeup">
 +
        <div class="col s4 check-inview fadeup">
 +
          <figure>
 +
            <a href="https://2015.igem.org/Team:USTC/Tutorials#Instructional-Video"><img src="https://static.igem.org/mediawiki/2015/3/31/USTC-index-video.png"></a>
 +
          </figure>
 +
          <div>
 +
              <h5>Video</h5>
 +
              <p>Want to know how to operate NDM? Watch it at here!</p>
 +
          </div>
 +
        </div>
 +
        <div class="col s4 check-inview fadeup">
 +
          <figure>
 +
            <a href="https://2015.igem.org/Team:USTC/Tutorials#Instruction-manual"><img src="https://static.igem.org/mediawiki/2015/7/79/USTC-index-ins.png"></a>
 +
          </figure>
 +
          <div>
 +
              <h5>Manual</h5>
 +
              <p>This manual is a convenient guidebook for you when operating NDM in field! Download it at here!</p>
 +
          </div>
 +
        </div>
 +
        <div class="col s4 check-inview fadeup">
 +
          <figure>
 +
            <a href="https://2015.igem.org/Team:USTC/Tutorials#Make-Your-Own"><img src="https://static.igem.org/mediawiki/2015/5/54/USTC-index-DIY.png"></a>
 +
          </figure>
 
           <div class="card hoverable">
 
           <div class="card hoverable">
−
            <div class="card-image">
+
               <h5>DIY</h5>
−
               <img src="img/bd/bd1.jpg">
+
               <p>Want to make your own NDM? Come and join us at here!</p>
−
              <span class="card-title">Project</span>
+
−
            </div>
+
−
            <div class="card-content">
+
−
               <p>Modern "lithography" has made images vividly printed on pages and animations vigorously projected on screens. From that point, we move a step forward. Our project aims to conceive and construct a colorful bio-imaging system, on which once you project an image, ideally, the bio-system would exactly print it out on the substrate. To accomplish this, novel bio-bricks (light sensors & color printers), Caulobacter crescentus (a type of sticky bacterium) and riboswitches were utilized to conceptually make the system colorful, clear and compact...</p>
+
−
            </div>
+
−
            <div class="card-action">
+
−
              <a href="#">Read More ...</a>
+
−
            </div>
+
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 +
      </div>
 +
      <div class="check-inview fadeup center" style="text-align:center;">
 +
        <a href="#navigationsPage">
 +
          <img src="https://static.igem.org/mediawiki/2015/1/1d/USTC-index-Down.png" style="width: 60px;" /></a>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
−
    <div id="test2" class="col s12">
+
  </div>
 +
  <div class="fullpagesection" data-anchor="navigationsPage" data-delay="500" id="navi">
 +
    <div class="container">
 
       <div class="row">
 
       <div class="row">
−
         <div class="col s12 m12  ">
+
         <div class="col s3 navi-inview fadeup" id="nav1">
−
           <div class="card hoverable ">
+
           <div class="card hoverable">
 
             <div class="card-image">
 
             <div class="card-image">
−
               <img src="img/bd/bd2.jpg">
+
               <a href="https://2015.igem.org/Team:USTC/Description">
−
              <span class="card-title">NoteBook</span>
+
                <img src="https://static.igem.org/mediawiki/2015/f/f1/USTC-index-Project.png" onclick>
 +
                <span class="white-text">Project</span></a>
 
             </div>
 
             </div>
−
            <div class="card-content">
+
          </div>
−
              <p>Our notebook has three sections:
+
        </div>
−
              </p>
+
        <div class="col s3 navi-inview fadeup" id="nav2">
−
               <ol>
+
          <div class="card hoverable">
−
              <li>Timeline: The record of our laboratory progress;</li>
+
            <div class="card-image">
−
              <li>Bibliography: The collection of literatures;</li>
+
               <a href="https://2015.igem.org/Team:USTC/Modeling">
−
              <li>Protocols: The experimental standards we applied.</li>
+
                <img src="https://static.igem.org/mediawiki/2015/b/b4/USTC-index-Modeling.png">
−
              </ol>
+
                <span class="white-text">Modeling</span></a>
−
              <br>
+
−
              <p>We sincerely hope that you can gain something from our notes. If you have doubt of anything, please contact us!</p>
+
 
             </div>
 
             </div>
−
             <div class="card-action">
+
          </div>
−
               <a href="#">Read More ...</a>
+
        </div>
 +
        <div class="col s3 navi-inview fadeup" id="nav3">
 +
          <div class="card hoverable">
 +
             <div class="card-image">
 +
               <a href="https://2015.igem.org/Team:USTC/Results">
 +
                <img src="https://static.igem.org/mediawiki/2015/4/42/USTC-index-Achievements.png">
 +
                <span class="white-text">Results</span></a>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
         </div>
+
         <div class="col s3 navi-inview fadeup" id="nav4">
−
    </div>
+
−
    <div id="test3" class="col s12">
+
−
    <div class="row">
+
−
        <div class="col s12 m12">
+
 
           <div class="card hoverable">
 
           <div class="card hoverable">
 
             <div class="card-image">
 
             <div class="card-image">
−
               <img src="img/bd/bd3.jpg">
+
               <a href="https://2015.igem.org/Team:USTC/Tutorials">
−
              <span class="card-title">Modeling</span>
+
                <img src="https://static.igem.org/mediawiki/2015/d/d5/USTC-index-Tutorials.png">
−
            </div>
+
                <span class="white-text">Tutorials</span></a>
−
            <div class="card-content">
+
−
              <p>In our modeling efforts, we followed closely on our major 2 sub-projects,
+
−
Color Imaging and Motion Control
+
−
and their experimental connection.
+
−
Conjugation
+
−
Combing all the above, came the
+
−
C. imager Modeling.</p>
+
−
            </div>
+
−
            <div class="card-action">
+
−
              <a href="#">Read More ...</a>
+
 
             </div>
 
             </div>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
−
       </div>
+
       <div class="row">
−
    <div id="test4" class="col s12">
+
        <div class="col s3 navi-inview fadeup" id="nav5">
−
    <div class="row" >
+
−
        <div class="col s12 m12">
+
 
           <div class="card hoverable">
 
           <div class="card hoverable">
 
             <div class="card-image">
 
             <div class="card-image">
−
               <img src="img/bd/bd4.jpg">
+
               <a href="https://2015.igem.org/Team:USTC/Notebook">
−
              <span class="card-title">Human Practice</span>
+
                <img src="https://static.igem.org/mediawiki/2015/b/b0/USTC-index-Notebook.png">
 +
                <span class="white-text">Notebook</span></a>
 
             </div>
 
             </div>
−
             <div class="card-content">
+
          </div>
−
               <p>We strongly hold a belief that it is our arduous responsibility to not only develop synthetic biology by working on a project day and night but teach and enlighten the public to be intrigued in biology and understand what scientists are doing on genetic engineering and other biology technology so that the public is capable of judging whether genetically modified organism (GMO) is safe and personalized gene sequencing and therapy are reliable enough...</p>
+
        </div>
 +
        <div class="col s3 navi-inview fadeup" id="nav6">
 +
          <div class="card hoverable">
 +
             <div class="card-image">
 +
               <a href="https://2015.igem.org/Team:USTC/Practices">
 +
                <img src="https://static.igem.org/mediawiki/2015/3/3d/USTC-index-HumanPractice.png">
 +
                <span class="white-text">Human<br/>Practice</span></a>
 
             </div>
 
             </div>
−
             <div class="card-action">
+
          </div>
−
               <a href="#">Read More ...</a>
+
        </div>
 +
        <div class="col s3 navi-inview fadeup" id="nav7">
 +
          <div class="card hoverable">
 +
             <div class="card-image">
 +
               <a href="https://2015.igem.org/Team:USTC/Collaborations">
 +
                <img src="https://static.igem.org/mediawiki/2015/8/8b/USTC-index-Collaboration.png">
 +
                <span class="white-text">Collaborations</span></a>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="col s3 navi-inview fadeup" id="nav8">
 +
          <div class="card hoverable">
 +
            <div class="card-image">
 +
              <a href="https://2015.igem.org/Team:USTC/Team">
 +
                <img src="https://static.igem.org/mediawiki/2015/a/a8/USTC-index-Team.png">
 +
                <span class="white-text">Team</span></a>
 
             </div>
 
             </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
    </div>
 +
    <div class="Footer grey lighten-1">
 +
      <div class="container">
 +
        <div class="row">
 +
          <div class="col s4 offset-s2">
 +
            <h5 style="margin-bottom: 2px;">Sponsored by <br/><img src="https://static.igem.org/mediawiki/2015/4/4c/Deutsche-bank-logo.png"></h5>
 +
          </div>
 +
          <div class="col s4">
 +
            <h5 style="margin-bottom: 0;">Links</h5>
 +
            <p style="margin:0;">
 +
              <a href="mailto:ustc.igem.2015@gmail.com"><img src="https://static.igem.org/mediawiki/2015/9/9d/USTC-Mail.png"></a>
 +
              <a href="http://weibo.com/3929719655/fans?topnav=1&wvr=6&mod=message&need_filter=1"><img src="https://static.igem.org/mediawiki/2015/6/60/USTC-Weibo.png"></a>
 +
              <a href="https://github.com/Cintau/2015USTCiGEM"><img src="https://static.igem.org/mediawiki/2015/3/36/USTC-GitHub.png"></a>
 +
              <a href="https://www.facebook.com/2014ustcchinaigem?ref=bookmarks"><img src="https://static.igem.org/mediawiki/2015/6/6e/USTC-Facebook.png"></a>
 +
            </p>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
Line 194: Line 385:
 
     </div>
 
     </div>
 
   </div>
 
   </div>
−
  </div>
+
</div>
−
 
+
−
 
+
−
 
+
−
 
+
−
       
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
       
+
−
 
+
−
             
+
−
 
+
  
−
      <!--Import jQuery before materialize.js-->
+
</html>
−
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+
−
      <script type="text/javascript" src="js/materialize.min.js"></script>
+
−
    </body>
+
−
  </html>
+

Latest revision as of 02:58, 19 September 2015