Difference between revisions of "Team:VIT Vellore"

 
(81 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<!DOCTYPE html>
+
{{VIT_Vellore}}
 
<html>
 
<html>
−
<head>
 
−
    <meta charset="utf-8"/>
 
−
    <title>togglepH - iGEM Competition 2018</title>
 
−
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
 
−
    <link href="https://fonts.googleapis.com/css?family=Vollkorn" rel="stylesheet"/>
 
 
<style>
 
<style>
−
 
−
@charset "utf-8";
 
−
 
−
@font-face {
 
−
    font-family: 'CustomAcuminFont';
 
−
    src: url('fonts/acumin-pro-light.otf');
 
−
}
 
−
 
−
@font-face {
 
−
    font-family: 'CustomMedioFont';
 
−
    src: url('fonts/medio.otf');
 
−
}
 
−
 
−
* {
 
−
    box-sizing: border-box;
 
−
}
 
−
 
−
*::selection {
 
−
    background-color: rgba(167, 0, 0, 0.4);
 
−
}
 
−
 
−
*::-moz-selection {
 
−
    background-color: rgba(167, 0, 0, 0.4);
 
−
}
 
−
 
 
body {
 
body {
−
     margin: 0;
+
     overflow: hidden !important;
−
    padding: 0;
+
−
    background-color: #fff;
+
 
}
 
}
 +
</style>
  
−
.row::after {
+
<div class="horizontal">
−
     content: "";
+
     <video id="fullscreen-video" autoplay muted loop>
−
     clear: both;
+
        <source src="https://static.igem.org/mediawiki/2018/d/db/T--VIT_Vellore--wavesvideo.mp4" type="video/mp4">
−
     display: table;
+
     </video>
−
}
+
     <div class="col-12" id="home-container">
 +
        <img id="igem-vit-logo" src="https://static.igem.org/mediawiki/2018/d/d3/T--VIT_Vellore--iGEEM2018FINAL.png" alt="iGEM VIT"/>
 +
        <h1>toggle<span class="em-text">pH</span></h1>
 +
        <h2>VIT Vellore</h2>
 +
        <button id="enter-site">Check us out!</button>
 +
    </div>
 +
</div>
  
−
[class*="col-"] {
+
<div id="ill-nav">
−
     width: 100%;
+
        <a class="ill-link" id="ill-1-link" href="#">&#10102;</a>
−
     border: 1px rgba(0, 0, 0, 0);
+
        <a class="ill-link" id="ill-2-link" href="#">&#10103;</a>
−
     float: left;
+
        <a class="ill-link" id="ill-3-link" href="#">&#10104;</a>
−
}
+
        <a class="ill-link" id="ill-4-link" href="#">&#10105;</a>
 +
        <a class="ill-link" id="ill-5-link" href="#">&#10106;</a>
 +
</div>
 +
     <div id="ill-1" class="horizontal ill-container">
 +
        <img class="ill-med" src="https://static.igem.org/mediawiki/2018/f/f8/T--VIT_Vellore--ill1.png" alt="Illustration 1"/>
 +
        <p class="ill-description">We use a plasmid system consisting of a composite part with two promoters</p>
 +
    </div>
 +
    <div id="ill-2" class="horizontal ill-container">
 +
        <img class="ill-med" src="https://static.igem.org/mediawiki/2018/1/13/T--VIT_Vellore--ill2.png" alt="Illustration 2"/>
 +
        <p class="ill-description">This part gets activated at ~pH 7.5 and produces the necessary proteins to increase the surrounding pH</p>
 +
    </div>
 +
    <div id="ill-3" class="horizontal ill-container">
 +
        <img class="ill-med" src="https://static.igem.org/mediawiki/2018/archive/7/77/20181207184102%21T--VIT_Vellore--ill3.png" alt="Illustration 3"/>
 +
        <p class="ill-description">Repressor molecule LexA is produced at high pH. LexA then binds to its operator region in the initial plasmid, and represses carbonic anhydrase</p>
 +
     </div>
 +
    <div id="ill-4" class="horizontal ill-container">
 +
        <img class="ill-med" src="https://static.igem.org/mediawiki/2018/archive/a/a5/20181207181318%21T--VIT_Vellore--ill4.png" alt="Illustration 4"/>
 +
        <p class="ill-description">LexA functions as a repressor in the above figure. However, as the pH starts to become acidic again, recA protease is produced</p>
 +
     </div>
 +
<div id="ill-5" class="horizontal ill-container">
 +
        <img class="ill-med" src="https://static.igem.org/mediawiki/2018/f/fa/T--VIT_Vellore--ill5.png" alt="Illustration 4"/>
 +
        <p class="ill-description">recA protease binds to LexA (repressor) and lyses it, thereby preventing its action. Carbonic anhydrase is produced again, and pH homeostasis is ensured</p>
 +
    </div>
  
−
@media only screen and (min-width: 600px) {
+
<script type="text/javascript">
−
    .col-1 {
+
−
        width: 8.33%;
+
−
    }
+
−
    .col-2 {
+
−
        width: 16.66%;
+
−
    }
+
−
    .col-3 {
+
−
        width: 25%;
+
−
    }
+
−
    .col-4 {
+
−
        width: 33.33%;
+
−
    }
+
−
    .col-5 {
+
−
        width: 41.66%;
+
−
    }
+
−
    .col-6 {
+
−
        width: 50%;
+
−
    }
+
−
    .col-7 {
+
−
        width: 58.33%;
+
−
    }
+
−
    .col-8 {
+
−
        width: 66.66%;
+
−
    }
+
−
    .col-9 {
+
−
        width: 75%;
+
−
    }
+
−
    .col-10 {
+
−
        width: 83.33%;
+
−
    }
+
−
    .col-11 {
+
−
        width: 91.66%;
+
−
    }
+
−
    .col-12 {
+
−
        width: 100%;
+
−
    }
+
  
−
     #navbar {
+
$("#enter-site").click(function() {
−
         padding: 8% 0 8% 0 !important;
+
    $("video").hide("fade", 300);
−
         border: none !important;
+
     $("#home-container").hide("fade", 200, function() {
−
     }
+
         $("#nav-openbtn").show("fade", 100);
 +
         $("#ill-1").show("fade", 600, function() {
 +
            $("#ill-nav").show("slide", {direction: 'right'}, 300);
 +
            $("#ill-1-link").css({opacity: '1'});
 +
        });
 +
     });
 +
});
  
−
     #toggleph {
+
$("#ill-5-link").click(function() {
−
        float: left;
+
     $("#ill-4-link").css({opacity: '0.75'});
−
        height: auto;
+
    $("#ill-4").hide("fade", 200);
−
         width: 15%;
+
    $("#ill-2-link").css({opacity: '0.75'});
−
     }
+
    $("#ill-2").hide("fade", 200);
 +
    $("#ill-1-link").css({opacity: '0.75'});
 +
    $("#ill-1").hide("fade", 200);
 +
    $("#ill-3-link").css({opacity: '0.75'});
 +
    $("#ill-3").hide("fade", 200, function() {
 +
         $("#ill-5").show("fade", 300);
 +
        $("#ill-5-link").css({opacity: '1'});
 +
     });
 +
});
  
−
     #igem-logo {
+
$("#ill-4-link").click(function() {
−
        float: right;
+
     $("#ill-5-link").css({opacity: '0.75'});
−
        height: auto;
+
    $("#ill-5").hide("fade", 200);
−
        width: 25%;
+
    $("#ill-2-link").css({opacity: '0.75'});
−
         display: block !important;
+
    $("#ill-2").hide("fade", 200);
−
     }
+
    $("#ill-1-link").css({opacity: '0.75'});
−
}
+
    $("#ill-1").hide("fade", 200);
 +
    $("#ill-3-link").css({opacity: '0.75'});
 +
    $("#ill-3").hide("fade", 200, function() {
 +
         $("#ill-4").show("fade", 300);
 +
        $("#ill-4-link").css({opacity: '1'});
 +
     });
 +
});
  
−
@keyframes intro-fadein {
+
$("#ill-3-link").click(function() {
−
     from {opacity: 0}
+
     $("#ill-5-link").css({opacity: '0.75'});
−
     to {opacity: 1}
+
     $("#ill-5").hide("fade", 200);
−
}
+
    $("#ill-2-link").css({opacity: '0.75'});
 +
    $("#ill-2").hide("fade", 200);
 +
    $("#ill-1-link").css({opacity: '0.75'});
 +
    $("#ill-1").hide("fade", 200);
 +
    $("#ill-4-link").css({opacity: '0.75'});
 +
    $("#ill-4").hide("fade", 200, function() {
 +
        $("#ill-3").show("fade", 300);
 +
        $("#ill-3-link").css({opacity: '1'});
 +
    });
 +
});
  
−
@-webkit-keyframes intro-fadein {
 
−
    from {opacity: 0}
 
−
    to {opacity: 1}
 
−
}
 
  
−
/*#intro-section {
+
$("#ill-2-link").click(function() {
−
     width: 50%;
+
     $("#ill-5-link").css({opacity: '0.75'});
−
     display: none;
+
     $("#ill-5").hide("fade", 200);
−
     margin: 15% auto;
+
     $("#ill-1-link").css({opacity: '0.75'});
−
     animation: intro-fadein ease-in 0.8s;
+
     $("#ill-1").hide("fade", 200);
−
}
+
    $("#ill-3-link").css({opacity: '0.75'});
 +
    $("#ill-3").hide("fade", 200);
 +
    $("#ill-4-link").css({opacity: '0.75'});
 +
    $("#ill-4").hide("fade", 200, function() {
 +
        $("#ill-2").show("fade", 300);
 +
        $("#ill-2-link").css({opacity: '1'});
 +
    });
 +
});
  
−
#intro-logo {
+
$("#ill-1-link").click(function() {
−
     width: 60%;
+
     $("#ill-5-link").css({opacity: '0.75'});
−
     height: auto;
+
     $("#ill-5").hide("fade", 200);
−
     display: block;
+
    $("#ill-2-link").css({opacity: '0.75'});
−
     margin: auto;
+
     $("#ill-2").hide("fade", 200);
−
}
+
    $("#ill-3-link").css({opacity: '0.75'});
 +
     $("#ill-3").hide("fade", 200);
 +
    $("#ill-4-link").css({opacity: '0.75'});
 +
    $("#ill-4").hide("fade", 200, function() {
 +
        $("#ill-1").show("fade", 300);
 +
        $("#ill-1-link").css({opacity: '1'});
 +
    });
 +
});
  
−
#intro-section button {
+
</script>
−
    font-family: 'CustomAcuminFont', sans-serif;
+
−
    font-size: 1.5em;
+
−
    transition: background-color 0.3s, color 0.3s ease-in-out;
+
−
    -webkit-transition: background-color 0.3s, color 0.3s ease-in-out;
+
−
    background-color: #fff;
+
−
    color: #000;
+
−
    border: 1px solid #000;
+
−
}
+
  
−
#intro-section button:hover {
 
−
    cursor: pointer;
 
−
    color: #fff;
 
−
    background-color: #000;
 
−
}
 
−
 
−
#enter-icon {
 
−
    padding: 2% 8% 1% 8%;
 
−
    font-weight: 400;
 
−
    display: block;
 
−
    margin: 5% auto;
 
−
}
 
−
 
−
#nav-icon {
 
−
    padding: 0.4% 1%;
 
−
    font-weight: 600;
 
−
    margin: 0;
 
−
    position: absolute;
 
−
    top: 5%;
 
−
    right: 2%;
 
−
}*/
 
−
 
−
header {
 
−
    width: 100%;
 
−
    height: 18%;
 
−
    padding: 0;
 
−
    display: block;
 
−
    margin: auto;
 
−
    box-shadow: 1px 2px 5px #666666;
 
−
    position: fixed;
 
−
    top: 0;
 
−
    left: 0;
 
−
    background-color: rgba(255, 255, 255, 0.95);
 
−
}
 
−
 
−
#toggleph {
 
−
    height: 100%;
 
−
    margin: auto;
 
−
    display: block;
 
−
}
 
−
 
−
#igem-logo {
 
−
    display: none;
 
−
}
 
−
 
−
#navbar {
 
−
    padding: 30% 0 0 0;
 
−
    border-bottom: 1px dotted #000;
 
−
}
 
−
 
−
#navbar h2 {
 
−
    font-family: 'CustomAcuminFont', sans-serif;
 
−
    font-weight: 500;
 
−
    font-size: 2em;
 
−
    padding: 10%;
 
−
}
 
−
 
−
#navbar a {
 
−
    text-decoration: none;
 
−
    display: block;
 
−
    width: 100%;
 
−
    padding: 4% 0 4% 15%;
 
−
    font-family: 'CustomAcuminFont', sans-serif;
 
−
    font-weight: 500;
 
−
    font-size: 1.1em;
 
−
    background-color: #fff;
 
−
    color: #000;
 
−
    transition: background-color 0.3s, color 0.3s ease-in-out;
 
−
    -webkit-transition: background-color 0.3s, color 0.3s ease-in-out;
 
−
    text-align: left;
 
−
    margin: 0;
 
−
}
 
−
 
−
#navbar a:hover {
 
−
    background-color: #000;
 
−
    color: #fff;
 
−
}
 
−
 
−
#home-section {
 
−
    margin: 0;
 
−
    padding: 10% 2% 0 2%;
 
−
}
 
−
 
−
h1 {
 
−
    font-family: 'Vollkorn', serif;
 
−
    font-size: 3.5em;
 
−
    font-weight: 400;
 
−
    padding: 0;
 
−
    margin: 2%;
 
−
}
 
−
 
−
.normal-text {
 
−
    font-family: 'CustomAcuminFont', sans-serif;
 
−
    font-weight: 500;
 
−
    font-size: 1.2em;
 
−
    text-align: justify;
 
−
    margin: 2%;
 
−
    padding: 0;
 
−
}
 
−
 
−
.em-text {
 
−
    font-family: inherit;
 
−
    font-size: inherit;
 
−
    font-weight: bold;
 
−
}
 
−
 
−
.italic-text {
 
−
    font-style: italic;
 
−
    font-size: 0.9em;
 
−
    padding: 0 1%;
 
−
}
 
−
 
−
</style>
 
−
</head>
 
−
<body>
 
−
    <header>
 
−
        <img id="toggleph" src="images/togglephminimalclear.png" alt="togglepH"/>
 
−
        <img id="igem-logo" src="images/iGEEM2018FINAL.png" alt="iGEM"/>
 
−
    </header>
 
−
    <div class="row">
 
−
        <div class="col-3" id="navbar">
 
−
            <h2>Navigation</h2>
 
−
            <a title="Home page" href="index.html">Home</a>
 
−
            <a title="Project" href="project.html">Project</a>
 
−
            <a title="Team" href="team.html">Team</a>
 
−
            <a title="Notebook" href="notebook.html">Notebook</a>
 
−
            <a title="Parts" href="parts.html">Parts</a>
 
−
            <a title="Safety" href="safety.html">Safety</a>
 
−
            <a title="Human Practices" href="human-practices.html">Human Practices</a>
 
−
            <a title="Attributions" href="attributions.html">Attributions</a>
 
−
        </div>
 
−
        <div id="home-section" class="col-9">
 
−
            <h1>About our project</h1>
 
−
            <p class="normal-text">An increase in industrialization has led to an overall increase in the carbon footprint, the major component being CO<sub>2</sub> which in turn led to global warming. Among other ill effects of industrialization, the one that has garnered a lot of attention is what we call <span class="em-text">Ocean Acidification</span>. It is also known as "the other CO<sub>2</sub> problem" and that's where our engineered microbe jumps in.<br/><br/>Geology reports suggest that between the years 1751 to 1996 there has been an increase of H<sup>+</sup> ions of upto 30%. Apart from that, the overall pH has been decreased from 8.25 to 8.14. Increasing acidity is directly linked to having potentially harmful consequences for marine organisms, such as depressing metabolic rates and immune responses in some organisms, and causing the worst cases of coral bleaching.<br/><br/>"If we continue emitting CO<sub>2</sub> at the same rate, by 2100 ocean acidity will increase by about 150 percent, a rate that has not been experienced for at least 400,000 years."<span class="italic-text">- United Kingdom Ocean Acidification Research Programme, 2015</span><br/><br/>Our engineered vibrio will interact with its surrounding environment to give real-time H<sup>+</sup> data which is then used by pH-sensitive NhaA and CadA promoters which give maximum expression at pH 8.5 and pH 7 respectfully; after which the expression is down-regulated. Within this 1.5 pH window, our biobricks are designed such that the carbonic anhydrase genes bring about a reduction in ocean acidification. Once the pH is stabilized, repressor proteins are expressed which block the carbonic anhydrase expression so that no more shuttling of H<sup>+</sup> takes place thereby saving marine flora and fauna from any more damage.</p>
 
−
        </div>
 
−
    </div>
 
−
</body>
 
 
</html>
 
</html>

Latest revision as of 04:26, 8 December 2018

togglepH

VIT Vellore

Illustration 1

We use a plasmid system consisting of a composite part with two promoters

Illustration 2

This part gets activated at ~pH 7.5 and produces the necessary proteins to increase the surrounding pH

Illustration 3

Repressor molecule LexA is produced at high pH. LexA then binds to its operator region in the initial plasmid, and represses carbonic anhydrase

Illustration 4

LexA functions as a repressor in the above figure. However, as the pH starts to become acidic again, recA protease is produced

Illustration 4

recA protease binds to LexA (repressor) and lyses it, thereby preventing its action. Carbonic anhydrase is produced again, and pH homeostasis is ensured