Difference between revisions of "Team:NCKU Tainan/test home"

(Created page with "{{NCKU_Tainan/Header}} <html> <style> .vertical-container { background-image: url('#'); background-attachment: fixed; } .logo{ position:absolute; width: 475px; h...")
 
Line 1: Line 1:
−
{{NCKU_Tainan/Header}}
+
{{NCKU_Tainan/Header}} {{NCKU_Tainan/animate_css}}
 
<html>
 
<html>
 +
<head>
 +
<script src="https://2017.igem.org/wiki/index.php?title=Team:NCKU_Tainan/jquery_min_js&action=raw&ctype=text/javascript"></script>
 +
<script src="https://2017.igem.org/wiki/index.php?title=Team:NCKU_Tainan/jquery_waypoint_js&action=raw&ctype=text/javascript"></script>
 +
 +
</head>
 
<style>
 
<style>
−
.vertical-container {
+
 
−
  background-image: url('#');
+
.full{
−
  background-attachment: fixed;
+
width:100%;
 +
height:auto;
 
}
 
}
 +
.imagerow{
 +
  background-color:#fbfbfb; 
 +
}
 +
 
.logo{
 
.logo{
 
   position:absolute;
 
   position:absolute;
Line 11: Line 21:
 
   height: 475px;
 
   height: 475px;
 
   border-radius: 300px;
 
   border-radius: 300px;
−
   text-align:center;
+
   text-align:center;
 +
 
 
   z-index:100;
 
   z-index:100;
 
}
 
}
Line 22: Line 33:
 
     position:absolute;   
 
     position:absolute;   
 
     width:100%;   
 
     width:100%;   
−
     z-index: 1;
+
     z-index: 1;  
 
   }
 
   }
 +
 +
#video-boat {
 +
    position:relative;
 +
    width:80%; 
 +
    z-index: 1; 
 +
    margin-left:10%;
 +
    margin-right:10%;
 +
  }
 +
 +
#div-left { 
 +
  width:50%;
 +
  height:100%; 
 +
  margin-left:auto;
 +
  margin-right:auto;
 +
  background-color:#fbfbfb; 
 +
 +
}
 +
#div-left p{ 
 +
  text-align:right !important;
 +
  font-weight: 500 !important;
 +
  right:10px;
 +
  margin-top:15px;
 +
}
 +
#div-left h1{
 +
  color:#93edd4;
 +
  text-align:right !important;
 +
  right:10px;
 +
}
 +
 +
#div-right{   
 +
  width:50%;
 +
  height:100%;
 +
  margin-left:auto;
 +
  margin-right:auto; 
 +
  background-color:#fbfbfb;
 +
}
 +
 +
#div-right p{   
 +
  text-align:left !important;
 +
  font-weight: 500 !important;
 +
  padding-left:0 !important;
 +
  margin-top:15px;
 +
}
 +
#div-right h1{
 +
  color:#93edd4;
 +
  text-align:left !important;
 +
}
 +
 +
 +
.rightborder{
 +
  position:absolute;
 +
  width:10px;
 +
  height:30%;
 +
  border-right:4px solid #f9cb8f ;
 +
  right:0;
 +
  top:15%;
 +
}
 +
 +
.leftborder{
 +
  position:absolute;
 +
  width:10px;
 +
  height:30%;
 +
  border-right:4px solid #f9cb8f ;
 +
  left:0;
 +
  top:15%;
 +
}
 +
 +
.imagerow img{
 +
width:100%;
 +
}
 +
 +
#full img{
 +
  width:100%;
 +
}
 +
#margintop{
 +
  position:absolute;
 +
   
 +
}
  
 
</style>
 
</style>
Line 46: Line 135:
 
<div class="container-fluid">
 
<div class="container-fluid">
 
   <div class="row">
 
   <div class="row">
−
     <div id="paragraph" class="paragraph col-md-8 col-md-offset-1 col-xs-offset-1 col-xs-10 os-animation" data-os-animation="fadeIn" data-os-animation-delay="0s">
+
     <div id="paragraph" class="paragraph col-md-10 col-md-offset-1 col-xs-offset-1 col-xs-10" data-os-animation="fadeIn" data-os-animation-delay="0s">
  
−
    <h1>haha</h1>
+
      <div class="row imagerow">
−
    <hr>
+
        <div id="div-left" class="col-md-6">
 +
          <img src="https://static.igem.org/mediawiki/2017/a/ad/T--NCKU_Tainan--boxnobackground.gif">
 +
          <div class="rightborder "></div>
 +
        </div>
 +
        <div id="div-right" class="col-md-6 ">
 +
 
 +
          <h1>Regulation Box</h1>
 +
<p>
 +
<i>E. coli</i>  in box is able to reduce the nitrate concentration of the pumped-in water, achieving nitrate regulation in a biological way.</p>
 +
 
 +
        </div>
 +
      </div>
 +
 
 +
      <div class="row imagerow">
 +
        <div id="div-left" class="col-md-6">
 +
<div id="margintop" style="right:20px;">
 +
          <h1>Sensing Boat</h1>
 +
          <p>
 +
With sensors and our <i>E. coli</i>, the boat provides an accurate, immediate and automatic sampling method to nitrate sensing.
 +
          </p>
 +
</div>
 +
        </div>
 +
        <div id="div-right " class="col-md-6 ">
 +
          <div class="leftborder "></div>
 +
          <img src="https://static.igem.org/mediawiki/2017/4/4a/T--NCKU_Tainan--boatnobackground.gif" style="padding-left:40px">
 +
        </div>
 +
      </div>
 +
 
 +
      <div class="row imagerow">
 +
        <div id="div-left" class="col-md-6">
 +
          <img src="https://static.igem.org/mediawiki/2017/0/0a/T--NCKU_Tainan--test.gif">
 +
          <div class="rightborder "></div>
 +
        </div>
 +
        <div id="div-right" class="col-md-6 "> 
 +
<div id="margintop">     
 +
<h1>Application</h1>
 +
<p>
 +
Our own app sends a notice to users while nitrate concentration reaching a certain level, making aquaculture less manpower-required.</p>
 +
</div>
 +
        </div>
 +
      </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
</div>
 
</div>
 +
<br><br><br><br>
  
 +
<div class="container-fluid">
 +
  <div class="row"> 
 +
    <div class="full">       
 +
        <video autoplay loop id="video-background" muted plays-inline>
 +
                <source src="https://static.igem.org/mediawiki/2017/2/2b/NCKU-home-all.mp4" type="video/mp4">
 +
          </video>   
 +
    </div>
 +
  </div>
 +
</div>
 
<body>
 
<body>
 +
 +
<script type="text/javascript">
 +
    function onScrollInit(items, trigger) {
 +
      $(items).each( function() {
 +
  var osElement = $(this),
 +
      osAnimationClass = osElement.attr('data-os-animation'),
 +
      osAnimationDelay = osElement.attr('data-os-animation-delay');
 +
      osElement.css({
 +
        '-webkit-animation-delay':  osAnimationDelay,
 +
        '-moz-animation-delay':    osAnimationDelay,
 +
        'animation-delay':          osAnimationDelay,
 +
        });
 +
    var osTrigger = ( trigger ) ? trigger : osElement;
 +
    var waypoint = new Waypoint({
 +
        element: osTrigger,
 +
        handler: function() {
 +
          osElement.addClass('animated').toggleClass(osAnimationClass);
 +
        },
 +
        triggerOnce: false,
 +
        offset: '100%'
 +
        })
 +
      });
 +
}
 +
$(document).ready(function() {
 +
      onScrollInit('.os-animation');
 +
      onScrollInit( '.staggered-animation', '.staggered-animation-container');
 +
});
 +
    </script>
 +
 
</html>
 
</html>

Revision as of 08:24, 1 November 2017

Regulation Box

E. coli in box is able to reduce the nitrate concentration of the pumped-in water, achieving nitrate regulation in a biological way.

Sensing Boat

With sensors and our E. coli, the boat provides an accurate, immediate and automatic sampling method to nitrate sensing.

Application

Our own app sends a notice to users while nitrate concentration reaching a certain level, making aquaculture less manpower-required.