Team:IIT Delhi

From 2014.igem.org

(Difference between revisions)
 
(381 intermediate revisions not shown)
Line 1: Line 1:
 +
{{CSS/Main}}
 +
{{CSS/style}}
 +
{{CSS/foundation}}
 +
{{CSS/reveal}}
 +
{{CSS/home}}
 +
{{CSS/Generic}}
 +
{{CSS/js-image-slider}}
 +
{{CSS/style2}}
 +
{{CSS/style3}}
 +
 +
 +
<html>
<html>
<head>
<head>
-
</head>
+
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 +
    <meta name="description" content="iGEM 2014 IIT Delhi">
 +
    <meta name="keywords" content="igem iitdelhi 2014, biotech, biobricks, parts, notebook,  bio, chem, iit, delhi, hauz khas , new delhi, molecular biology,  genetics, synthetic, biology, competition, iGEM, MIT, USA, abhishek, bharti">
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">
 +
    <meta http-equiv="cache-control" content="public" />   
 +
<title>iGEM IIT Delhi 2014</title>
 +
<link rel='shortcut icon' id='favicon' href='https://static.igem.org/mediawiki/2014/7/76/Favicon3.png' />
 +
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 +
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'>
 +
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700' rel='stylesheet' type='text/css'>
-
<body>
 
-
<div>
 
-
<p>
 
-
<!--=============Script for google map starts====================01-->
+
 
 +
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
 +
<!--map=====================
 +
<!--Script for google map at footer-->
<script
<script
-
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
+
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
</script>
 +
<script>
<script>
function initialize()
function initialize()
Line 22: Line 45:
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
}
 +
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</script>
-
<!--===============Script for google map ends=========================01-->
 
-
<!--===============Script for slider starts=====================================================02-->
 
-
<link rel="canonical" href="http://www.thepetedesign.com/demos/immersive_slider_demo.html" />
 
-
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
 
-
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
 
-
  <script type="text/javascript" src="jquery.immersive-slider.js"></script>
 
-
  <link href='immersive-slider.css' rel='stylesheet' type='text/css'>
 
-
<style> <!--immersive slider=========-->
 
-
/*=================================================
 
-
Class Definitions
 
-
=================================================*/
 
-
  .main {
 
-
      float: left;
 
-
      width: 100%;
 
-
      margin: 0 auto;
 
-
      background: transparent;
 
-
 
 
-
    }
 
-
   
 
-
.immersive_slider {
 
-
  background: transparent;
 
-
  width: 978px;
 
-
  height: 316px;
 
-
  opacity: 1;
 
-
  border:none;
 
-
  position: relative;
 
-
  overflow: hidden;
 
-
}
 
-
.immersive_slider .is-slide  {
 
-
 
 
-
  height: 316px;
 
-
  width: 978px;
 
-
  position: absolute;
 
-
  border:none;
 
-
}
 
-
.immersive_slider .is-slide .image  {
 
-
  float: none;
 
-
  width: 978px
 
-
  position:absolute;
 
-
  top:0px;
 
-
  left:0px;
 
-
  border:none;
 
-
  border:none;
 
-
repeat:none;
 
-
}
 
-
.is-bg-overflow {
 
-
  width: 100%;
 
-
  height: 100%;
 
-
  position: absolute;
 
-
  z-index: 0;
 
-
}
 
-
.is-overflow, .is-bg-overflow {
+
<!-------------EDITS ON------------------------>
-
  height: 100%;
+
-
}
+
-
.ease {
 
-
  -webkit-transition: 1000ms ease all;
 
-
  -moz-transition: 1000ms ease all;
 
-
  -o-transition: 1000ms ease all;
 
-
  transition: 1000ms ease all;
 
-
}
 
-
.bounce {
+
<style>
-
  -webkit-transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all;
+
.dock-container {
-
  -moz-transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all;
+
position: relative;
-
  -o-transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all;
+
top: 10px; height: 50px; padding-left: 20px; }
-
  transition: 1000ms cubic-bezier(0.175, 0.885, 0.420, 1.310) all;
+
a.dock-item {
-
}
+
display: block;  
 +
width: 50px; position: absolute;
 +
bottom: 0; text-align: center;
 +
text-decoration: none; color: #333; }
 +
.dock-item span { display: none; padding-left: 20px; }
 +
.dock-item img {
 +
border: 0;  
 +
margin: 5px 10px 0px;
 +
width: 100%;
 +
}
-
.no-animation {
+
</style>
-
  -webkit-transition: none!important;
+
-
  -moz-transition: none!important;
+
-
  -o-transition: none!important;
+
-
  transition: none !important;
+
-
}
+
-
.immersive_slider .is-slide .image img{
 
-
  width: 978px;
 
-
 
 
-
  position:absolute;
 
-
  top:0px;
 
-
  left:0px;
 
-
  border:none;
 
-
 
 
-
}
 
-
.immersive_slider .is-slide .content {
+
<!--------------EDITS OFF------------------------>
-
  float: none;
+
-
  width: 50%;
+
-
  padding-right: 10px;
+
-
border:none;
+
-
  color: white;
+
-
  text-align: left;
+
-
  line-height: 160%;
+
-
  vertical-align: middle;
+
-
  display: table-cell;
+
-
  position:absolute;
+
-
  top:150px;
+
-
}
+
-
.immersive_slider .is-slide .content h2{
 
-
  font-size: 42px;
 
-
  font-weight: 300;
 
-
  text-align: left;
 
-
  border:none;
 
-
}
 
-
.is-container {
+
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
-
  position: relative;
+
-
  overflow: hidden;
+
-
}
+
-
.is-container .is-background {
+
<!-- Remove all empty <p> tags -->
-
  position: absolute;
+
<script type="text/javascript">
-
  top: 0;
+
    $(document).ready(function() {
-
  left: 0;
+
        $("p").filter( function() {
-
  width: 100%;
+
            return $.trim($(this).html()) == '';
-
  height: 100%;
+
        }).remove()
-
}
+
    });
 +
</script>
-
.is-container .is-background img{
+
</head>
-
  width: 100%;
+
-
  height: 100%;
+
-
  left: 0;
+
-
  position: relative;
+
-
 
+
-
}
+
-
.is-container .is-background.gs_cssblur {
+
<body>
-
  -webkit-filter: blur(20px);
+
-
  -moz-filter: blur(20px);
+
-
  -o-filter: blur(20px);
+
-
  filter: blur(20px);
+
-
}
+
-
.is-pagination {
 
-
  position: absolute;
 
-
  left: 0;
 
-
  width: 100%;
 
-
  bottom: 20px;
 
-
  z-index: 40;
 
-
  list-style: none;
 
-
  margin: 0;
 
-
  padding: 0;
 
-
  text-align: center;
 
-
}
 
-
.is-pagination li {
 
-
  padding: 0;
 
-
  display: inline-block;
 
-
 
 
-
  text-align: center;
 
-
  position: relative;
 
-
}
 
-
.is-pagination li a{
 
-
  padding: 10px;
 
-
  width: 4px;
 
-
  height: 4px;
 
-
  display: block;
 
-
 
 
-
}
 
-
.is-pagination li a:before{
 
-
  content: '';
 
-
  position: absolute;
 
-
  width: 4px;
 
-
  height: 4px;
 
-
  background: rgba(255,255,255,0.85);
 
-
  border-radius: 10px;
 
-
  -webkit-border-radius: 10px;
 
-
  -moz-border-radius: 10px;
 
-
 
 
-
}
 
-
.is-pagination li a.active:before{
+
<div id="fb-root"></div>
-
   width: 10px;
+
<script>(function(d, s, id) {
-
   height: 10px;
+
   var js, fjs = d.getElementsByTagName(s)[0];
-
   background: none;
+
   if (d.getElementById(id)) return;
-
  border: 1px solid white;
+
   js = d.createElement(s); js.id = id;
-
   margin-top: -4px;
+
   js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
-
   left: 8px;
+
   fjs.parentNode.insertBefore(js, fjs);
-
}
+
}(document, 'script', 'facebook-jssdk'));</script>
-
.is-next{
 
-
  padding: 5px 5px 15px;
 
-
  font-size: 50px;
 
-
  position: absolute;
 
-
  bottom: 50%;
 
-
  z-index: 40;
 
-
  margin-bottom: -36px;
 
-
  width: 35px;
 
-
  color: #FFF;
 
-
  display: inline-block;
 
-
  line-height: 100%;
 
-
  background: rgba(0, 0, 0, 0.35);
 
-
}
 
-
.is-prev {
 
-
padding: 5px 5px 15px;
 
-
  font-size: 50px;
 
-
  position: absolute;
 
-
  bottom: 50%;
 
-
  z-index: 40;
 
-
  margin-bottom: -36px;
 
-
  width: 35px;
 
-
  color: #FFF;
 
-
  display: inline-block;
 
-
  line-height: 100%;
 
-
  background: rgba(0, 0, 0, 0.35);
 
-
}
 
-
.is-next {
+
<div class="container_home">
-
  right: 10px;
+
-
}
+
-
.is-prev {
 
-
  left: 10px;
 
-
}
 
-
/*======================*/
+
<!--Header============================================-->
 +
<div class="topblack"></div>
 +
<div class="topwhite">
 +
<!--<div class="logo"><a href="https://2014.igem.org/Team:IIT_Delhi"><img src="https://static.igem.org/mediawiki/2014/c/c0/Igem_iitdelhi_logo2.gif"/></a></div>-->
-
   
 
-
    .wrapper {
 
-
    height: auto !important;
 
-
    height: 100%;
 
-
    margin: 0 auto;
 
-
    overflow: hidden;
 
-
border:none;
 
-
    }
 
-
   
 
-
    a {
 
-
      text-decoration: none;
 
-
    }
 
-
 
 
 +
<div class="logo"><a href="https://2014.igem.org/Team:IIT_Delhi"><img src="https://static.igem.org/mediawiki/2014/b/b4/Logo_igem_iitdelhi.png"/></a>
 +
</div>
-
 
+
<div class="logotext"><img src="https://static.igem.org/mediawiki/2014/7/71/Text_iitd.jpg"/></div>
-
   
 
-
    .page_container {
 
-
      width: 978px;
 
-
  height: 316px;
 
-
      margin: 50px auto;
 
-
  border:none;
 
-
    }
 
 +
<div class="igemlogo"><a href="https://igem.org/Main_Page" target="_blank"><img src="https://static.igem.org/mediawiki/2014/e/e2/Igemlogo.png"/></a></div>
-
    .immersive_slider .is-slide .content h2{
+
<!-----EDIT GOING ON============-------->
-
      line-height: 140%;
+
-
      font-weight: 100;
+
-
      color: white;
+
-
      font-weight: 100;
+
-
  border:none;
+
-
    }
+
-
    .immersive_slider .is-slide .content a {
+
-
      color: white;
+
-
  border:none;
+
-
    }
+
-
 
+
-
  .immersive_slider .is-slide .content p{
+
-
    float: left;
+
-
    font-weight: 100;
+
-
    width: 100%;
+
-
    font-size: 17px;
+
-
    margin-top: 5px;
+
-
border:none;
+
-
  }
+
-
</style>
+
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
-
<script><!--jquery immersive slider=============-->
+
<script type="text/javascript" src="./javascripts/fisheye-iutil.min.js"></script>
-
/* ===========================================================
+
-
* jquery-immersive-slider.js v1
+
-
* ===========================================================
+
-
* Copyright 2013 Pete Rojwongsuriya.
+
-
* http://www.thepetedesign.com
+
-
*
+
-
* Create an immersive slider that changes the
+
-
* the whole container to match the viewing slide
+
-
*
+
-
* https://github.com/peachananr/immersive-slider
+
-
*
+
-
* ========================================================== */
+
-
!function($){
+
<script>
-
 
+
$(function () {  
-
  var defaults = {
+
    // Dock initialize
-
    animation: "bounce",
+
    $('#dock').Fisheye(
-
    slideSelector: ".slide",
+
{
-
    container: ".main",
+
            maxWidth: 30,
-
    cssBlur: false,
+
            items: 'a',
-
    pagination: true,
+
            itemsText: 'span',
-
    loop: true,
+
            container: '.dock-container',
-
    autoStart: 8000
+
            itemWidth: 50,
-
};
+
            proximity: 60,
-
 
+
            alignment : 'left',
-
  /*------------------------------------------------*/
+
            valign: 'bottom',
-
/*  Credit: Eike Send for the awesome swipe event */  
+
            halign : 'center'
-
/*------------------------------------------------*/
+
}
-
+
);
-
$.fn.swipeEvents = function() {
+
});
-
      return this.each(function() {
+
</script>
 +
<div id="dock">
 +
    <div class="dock-container">
 +
        <a class="dock-item" href="index1.html"><span>Example 1</span><img src="./images/home.png" alt="home" /></a>
 +
        <a class="dock-item" href="index1.html"><span>Example 2</span><img src="./images/contact.png" alt="contact" /></a>
 +
        <a class="dock-item" href="index1.html"><span>Example 3</span><img src="./images/education.png" alt="portfolio" /></a>
 +
        <a class="dock-item" href="index1.html"><span>Example 1</span><img src="./images/home.png" alt="home" /></a>
 +
        <a class="dock-item" href="index1.html"><span>Example 2</span><img src="./images/contact.png" alt="contact" /></a>
 +
        <a class="dock-item" href="index1.html"><span>Example 3</span><img src="./images/education.png" alt="portfolio" /></a> 
 +
    </div><!-- end div .dock-container -->
 +
</div><!-- end div .dock #dock -->
-
        var startX,
 
-
            startY,
 
-
            $this = $(this);
 
-
        $this.bind('touchstart', touchstart);
+
<!-----EDITS ABOVE==========================--->
-
        function touchstart(event) {
 
-
          var touches = event.originalEvent.touches;
 
-
          if (touches && touches.length) {
 
-
            startX = touches[0].pageX;
 
-
            startY = touches[0].pageY;
 
-
            $this.bind('touchmove', touchmove);
 
-
          }
 
-
          event.preventDefault();
 
-
        }
 
-
        function touchmove(event) {
 
-
          var touches = event.originalEvent.touches;
 
-
          if (touches && touches.length) {
 
-
            var deltaX = startX - touches[0].pageX;
 
-
            var deltaY = startY - touches[0].pageY;
 
-
            if (deltaX >= 50) {
+
<!-- Navigation bar-->
-
              $this.trigger("swipeLeft");
+
  <div id="nav">
-
            }
+
  <div id="nav_wrapper">
-
             if (deltaX <= -50) {
+
        <ul>
-
              $this.trigger("swipeRight");
+
             <li class="nav_item_home" class="home"><a href="https://2014.igem.org/Team:IIT_Delhi">Home</a></li><li class="project">
-
             }
+
             <a href="https://2014.igem.org/Team:IIT_Delhi/Project">Project</a></li><li class="modeling">
-
             if (deltaY >= 50) {
+
             <a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">Modeling</a></li><li class="team">
-
              $this.trigger("swipeUp");
+
            <a href="https://2014.igem.org/Team:IIT_Delhi/Team">Team</a></li><li class="notebook">
-
             }
+
             <a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">Notebook</a></li><li class="attributions">
-
             if (deltaY <= -50) {
+
             <a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">Attributions</a></li><li class="safety">
-
              $this.trigger("swipeDown");
+
             <a href="https://2014.igem.org/Team:IIT_Delhi/Safety">Safety</a></li><li class="parts">
-
             }
+
            <a href="https://2014.igem.org/Team:IIT_Delhi/Parts">Parts</a></li><li class="achievements">
-
            if (Math.abs(deltaX) >= 50 || Math.abs(deltaY) >= 50) {
+
             <a href="https://2014.igem.org/Team:IIT_Delhi/Achievements">Achievements</a></li>
-
              $this.unbind('touchmove', touchmove);
+
-
             }
+
-
          }
+
-
          event.preventDefault();
+
-
        }
+
-
      });
+
         </ul>
-
    };
+
     </div>
-
 
+
  </div>
-
  $.fn.transformSlider = function(settings, pos) {
+
-
    var el = $(this)
+
-
    switch(settings.animation) {
+
-
      case 'slide':
+
-
         el.addClass("ease").css({
+
-
          "-webkit-transform": "translate3d(" + pos + "%, 0, 0)",
+
-
          "-moz-transform": "translate3d(" + pos + "%, 0, 0)",
+
-
          "-ms-transform": "translate3d(" + pos + "%, 0, 0)",
+
-
          "transform": "translate3d(" + pos + "%, 0, 0)"
+
-
        });
+
-
      break;
+
-
      case 'slideUp':
+
-
        el.addClass("ease").css({
+
-
          "-webkit-transform": "translate3d(0, " + pos + "%, 0)",
+
-
          "-moz-transform": "translate3d(0, " + pos + "%, 0)",
+
-
          "-ms-transform": "translate3d(0, " + pos + "%, 0)",
+
-
          "transform": "translate3d(0, " + pos + "%, 0)"
+
-
        });
+
-
      break;
+
-
      case 'bounce':
+
-
        el.addClass("bounce").css({
+
-
          "-webkit-transform": "translate3d(" + pos + "%, 0, 0)",
+
-
          "-moz-transform": "translate3d(" + pos + "%, 0, 0)",
+
-
          "-ms-transform": "translate3d(" + pos + "%, 0, 0)",
+
-
          "transform": "translate3d(" + pos + "%, 0, 0)"
+
-
        });
+
-
      break;
+
-
      case 'bounceUp':
+
-
        el.addClass("bounce").css({
+
-
          "-webkit-transform": "translate3d(0, " + pos + "%, 0)",
+
-
          "-moz-transform": "translate3d(0, " + pos + "%, 0)",
+
-
          "-ms-transform": "translate3d(0, " + pos + "%, 0)",
+
-
          "transform": "translate3d(0, " + pos + "%, 0)"
+
-
        });
+
-
      break;
+
-
      case 'fade':
+
-
        el.addClass("no-animation").fadeOut("slow", function() {
+
-
          el.css({
+
-
            "-webkit-transform": "translate3d(" + pos + "%, 0, 0)",
+
-
            "-moz-transform": "translate3d(" + pos + "%, 0, 0)",
+
-
            "-ms-transform": "translate3d(" + pos + "%, 0, 0)",
+
-
            "transform": "translate3d(" + pos + "%, 0, 0)"
+
-
          }).fadeIn("slow");
+
-
        });
+
-
       
+
-
      break;
+
-
    }
+
-
  }
+
-
 
+
-
  $.fn.positionSlides = function(settings, index) {
+
-
    var el = $(this);
+
-
    if (settings.animation == "slideUp" || settings.animation == "bounceUp") {
+
-
      el.css({
+
-
        top: (index * 100) + "%"
+
-
      });
+
-
    }else {
+
-
      el.css({
+
-
        left: (index * 100) + "%"
+
-
      });
+
-
    }
+
-
  }
+
-
 
+
-
 
+
-
 
+
-
  $.fn.immersive_slider = function(options){
+
-
    var settings = $.extend({}, defaults, options),
+
-
        el = $(this),
+
-
        cssblur = "",
+
-
        pagination = "";
+
-
       
+
-
    // Add all the gs sepecific classes 
+
-
    el.addClass("immersive_slider")
+
-
    el.find(settings.slideSelector).addClass("is-slide");
+
-
   
+
-
    // Use CSS to blur the first image the plugin found automatically
+
-
    if (settings.cssBlur == true) {
+
-
      el.find(".is-slide img:first-child").each(function( index ) {
+
-
        var activeclass = ""
+
-
        if(index == 0) activeclass = "active"
+
-
        var img = $(this);
+
-
       
+
-
        $(settings.container).addClass("is-container").prepend("<div id='slide_" + (index + 1) + "_bg' class='is-background gs_cssblur " + activeclass + "'>" + img.clone().wrap("<div />").parent().html() + "</div>")
+
-
        $("#slide_" + (index + 1) + "_bg").positionSlides(settings, index)
+
-
      });
+
-
     } else {
+
-
      el.find(".is-slide").each(function( index ) {
+
-
        var activeclass = ""
+
-
        if(index == 0) activeclass = "active"
+
-
        var img = "<img src='"+ $(this).data("blurred") +"'>";
+
-
       
+
-
        $(settings.container).addClass("is-container").prepend("<div id='slide_" + (index + 1) + "_bg' class='is-background " + activeclass + "'>" + img + "</div>")
+
-
        $("#slide_" + (index + 1) + "_bg").positionSlides(settings, index)
+
-
      });
+
-
    }
+
-
   
+
-
    if(settings.autoStart != 0 || settings.autoStart != false) {
+
-
      setInterval(function() {
+
-
        el.moveNext();
+
-
      }, settings.autoStart);
+
-
    }
+
-
   
+
-
    $(settings.container).find(".is-background").wrapAll( "<div class='is-bg-overflow' />");
+
-
    el.find(".is-slide").wrapAll( "<div class='is-overflow' />");
+
-
    el.find(".is-slide").each(function( index ) {
+
-
      var activeclass = ""
+
-
      if(index == 0) activeclass = "active"
+
-
      $(this).attr("id","slide_" + (index + 1)).addClass(activeclass)
+
-
      $(this).positionSlides(settings, index)
+
-
      if(settings.pagination == true) {
+
-
        pagination += "<li><a class='is-page " + activeclass + "' href='#slide_" + (index + 1) + "'></a></li>"
+
-
      }
+
-
    });
+
-
   
+
-
    $("<ul class='is-pagination'>"+pagination+"</ul>").appendTo(el)
+
-
   
+
-
    if(settings.pagination == true)  {
+
-
      $(".is-pagination li a").click(function (){
+
-
        var page_index = $(this).attr("href");
+
-
       
+
-
        if (!$(this).hasClass("active")) {
+
-
          el.moveSlider(settings, page_index)
+
-
        }
+
-
        return false
+
-
      });
+
-
    }
+
-
  $(".is-next").click(function() {
+
-
    el.moveNext();
+
-
    return false;
+
-
  });
+
-
  $(".is-prev").click(function() {
+
-
    el.movePrev();
+
-
    return false;
+
-
  });
+
-
   
+
-
    $.fn.moveSlider = function(settings, page_index) {
+
-
      var el = $(this),
+
-
          current = el.find(".is-slide.active"),
+
-
          next = el.find(".is-slide" + page_index),
+
-
          bg_current = $(settings.container).find(".is-background.active"),
+
-
          bg_next = $(settings.container).find(".is-background" + page_index + "_bg");
+
-
      if(next) {
+
-
        current.removeClass("active")
+
-
        next.addClass("active")
+
-
       
+
-
        bg_current.removeClass("active")
+
-
        bg_next.addClass("active")
+
-
        $(".is-pagination li a" + ".active").removeClass("active");
+
-
        $(".is-pagination li a" + "[href='" + (page_index) + "']").addClass("active");
+
-
      }
+
-
      pos = ((page_index.replace('#slide_','') - 1) * 100) * -1;
+
-
      el.find(".is-overflow").transformSlider(settings, pos);
+
-
      $(settings.container).find(".is-bg-overflow").transformSlider(settings, pos);
+
-
    }
+
-
   
+
-
    $.fn.moveNext = function() {
+
-
      var el = $(this),
+
-
        total = el.find(settings.slideSelector).length + 1,
+
-
        page_index_number = parseInt($(this).find(".is-slide.active").attr("id").replace('slide_','')) + 1;
+
-
      if(page_index_number < total) {
+
-
        el.moveSlider(settings, "#slide_" + page_index_number)
+
-
      } else {
+
-
        if (settings.loop == true ) el.moveSlider(settings, "#slide_1")
+
-
      }
+
-
    }
+
-
   
+
-
    $.fn.movePrev = function() {
+
-
      var el = $(this),
+
-
        total = el.find(settings.slideSelector).length + 1,
+
-
        page_index_number = parseInt($(this).find(".is-slide.active").attr("id").replace('slide_','')) - 1;
+
-
      if(page_index_number <= total && page_index_number > 0) {
+
-
        el.moveSlider(settings, "#slide_" + page_index_number)
+
-
      }else {
+
-
        if (settings.loop == true ) el.moveSlider(settings, "#slide_" + (total - 1 ))
+
-
      }
+
-
    }
+
-
   
+
-
    el.swipeEvents().bind("swipeRight",  function(){
+
-
      el.movePrev();
+
-
    }).bind("swipeLeft", function(){
+
-
      el.moveNext();
+
-
    });
+
-
   
+
-
  }
+
-
 
+
-
}(window.jQuery);
+
 +
<!--Follow us link===============-->
 +
<div class="links">
 +
<p class="followus">Follow Us</p>
 +
<div class="link_bg">
 +
            <table border="0" cellspacing="2">
 +
              <tr>
 +
                <td>
 +
                <a href="https://www.facebook.com/igemiitdelhi" target="_blank"><img src="https://static.igem.org/mediawiki/2014/5/51/Fb.png" alt="facebook"  title="Facebook"  onmouseover="this.src='https://static.igem.org/mediawiki/2014/6/6c/Fbhover.png';"
 +
            onmouseout="this.src='https://static.igem.org/mediawiki/2014/5/51/Fb.png';" /> </a>              </td>
 +
             
 +
                <td >
 +
                <a href="https://twitter.com/iGEM_IIT_Delhi" target="_blank" >
 +
                <img src="https://static.igem.org/mediawiki/2014/f/f7/Twitter.png" alt="twitter" title="Twitter" onmouseover="this.src='https://static.igem.org/mediawiki/2014/5/56/Twitterhover.png';"
 +
            onmouseout="this.src='https://static.igem.org/mediawiki/2014/f/f7/Twitter.png';"/></a>                </td>
 +
             
 +
                <td>
 +
                <a href="https://www.youtube.com/channel/UCBHF9Lel4MF2dien-p3o10A" target="_blank" >
 +
                <img src="https://static.igem.org/mediawiki/2014/a/af/Youtube.png" alt="you tube" title="Youtube" onmouseover="this.src='https://static.igem.org/mediawiki/2014/9/91/Youtubehover.png';"
 +
            onmouseout="this.src='https://static.igem.org/mediawiki/2014/a/af/Youtube.png';"/></a>                </td>
 +
              </tr>
 +
             
 +
            </table>
 +
        </div>
-
</script>
 
-
<!--================Script for slider ends=====================================================02-->
+
</div>
 +
</div>
-
<!--internal script for slider starts============04-->
 
-
<script type="text/javascript">
 
-
  $(document).ready( function() {
 
-
$("#immersive_slider").immersive_slider({
 
-
  container: ".main"
 
-
});
 
-
  });
 
-
</script>
 
-
 
 
-
  <script>
 
-
var _gaq=[['_setAccount','UA-11278966-1'],['_trackPageview']]; // Change UA-XXXXX-X to be your site's ID
+
<!--=========Incredible India=========-->
-
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
+
<div class="incredibleIndia"></div>
-
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
+
<div class="incredibleIndiaheader"><img class="mainheader" src="https://static.igem.org/mediawiki/2014/a/a7/Headerincredibleindia2.png"/><img class="centerlogo" src="https://static.igem.org/mediawiki/2014/2/22/Igem_iitdelhi_logo128PX.gif"/></div>
-
s.parentNode.insertBefore(g,s)}(document,'script'));
+
<div class="fadedbackground"><img src="https://static.igem.org/mediawiki/2014/6/6e/Scribblebg_iitd.png"/></div>
-
  </script>
+
<div class="redpatternedbg"><img src="https://static.igem.org/mediawiki/2014/1/11/Redpattern_iitd.png"/></div>
-
<!--internal script for slider ends============04-->
+
-
</p>
+
-
<!--++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-->
+
-
<div style="background-color:#03a3cb; width:978px; height:900px; position:absolute; top:0px; left:-1px; border:1px solid #000000">
+
-
          <h1>Site under construction</h1>
+
-
        <div id="googleMap" style="width:235px;height:235px; position:absolute; top:660px; left:372px"></div>
+
-
<!--======================Code for slider=====================================================03-->
+
<div class="textbg_iitd"><img src="https://static.igem.org/mediawiki/2014/c/ce/Textbg_iitd.png"/>
 +
<div class="aboutus"><h4>Our Aim:</h4><p>We aim to genetically engineer  bacteria and design a prototype of a device that converts harmful components of exhaust gases (i.e NOx and SOx) coming out of  chimneys of various industries and car exhausts into harmless byproducts. NOx and SOx are well known pollutants responsible for various respiratory disorders in humans such as asthma, bronchitis etc. They help in formation of Ozone in the lower troposphere where it acts as an irritant of the skin, eyes and lungs. On the other hand, oxides of Sulfur are the main culprits behind acid rain which corrodes buildings, destroys crops and acidifies water bodies, killing aquatic life.<br><br>
-
<div class="main" style="position:absolute; top:200px; left:0px">
+
We aim to genetically engineer E.coli and equip it with the genes to synthesize nitrite reductase enzyme NrfA and CysI (sulfite reductase) and Sqr (Sulfide Quinone reductase) enzymes. NrfA reduces NOx to ammonia (NH3) while Cys1 and Sqr reduce sulphur dioxide (SO2) to hydrogen sulfide (H2S) and H2S to sulfur(S) respectively. These would 
-
  <div id="immersive_slider" class="immersive_slider">
+
be immobilized on polymer beads that have a positive zeta potential and placed in a bioreactor. The bacteria will reduce the oxides present in the incoming gas stream and consequently the percentage of oxides of nitrogen and sulfur in the outgoing gas stream will be significantly lower.<br><br>
 +
 
 +
Our proposed design promises easy and effective scalability. Depending on the site of installation (i.e.industrial chimney or in the exhaust of a vehicle), the volume of our  inputs can be altered to obtain the desired output. Moreover, the fact that all the sub-components of our model work independently of each other means that they can be easily detached and replaced, making the system very handy. Around 56% of the population in India is still involved in agricultural activities. If the production of NOx and SOx continues unabated like today, the damaging effects of acid rain on the crops will jeopardize the livelihoods of a large section of India’s population in the future. This will have serious economic and social repercussions. And if the concentration of NOx and SOx in the atmosphere keeps building up, it will adversely affect the health of the people, particularly those who cannot pay for their treatment. Also, since our model makes use of bacteria instead of metallic catalysts to reduce the gases, the potential toxicity that can arise from metal by-products of catalyst degradation can be successfully eliminated. Hence, looking at all the positive aspects of our proposed model, we believe that it will help to create a greener and a healthier future.</p></div>
-
        <!--slide1==========================================-->
 
-
<div class="slide" data-blurred="https://static.igem.org/mediawiki/2014/4/4f/Transparent555.png">
 
-
 
-
<div class="image">
 
-
<a href="http://www.bucketlistly.com" target="_blank">
 
-
<img src="https://static.igem.org/mediawiki/2014/7/72/111.png" alt="Slider 1"></a>
 
-
</div>
 
-
</div>
 
-
 
-
        <!--slide2==========================================-->
 
-
<div class="slide" data-blurred="https://static.igem.org/mediawiki/2014/4/4f/Transparent555.png">
 
-
 
-
<div class="image">
 
-
<a href="http://www.bucketlistly.com/apps" target="_blank">
 
-
                        <img src="https://static.igem.org/mediawiki/2014/b/b3/222.png" alt="Slider 1"></a>
 
-
</div>
 
-
</div>
 
-
 
-
        <!--slide3==========================================-->
 
-
<div class="slide" data-blurred="https://static.igem.org/mediawiki/2014/4/4f/Transparent555.png">
 
-
 
-
<div class="image">
 
-
<a href="http://www.thepetedesign.com" target="_blank">
 
-
                        <img src="https://static.igem.org/mediawiki/2014/5/53/333.png" alt="Slider 1"></a>
 
-
</div>
 
-
</div>
 
-
 
 
-
        <!--slide4==========================================-->
 
-
<div class="slide" data-blurred="https://static.igem.org/mediawiki/2014/4/4f/Transparent555.png">
 
-
 
-
<div class="image">
 
-
        <a href="http://www.thepetedesign.com" target="_blank">
 
-
                        <img src="https://static.igem.org/mediawiki/2014/8/8f/444.png" alt="Slider 1"></a>
 
-
</div>
 
-
</div>
 
-
 
 
-
<!--slide5==========================================-->
 
-
<div class="slide" data-blurred="https://static.igem.org/mediawiki/2014/4/4f/Transparent555.png">
 
-
 
-
<div class="image">
 
-
<a href="http://www.thepetedesign.com" target="_blank">
 
-
                        <img src="https://static.igem.org/mediawiki/2014/c/c8/555.png" alt="Slider 1"></a>
 
-
</div>
 
-
</div>
 
-
<!--==========================================-->
 
-
 
 
-
<a href="#" class="is-prev">&laquo;</a>
 
-
<a href="#" class="is-next">&raquo;</a>
 
-
  </div>
 
-
 
</div>
</div>
-
+
 
-
<div class="benefits">
+
<div class="flagview">
-
  <div class="page_container"></div>
+
    <a href="http://info.flagcounter.com/AJ8u"><img src="http://s11.flagcounter.com/count/AJ8u/bg_373737/txt_FFFFFF/border_373737/columns_3/maxflags_10/viewers_0/labels_1/pageviews_1/flags_1/" alt="Free counters!" border="0">
 +
    </a>
</div>
</div>
-
 
-
 
 
 +
<div class="videobackground">
 +
<div class="animatedlogo"><img src="https://static.igem.org/mediawiki/2014/1/18/Igem_iitdelhi_logo_300px.gif"/></div>
 +
  <img src="https://static.igem.org/mediawiki/2014/a/af/Videobg_iitd.png"/>
 +
  <div class="youtubevideobg">
 +
    <div class="igemvideo">
 +
        <video poster="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" controls="" style="width:563px; height:302px;">
 +
              <source  style="width:563px; height:302px;" src="https://static.igem.org/mediawiki/2014/3/30/Take_a_Stand_IGEM_IIT_DELHI_2014.mp4" type="video/mp4">
 +
<a href="https://www.youtube.com/watch?v=RSS953TgzWk"><img border="0" src="https://static.igem.org/mediawiki/2014/3/31/Videotopimage3.jpg" alt="Click to view on Youtube" width="563" height="302"></a>
 +
        </video>
 +
    </div>
 +
  </div>
 +
<div class="fblike_share"><iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Figemiitdelhi&amp;width=300&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;share=true&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:21px;" allowTransparency="true"></iframe></div>
-
<!--======================Code for slider ends=================================================03-->
+
<div class="twitter_follow"><a href="https://twitter.com/iGEM_IIT_Delhi" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @iGEM_IIT_Delhi</a>
-
       
+
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script></div>
 +
</div>
 +
 +
 +
 +
 +
<div class="sponsorsbg">
 +
<div class="sponsortext"><p>OUR ESTEEMED SPONSORS</p></div>
 +
<div class="sponsors_iitd">
 +
<div class="sponsors_iitd2">
 +
<div class="pic1">
 +
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/6/63/Mahindra_logo.png" alt="Abhishek">
 +
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Mahindra_text.png" alt="Abhishek">
</div>
</div>
-
<body>
 
 +
<div class="pic2">
 +
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/6/67/Idt_logo.png" alt="Abhishek">
 +
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/4/49/Idt_text.png" alt="Abhishek">
 +
</div>
 +
<div class="pic3">
 +
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/4/4f/Fitt_logo.png" alt="Abhishek">
 +
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/5/54/Fitt_text.png" alt="Abhishek">
 +
</div>
 +
 +
<div class="pic4">
 +
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/7/71/Dbt_logo.png" alt="Abhishek">
 +
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/7/7c/Dbt_text.png" alt="Abhishek">
 +
</div>
 +
 +
<div class="pic5">
 +
<img class="smallpic" src="https://static.igem.org/mediawiki/2014/7/77/Posterguy.png" alt="Abhishek">
 +
<img class="picdescription" src="https://static.igem.org/mediawiki/2014/b/b9/Posterguy_text.png" alt="Abhishek">
 +
</div>
 +
 +
 +
</div>
 +
</div>
 +
 +
</div><!--sponsor ends-->
 +
 +
 +
<div class="footerbg">
 +
 +
<div class="nav2">
 +
<table class="nav2table">
 +
  <tr>
 +
    <td><a href="https://2014.igem.org/Team:IIT_Delhi">HOME</a></td><td>|</td>
 +
    <td><a href="https://2014.igem.org/Team:IIT_Delhi/Project">PROJECT</a></td><td>|</td>
 +
    <td><a href="https://2014.igem.org/Team:IIT_Delhi/Modeling">MODELING</a></td><td>|</td>
 +
    <td><a href="https://2014.igem.org/Team:IIT_Delhi/Team">TEAM</a></td><td>|</td>
 +
    <td><a href="https://2014.igem.org/Team:IIT_Delhi/Notebook">NOTEBOOK</a></td><td>|</td>
 +
    <td><a href="https://2014.igem.org/Team:IIT_Delhi/Attributions">ATTRIBUTIONS</a></td><td>|</td>
 +
    <td><a href="https://2014.igem.org/Team:IIT_Delhi/Safety">SAFETY</a></td><td>|</td>
 +
    <td><a href="https://2014.igem.org/Team:IIT_Delhi/Parts">PARTS</a></td><td>|</td>
 +
    <td><a href="https://2014.igem.org/Team:IIT_Delhi/Achievements">ACHIEVEMENTS</a></td>
 +
  </tr>
 +
</table>
 +
</div>
 +
<div class="copyright"><p>Copyright &copy; iGEM-IIT Delhi 2014 | Developer: ABHISHEK BHARTI & SHASHANK YADAV </p>
 +
<center>"We won a Bronze Medal at the iGEM Giant Jamboree 2014"</center></div>
 +
 +
</div>
 +
 +
<div class="gifouterdiv">
 +
  <div class="gifbg"><img src="https://static.igem.org/mediawiki/2014/6/63/Story_of_ECO_COLI.gif"/></div>
 +
  <div class="mascotinnerlayer"><img class="mascot_iitd" src="https://static.igem.org/mediawiki/2014/8/8b/Mascot_iitdelhi.gif"/></div>
 +
</div>
 +
 +
 +
 +
 +
 +
</body>
</html>
</html>

Latest revision as of 14:20, 23 July 2015


iGEM IIT Delhi 2014

Follow Us

facebook twitter you tube

Our Aim:

We aim to genetically engineer bacteria and design a prototype of a device that converts harmful components of exhaust gases (i.e NOx and SOx) coming out of chimneys of various industries and car exhausts into harmless byproducts. NOx and SOx are well known pollutants responsible for various respiratory disorders in humans such as asthma, bronchitis etc. They help in formation of Ozone in the lower troposphere where it acts as an irritant of the skin, eyes and lungs. On the other hand, oxides of Sulfur are the main culprits behind acid rain which corrodes buildings, destroys crops and acidifies water bodies, killing aquatic life.

We aim to genetically engineer E.coli and equip it with the genes to synthesize nitrite reductase enzyme NrfA and CysI (sulfite reductase) and Sqr (Sulfide Quinone reductase) enzymes. NrfA reduces NOx to ammonia (NH3) while Cys1 and Sqr reduce sulphur dioxide (SO2) to hydrogen sulfide (H2S) and H2S to sulfur(S) respectively. These would be immobilized on polymer beads that have a positive zeta potential and placed in a bioreactor. The bacteria will reduce the oxides present in the incoming gas stream and consequently the percentage of oxides of nitrogen and sulfur in the outgoing gas stream will be significantly lower.

Our proposed design promises easy and effective scalability. Depending on the site of installation (i.e.industrial chimney or in the exhaust of a vehicle), the volume of our inputs can be altered to obtain the desired output. Moreover, the fact that all the sub-components of our model work independently of each other means that they can be easily detached and replaced, making the system very handy. Around 56% of the population in India is still involved in agricultural activities. If the production of NOx and SOx continues unabated like today, the damaging effects of acid rain on the crops will jeopardize the livelihoods of a large section of India’s population in the future. This will have serious economic and social repercussions. And if the concentration of NOx and SOx in the atmosphere keeps building up, it will adversely affect the health of the people, particularly those who cannot pay for their treatment. Also, since our model makes use of bacteria instead of metallic catalysts to reduce the gases, the potential toxicity that can arise from metal by-products of catalyst degradation can be successfully eliminated. Hence, looking at all the positive aspects of our proposed model, we believe that it will help to create a greener and a healthier future.

Free counters!

OUR ESTEEMED SPONSORS

Abhishek Abhishek
Abhishek Abhishek
Abhishek Abhishek
Abhishek Abhishek
Abhishek Abhishek
HOME| PROJECT| MODELING| TEAM| NOTEBOOK| ATTRIBUTIONS| SAFETY| PARTS| ACHIEVEMENTS

Copyright © iGEM-IIT Delhi 2014 | Developer: ABHISHEK BHARTI & SHASHANK YADAV

"We won a Bronze Medal at the iGEM Giant Jamboree 2014"

Retrieved from "http://2014.igem.org/Team:IIT_Delhi"