Difference between revisions of "Team:IIT Delhi"

Line 1: Line 1:
{{IIT_Madras}}
+
{{BU17_template_global}}
 
+
 
<html>
 
<html>
 +
<head>
 +
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
 +
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:400,900" rel="stylesheet">
 +
<style>
 +
<style>
 +
<style>
 +
#top_menu_inside ul li > a { /* RECOLORS IGEM MENU */
 +
color: #a9a9a9 !important;
 +
}
 +
.menu-type {
 +
font-family: 'Roboto', sans-serif !important;
 +
letter-spacing: 5pt !important;
 +
font-size: 14pt !important;
 +
text-align: center;
 +
text-decoration: none !important;
 +
text-transform: uppercase !important;
 +
font-weight: bold !important;
 +
text-rendering: geometricPrecision !important;
 +
-webkit-font-smoothing: antialiased !important;
 +
font-smoothing: antialiased !important;
 +
}
 +
.body-type {
 +
font-family: 'Roboto', sans-serif;
 +
font-size: 16pt !important;
 +
text-decoration: none !important;
 +
line-height: 2 !important;
 +
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 +
-webkit-transition: all 1s ease;
 +
-moz-transition: all 1s ease;
 +
-ms-transition: all 1s ease;
 +
-o-transition: all 1s ease;
 +
transition: all 1s ease;
 +
}
 +
body {
 +
background: #1d1d1d;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover !important;
 +
z-index: -100;
 +
display: none;
 +
}
 +
#mybody {
 +
opacity: 0.0;
 +
background-color: #f8f9f9;
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
top: 0;
 +
left: 0;
 +
z-index: -1;
 +
}
 +
.wordmark img {
 +
margin-top: 4.4%;
 +
margin-left: 5%;
 +
width: 300px;
 +
}
 +
#mainwrap {
 +
margin: 0 auto;
 +
height: 100% !important;
 +
}
 +
#menubartable {
 +
border: 0;
 +
list-style-type: none;
 +
margin-top: 5%;
 +
margin-right: 5%;
 +
padding: 0;
 +
position: relative;
 +
float: right;
 +
white-space: nowrap;
 +
width: 0 auto !important;
 +
z-index: 10;
 +
}
 +
#menubartable li {
 +
display: table-cell;
 +
}
 +
li .menuitem, .dropbtn {
 +
color: #f8f9f9 !important;
 +
display: table-cell;
 +
padding: 5px 18px;
 +
vertical-align: middle;
 +
}
 +
.dropbtn {
 +
position: relative;
 +
text-decoration: none !important;
 +
}
 +
.dropdown-content {
 +
display: none;
 +
position: absolute;
 +
z-index: 1;
 +
}
 +
.dropdown-content .menuitem {
 +
color: #f8f9f9;
 +
display: block;
 +
padding: 5px 18px;
 +
text-align: left;
 +
text-decoration: none;
 +
}
 +
#myfooter {
 +
position: absolute;
 +
bottom: 0pt;
 +
width: 100%;
 +
height: 15%;
 +
}
 +
#myfooterL {
 +
position: relative;
 +
float: left;
 +
width: 45%;
 +
height: 50%;
 +
text-align: left;
 +
padding-left: 5%;
 +
vertical-align: middle;
 +
}
 +
#myfooterR {
 +
position: relative;
 +
float: right;
 +
width: 45%;
 +
height: 50%;
 +
text-align: right;
 +
padding-right: 5%;
 +
}
 +
#myfooterC {
 +
position: relative;
 +
float: top;
 +
width: 100%;
 +
height: 50%;
 +
text-align: center;
 +
}
 +
#myfooter a {
 +
vertical-align: center;
 +
color: #f8f9f9 !important;
 +
text-decoration: none !important;
 +
}
 +
#myfooterR img {
 +
height: 20px;
 +
padding: 0 10px;
 +
vertical-align: middle;
 +
}
 +
#myfooterR a {
 +
padding: 0 22px;
 +
vertical-align: middle;
 +
}
 +
.fade-in-div {
 +
width: 100%;
 +
height: 100%;
 +
bottom: 0;
 +
border: none;
 +
position: absolute;
 +
width: 100%;
 +
display: none;
 +
z-index: 1;
 +
}
 +
#fade-in-wrapper {
 +
position: absolute;
 +
width: 70%;
 +
max-height: 100%;
 +
margin: 0 15%;
 +
margin-top: 5%;
 +
}
 +
#fade-in-wrapper p {
 +
color: #4D4D4D;
 +
position: relative;
 +
overflow: hidden;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
#fade-in-footer {
 +
position: absolute;
 +
bottom: 0pt;
 +
width: 100%;
 +
height: 15%;
 +
}
 +
#fade-in-footer a {
 +
text-align: center;
 +
color: #4D4D4D !important;
 +
text-decoration: none !important;
 +
}
 +
.fade-in-div-2 {
 +
width: 100%;
 +
height: 100%;
 +
bottom: 0;
 +
border: none;
 +
position: absolute;
 +
display: none;
 +
z-index: 1;
 +
}
 +
#gallery-wrapper {
 +
position: absolute;
 +
height: 25%;
 +
width: 100%;
 +
bottom: 0;
 +
align-content: center;
 +
}
 +
#gallery-wrapper p {
 +
position: relative;
 +
overflow: hidden;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
top: 10px;
 +
z-index: 1;
 +
margin: 0 5%;
 +
}
 +
#gallery-tab {
 +
background: #f8f9f9;
 +
height: 25%;
 +
width: 100%;
 +
bottom: 0;
 +
position: absolute;
 +
z-index: -1;
 +
}
 +
.menu-column:hover .dropdown-content { /* MENU DISPLAY ANIMATION */
 +
display: block;
 +
}
 +
.link-slideup {
 +
position: relative;
 +
overflow: hidden;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
.link-slideup a {
 +
position: relative;
 +
display: inline-block;
 +
outline: none;
 +
color: #D45B5C;
 +
vertical-align: bottom;
 +
text-decoration: none;
 +
white-space: nowrap;
 +
}
 +
.link-slideup a::before, .link-slideup a::after {
 +
pointer-events: none;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
.link-slideup a {
 +
overflow: hidden;
 +
font-weight: 500;
 +
}
 +
.link-slideup a::before {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
z-index: -1;
 +
width: 100%;
 +
height: 100%;
 +
background-color: #EFEFEE;
 +
opacity: 1;
 +
content: '';
 +
-webkit-transition: -webkit-transform 0.2s;
 +
transition: transform 0.2s;
 +
-webkit-transform: translateY(95%);
 +
transform: translateY(95%);
 +
}
 +
.link-slideup a:hover::before, .link-slideup a:focus::before {
 +
-webkit-transform: translateY(0);
 +
transform: translateY(0);
 +
}
 +
</style>
 +
</head>
 
<body>
 
<body>
<!--
+
<div id="mainwrap"> <a href="https://2017.igem.org/Team:BostonU" class="wordmark"><img src="https://static.igem.org/mediawiki/2017/d/de/T--BostonU--LandingPageLogo1.svg"></img></a>
<div style="text-align: center;"><img height="400px" width="360px" src="https://static.igem.org/mediawiki/2015/thumb/3/37/Iitm_igem_bac_resis.jpeg/300px-Iitm_igem_bac_resis.jpeg"></div>
+
  <div id="mybody"></div>
-->
+
  <ul id="menubartable" class="menu-type">
<!--
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Team" class="dropbtn">People</a>
<h2 align="center"><font size="5" color="green"><b>Simulating Evolution</b></font><br></br><font size="3" color="green">to</font></h2>
+
      <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Team">Team</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Attributions">Attributions</a></div>
<h2 align="center"><font size="5" color="green"><b>Tackle Antibiotic Resistance</b></font></h2>
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Overview" class="dropbtn">Research</a>
-->
+
      <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Description">Project Description</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Design">Design</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Results">Results</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Model">Modelling</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Notebook">Notebook</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Protocols">Protocols</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Safety">Safety</a> </div>
<div style="text-align: center;">
+
    </li>
<img height="400px" width="400px" src="https://static.igem.org/mediawiki/2015/9/9d/Black%26WhiteiGEMlogo1.png">  
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Overview#BTB" class="dropbtn">Beyond the Bench</a>
 +
      <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/HP/Silver">Human Practices [Silver]</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/HP/Gold_Integrated">Integrated Human Practices [Gold]</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Collaborations">Collaborations</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Contribution">Contribution</a> </div>
 +
    </li>
 +
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Overview#Achievements" class="dropbtn">Achievements</a>
 +
      <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Parts">Parts</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/JudgingCriteria">Judging Criteria</a> </div>
 +
    </li>
 +
  </ul>
 +
  <div id="myfooter" class="menu-type">
 +
    <div id="myfooterC"><a href="#project" class="fade-in-button">ABOUT US</a></div>
 +
    <div id="myfooterL"><a href="#gallery" class="fade-in-button-2">ABOUT THIS PHOTO</a></div>
 +
    <div id="myfooterR"><a>SAY HI</a><a href="https://twitter.com/BostonU_iGEM_WL"><img src="https://static.igem.org/mediawiki/2017/2/21/T--BostonU--prettysureweareallowedtouploadthis.svg"></img></a> <a href="mailto:bu.igemwl2017@gmail.com"><img style="height: 19px;" src="https://static.igem.org/mediawiki/2017/c/ca/T--BostonU--MailTo.svg"></img></a> </div>
 +
  </div>
 +
  <div class="fade-in-div"> <a class="wordmark" href="https://2017.igem.org/Team:BostonU"><img src="https://static.igem.org/mediawiki/2017/f/f2/T--BostonU--RedGrey.svg"></img></a>
 +
    <section id="fade-in-wrapper" class="link-slideup">
 +
      <p class="body-type">We explore the use of de novo designed riboriboregulators known as <a href="#">toehold switches</a> to drive recombinase-based logic in <a href="#">cell-free TX-TL systems.</a> We anticipate applications in <a href="#">point-of-care diagnostic technologies</a> such as those for Zika and Ebola developed by the Collins group at MIT, targeted at diseases with RNA profiles that are more computationally demanding, such as cancer.</p>
 +
    </section>
 +
    <div id="fade-in-footer">
 +
      <div id="myfooterC"><a href="#" class="fade-out-button menu-type">CLOSE THIS WINDOW</a></div>
 +
      <div id="myfooterL"></div>
 +
      <div id="myfooterR"></div>
 +
    </div>
 +
  </div>
 +
  <div class="fade-in-div-2">
 +
    <div id="gallery-tab"></div>
 +
    <section id="gallery-wrapper" class="link-slideup body-type">
 +
      <p class="body-type">Something is wrong! The description didn't load properly.</p>
 +
    </section>
 +
    <div id="fade-in-footer">
 +
      <div id="myfooterC"></div>
 +
      <div id="myfooterL"><a href="#" class="fade-out-button-2 menu-type">CLOSE THIS WINDOW</a></div>
 +
      <div id="myfooterR"><a href="#" class="toggle menu-type">SHOW ME ANOTHER PICTURE</a></div>
 +
    </div>
 +
  </div>
 
</div>
 
</div>
<!--<div id="cf">
+
<script type="text/javascript"> /* FADE IN SCRIPT */
  <img class="bottom" width="500px" src="https://static.igem.org/mediawiki/2015/0/03/Evolving.png" />
+
$(document).ready(function(){
  <img class="top" height="500px" width="500px" src="https://static.igem.org/mediawiki/2015/6/64/Igemiitm.JPG" />
+
$(".fade-in-button").click(function(){
</div>-->
+
$(".fade-in-div").fadeIn(300);
 
+
    $("#myfooter").fadeOut(300);
<p>Hello! We're the iGEM 2015 team from IIT Madras, India. Welcome to our wiki page. We are trying to develop a system that can tackle the problem of antibiotic resistance. Read on to learn more!</p>
+
    $("#menubartable").fadeOut(300);
<br>
+
    $("#mybody").fadeTo(300, 1.0, function() {
<p> Antimicrobial agents like antibiotics and other drugs have served us well for over 70 years. However, they have been used so widely and for so long that the microbes that were supposed to be killed by the antibiotics have adapted to them! Antimicrobial resistance is a serious issue today, and could grow to become even worse in the future. A WHO report in April 2014 states that:</p>
+
    });
 
+
});
<p class="highlightBox">"this serious threat is no longer a prediction for the future, it is happening right now in every region of the world and has the potential to affect anyone, of any age, in any country. Antibiotic resistance—when bacteria change so antibiotics no longer work in people who need them to treat infections—is now a major threat to public health."</p>
+
$(".fade-out-button").click(function(){
 
+
$(".fade-in-div").fadeOut(300);
<p>Our iGEM project aims to tackle the emerging problem of antibiotic resistance by leveraging the power of evolution and natural selection under selective pressure, and synthetic biology.
+
    $("#myfooter").fadeIn(300);
</p>
+
    $("#menubartable").fadeIn(300);
 
+
    $("#mybody").fadeTo(300, 0.0, function() {
<br></br>
+
    });
 
+
});
 
+
$(".fade-in-button-2").click(function(){
<div style="text-align: center;"><img src="https://imgs.xkcd.com/comics/evolving.png"></div>
+
$(".fade-in-div-2").fadeIn(300);
<br>
+
    $("#myfooter").fadeOut(300);
<figcaption>This xkcd comic depicts the "evolution" of bacteria as observed by a Biologist <br> like in the game Pokémon.
+
});
<a href="https://xkcd.com/1147/"> <i>Link to comic webpage</i></a></figcaption>
+
$(".fade-out-button-2").click(function(){
 
+
$(".fade-in-div-2").fadeOut(300);
 
+
    $("#myfooter").fadeIn(300);
 
+
});
</div>            <!--This is the closing tag for content container -->
+
});
 
+
</script>  
</div>             <!--This is the closing tag for main container -->
+
<script type="text/javascript"> /* GALLERY SCRIPT */
 
+
var captions = ["<p class='body-type'>The North End and Charlestown as seen from <a href='#'>Ginkgo Bioworks</a> during our  <a href='#'>July visit</a>.</p>","<p class='body-type'>The team (minus <a href='#'>Thomas</a>) turns a corner inside <a href='#'>Ginkgo Bioworks</a>.</p>"];
 +
var links = ["https://static.igem.org/mediawiki/2017/c/c1/T--BostonU--seaport.png","https://static.igem.org/mediawiki/2017/9/9b/T--BostonU--hallway.png"];
 +
var maxCounter = 1;
 +
var counter = maxCounter;
 +
var bg = '#1d1d1d url('+links[counter]+') no-repeat center center fixed';
 +
$("#gallery-wrapper").html(captions[counter]);
 +
document.body.style.background = bg;
 +
$(".toggle").click(function(){
 +
counter = counter-1;
 +
if (counter < 0) {
 +
counter = maxCounter;
 +
};
 +
var bg = '#1d1d1d url('+links[counter]+') no-repeat center center fixed';
 +
    document.body.style.background = bg;
 +
$("#gallery-wrapper").fadeOut(300, function(){
 +
$("#gallery-wrapper").html(captions[counter]).fadeIn(300);
 +
});
 +
});
 +
</script>
 +
<script> /* THIS MAKES BODY CONTENT OF THE PAGE FADE IN */
 +
$(document).ready(function () {
 +
    $('body').fadeIn(1000);
 +
});
 +
</script>
 
</body>
 
</body>
 
</html>
 
</html>
 
{{Team:IIT_Madras_Footer_Final}}
 

Revision as of 10:18, 28 October 2017