|
|
| (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> |
