Difference between revisions of "Team:TecCEM"

 
(95 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{TecCEM}}
+
{{TecCEM}}  
−
{{:Team:TecCEM/Templates/ScrollJs}}
+
 
−
{{:Team:TecCEM/Templates/NavBar}}
+
 
<html>
 
<html>
 +
 
<head>
 
<head>
−
  <!-- Basic Page Needs -->
+
    <!-- Basic Page Needs -->
−
  <meta charset="utf-8"/>
+
    <meta charset="utf-8" />
−
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
−
  <title>IGEM_TECCEM</title>
+
    <title>IGEM_TECCEM</title>
−
  <meta name="description" content=""/>
+
    <meta name="description" content="" />
−
  <meta name="keywords" content=""/>
+
    <meta name="keywords" content="" />
−
  <meta name="author" content="Fernando Colchado"/>
+
    <meta name="author" content="Fernando Colchado" />
  
−
  <link href="https://fonts.googleapis.com/css?family=Raleway|Ubuntu" rel="stylesheet">
+
    <link href="https://fonts.googleapis.com/css?family=Raleway|Ubuntu" rel="stylesheet">
−
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
−
 
+
   
−
 
+
    <script>
−
        <script>
+
        jQuery(document).ready(function($) {
−
            jQuery(document).ready(function ($) {  
+
            $(window).on('beforeunload', function(){
 +
  $(window).scrollTop(0);
 +
});
 +
            function map(value, in_min, in_max, out_min, out_max) {
 +
                return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
 +
            }
 +
            //######SCROLL WINDOW##########
  
−
  function map (value, in_min, in_max, out_min, out_max){
+
            $("#scrollTo").click(function() {
−
    return (value - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
+
                $('html, body').animate({
−
  }
+
                    scrollTop: $("#firstTitle").offset().top - 120
−
  //######SCROLL WINDOW##########
+
                }, 2000);
 +
            });
  
−
  $('#scrollTo').click(function(){
+
            // #####SCROLL OPACITY#####
−
    $(window)scrollTo($('#firstTitle')[duration:500]);
+
−
  });
+
−
 
+
−
  // #####SCROLL OPACITY#####
+
  
−
  $(window).scroll(function(event){
+
            $(window).scroll(function(event) {
−
    var scroll = $(window).scrollTop();
+
                var scroll = $(window).scrollTop();
−
    var scrollOpacity = map(scroll, 0, 350, 1, 0);
+
                var scrollOpacity = map(scroll, 0, 350, 1, 0);
−
    var lemonPileOpacity = map(scroll, 0, 500, 0, 1);
+
                var lemonPileOpacity = map(scroll, 0, 500, 0, 1);
−
    var lemonPileTop = map(scroll, 0, 1000, -180, 300);
+
                var lemonPileTop = map(scroll, 0, 1000, -180, 300);
−
    console.log(lemonPileTop);
+
                console.log(lemonPileTop);
−
    var lemonPileRotate = map(scroll, 0, 700, 50, 0);
+
                var lemonPileRotate = map(scroll, 0, 700, 50, 0);
−
    $('.scroll img').css('opacity',scrollOpacity);
+
                $('.scroll img').css('opacity', scrollOpacity);
−
    $('.lemonPileImg1').css('opacity',lemonPileOpacity);
+
                $('.lemonPileImg1').css('opacity', lemonPileOpacity);
−
    $('.lemonPileImg1').css('top',lemonPileTop+'px');
+
                $('.lemonPileImg1').css('top', lemonPileTop + 'px');
−
    $('.lemonPileImg1').css({'transform':'rotate('+lemonPileRotate+'deg)'});
+
                $('.lemonPileImg1').css({
−
  });
+
                    'transform': 'rotate(' + lemonPileRotate + 'deg)'
 +
                });
 +
            });
  
−
  //######MOUSE X########
+
            //######MOUSE X########
  
−
  $( document ).on( "mousemove", function( event ) {
+
            $(document).on("mousemove", function(event) {
−
      console.log(event.pageX);
+
                console.log(event.pageX);
−
      var mouseX = event.pageX;
+
                var mouseX = event.pageX;
−
      var mouseOpacityLeft = map(mouseX,0,1280,-0.5,1.5);
+
                var mouseOpacityLeft = map(mouseX, 0, 1280, -0.5, 1.5);
−
      var mouseOpacityRight = map(mouseX,0,1280,1.5,-0.5);
+
                var mouseOpacityRight = map(mouseX, 0, 1280, 1.5, -0.5);
−
      var mousePositionLeft = map(mouseX,0,1280,100,-100);
+
                var mousePositionLeft = map(mouseX, 0, 1280, 100, -100);
−
      var mousePositionRight = map(mouseX,0,1280,-390,-190);
+
                var mousePositionRight = map(mouseX, 0, 1280, -390, -190);
−
      var mousePositionTopLeft = map(mouseX,0,1280,-200,100);
+
                var mousePositionTopLeft = map(mouseX, 0, 1280, -200, 100);
−
      var mousePositionTopRight = map(mouseX,0,1280,100,-150);
+
                var mousePositionTopRight = map(mouseX, 0, 1280, 100, -150);
−
      $('.sadPeopleLeft').css('opacity',mouseOpacityLeft);
+
                $('.sadPeopleLeft').css('opacity', mouseOpacityLeft);
−
      $('.sadPeopleRight').css('opacity',mouseOpacityRight);
+
                $('.sadPeopleRight').css('opacity', mouseOpacityRight);
−
      $('.leftHand img').css('left',mousePositionLeft);
+
                $('.leftHand img').css('left', mousePositionLeft);
−
      $('.rightHand img').css({'right': mousePositionRight});
+
                $('.rightHand img').css({
−
      $('.leftHand').css('top',mousePositionTopLeft);
+
                    'right': mousePositionRight
−
      $('.rightHand').css({'top': mousePositionTopRight});
+
                });
−
  });
+
                $('.leftHand').css('top', mousePositionTopLeft);
 +
                $('.rightHand').css({
 +
                    'top': mousePositionTopRight
 +
                });
 +
            });
  
−
});
+
        });
−
        </script>
+
    </script>
−
           
+
−
  <style>
+
−
        html, body{
+
−
    overflow-x:hidden;
+
−
}
+
−
                #globalWrapper{
+
−
                      width:100%;
+
−
                } 
+
−
.igem_2017_content_wrapper ul{
+
−
    padding: 0;
+
−
    font-size: 100%;
+
−
    font-family: 'Ubuntu', sans-serif !important;
+
−
}
+
−
.igem_2017_content_wrapper a{
+
−
text-decoration: none;
+
−
}
+
−
.igem_2017_content_wrapper {
+
−
    width:100%;
+
−
}
+
−
.imgOranges{
+
−
    position: inherit;
+
−
    top: -80px;
+
−
    left: 50%;
+
−
    transform: translate(-50%,0);
+
−
}
+
−
.titleStyleCitrus {
+
−
  top: -380px;
+
−
    text-align: center;
+
−
    font-family: 'Pangolin', cursive;
+
−
}
+
−
.titleStyleCitrus h1 {
+
−
    line-height: 1em;
+
−
    color: white;
+
−
}
+
−
.orangePileImg{
+
−
    top:80px;
+
−
}
+
−
.orangePileWidth{
+
−
left:50%;
+
−
position:relative;
+
−
transform:translate(-50%,0);
+
−
width:500px;
+
−
}
+
−
.complex{
+
−
  padding-top: 140px;
+
−
}
+
−
.paddingFades{
+
−
  padding-top: 50px;
+
−
  text-align: justify;
+
−
}
+
−
.paddingFadesImg{
+
−
  padding-top: 50px;
+
−
  text-align: justify;
+
−
}
+
  
−
.sadPeopleAreSad{
+
    <style>
−
    position: relative;
+
        html,
−
    left: 50%;
+
        body {
−
    transform: translate(-50%,0);
+
            overflow-x: hidden;
−
    top: -70px;
+
            overflow-y: hidden;
−
}
+
        }
−
.hands{
+
       
−
  top: -230px;
+
        #globalWrapper {
−
    position: relative;
+
            width: 100%;
−
}
+
        }
−
#scrollTo{
+
       
−
  cursor: pointer;
+
        .igem_2017_content_wrapper ul {
−
}
+
            padding: 0;
−
@media only screen and (max-width: 1246px) {
+
            font-size: 100%;
−
.titleRed{
+
            font-family: 'Ubuntu', sans-serif !important;
−
      font-size:2em;
+
        }
−
  }
+
       
−
  .rightHand img{
+
        .igem_2017_content_wrapper a {
−
    display: none;
+
            text-decoration: none;
−
  }
+
        }
−
  .leftHand img{
+
       
−
    left: -35px !important;
+
        .igem_2017_content_wrapper {
−
    width: 400px;
+
            width: 100%;
−
  }
+
        }
−
  .leftHand {
+
        #firstTitle{
−
    top: 280px !important;
+
            font-size: 2em;
−
  }
+
        }
−
  .sadPeopleLeft{
+
        .imgOranges {
−
    opacity: 1 !important;
+
            position: inherit;
−
  }
+
            top: -80px;
−
  .sadPeopleRight{
+
            left: 50%;
−
    opacity: 1 !important;
+
            transform: translate(-50%, 0);
−
  }
+
        }
−
}
+
       
−
@media only screen and (max-width: 967px) {
+
        .titleStyleCitrus {
−
.titleRed{
+
            top: -380px;
−
      font-size:2em;
+
            text-align: center;
−
  }
+
            font-family: 'Pangolin', cursive;
−
.lemonPileImg1{
+
        }
−
  transform: translate(50%,0) !important;
+
       
−
    opacity: 0;
+
        .titleStyleCitrus h1 {
−
    position: relative;
+
            line-height: 1em;
−
    top: -10px !important;
+
            color: white;
−
    width: 160px;
+
        }
−
    z-index: 1;
+
       
 +
        .orangePileImg {
 +
            top: 80px;
 +
        }
 +
       
 +
        .orangePileWidth {
 +
            left: 50%;
 +
            position: relative;
 +
            transform: translate(-50%, 0);
 +
            width: 500px;
 +
        }
 +
       
 +
        .complex {
 +
            padding-top: 140px;
 +
        }
 +
       
 +
        .paddingFades {
 +
            padding-top: 50px;
 +
            text-align: justify;
 +
        }
 +
       
 +
        .paddingFadesImg {
 +
            padding-top: 50px;
 +
            text-align: justify;
 +
        }
 +
       
 +
        .sadPeopleAreSad {
 +
            position: relative;
 +
            left: 50%;
 +
            transform: translate(-50%, 0);
 +
            top: -70px;
 +
        }
 +
       
 +
        .hands {
 +
            top: -230px;
 +
            position: relative;
 +
        }
 +
       
 +
        #scrollTo {
 +
            cursor: pointer;
 +
        }
 +
       
 +
        @media only screen and (max-width: 1246px) {
 +
            .titleRed {
 +
                font-size: 2em;
 +
            }
 +
            .rightHand img {
 +
                display: none;
 +
            }
 +
            .leftHand img {
 +
                left: -35px !important;
 +
                width: 400px;
 +
            }
 +
            .leftHand {
 +
                top: 280px !important;
 +
            }
 +
            .sadPeopleLeft {
 +
                opacity: 1 !important;
 +
            }
 +
            .sadPeopleRight {
 +
                opacity: 1 !important;
 +
            }
 +
        }
 +
       
 +
        @media only screen and (max-width: 967px) {
 +
            .titleRed {
 +
                font-size: 2em;
 +
            }
 +
            .lemonPileImg1 {
 +
                transform: translate(50%, 0) !important;
 +
                opacity: 0;
 +
                position: relative;
 +
                top: -10px !important;
 +
                width: 160px;
 +
                z-index: 1;
 +
            }
 +
            .sadPeopleAreSad {
 +
                display: none;
 +
            }
 +
            .paddingFadesImg {
 +
                padding-top: 0 !important;
 +
            }
 +
            #load-image-right{
 +
              visibility: none;
 +
          position: absolute;
 +
          right: 0;
 +
          top: -180px;
 +
          z-index: 1999;
 +
        }
 +
        #load-image{
 +
          position: absolute;
 +
          left: -300px;
 +
          z-index: 2000;
 +
        }
 +
        }
 +
    </style>
 +
    <script type="text/javascript">
 +
        $(window).on('load', function() { 
 +
          $(window).on('beforeunload', function(){
 +
  $(window).scrollTop(0);
 +
});
 +
          $('#load-image').addClass('loaded-img-left');
 +
          $('#load-image-right').addClass('loaded-img-right');
 +
          $('#mobile-load').addClass('mobile-load-image-right');
 +
          function overflow(){
 +
            $('body').css('overflow-y', 'scroll');
 +
            $('html').css('overflow-y', 'scroll');
 +
          }
 +
          setTimeout(overflow, 3000);         
 +
          $('.loadVisible').css('visibility','visible');
 +
         
 +
          // $().css('overflow-y', 'visible');
 +
        });
 +
    </script>
 +
    <style type="text/css">
 +
    #mobile-load{
 +
        visibility: hidden;
 +
        /*width: 1800px;*/
 +
          position: absolute;
 +
          right: -100px;
 +
          top: -170px;
 +
          z-index: 1999;
 
     }
 
     }
−
  .sadPeopleAreSad{
+
    .mobile-load-image-right{
−
    display: none;
+
        z-index: 1999;
−
  }
+
        visibility: hidden;
−
  .paddingFadesImg{
+
      position: absolute;
−
  padding-top: 0 !important;
+
        animation-name: loaded-img-right-animation;
−
    
+
        animation-duration: 1.4s;
−
   }
+
        animation-iteration-count: 1;
−
 
+
        animation-fill-mode: forwards;
−
}
+
        animation-delay: 1s;     
−
</style>
+
        animation-timing-function: ease-in-out;  
 +
    }
 +
        .orangeColor{
 +
          background-color: rgb(255,200,62);         
 +
        }
 +
        #load-image{
 +
          position: absolute;
 +
          left: 0;
 +
          top: -5px;
 +
          z-index: 2000;
 +
        }
 +
        #load-image-right{
 +
            width: 1800px;
 +
          position: absolute;
 +
          right: -100px;
 +
          top: -120px;
 +
          z-index: 1999;
 +
        }
 +
        .loaded-img-left{   
 +
      z-index: 2000;
 +
      position: absolute;
 +
        animation-name: loaded-img-left-animation;
 +
        animation-duration: 1.4s;
 +
        animation-iteration-count: 1;
 +
        animation-fill-mode: forwards;
 +
        animation-delay: 1s;     
 +
        animation-timing-function: ease-in-out;     
 +
    }
 +
    @keyframes loaded-img-left-animation {
 +
        0% {left: 0px;}     
 +
        100% {left: -1200px;}
 +
    }
 +
    .loaded-img-right{   
 +
      z-index: 1999;
 +
      position: absolute;
 +
        animation-name: loaded-img-right-animation;
 +
        animation-duration: 1.4s;
 +
        animation-iteration-count: 1;
 +
        animation-fill-mode: forwards;
 +
        animation-delay: 1s;     
 +
        animation-timing-function: ease-in-out;     
 +
    }
 +
    @keyframes loaded-img-right-animation {
 +
        0% {right: -100px;}     
 +
        100% {right: -4200px;}
 +
    }
 +
    .loadVisible{
 +
      visibility: hidden;
 +
    }
 +
    @media only screen and (max-width: 967px) {   
 +
    .small {
 +
        font-size:  2em !important;
 +
    }       
 +
    #mobile-load{
 +
        visibility: visible;
 +
        height: 150vh;
 +
          position: absolute;
 +
          right: -110px;
 +
          top: -210px;
 +
          z-index: 1999;
 +
    }
 +
    .mobile-load-image-right{
 +
        height: 150vh;
 +
        /*visibility: hidden;*/    
 +
      z-index: 1999;
 +
      position: absolute;
 +
        animation-name: loaded-img-right-animation;
 +
        animation-duration: 1.4s;
 +
        animation-iteration-count: 1;
 +
        animation-fill-mode: forwards;
 +
        animation-delay: 1s;     
 +
        animation-timing-function: ease-in-out;
 +
    }
 +
            #load-image-right{
 +
              visibility: hidden;
 +
              height: 150vh;
 +
          position: absolute;
 +
          right: -200px;
 +
        /* top: -140px;*/
 +
          z-index: 1999;
 +
        }
 +
        .loaded-img-right{ 
 +
          height: 150vh;
 +
        visibility: hidden;    
 +
      z-index: 1999;
 +
      position: absolute;
 +
        animation-name: loaded-img-right-animation;
 +
        animation-duration: 1.4s;
 +
        animation-iteration-count: 1;
 +
        animation-fill-mode: forwards;
 +
        animation-delay: 1s;     
 +
        animation-timing-function: ease-in-out;     
 +
    }
 +
    @keyframes loaded-img-right-animation {
 +
        0% {right: -110px;}      
 +
        100% {right: -4200px;}
 +
    }
 +
        #load-image{
 +
          position: absolute;
 +
          left: -350px;
 +
          z-index: 2000;
 +
        }
 +
        .loaded-img-left{   
 +
      z-index: 2000;
 +
      position: absolute;
 +
        animation-name: loaded-img-left-animation;
 +
        animation-duration: 1.4s;
 +
        animation-iteration-count: 1;
 +
        animation-fill-mode: forwards;
 +
        animation-delay: 1s;     
 +
        animation-timing-function: ease-in-out;     
 +
    }
 +
    @keyframes loaded-img-left-animation {
 +
        0% {left: -350px;}     
 +
        100% {left: -1200px;}
 +
    }
 +
    }
 +
    </style>
 
</head>
 
</head>
 +
 
<body>
 
<body>
−
<div class="container-fluid">
+
    <div class = "container-fluid orangeColor">
−
     <div class="row orange">
+
      <div>
−
        <div class="col-md-2"></div>
+
        <img id = "load-image" src="https://static.igem.org/mediawiki/2017/4/45/TEC-CEM-naranja_left.png">
−
        <div class="col-md-8">
+
      </div>
−
            <div class="row naranjas2">
+
      <div>
−
                <div class="col-12">
+
        <img id = "load-image-right"src="https://static.igem.org/mediawiki/2017/a/a3/TEC-CEM-load_right.png">
−
                    <img class = "imgOranges" src="https://static.igem.org/mediawiki/2017/8/80/TEC-CEM-homeNaranjas.png">
+
      </div>
−
                    <div class="row naranjas2">
+
      <div>
−
                        <div class = "col-12 titleStyleCitrus">
+
        <img id = "mobile-load"src="https://static.igem.org/mediawiki/2017/1/11/TEC-CEM-load_right_2.png">
−
                            <h1 class = "title">Let's Save</br>The Citrus!</h1>      
+
      </div>
−
                            <div class="row">
+
    </div>
−
                                <div class="col-12 scroll">
+
     <div class="container-fluid loadVisible">
−
                                    <img id = "scrollTo" src="https://static.igem.org/mediawiki/2017/1/12/TEC-CEM-scroll.png">
+
        <div class="row orange">
−
                                 </div>                              
+
            <div class="col-md-2"></div>
 +
            <div class="col-md-8">
 +
                <div class="row naranjas2">
 +
                    <div class="col-12">
 +
                        <img class="imgOranges" src="https://static.igem.org/mediawiki/2017/8/80/TEC-CEM-homeNaranjas.png">
 +
                        <div class="row naranjas2">
 +
                            <div class="col-12 titleStyleCitrus">
 +
                                <h1 class="title">Let's Save</br>The Citrus!</h1>
 +
                                <div class="row">
 +
                                    <div class="col-12 scroll">
 +
                                        <a id="scrollTo"><img src="https://static.igem.org/mediawiki/2017/1/12/TEC-CEM-scroll.png"></a>
 +
                                    </div>
 +
                                 </div>
 
                             </div>
 
                             </div>
 
                         </div>
 
                         </div>
Line 196: Line 402:
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 +
            <div class="col-md-2"></div>
 
         </div>
 
         </div>
−
        <div class="col-md-2"></div>
 
−
    </div>
 
  
−
    <div class="row hlb">
+
        <div class="row hlb">
−
        <div class="col"></div>
+
            <div class="col"></div>
−
        <div class="col-lg-4">
+
            <div class="col-lg-4">
−
            <div class="row orangeimg">
+
                <div class="row orangeimg">
−
                <div class="col-12">
+
                    <div class="col-12">
−
                    <h2 id = "firstTitle" class = "titleRed">HLB: a deadly</br>citrus plague</h2>
+
                        <h2 id="firstTitle" class="titleRed">HLB: a deadly</br>citrus plague</h2>
 +
                    </div>
 +
                    <div class="col-12 paragraphU">
 +
                        <p class="justifyText">Huanglongbing (HLB) disease is an important bacterial disease present in citrus plants around the world. It is transmitted through <span class =  "italicText">Diaphorina citri</span> , a type of psyllid. It was first discovered in China and has now spread to Asia, Africa, the Arabian Peninsula, Mexico, and Florida, in the United States. The difficulty to culture the bacteria, its rapid spread, and devastating effects, have made HLB one of the most important plagues worldwide. In Mexico, the lack of information about the disease and the large costs for its control make it even more destructive.</p>
 +
                    </div>
 
                 </div>
 
                 </div>
−
                <div class="col-12 paragraphU">
+
            </div>
−
                    <p class = "justifyText">Huanglongbing (HLB) disease is an important bacterial disease present in citrus plants around the world. It is transmitted through Diaphorina citri, a type of psyllid. It was first discovered in China and has now spread to Asia, Africa, the Arabian Peninsula, Mexico, and Florida, in the United States. The difficulty to culture the bacteria, its rapid spread, and devastating effects, have made HLB one of the most important plagues worldwide. In Mexico, the lack of information about the disease and the large costs for its control make it even more destructive.</p>
+
            <div class="col-lg-4 orangePileImg">
 +
                <img class="lemonPileImg1" src="https://static.igem.org/mediawiki/2017/d/d8/TEC-CEM-orange.png">
 +
                <div class="row">
 +
                    <div class="col-12">
 +
                        <img class="orangePileWidth" src="https://static.igem.org/mediawiki/2017/a/a7/TEC-CEM-lemonPile.png">
 +
                    </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 +
            <div class="col"></div>
 
         </div>
 
         </div>
−
         <div class="col-lg-4 orangePileImg">
+
         <div class="row complex">
−
            <img class = "lemonPileImg1" src="https://static.igem.org/mediawiki/2017/d/d8/TEC-CEM-orange.png">
+
             <div class="col-12">
−
             <div class = "row">
+
                 <h2 class="titleRed small">A complex problem,<br/>a simple solution</h2>
−
              <div class = "col-12">
+
−
                 <img class = "orangePileWidth" src="https://static.igem.org/mediawiki/2017/a/a7/TEC-CEM-lemonPile.png">           
+
−
              </div>
+
 
             </div>
 
             </div>
 
         </div>
 
         </div>
−
         <div class="col"></div>
+
         <div class="row fades">
−
    </div>
+
            <div class="col"></div>
−
    <div class="row complex">
+
            <div class="col-lg-3 paddingFades paragraphU sadPeopleLeft">
−
        <div class="col-12">
+
                <p>Our team has developed CitricOff:  a device that can produce siRNA in <span class = "italicText">E. coli</span> . This device will help the scalability of siRNA production worldwide. The siRNA production mechanism helped us control the HLB disease by producing the necessary siRNA in order to silence multiple genes in <span class =  "italicText">Diaphorina citri</span> .</p>
−
             <h2 class = "titleRed">A complex problem,<br/>a simple solution</h2>
+
            </div>
 +
            <div class="col-md-3 paddingFadesImg paragraphU">
 +
                <img class="sadPeopleAreSad" src="https://static.igem.org/mediawiki/2017/1/1b/TEC-CEM-sadPeople.png">
 +
             </div>
 +
            <div class="col-lg-3 paddingFades paragraphU sadPeopleRight">
 +
                <p>Simple, ecological, and species-specific, CitricOff provides an alternative for families in Mexico and the world who rely on citrus plantations for their income. More than 69 thousand families could benefit from it, and avoid resorting to illicit activities</p>
 +
            </div>
 +
            <div class="col"></div>
 
         </div>
 
         </div>
−
    </div>
+
        <div class="row hands">
−
    <div class="row fades">
+
            <div class="col-md-6 leftHand">
−
        <div class="col"></div>
+
                <img src="https://static.igem.org/mediawiki/2017/e/ef/TEC-CEM-leftHand.png">
−
        <div class="col-lg-3 paddingFades paragraphU sadPeopleLeft">
+
            </div>
−
          <p>Our team has developed CitricOff: a device that can produce siRNA in E. coli. This device will help the scalability of siRNA producción worldwide. The siRNA production mechanism helped us control the HLB disease by producing the necessary siRNA in order to silence multiple genes in D. citri.</p>
+
            <div class="col-md-6 rightHand">
 +
                <img src="https://static.igem.org/mediawiki/2017/9/9f/TEC-CEM-rightHand.png">
 +
            </div>
 
         </div>
 
         </div>
−
        <div class="col-md-3 paddingFadesImg paragraphU">
 
−
          <img class = "sadPeopleAreSad" src="https://static.igem.org/mediawiki/2017/1/1b/TEC-CEM-sadPeople.png">
 
−
        </div>
 
−
        <div class="col-lg-3 paddingFades paragraphU sadPeopleRight">
 
−
          <p>Easy to apply, ecological, and species-specific, CitricOff provides an alternative for families in Mexico and the world who rely on citrus plantations for their income. More than 69 thousand families could benefit from it, and avoid resorting to illicit activities</p>
 
−
        </div>
 
−
        <div class="col"></div>
 
−
    </div>
 
−
    <div class="row hands">
 
−
        <div class="col-md-6 leftHand">
 
−
          <img src="https://static.igem.org/mediawiki/2017/e/ef/TEC-CEM-leftHand.png">
 
−
        </div>
 
−
        <div class="col-md-6 rightHand">
 
−
          <img src="https://static.igem.org/mediawiki/2017/9/9f/TEC-CEM-rightHand.png">
 
−
        </div>
 
−
    </div>
 
 
</body>
 
</body>
 +
 
</html>
 
</html>
 +
{{:Team:TecCEM/Templates/NavBar}}
 
{{:Team:TecCEM/Templates/Footer}}
 
{{:Team:TecCEM/Templates/Footer}}

Latest revision as of 23:49, 1 November 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM

IGEM_TECCEM

Let's Save
The Citrus!

HLB: a deadly
citrus plague

Huanglongbing (HLB) disease is an important bacterial disease present in citrus plants around the world. It is transmitted through Diaphorina citri , a type of psyllid. It was first discovered in China and has now spread to Asia, Africa, the Arabian Peninsula, Mexico, and Florida, in the United States. The difficulty to culture the bacteria, its rapid spread, and devastating effects, have made HLB one of the most important plagues worldwide. In Mexico, the lack of information about the disease and the large costs for its control make it even more destructive.

A complex problem,
a simple solution

Our team has developed CitricOff: a device that can produce siRNA in E. coli . This device will help the scalability of siRNA production worldwide. The siRNA production mechanism helped us control the HLB disease by producing the necessary siRNA in order to silence multiple genes in Diaphorina citri .

Simple, ecological, and species-specific, CitricOff provides an alternative for families in Mexico and the world who rely on citrus plantations for their income. More than 69 thousand families could benefit from it, and avoid resorting to illicit activities

IGEM_TECCEM
IGEM_TECCEM