Difference between revisions of "Team:VIT Vellore"

 
(31 intermediate revisions by the same user not shown)
Line 2: Line 2:
 
<html>
 
<html>
 
<style>
 
<style>
−
 
+
body {
−
/*body {
+
 
     overflow: hidden !important;
 
     overflow: hidden !important;
−
}*/
 
−
 
−
#home-container {
 
−
    width: 100% !important;
 
−
    background-image: url('https://static.igem.org/mediawiki/2018/thumb/5/56/T--VIT_Vellore--beachbackground.jpeg/1600px-T--VIT_Vellore--beachbackground.jpeg');
 
−
    background-size: cover;
 
−
    background-repeat: no-repeat;
 
−
    padding: 15%;
 
 
}
 
}
 +
</style>
  
−
#home-container, #home-container img {
+
<div class="horizontal">
−
    display: block;
+
    <video id="fullscreen-video" autoplay muted loop>
−
     margin: auto;
+
        <source src="https://static.igem.org/mediawiki/2018/d/db/T--VIT_Vellore--wavesvideo.mp4" type="video/mp4">
−
}
+
    </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>
  
−
#home-container h1 {
+
<div id="ill-nav">
−
    font-family: 'Comfortaa', Tahoma, sans-serif;
+
        <a class="ill-link" id="ill-1-link" href="#">&#10102;</a>
−
    font-size: 8vw;
+
        <a class="ill-link" id="ill-2-link" href="#">&#10103;</a>
−
    font-weight: 500;
+
        <a class="ill-link" id="ill-3-link" href="#">&#10104;</a>
−
     letter-spacing: -0.05em;
+
        <a class="ill-link" id="ill-4-link" href="#">&#10105;</a>
−
     color: #fff;
+
        <a class="ill-link" id="ill-5-link" href="#">&#10106;</a>
−
     text-align: center;
+
</div>
−
     text-shadow: 1px 1px 30px #1a1a1a9c;
+
     <div id="ill-1" class="horizontal ill-container">
−
     padding: 5%;
+
        <img class="ill-med" src="https://static.igem.org/mediawiki/2018/f/f8/T--VIT_Vellore--ill1.png" alt="Illustration 1"/>
−
     margin: 0;
+
        <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>
  
−
#home-container h1 span {
+
<script type="text/javascript">
−
    font-weight: bold;
+
−
    padding: 0 1%;
+
−
}
+
  
−
#home-container h2 {
+
$("#enter-site").click(function() {
−
     font-family: 'Bahnschrift', 'Segoe UI', Tahoma, sans-serif;
+
     $("video").hide("fade", 300);
−
     font-size: 3vw;
+
     $("#home-container").hide("fade", 200, function() {
−
    font-weight: 500;
+
        $("#nav-openbtn").show("fade", 100);
−
    color: #fff;
+
        $("#ill-1").show("fade", 600, function() {
−
    text-align: center;
+
            $("#ill-nav").show("slide", {direction: 'right'}, 300);
−
    padding: 2%;
+
            $("#ill-1-link").css({opacity: '1'});
−
    margin: 0;
+
        });
−
     text-shadow: 1px 1px 30px #1a1a1ac7;
+
     });
−
}
+
});
  
−
#home-container button {
+
$("#ill-5-link").click(function() {
−
     color: #fff;
+
     $("#ill-4-link").css({opacity: '0.75'});
−
    background-color: #1d1d1d2c;
+
     $("#ill-4").hide("fade", 200);
−
     border: 2px solid #fff;
+
     $("#ill-2-link").css({opacity: '0.75'});
−
     border-radius: 50px;
+
     $("#ill-2").hide("fade", 200);
−
     padding: 1% 2%;
+
     $("#ill-1-link").css({opacity: '0.75'});
−
     font-family: 'Bahnschrift', 'Segoe UI', Tahoma, sans-serif;
+
     $("#ill-1").hide("fade", 200);
−
     font-size: 1.3vw;
+
     $("#ill-3-link").css({opacity: '0.75'});
−
     font-weight: 500;
+
     $("#ill-3").hide("fade", 200, function() {
−
    text-align: center;
+
        $("#ill-5").show("fade", 300);
−
     display: block;
+
        $("#ill-5-link").css({opacity: '1'});
−
    margin: 2.5% auto;
+
     });
−
    box-shadow: 1px 1px 30px #1a1a1ac7;
+
});
−
     transition: 0.4s;
+
−
}
+
  
−
#home-container button:hover {
+
$("#ill-4-link").click(function() {
−
     background-color: #fff;
+
     $("#ill-5-link").css({opacity: '0.75'});
−
     color: #000;
+
    $("#ill-5").hide("fade", 200);
−
     cursor: pointer;
+
     $("#ill-2-link").css({opacity: '0.75'});
−
     text-shadow: none;
+
    $("#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'});
 +
    });
 +
});
  
−
.ill-container {
+
$("#ill-3-link").click(function() {
−
     width: 100%;
+
    $("#ill-5-link").css({opacity: '0.75'});
−
     height: auto;
+
     $("#ill-5").hide("fade", 200);
−
     overflow: hidden;
+
    $("#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'});
 +
    });
 +
});
  
−
#ill-1 {
 
−
    background-color: #a0000085;
 
−
    padding: 10%;
 
−
}
 
  
−
#ill-2 {
+
$("#ill-2-link").click(function() {
−
     background-image: radial-gradient(circle, #00a2ff7e 40%, #a0000085 60%);
+
     $("#ill-5-link").css({opacity: '0.75'});
−
     padding: 8%;
+
    $("#ill-5").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);
 +
    $("#ill-4-link").css({opacity: '0.75'});
 +
    $("#ill-4").hide("fade", 200, function() {
 +
        $("#ill-2").show("fade", 300);
 +
        $("#ill-2-link").css({opacity: '1'});
 +
    });
 +
});
  
−
#ill-nav {
+
$("#ill-1-link").click(function() {
−
     background-color: #00000000;
+
     $("#ill-5-link").css({opacity: '0.75'});
−
     position: fixed;
+
    $("#ill-5").hide("fade", 200);
−
     right: 5%;
+
     $("#ill-2-link").css({opacity: '0.75'});
−
     top: 40%;
+
     $("#ill-2").hide("fade", 200);
−
     padding: 0;
+
     $("#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'});
 +
    });
 +
});
  
−
#ill-nav a {
+
</script>
−
    text-decoration: none;
+
−
    font-family: sans-serif;
+
−
    font-weight: 500;
+
−
    font-size: 1.8vw;
+
−
    color: #fff;
+
−
    padding: 10px;
+
−
    margin: 0;
+
−
    text-shadow: 1px 1px 2px #1d1d1d2c;
+
−
    transition: 0.4s;
+
−
    opacity: 0.75;
+
−
}
+
  
−
#ill-nav a:hover {
 
−
    margin-left: 15%;
 
−
    opacity: 1;
 
−
}
 
−
 
−
.ill-med {
 
−
    width: 60%;
 
−
    height: auto;
 
−
    margin: 0 auto;
 
−
    display: block;
 
−
    padding: 2%;
 
−
}
 
−
 
−
.ill-description {
 
−
    height: auto;
 
−
    font-family: 'Bahnschrift', 'Calibri', sans-serif;
 
−
    font-size: 1vw;
 
−
    font-weight: 500;
 
−
    color: #fff;
 
−
    background-color: rgba(0, 0, 0, 0.795);
 
−
    padding: 2%;
 
−
    margin: 0 auto;
 
−
    text-align: center;
 
−
    width: 65%;
 
−
    box-shadow: 1px 1px 5px #1a1a1a9c;
 
−
}
 
−
 
−
</style>
 
−
<div class="horizontal">
 
−
    <div class="vert-12" id="home-container">
 
−
        <h1>toggle<span class="em-text">pH</span></h1>
 
−
        <h2>VIT Vellore</h2>
 
−
        <button id="enter-site">Check us out!</button>
 
−
    </div>
 
−
</div>
 
−
<div id="ill-nav">
 
−
        <a id="ill-1-link" href="#">&#10102;</a><br/><br/>
 
−
        <a id="ill-2-link" href="#">&#10103;</a><br/><br/>
 
−
        <a id="ill-3-link" href="#">&#10104;</a><br/><br/>
 
−
        <a id="ill-4-link" href="#">&#10105;</a><br/><br/>
 
−
    </div>
 
−
    <div id="ill-1" class="horizontal ill-container">
 
−
        <img class="ill-med" src="images/ill-1.png" alt="Illustration 1"/>
 
−
        <p class="ill-description">The three promoters are two CadA and one PnhaA. 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.</p>
 
−
    </div>
 
−
    <div id="ill-2" class="horizontal ill-container">
 
−
        <img class="ill-med" src="images/ill-2.png" alt="Illustration 2"/>
 
−
        <p class="ill-description">The three promoters are two CadA and one PnhaA. 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.</p>
 
−
    </div>
 
 
</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