Difference between revisions of "Team:IISc-Bangalore"

Latest revision as of 03:41, 2 November 2017

Sponsors

Contact

Gas vesicles (GVs) are hollow protein nanostructures synthesized by phototrophic haloarchaea and cyanobacteria to regulate their flotation in aquatic habitats.

Bioengineered GVs have been genetically modified for diverse purposes; ultrasonic molecular imaging, gauging cellular turgor pressures, and vaccine delivery - but none of their current applications exploit their most fundamental characteristic: buoyancy.

Our modelling shows that clusters of GVs float enormously better than individual GVs.

iFLOAT aims to improve the flotation of gas vesicles by clustering them using three distinct methods: charge-based flocculation, biotin-streptavidin interaction, and SpyCatcher-SpyTag heterodimerization

Future applications of these clusters can include bioremediation of oil spills, flotation-based separation, and purification of specific targets from mixtures!

@@ Line 2: / Line 2: @@
 <html>
-<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
+<link rel="stylesheet" type="text/css" href="https://2017.igem.org/Template:IISc-Bangalore/CSS?action=raw&ctype=text/css" />
 <style>
-/*!
+    .textclass:hover {
- * fullPage 2.9.5
+      text-decoration: none !important;
- * https://github.com/alvarotrigo/fullPage.js
+     }
- * MIT licensed
+</style>
- *
+<div id="fullpage">
- * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
- */
-html.fp-enabled,
-.fp-enabled body {
-    margin: 0;
-     padding: 0;
-    overflow:hidden;
-    /*Avoid flicker on slides transitions for mobile phones #336 */
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-}
-.fp-section {
-    position: relative;
-    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
-    -moz-box-sizing: border-box; /* <=28 */
-    box-sizing: border-box;
-}
-.fp-slide {
-    float: left;
-}
-.fp-slide, .fp-slidesContainer {
-    height: 100%;
-    display: block;
-}
-.fp-slides {
-    z-index:1;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
-    transition: all 0.3s ease-out;
-}
-.fp-section.fp-table, .fp-slide.fp-table {
-    display: table;
-    table-layout:fixed;
-    width: 100%;
-}
-.fp-tableCell {
-    display: table-cell;
-    vertical-align: middle;
-    width: 100%;
-    height: 100%;
-}
-.fp-slidesContainer {
-    float: left;
-    position: relative;
-}
-.fp-controlArrow {
-    -webkit-user-select: none; /* webkit (safari, chrome) browsers */
-    -moz-user-select: none; /* mozilla browsers */
-    -khtml-user-select: none; /* webkit (konqueror) browsers */
-    -ms-user-select: none; /* IE10+ */
-    position: absolute;
-    z-index: 4;
-    top: 50%;
-    cursor: pointer;
-    width: 0;
-    height: 0;
-    border-style: solid;
-    margin-top: -38px;
-    -webkit-transform: translate3d(0,0,0);
-    -ms-transform: translate3d(0,0,0);
-    transform: translate3d(0,0,0);
-}
-.fp-controlArrow.fp-prev {
-    left: 15px;
-    width: 0;
-    border-width: 38.5px 34px 38.5px 0;
-    border-color: transparent #fff transparent transparent;
-}
-.fp-controlArrow.fp-next {
-    right: 15px;
-    border-width: 38.5px 0 38.5px 34px;
-    border-color: transparent transparent transparent #fff;
-}
-.fp-scrollable {
-    overflow: hidden;
-    position: relative;
-}
-.fp-scroller{
-    overflow: hidden;
-}
-.iScrollIndicator{
-    border: 0 !important;
-}
-.fp-notransition {
-    -webkit-transition: none !important;
-    transition: none !important;
-}
-#fp-nav {
-    position: fixed;
-    z-index: 100;
-    margin-top: -32px;
-    top: 50%;
-    opacity: 1;
-    -webkit-transform: translate3d(0,0,0);
-}
-#fp-nav.right {
-    right: 17px;
-}
-#fp-nav.left {
-    left: 17px;
-}
-.fp-slidesNav{
-    position: absolute;
-    z-index: 4;
-    opacity: 1;
-    -webkit-transform: translate3d(0,0,0);
-    -ms-transform: translate3d(0,0,0);
-    transform: translate3d(0,0,0);
-    left: 0 !important;
-    right: 0;
-    margin: 0 auto !important;
-}
-.fp-slidesNav.bottom {
-    bottom: 17px;
-}
-.fp-slidesNav.top {
-    top: 17px;
-}
-#fp-nav ul,
-.fp-slidesNav ul {
-  margin: 0;
-  padding: 0;
-}
-#fp-nav ul li,
-.fp-slidesNav ul li {
-    display: block;
-    width: 14px;
-    height: 13px;
-    margin: 7px;
-    position:relative;
-}
-.fp-slidesNav ul li {
-    display: inline-block;
-}
-#fp-nav ul li a,
-.fp-slidesNav ul li a {
-    display: block;
-    position: relative;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-    text-decoration: none;
-}
-#fp-nav ul li a.active span,
-.fp-slidesNav ul li a.active span,
-#fp-nav ul li:hover a.active span,
-.fp-slidesNav ul li:hover a.active span{
-    height: 12px;
-    width: 12px;
-    margin: -6px 0 0 -6px;
-    border-radius: 100%;
- }
-#fp-nav ul li a span,
-.fp-slidesNav ul li a span {
-    border-radius: 50%;
-    position: absolute;
-    z-index: 1;
-    height: 4px;
-    width: 4px;
-    border: 0;
-    background: #333;
-    left: 50%;
-    top: 50%;
-    margin: -2px 0 0 -2px;
-    -webkit-transition: all 0.1s ease-in-out;
-    -moz-transition: all 0.1s ease-in-out;
-    -o-transition: all 0.1s ease-in-out;
-    transition: all 0.1s ease-in-out;
-}
-#fp-nav ul li:hover a span,
-.fp-slidesNav ul li:hover a span{
-    width: 10px;
-    height: 10px;
-    margin: -5px 0px 0px -5px;
-}
-#fp-nav ul li .fp-tooltip {
-    position: absolute;
-    top: -2px;
-    color: #fff;
-    font-size: 14px;
-    font-family: arial, helvetica, sans-serif;
-    white-space: nowrap;
-    max-width: 220px;
-    overflow: hidden;
-    display: block;
-    opacity: 0;
-    width: 0;
-    cursor: pointer;
-}
-#fp-nav ul li:hover .fp-tooltip,
-#fp-nav.fp-show-active a.active + .fp-tooltip {
-    -webkit-transition: opacity 0.2s ease-in;
-    transition: opacity 0.2s ease-in;
-    width: auto;
-    opacity: 1;
-}
-#fp-nav ul li .fp-tooltip.right {
-    right: 20px;
-}
-#fp-nav ul li .fp-tooltip.left {
-    left: 20px;
-}
-.fp-auto-height.fp-section,
-.fp-auto-height .fp-slide,
-.fp-auto-height .fp-tableCell{
-    height: auto !important;
-}
-.fp-responsive .fp-auto-height-responsive.fp-section,
+	<div class="section" style="background-image: url('https://static.igem.org/mediawiki/2017/8/84/T--IISc-Bangalore--gif-bg.png'); background-size: cover; background-repeat:no-repeat;">
-.fp-responsive .fp-auto-height-responsive .fp-slide,
+          <div class="gifAnimated" style="background-image: url('https://static.igem.org/mediawiki/2017/4/43/T--IISc-Bangalore--iFLOAT-final.gif');"></div>
-.fp-responsive .fp-auto-height-responsive .fp-tableCell {
+        </div>
-    height: auto !important;
-}
-</style>
-<div id="fullpage">
-	<div class="section">Some section</div>
+	<div class="section">
-	<div class="section">Some section</div>
-	<div class="section">Some section</div>
+          <div class="gifAnimated" style="background-image: url('https://static.igem.org/mediawiki/2017/2/21/T--IISc-Bangalore--home-1.gif'); background-position: left;"></div>
-	<div class="section">Some section</div>
-	<div class="section">Some section</div>
+          <div style="position: absolute; right: 5%; width: 35%; font-size: 2.3em; line-height: 1.4; font-family: 'Poppins'; top: 50%; transform: translateY(-50%);">Gas vesicles (GVs) are hollow protein nanostructures synthesized by phototrophic haloarchaea and cyanobacteria to regulate their flotation in aquatic habitats. </div>
-	<div class="section">Some section</div>
+        </div>
+	<div class="section">
+          <div class="gifAnimated" style="background-image: url('https://static.igem.org/mediawiki/2017/6/63/T--IISc-Bangalore--home-2.gif'); background-position: right;"></div>
+          <div style="position: absolute; left: 3%; width: 33%; font-size: 2.3em; line-height: 1.4; font-family: 'Poppins', sans-serif; top: 55%; transform: translateY(-50%);">Bioengineered GVs have been genetically modified for diverse purposes; ultrasonic molecular imaging, gauging cellular turgor pressures, and vaccine delivery - but none of their current applications exploit their most fundamental characteristic: buoyancy.</div>
+        </div>
+	<div class="section">
+          <div class="gifAnimated" style="background-image: url('https://static.igem.org/mediawiki/2017/4/45/T--IISc-Bangalore--home-3.gif'); background-position: left;"></div>
+          <div style="position: absolute; right: 5%; width: 20%; font-size: 2.3em; line-height: 1.4; font-family: 'Poppins'; top: 55%; transform: translateY(-50%);">Our modelling shows that clusters of GVs float enormously better than individual GVs.</div>
+        </div>
+        <div class="section">
+          <div class="gifAnimated" style="background-image: url('https://static.igem.org/mediawiki/2017/7/71/T--IISc-Bangalore--home-4.gif'); background-position: right;"></div>
+          <div style="position: absolute; left: 3%; width: 30%; font-size: 2.3em; line-height: 1.4; font-family: 'Poppins', sans-serif; top: 55%; transform: translateY(-50%);">iFLOAT aims to improve the flotation of gas vesicles by clustering them using three distinct methods: charge-based flocculation, biotin-streptavidin interaction, and SpyCatcher-SpyTag heterodimerization</div>
+        </div>
+	<div class="section">
+          <div class="gifAnimated" style="background-image: url('https://static.igem.org/mediawiki/2017/6/6a/T--IISc-Bangalore--home-5.gif'); background-position: left;"></div>
+          <div style="position: absolute; right: 5%; width: 25%; font-size: 2.3em; line-height: 1.4; font-family: 'Poppins'; top: 55%; transform: translateY(-50%);"> Future applications of these clusters can include bioremediation of oil spills, flotation-based separation, and purification of specific targets from mixtures!</div>
+        </div>
+	<div class="section">
+            <div style="width: 15%; margin: 0 2.4%; float: left;">
+              <a href="https://2017.igem.org/Team:IISc-Bangalore/Team"><img src='https://static.igem.org/mediawiki/2017/8/8e/T--IISc-Bangalore--icons-about.svg' width=100% />
+              <div style="font-size: 2.5em; font-family: 'Raleway-ExtraBold', sans-serif; margin-top: 20px; text-align: center; color: black;" class='textclass'>ABOUT</div></a>
+            </div>
+            <div style="width: 15%; margin: 0 2.4%; float: left;">
+              <a href="https://2017.igem.org/Team:IISc-Bangalore/Description"><img src='https://static.igem.org/mediawiki/2017/3/3b/T--IISc-Bangalore--icons-project.svg' width=100% />
+              <div style="font-size: 2.5em; font-family: 'Raleway-ExtraBold', sans-serif; margin-top: 20px; text-align: center; color: black;" class='textclass'>PROJECT</div></a>
+            </div>
+            <div style="width: 15%; margin: 0 2.4%; float: left;">
+              <a href="https://2017.igem.org/Team:IISc-Bangalore/Assembly"><img src='https://static.igem.org/mediawiki/2017/6/6f/T--IISc-Bangalore--icons-lab.svg' width=100% />
+              <div style="font-size: 2.5em; font-family: 'Raleway-ExtraBold', sans-serif; margin-top: 20px; text-align: center; color: black;" class='textclass'>LAB</div></a>
+            </div>
+            <div style="width: 15%; margin: 0 2.4%; float: left;">
+              <a href="https://2017.igem.org/Team:IISc-Bangalore/Hardware"><img src='https://static.igem.org/mediawiki/2017/f/f7/T--IISc-Bangalore--icons-hardware.svg' width=100% />
+              <div style="font-size: 2.5em; font-family: 'Raleway-ExtraBold', sans-serif; margin-top: 20px; text-align: center; color: black;" class='textclass'>HARDWARE</div></a>
+            </div>
+            <div style="width: 15%; margin: 0 2.4%; float: left;">
+              <a href="https://2017.igem.org/Team:IISc-Bangalore/HP/Silver"><img src='https://static.igem.org/mediawiki/2017/8/8f/T--IISc-Bangalore--icons-community.svg' width=100% />
+              <div style="font-size: 2.5em; font-family: 'Raleway-ExtraBold', sans-serif; margin-top: 20px; text-align: center; color: black;" class='textclass'>COMMUNITY</div></a>
+            </div>
+        </div>
 </div>
 <script>
 $(document).ready(function() {
-	$('#fullpage').fullpage();
+  $('#fullpage').fullpage({
+    menu: '#menu',
+    lockAnchors: false,
+    anchors:['first', 'second', 'third', 'fourth', 'fifth', 'sixth'],
+    navigation: true,
+    navigationPosition: 'right',
+    navigationTooltips: ['first', 'second', 'third', 'fourth', 'fifth', 'sixth'],
+    showActiveTooltip: false,
+    slidesNavigation: false,
+    slidesNavPosition: 'bottom',
+  });
 });
 </script>
 <script type="text/javascript" src="https://2017.igem.org/Template:IISc-Bangalore/Javascript?action=raw&ctype=text/javascript"></script>
 </html>