Difference between revisions of "Team:IISER-Kolkata"

 
(41 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
 
<html>
 
<html>
 
 
<link rel="icon" type="image/png" href="https://static.igem.org/mediawiki/2018/6/60/T--IISER-Kolkata--logo.jpg" width="30" height="30"/>
+
<!--<link rel="stylesheet" href="css/style.css"/>-->
+
<style type="text/css">
+
/*fonts*/
+
@font-face {
+
    src: url("https://static.igem.org/mediawiki/2018/1/14/T--IISER-Kolkata--blogger.ttf");
+
    font-family: blogger;
+
}
+
@font-face {
+
    src: url("https://static.igem.org/mediawiki/2018/7/7a/T--IISER-Kolkata--prime.otf");
+
    font-family: prime;
+
}
+
@font-face {
+
    src: url("https://static.igem.org/mediawiki/2018/5/5a/T--IISER-Kolkata--rodina.otf");
+
    font-family: rodina;
+
}
+
@font-face {
+
    src: url("https://static.igem.org/mediawiki/2018/f/f7/T--IISER-Kolkata--social.ttf");
+
    font-family: social;
+
}
+
  
/*body*/
+
<link rel="icon" type="image/png" href="https://static.igem.org/mediawiki/2018/c/cd/T--IISER-Kolkata--bacman.jpg" width="30" height="30"/>
body, html {
+
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Team:IISER-Kolkata/style.css&action=raw&ctype=text/css"/>
width: 100vw;
+
<link rel="stylesheet" href="https://2018.igem.org/wiki/index.php?title=Team:IISER-Kolkata/common.css&action=raw&ctype=text/css"/>
margin: 0;
+
padding: 0;
+
}
+
body {
+
    height: 1200vh;
+
overflow-y: scroll;
+
overflow-x: hidden;
+
margin: auto;
+
}
+
body::-webkit-scrollbar-track
+
{
+
background-color: black;
+
}
+
body::-webkit-scrollbar
+
{
+
width: 1vw;
+
}
+
body::-webkit-scrollbar-thumb
+
{
+
background-color: #999999;
+
}
+
body::-webkit-scrollbar-thumb:hover
+
{
+
    background-color: #777777;
+
}
+
 
+
#container {
+
height: 1200vh;
+
width: 100vw;
+
display: flex;
+
flex-direction: column;
+
}
+
 
+
/*navbar*/
+
#menubar { 
+
width: 100vw;
+
    height: 3vw;
+
    background-color: rgba(0,0,0,0.7);
+
    display: inline-flex;
+
    align-items: center; 
+
    position: absolute;
+
    top: 100vh;
+
    left: 0vw;
+
    z-index: 10;
+
}
+
#menubar.stickymenu {
+
    position: fixed;
+
    top: 0vh;
+
}
+
#menubar #logo {
+
    margin-left: 1vw;
+
    margin-right: 1vw;
+
    display: flex;
+
    width: 2.5vw;
+
    height: 2.5vw;   
+
}
+
#logo img {
+
    height: 100%;
+
    width: 100%;
+
}
+
#menubar .pagelink {
+
    display: flex; 
+
    align-items: center;
+
    justify-content: center; 
+
    height: 100%;
+
    width: 8vw;       
+
}
+
#menubar .pagelink#registerMenu {
+
    margin-left: auto;
+
}
+
#menubar .pagelink#loginMenu {
+
    margin-right: 1vw;
+
}
+
.pagelink div {
+
    cursor: pointer;
+
    -webkit-transition: 0.2s linear;
+
    -moz-transition: 0.2s linear;
+
    -o-transition: 0.2s linear;
+
    transition: 0.2s linear;
+
}
+
.pagelink div p {
+
    font-family: prime;
+
    font-size: 1.3vw;
+
    color: #cccccc; 
+
}
+
.pagelink div:hover > p {
+
    color: white !important;
+
}
+
#register {
+
    position: fixed;
+
    display: flex;
+
    height: 40vw;
+
    width: 40vw;
+
    left: -45vw;
+
    top: 50vh;
+
    margin-top: -20vw;
+
    background-color: white;
+
    border: 0.2vw solid black;
+
    border-radius: 2vw;
+
    z-index: 10;
+
    -webkit-transition: 0.2s linear;
+
    -moz-transition: 0.2s linear;
+
    -o-transition: 0.2s linear;
+
    transition: 0.2s linear;
+
}
+
#login {
+
    position: fixed;
+
    display: flex;
+
    height: 20vw;
+
    width: 30vw;
+
    left: -35vw;
+
    top: 50vh;
+
    margin-top: -10vw;
+
    background-color: white;
+
    border: 0.2vw solid black;
+
    border-radius: 2vw;
+
    z-index: 10;
+
    -webkit-transition: 0.2s linear;
+
    -moz-transition: 0.2s linear;
+
    -o-transition: 0.2s linear;
+
    transition: 0.2s linear;
+
}
+
.orangetext div p {
+
    color: orange !important;
+
}
+
.orangetext div:hover > p {
+
    color: yellow !important;
+
}
+
#login .exit, #register .exit {
+
    position: absolute;
+
    top: 1vw;
+
    right: 1vw;
+
    height: 3vw;
+
    width: 3vw;
+
    border-radius: 100%;
+
    font-family: rodina;
+
    font-weight: bold;
+
    font-size: 3vw;
+
    cursor: pointer;
+
    color: black;
+
    z-index: 1;
+
    display: flex;
+
    align-items: center;
+
    justify-content: center;
+
    -webkit-transition: 0.2s linear;
+
    -moz-transition: 0.2s linear;
+
    -o-transition: 0.2s linear;
+
    transition: 0.2s linear;
+
}
+
#login .exit:hover, #register .exit:hover {
+
    background-color: black;
+
    color: white;
+
}
+
 
+
section {
+
position: relative;
+
display: flex;
+
height: 200vh;
+
width: 100vw;
+
}
+
 
+
#home {
+
    background: white;
+
    height: 100vh;
+
}
+
#home #iiserk {
+
    height: 6vw;
+
    width: 6vw;   
+
    display: flex;
+
    align-items: center; 
+
    position: absolute;
+
    top: 1vw;
+
    left: 1vw;
+
    z-index: 5;
+
    cursor: pointer;
+
}
+
#iiserk:hover {
+
   
+
}
+
#iiserk a img {
+
    height: 6vw;
+
    width: auto;
+
}
+
#home #social {
+
    height: 20vw;
+
    width: 3vw;   
+
    display: flex;
+
    flex-direction: column;
+
    align-items: center; 
+
    position: absolute;
+
    top: 50vh;
+
    margin-top: -10vw;
+
    right: 2vw;
+
    z-index: 5;
+
}
+
#social .links {
+
    height: 3vw;
+
    width: 3vw;
+
    margin: 1vw 0vw 1vw 0vw;
+
    display: flex;
+
    justify-content: center;
+
    align-items: center;
+
    cursor: pointer;
+
}
+
#social .links a {
+
    font-family: social;
+
    font-size: 4vw;
+
    color: black;
+
    text-decoration: none;
+
}
+
#soc-facebook:hover > a {
+
    color: #3b5998;
+
}
+
#soc-twitter:hover > a {
+
    color: #00aced;
+
}
+
#soc-instagram:hover > a {
+
    color: #c32aa3;
+
}
+
#soc-youtube:hover > a {
+
    color: #bb0000;
+
}
+
#home #pagedown {
+
    position: absolute;
+
    top: 90vh;
+
    left: 47vw;
+
    height: 3vw;
+
    width: 6vw;
+
    font-size: 2vw;
+
    cursor: pointer;
+
    display: flex;
+
    align-items: center;
+
    justify-content: center;
+
    background-color: gray;
+
    border: solid black 0.1vw;
+
}
+
 
+
#aboutUs {
+
background-color: chartreuse;
+
}
+
/*aboutUs page*/
+
#aboutUs .sidekick {
+
height: 100vh;
+
width: 15vw;
+
position: absolute;
+
top: 0vh;
+
background-color: white;
+
transition: 0.5s ease;
+
z-index: 1;
+
opacity: 0.5;
+
}
+
.sidekick#sk1 {
+
left: -15vw;
+
}
+
.sidekick#sk2 {
+
left: 100vw;
+
}
+
 
+
/*events page*/
+
#events {
+
    background: white;
+
}
+
#events .tab {
+
    position: absolute;
+
    background-color: white;
+
    display: flex;
+
    align-items: center;
+
    justify-content: center;
+
    height: 100vh;
+
    width: 50vw;
+
    cursor: pointer;
+
    -webkit-transition: 0.2s linear;
+
    -moz-transition: 0.2s linear;
+
    -o-transition: 0.2s linear;
+
    transition: 0.2s linear;
+
}
+
.tab#left-tab {   
+
    left: 0vw;
+
    top: 0vh;
+
}
+
.tab#right-tab {
+
    left: 50vw;
+
    top: 0vh;
+
}
+
.tab .tab-text {
+
    height: 6vw;
+
    width: 18vw;
+
    padding: 1vw;
+
    font-family: prime;
+
    font-size: 2vw;
+
    color: #000040;
+
    background-color: white;
+
    border: 0.5vw solid #000040;
+
    text-align: center;
+
    display: flex;
+
    align-items: center;
+
    -webkit-transition: 0.2s linear;
+
    -moz-transition: 0.2s linear;
+
    -o-transition: 0.2s linear;
+
    transition: 0.2s linear;
+
}
+
#left-tab #gamecomp {
+
   
+
}
+
#right-tab #workexhib {
+
   
+
}
+
#events .pop {
+
    position: absolute;
+
    display: flex;
+
    height: 100vh;
+
    width: 100vw;
+
    z-index: 5;
+
    -webkit-transition: 0.2s linear;
+
    -moz-transition: 0.2s linear;
+
    -o-transition: 0.2s linear;
+
    transition: 0.2s linear;
+
}
+
.pop#gamecomp-pop {
+
    left: 100vw;
+
    top: 0vh;
+
}
+
.pop#workexhib-pop {
+
    left: 100vw;
+
    top: 0vh;
+
}
+
.pop .exit {
+
    position: absolute;
+
    top: 4vw;
+
    left: 94vw;
+
    height: 4vw;
+
    width: 4vw;
+
    border-radius: 100%;
+
    font-family: rodina;
+
    font-weight: bold;
+
    font-size: 4vw;
+
    cursor: pointer;
+
    color: #000040;
+
    z-index: 5;
+
    display: flex;
+
    align-items: center;
+
    justify-content: center;
+
    -webkit-transition: 0.2s linear;
+
    -moz-transition: 0.2s linear;
+
    -o-transition: 0.2s linear;
+
    transition: 0.2s linear;
+
}
+
.pop .exit:hover {
+
    background-color: #000040;
+
    color: white;
+
}
+
.pop .event-type {
+
    position: absolute;
+
    top: 0vh;
+
    left: 0vw;
+
    height: 100vh;
+
    width: 20vw;
+
    display: flex;
+
    flex-direction: column;
+
    align-items: center;
+
    justify-content: center;
+
    background-color: #000040;
+
}
+
.event-type .type-list {
+
    height: 4vw;
+
    width: 18vw;
+
    display: flex;
+
    align-items: center;
+
    justify-content: center;
+
    margin: 1vw 0vw 1vw 0vw;
+
    background-color: #000040;
+
    border-radius: 1vw 0vw 1vw 0vw;
+
    font-family: prime;
+
    font-size: 1.25vw;
+
    color: white;
+
    cursor: pointer;
+
    -webkit-transition: 0.2s linear;
+
    -moz-transition: 0.2s linear;
+
    -o-transition: 0.2s linear;
+
    transition: 0.2s linear;
+
}
+
.event-type .list-active {
+
    background-color: white;
+
    color: #000040;
+
}
+
.type-list:hover {
+
    background-color: #aaaaaa;
+
    color: #000040;
+
}
+
.pop .event-desc {
+
    position: absolute;
+
    top: 0vh;
+
    left: 20vw;
+
    height: 100vh;
+
    width: 80vw;
+
    display: flex;
+
    background-color: white;
+
    color: #000040;
+
}
+
.event-desc .event-head {
+
    display: none;
+
    position: absoute;
+
    top: 10vh;
+
    left: 5vw;
+
    height: 10vh;
+
    width: 55vw;
+
    align-items: center;
+
    justify-content: center;
+
    background-color: white;
+
    font-family: blogger;
+
    font-size: 3vw;
+
    font-weight: bold;
+
    color: #000040;
+
    -webkit-transition: 0.2s linear;
+
    -moz-transition: 0.2s linear;
+
    -o-transition: 0.2s linear;
+
    transition: 0.2s linear;
+
}
+
.event-head.head-active {
+
    display: flex;
+
    position: absolute;
+
}
+
.event-desc .indiv-event {
+
    display: none;
+
    position: absoute;
+
    top: 25vh;
+
    left: 5vw;
+
    height: 50vh;
+
    width: 70vw;
+
    background-color: white;
+
    color: #000040;
+
    -webkit-transition: 0.2s linear;
+
    -moz-transition: 0.2s linear;
+
    -o-transition: 0.2s linear;
+
    transition: 0.2s linear;
+
}
+
.indiv-event.event-active {
+
    display: flex;
+
    position: absolute;
+
}
+
.indiv-event .details {
+
    position: absoute;
+
    top: 0vh;
+
    left: 0vw;
+
    height: 50vh;
+
    width: 46vw;
+
    border: 0.2vw solid #000040;
+
    border-radius: 3vw 0vw 0vw 3vw;
+
    text-align: justify;
+
    overflow-y: scroll;
+
    overflow-x: hidden;
+
}
+
.indiv-event .details::-webkit-scrollbar-track
+
{
+
    background-color: white;
+
}
+
.indiv-event .details::-webkit-scrollbar
+
{
+
    width: 0.8vw;
+
}
+
.indiv-event .details::-webkit-scrollbar-thumb
+
{
+
    background-color: #000040;
+
}
+
.indiv-event .contact {
+
    position: absoute;
+
    left: 46vw;
+
    margin-left: 2vw;
+
    height: 50vh;
+
    width: 22vw;
+
    border: 0.2vw solid white;
+
    border-radius: 0vw 3vw 3vw 0vw;
+
    background-color: #000040;
+
    color: white;
+
    overflow-x: hidden;
+
}
+
.indiv-event .contact::-webkit-scrollbar-track
+
{
+
    background-color: #000040;
+
}
+
.indiv-event .contact::-webkit-scrollbar
+
{
+
    width: 0.8vw;
+
}
+
.indiv-event .contact::-webkit-scrollbar-thumb
+
{
+
    background-color: white;
+
}
+
.details h4 {
+
    font-family: rodina;
+
    font-size: 2.5vw;
+
    margin: 2vw 2.5vw 2vw 2.5vw;
+
}
+
.details h6, .contact h6 {
+
    font-family: rodina;
+
    font-size: 2vw;
+
    margin: 1.5vw 2.5vw 1.5vw 2.5vw;
+
}
+
.details p, .contact p {
+
    font-family: blogger;
+
    font-size: 1.5vw;
+
    margin: 1vw 2.5vw 1vw 2.5vw;
+
}
+
.event-desc .rem-events {
+
    display: none;
+
    position: absoute;
+
    top: 80vh;
+
    left: 5vw;
+
    height: 15vh;
+
    width: 55vw;
+
    background-color: white;
+
    color: #000040;
+
    -webkit-transition: 0.2s linear;
+
    -moz-transition: 0.2s linear;
+
    -o-transition: 0.2s linear;
+
    transition: 0.2s linear;
+
}
+
.rem-events.rem-active {
+
    display: flex;
+
    align-items: center;
+
    justify-content: center;
+
    position: absolute;
+
}
+
.rem-events .icon {
+
    display: flex;
+
    cursor: pointer;
+
    margin: 1vw;
+
    height: 6vw;
+
    width: 6vw;
+
    border-radius: 100%;
+
    -webkit-transition: 0.2s linear;
+
    -moz-transition: 0.2s linear;
+
    -o-transition: 0.2s linear;
+
    transition: 0.2s linear;
+
}
+
.icon:hover {
+
    height: 7vw;
+
    width: 7vw;
+
}
+
.icon.icon-active {
+
    height: 8vw;
+
    width: 8vw;
+
}
+
.icon img {
+
    height: 100%;
+
    width: 100%;
+
}
+
 
+
#gallery {
+
    background-color: orange;
+
}
+
#ourTeam {
+
    background-color: darkorchid;
+
}
+
#sponsors {
+
    background-color: goldenrod;
+
}
+
#reachUs {
+
    background-color: pink;
+
    height: 100vh;
+
}
+
</style>
+
  
 
<!--<script type="text/javascript">
 
<!--<script type="text/javascript">
Line 594: Line 14:
 
</script>-->
 
</script>-->
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
+
<script src="https://2018.igem.org/wiki/index.php?title=Team:IISER-Kolkata/common.js&action=raw&ctype=text/javascript" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js"></script>
+
<!--<script src="js/main.js" defer></script>-->
+
 
 
 
<nav id="menubar">
 
<nav id="menubar">
<div id="logo"><img src="https://static.igem.org/mediawiki/2018/6/60/T--IISER-Kolkata--logo.jpg"/></div>
+
<div id="logo"><a href="https://2018.igem.org/Team:IISER-Kolkata"><img src="https://static.igem.org/mediawiki/2018/c/cd/T--IISER-Kolkata--bacman.jpg"/></a></div>
<div class="pagelink" id="homeMenu"><div><p>Home</p></div></div>
+
<div class="pagelink" id="homeMenu"><a href="https://2018.igem.org/Team:IISER-Kolkata">Home</a></div>
<div class="pagelink" id="aboutUsMenu"><div><p>About</p></div></div>
+
<div class="pagelink" id="projectMenu"><a href="https://2018.igem.org/Team:IISER-Kolkata/Problem">Project</a></div>
<div class="pagelink" id="eventsMenu"><div><p>Project</p></div></div>
+
<div class="pagelink" id="labMenu"><a href="https://2018.igem.org/Team:IISER-Kolkata/Deletion">Lab</a></div>
<div class="pagelink" id="galleryMenu"><div><p>Gallery</p></div></div>
+
<div class="pagelink" id="achieveMenu"><a href="https://2018.igem.org/Team:IISER-Kolkata/Results">Achievements</a></div>
<div class="pagelink" id="ourTeamMenu"><div><p>Our Team</p></div></div>
+
<div class="pagelink" id="humanityMenu"><a href="https://2018.igem.org/Team:IISER-Kolkata/Human_Practices">Humanity</a></div>
<div class="pagelink" id="sponsorsMenu"><div><p>Sponsors</p></div></div>
+
<div class="pagelink" id="teamMenu"><a href="https://2018.igem.org/Team:IISER-Kolkata/Team">Team</a></div>
<div class="pagelink" id="reachUsMenu"><div><p>Contact Us</p></div></div>
+
 
</nav>
 
</nav>
<div id="register">
+
<div class="exit">X</div>
+
 
+
</div>
+
<div id="login">
+
<div class="exit">X</div>
+
 
+
</div>
+
 
+
 
<div id="container">
 
<div id="container">
<section id="home">
+
<section class="mainpage" id="landing">
<div id="iiserk"><a href="https://www.iiserkol.ac.in" target="_blank"><img src="https://static.igem.org/mediawiki/2018/4/4c/T--IISER-Kolkata--iiserk.png"/></a></div>
+
                                <a href="https://2018.igem.org/Competition/Results" target="_blank"><img id="goldmedal" src="https://static.igem.org/mediawiki/2018/d/d2/T--IISER-Kolkata--gold.png"/></a>
<div id="pagedown">Down</div>
+
<img id="mainlogo" src="https://static.igem.org/mediawiki/2018/e/e4/T--IISER-Kolkata--dna.gif"/>
</section>
+
<h3>BacMan</h1>
 
+
<p> A probiotic bacterial BATMAN to protect the citizens of Gotham from Arsenic Poisoning</p>
<section id="aboutUs">
+
<div id="homeflex">
<div class="sidekick" id="sk1">
+
<div class="homebutton"><a href="https://2018.igem.org/Team:IISER-Kolkata/Description"><p>Project description</p></a></div>
</div>
+
<div class="homebutton"><a href="https://2018.igem.org/Team:IISER-Kolkata/Abstract"><p>Project abstract</p></a></div>
<div class="sidekick" id="sk2">
+
 
</div>
 
</div>
 
</section>
 
</section>
  
<section id="events">
+
<section class="mainpage" id="sponsors">
+
<a href="http://www.dbtindia.nic.in/" target="_blank"><img class="sponImg" src="https://static.igem.org/mediawiki/2018/2/2c/T--IISER-Kolkata--dbt.jpg"/></a>
 +
<a href="http://www.iiserkol.ac.in/" target="_blank"><img class="sponImg" src="https://static.igem.org/mediawiki/2018/4/4c/T--IISER-Kolkata--iiserk.png"/></a>
 +
<a href="http://www.snapgene.com/" target="_blank"><img class="sponImg" src="https://static.igem.org/mediawiki/2018/5/5a/T--IISER-Kolkata--sg.png"/></a>
 +
<a href="https://www.genebridges.com/home" target="_blank"><img class="sponImg" src="https://static.igem.org/mediawiki/2018/e/e9/T--IISER-Kolkata--gb.jpg"/></a>
 +
<a href="https://www.neb.com/" target="_blank"><img class="sponImg" src="https://static.igem.org/mediawiki/2018/7/7e/T--IISER-Kolkata--neb.jpg"/></a>
 +
<a href="https://eu.idtdna.com/pages" target="_blank"><img class="sponImg" src="https://static.igem.org/mediawiki/2018/2/2e/T--IISER-Kolkata--idt.png"/></a>
 
</section>
 
</section>
  
<section id="gallery">
+
<section class="mainpage" id="contactUs">
 
+
<div id="contactLeft">
</section>
+
<h4>Visit us Physically</h4>
 
+
<p>Lab Number 216, Research Complex Building<br>
<section id="ourTeam">
+
IISER Kolkata Campus<br>
 
+
Near Harringhata Farms<br>
</section>
+
Mohanpur, Dist: Nadia<br>
 
+
West Bengal, India-741246</p>
<section id="sponsors">
+
<h4>Visit us virtually</h4>
 
+
<a href="http://www.iiserkol.ac.in/" target="_blank">IISER Kolkata website</a>
</section>
+
</div>
 
+
<div id="contactRight">
<section id="reachUs">
+
<h4>Write to us</h4>
 
+
<a href="mailto:psray@iiserkol.ac.in">Dr. Partho Sarothi Ray (Primary PI)</a><br>
 +
<a href="mailto:arnab.gupta@iiserkol.ac.in">Dr. Arnab Gupta (Secondary PI)</a><br>
 +
<a href="mailto:ppr16ms055@iiserkol.ac.in">Paresh Rana (Team Leader)</a><br>
 +
<a href="mailto:team.igem@iiserkol.ac.in">Team iGEM IISER-Kolkata</a><br>
 +
<h4>Talk to us</h4>
 +
<p>Paresh Rana : +91-9078203201<br>
 +
Animish Nilesh Vaze : +91-9273101997</p>
 +
</div>
 +
<div id="social">
 +
<a class="links" id="socFacebook" href="https://www.facebook.com/iGEM.IISERK/" target="_blank">M</a>
 +
<a class="links" id="socTwitter" href="https://twitter.com/iGEM_IISERKol" target="_blank">N</a>
 +
</div>
 +
<div id="footer"><p>Website created by Pavan Vynatheya and Prajwal Padmanabha</p></div>
 
</section>
 
</section>
 
</div>
 
</div>
<script type="text/javascript">
 
$(window).on('resize',function() {
 
    location.reload();
 
});
 
 
$(window).on("load", function() {
 
    //navmenubar
 
    var sticky = $("#menubar").offset().top;
 
    $(window).scroll(function() {   
 
        if ($(window).scrollTop() > sticky) {
 
            $("#menubar").addClass("stickymenu");
 
        } else {
 
            $("#menubar").removeClass("stickymenu");
 
        }
 
    });
 
 
var homePos = $("#home").offset().top;
 
    var aboutUsPos = $("#aboutUs").offset().top;
 
    var eventsPos = $("#events").offset().top;
 
    var galleryPos = $("#gallery").offset().top;
 
    var ourTeamPos = $("#ourTeam").offset().top;
 
    var sponsorsPos = $("#sponsors").offset().top;
 
    var reachUsPos = $("#reachUs").offset().top;
 
 
    $(document).on("click", "#pagedown", function() {
 
$("body, html").animate({scrollTop: aboutUsPos}, 1000, "swing");
 
});
 
$(document).on("click", "#homeMenu", function() {
 
        $("body, html").animate({scrollTop: homePos}, 1000, "swing");
 
    });
 
    $(document).on("click", "#aboutUsMenu", function() {
 
        $("body, html").animate({scrollTop: aboutUsPos}, 1000, "swing");
 
    });
 
    $(document).on("click", "#eventsMenu", function() {
 
        $("body, html").animate({scrollTop: eventsPos}, 1000, "swing");
 
    });
 
    $(document).on("click", "#galleryMenu", function() {
 
        $("body, html").animate({scrollTop: galleryPos}, 1000, "swing");
 
    });
 
    $(document).on("click", "#ourTeamMenu", function() {
 
        $("body, html").animate({scrollTop: ourTeamPos}, 1000, "swing");
 
    });
 
    $(document).on("click", "#sponsorsMenu", function() {
 
        $("body, html").animate({scrollTop: sponsorsPos}, 1000, "swing");
 
    });
 
    $(document).on("click", "#reachUsMenu", function() {
 
        $("body, html").animate({scrollTop: reachUsPos}, 1000, "swing");
 
    }); 
 
 
    $(".pagelink#registerMenu").click(function() {
 
        $("#register").css("left","30vw");
 
        $("#login").css("left","-35vw");
 
    });
 
    $(".pagelink#loginMenu").click(function() {
 
        $("#login").css("left","35vw");
 
        $("#register").css("left","-45vw");
 
    });
 
    $("#register .exit").click(function() {
 
        $("#register").css("left","-45vw");
 
    });
 
    $("#login .exit").click(function() {
 
        $("#login").css("left","-35vw");
 
    });
 
 
    var halfHeight = window.innerHeight/2;
 
    $(window).scroll(function(){
 
        var windowPos = $(window).scrollTop() + 1;
 
        if (windowPos >= homePos && windowPos < aboutUsPos - halfHeight) {
 
            $(".pagelink").css("background-color","transparent");
 
            $(".pagelink").children().children().css("color","#bbbbbb");
 
            $(".pagelink#homeMenu").css("background-color","#bbbbbb");
 
            $(".pagelink#homeMenu div p").css("color","black");
 
        }
 
        else if (windowPos >= aboutUsPos - halfHeight && windowPos < eventsPos - halfHeight) {
 
            $(".pagelink").css("background-color","transparent");
 
            $(".pagelink").children().children().css("color","#bbbbbb");
 
            $(".pagelink#aboutUsMenu").css("background-color","#bbbbbb");
 
            $(".pagelink#aboutUsMenu div p").css("color","black");
 
        }
 
        else if (windowPos >= eventsPos - halfHeight && windowPos < galleryPos - halfHeight) {
 
            $(".pagelink").css("background-color","transparent");
 
            $(".pagelink").children().children().css("color","#bbbbbb");
 
            $(".pagelink#eventsMenu").css("background-color","#bbbbbb");
 
            $(".pagelink#eventsMenu div p").css("color","black");
 
        }
 
        else if (windowPos >= galleryPos - halfHeight && windowPos < ourTeamPos - halfHeight) {
 
            $(".pagelink").css("background-color","transparent");
 
            $(".pagelink").children().children().css("color","#bbbbbb");
 
            $(".pagelink#galleryMenu").css("background-color","#bbbbbb");
 
            $(".pagelink#galleryMenu div p").css("color","black");
 
        }
 
        else if (windowPos >= ourTeamPos - halfHeight && windowPos < sponsorsPos - halfHeight) {
 
            $(".pagelink").css("background-color","transparent");
 
            $(".pagelink").children().children().css("color","#bbbbbb");
 
            $(".pagelink#ourTeamMenu").css("background-color","#bbbbbb");
 
            $(".pagelink#ourTeamMenu div p").css("color","black");
 
        }
 
        else if (windowPos >= sponsorsPos - halfHeight && windowPos < reachUsPos - halfHeight) {
 
            $(".pagelink").css("background-color","transparent");
 
            $(".pagelink").children().children().css("color","#bbbbbb");
 
            $(".pagelink#sponsorsMenu").css("background-color","#bbbbbb");
 
            $(".pagelink#sponsorsMenu div p").css("color","black");
 
        }
 
        else if (windowPos >= reachUsPos - halfHeight) {
 
            $(".pagelink").css("background-color","transparent");
 
            $(".pagelink").children().children().css("color","#bbbbbb");
 
            $(".pagelink#reachUsMenu").css("background-color","#bbbbbb");
 
            $(".pagelink#reachUsMenu div p").css("color","black");
 
        }
 
    });
 
 
    //events page
 
    $("#events .tab").hover(function() {
 
        $(this).css("background-color","#000040");
 
        $(this).children(".tab-text").css("background-color","#000040");
 
        $(this).children(".tab-text").css("color","white");
 
        $(this).children(".tab-text").css("border","0.5vw solid white");
 
    }, function() {
 
        $(this).css("background-color","white");
 
        $(this).children(".tab-text").css("background-color","white");
 
        $(this).children(".tab-text").css("color","#000040");
 
        $(this).children(".tab-text").css("border","0.5vw solid #000040");
 
    });
 
    $("#events .tab").click(function() {
 
        $(".tab").css("display","none");
 
        var tabID = $(this).children().attr("id");
 
        $("#"+tabID+"-pop").css("left","0vw");
 
    });
 
    $(".pop .exit").click(function() {
 
        $(".tab").css("display","flex");
 
        $(this).parent().css("left","100vw");
 
    });
 
    $(".type-list").click(function() {
 
        var nextList = $(this);
 
        var currentList = $(this).siblings(".list-active");
 
        currentList.removeClass("list-active");
 
        nextList.addClass("list-active");
 
        var nextListId = nextList.attr("id");
 
        var currentListId = currentList.attr("id");
 
        var nextHead = $(this).parent().siblings(".event-desc").children(".event-head#"+nextListId+"-head");
 
        var currentHead = $(this).parent().siblings(".event-desc").children(".event-head#"+currentListId+"-head");
 
        currentHead.removeClass("head-active");
 
        nextHead.addClass("head-active");
 
        var nextRem = $(this).parent().siblings(".event-desc").children(".rem-events#"+nextListId+"-rem");
 
        var currentRem = $(this).parent().siblings(".event-desc").children(".rem-events#"+currentListId+"-rem");
 
        currentRem.removeClass("rem-active");
 
        nextRem.addClass("rem-active");
 
        var nextEventId = $(this).parent().siblings(".event-desc").children(".indiv-event."+nextListId+"-first").attr("id");
 
        var currentEventId = $(this).parent().siblings(".event-desc").children(".indiv-event.event-active").attr("id");
 
        var firstEventId = $(this).parent().siblings(".event-desc").children(".indiv-event."+currentListId+"-first").attr("id");
 
        $(".indiv-event#"+currentEventId).removeClass("event-active");
 
        $(".indiv-event#"+nextEventId).addClass("event-active");
 
        var nextIconId = nextEventId.replace(nextListId+"-","");
 
        var currentIconId = currentEventId.replace(currentListId+"-","");
 
        var firstIconId = firstEventId.replace(currentListId+"-","");
 
        if(firstIconId!=currentIconId)
 
        {
 
            $(".icon#"+currentIconId).removeClass("icon-active");
 
            $(".icon#"+firstIconId).addClass("icon-active");
 
        }
 
    });
 
    $(".rem-events .icon").click(function() {
 
        var nextIcon = $(this);
 
        var currentIcon = $(this).siblings(".icon-active");
 
        currentIcon.removeClass("icon-active");
 
        nextIcon.addClass("icon-active");
 
        var nextIconId = nextIcon.attr("id");
 
        var currentIconId = currentIcon.attr("id"); 
 
        var currentListId = $(this).parent().attr("id").replace("-rem","");
 
        $(".indiv-event#"+currentListId+"-"+currentIconId).removeClass("event-active");
 
        $(".indiv-event#"+currentListId+"-"+nextIconId).addClass("event-active");   
 
    });
 
});
 
 
$(document).ready(function() {
 
// Init ScrollMagic
 
var controller = new ScrollMagic.Controller();
 
 
var aboutUsAnim = new TimelineMax();
 
aboutUsAnim
 
.to('#sk1', 0.3, {left:"-7.5vw", opacity:1}, 0)
 
.to('#sk2', 0.3, {left:"91vw", opacity:1}, 0)
 
.to('#sk1', 0.3, {left:"-17.5vw", opacity:0.7}, "+=0.8")
 
.to('#sk2', 0.3, {left:"100vw", opacity:0.7}, "-=0.32");
 
 
//Pin each page
 
var pinAboutUs = new ScrollMagic.Scene({triggerElement: '#aboutUs', triggerHook: 0, duration: '100%'})
 
.setPin('#aboutUs', {pushFollowers: false})
 
.setTween(aboutUsAnim)
 
.addTo(controller);
 
 
var pinEvents = new ScrollMagic.Scene({triggerElement: '#events', triggerHook: 0, duration: '100%'})
 
.setPin('#events', {pushFollowers: false})
 
.addTo(controller);
 
 
var pinGallery = new ScrollMagic.Scene({triggerElement: '#gallery', triggerHook: 0, duration: '100%'})
 
.setPin('#gallery', {pushFollowers: false})
 
.addTo(controller);
 
 
var pinOurTeam = new ScrollMagic.Scene({triggerElement: '#ourTeam', triggerHook: 0, duration: '100%'})
 
.setPin('#ourTeam', {pushFollowers: false})
 
.addTo(controller);
 
 
var pinSponsors = new ScrollMagic.Scene({triggerElement: '#sponsors', triggerHook: 0, duration: '100%'})
 
.setPin('#sponsors', {pushFollowers: false})
 
.addTo(controller);
 
});
 
</script>
 
 
 
 
</html>
 
</html>

Latest revision as of 05:32, 24 November 2018

BacMan

A probiotic bacterial BATMAN to protect the citizens of Gotham from Arsenic Poisoning

Visit us Physically

Lab Number 216, Research Complex Building
IISER Kolkata Campus
Near Harringhata Farms
Mohanpur, Dist: Nadia
West Bengal, India-741246

Visit us virtually

IISER Kolkata website

Write to us

Dr. Partho Sarothi Ray (Primary PI)
Dr. Arnab Gupta (Secondary PI)
Paresh Rana (Team Leader)
Team iGEM IISER-Kolkata

Talk to us

Paresh Rana : +91-9078203201
Animish Nilesh Vaze : +91-9273101997

M N