Difference between revisions of "Team:IISER Berhampur"

 
(33 intermediate revisions by 3 users not shown)
Line 2: Line 2:
  
 
<html>
 
<html>
−
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@700&display=swap" rel="stylesheet">
+
  <head>
−
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
    <title>Home-IISER Berhampur</title>
−
 
+
    <meta charset="utf-8">
−
 
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
−
<script>
+
  </head>
−
$(document).ready(function(){
+
  <body>
−
$('p:empty').css('display','none');
+
 
−
});
+
<style>
−
</script>
+
.homeimage{
−
 
+
   color:#111111;  
−
<style type="text/css">
+
−
 
+
−
Flash {
+
−
  font-family: 'Quicksand';font-size: 10vw;
+
−
   color: #E5F6F1;
+
−
  animation: color-change 1.5s infinite;
+
−
}
+
−
 
+
−
@keyframes color-change {
+
−
  0% { text-shadow: 0px 0px 12px red; }
+
−
  25% { text-shadow: 0px 0px 12px blue; }
+
−
  50% { text-shadow: 0px 0px 12px green; }
+
−
  75% { text-shadow: 0px 0px 12px yellow; }
+
−
  100% { text-shadow: 0px 0px 12px orange; }
+
−
 
+
−
}
+
−
.container {
+
−
  position: relative;
+
−
  text-align: center;
+
−
  color: white;
+
−
}
+
−
.container img
+
−
{ 
+
−
    position: relative;
+
−
    top:-7vw;
+
−
    height: 100%;
+
−
    width: 100%;
+
−
}
+
−
.centered {
+
 
   position: absolute;
 
   position: absolute;
−
   top: 7%;
+
   font-size: 1.5vw;
−
  left: 49.5%;
+
−
  transform: translate(-50%, -50%);
+
 
}
 
}
−
 
+
.homeimage img{
−
 
+
  width:30vw;
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/*UNIVERSAL STUFF FOR ALL PAGES*/
+
−
html {
+
−
    margin: 0;
+
−
    padding: 0;
+
−
    border: none;
+
−
}
+
−
.container {
+
−
  margin: 0 0 0 0;
+
−
  padding: 0 0 0 0;
+
−
  border: none;
+
 
}
 
}
  
−
body {
 
−
    background-color: #d2efe7;
 
−
    font-family: 'Quicksand', sans-serif;
 
−
    margin: 0 0 0 0;
 
−
    padding: 0 0 0 0;
 
−
    border: none;
 
−
    height: 4000px;
 
−
}
 
  
−
/* width */
+
.homebounce {
−
::-webkit-scrollbar {
+
    position:absolute;
−
  width: 12px;
+
    z-index:2;
 +
    left:45vw;
 +
    top:30vh;
 +
    padding-top:0px;
 +
    width:20vw;
 
}
 
}
−
 
+
@media screen and (max-width: 900px) {
−
/* Track */
+
   .homebounce{
−
::-webkit-scrollbar-track {
+
    top: 15vh;
−
   background: white;
+
   }
−
  margin-top: 0px;
+
−
   margin-bottom: 0px;
+
 
}
 
}
−
+
.homebounce div {
−
/* Handle */
+
    height:5vw;
−
::-webkit-scrollbar-thumb {
+
     width:5vw;
−
  background: #bfe9dd;  
+
     border-radius:50%;
−
}
+
−
 
+
−
/* Handle on hover */
+
−
::-webkit-scrollbar-thumb:hover {
+
−
  background: #86d5bf;
+
−
}
+
−
 
+
−
#top_title {
+
−
display: none;
+
−
margin-bottom: 0px;
+
−
 
+
−
}
+
−
 
+
−
#content {
+
−
margin: 0;
+
−
display: inline;
+
−
        padding: 0;
+
−
 
+
−
}
+
−
 
+
−
#globalWrapper {
+
−
padding: 0;
+
−
}
+
−
 
+
−
 
+
−
p {
+
−
margin: 0;
+
−
}
+
−
 
+
−
 
+
−
/*MAIN BODY CONTENT SECTION BEGINS*/
+
−
.content-section {
+
−
     margin: 0 0 0 0;
+
−
     padding: 3% 3% 5% 3%;
+
 
     background: black;
 
     background: black;
−
     line-height: 1.6;
+
     float:left;
−
      
+
     margin:0 3px;
 +
    background:#6859a3;
 
}
 
}
−
.PageTitle {
+
.homebounce .dot1 {
−
     font-size: 300%;
+
     z-index:1;
−
     text-align: center;
+
     background:blue;
−
     font-family: "Trebuchet MS";
+
     box-shadow: 0 0 0px 6vw rgba(0, 255, 255, 0.7);
−
}
+
    animation: bounce 3s infinite ease-in-out;
−
img {
+
−
    display: block;
+
−
    height: 50%;
+
−
    width: 50%;
+
−
    margin: auto;
+
−
   
+
−
}
+
−
 
+
−
.biggerImg img {
+
−
    height: 100%;
+
−
    width: 100%;
+
 
}
 
}
−
 
+
.homebounce .dot2 {
−
/*#navbar span img {
+
    background:yellow;
−
  display: block;
+
    box-shadow: 0 0 0px 100vw rgba(255, 255, 126, 0.7);
−
  height: 7.5%;
+
    animation: bounce2 3s infinite ease-in-out;
−
  width: 7.5%;
+
−
  float: left;
+
−
 
+
−
  padding: 0 0 0 3%;
+
−
}*/
+
−
 
+
−
#navbar img {
+
−
  display: inline-block;
+
−
  height: 5%;
+
−
  width: 5%;
+
−
  margin-left: 5px;
+
−
  margin-top: 5px;
+
 
}
 
}
  
−
#HQ_page p {
+
@keyframes bounce {
−
  font-size: 125%;
+
    0%{transform: translate(0,0);box-shadow: 0 0 0px 6vw rgba(0, 255, 255, 0.4);}
−
  text-align: center;
+
    50% {transform: translate(-20vw,0px);box-shadow: 0 0 0px 10vw rgba(0, 255, 255, 0.4);}
−
  font-family: "avenir";
+
    100% {transform: translate(0,0);box-shadow: 0 0 0px 6vw rgba(0, 255, 255, 0.4);};
−
  line-height: 27px;
+
 
}
 
}
−
 
+
@keyframes bounce2 {
−
#HQ_page h1, h2, h3, h4, h5 {
+
    0%{transform: translate(0,0); box-shadow: 0 0 0px 30vw rgba(255, 255, 126, 0.4);}
−
  font-family: "avenir";
+
    50% {transform: translate(20vw,0px);box-shadow: 0 0 0px 3vw rgba(255, 255, 126, 0.4);}
−
  text-align: center;
+
    100% {transform: translate(0,0);box-shadow: 0 0 0px 30vw rgba(255, 255, 126, 0.4);};
 
}
 
}
−
 
−
#HQ_page #navbar h1 {
 
−
  text-align: left;
 
−
  display: inline;
 
−
  vertical-align: middle;
 
−
  font-size: 3em;
 
−
}
 
−
 
−
table img {
 
−
  width: 150px;
 
−
  height: auto;
 
−
  float: left;
 
−
  display: inline-block;
 
−
  margin: 2% 4% 2% 0;
 
−
}
 
−
 
−
#HQ_page td {
 
−
    padding: 0;
 
−
    border: 0 solid black;
 
−
}
 
−
 
−
#HQ_page table {
 
−
    padding: 0;
 
−
    border: 0 solid black;
 
−
}
 
−
 
−
#HQ_page table p {
 
−
    text-align: left;
 
−
}
 
−
 
−
#HQ_page .leftSide p {
 
−
    text-align: left;
 
−
}
 
−
 
−
#HQ_page .leftSide h1, h2, h3, h4, h5 {
 
−
    text-align: left;
 
−
}
 
−
#HQ_page .leftSide img {
 
−
    display: block;
 
−
    width: 25%;
 
−
    height: auto;
 
−
    margin: 0 0 2.5% 0;
 
−
}
 
−
 
−
/*MAIN BODY CONTENT SECTION ENDS*/
 
−
 
−
 
−
 
−
/*MEDIA QUERIES BEGIN*/
 
−
@media screen and (max-width: 768px) {
 
−
  .content-section {
 
−
    margin: 0;
 
−
    padding: 12.5% 4% 5% 4%;
 
−
  }
 
−
 
−
  img {
 
−
      height: 85%;
 
−
      width: 85%;
 
−
  }
 
−
  #HQ_page p {
 
−
      font-size: 115%;
 
−
      line-height: 24px;
 
−
  }
 
−
 
−
 
−
#HQ_page .leftSide p {
 
−
    text-align: justify;
 
−
}
 
−
 
−
#HQ_page .leftSide h1, h2, h3, h4, h5 {
 
−
    text-align: justify;
 
−
}
 
−
 
−
 
−
}
 
−
/*MEDIA QUERIES END*/
 
−
 
−
 
 
</style>
 
</style>
−
<div class="container">
 
−
<!--DO NOT CHANGE ANY OF THIS BEGINS-->
 
−
<head>
 
−
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
−
<title>IISER-BPR IGEM</title>
 
−
<!--<link rel="stylesheet" type="text/css" href="stylesheet1.css">-->
 
−
</head>
 
−
<style>
 
  
−
#home_logo, #sideMenu, #sideMenu, #top_title, .patrollink {display:none;}
 
−
#content {margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 
−
body {background-color:white;}
 
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {margin-bottom: 0px;}
 
−
#bodyContent a[href ^="https://"], .link-https {padding-right:0px;}
 
  
−
body {
 
−
  margin: 0;
 
−
  font-family:font-family:courier,arial,helvetica;
 
−
}
 
  
−
.navbar {
 
−
  position:fixed;
 
−
  top:16px;
 
−
  width:100%;
 
−
  z-index:1;
 
−
  //overflow: hidden;
 
−
  background-color:#ace2d3;
 
−
}
 
  
−
.navbar a {
 
−
  float: left;
 
−
  display: block;
 
−
  color:#171717;
 
−
  text-align: center;
 
−
  padding: 14px 16px 14px 16px;
 
−
  text-decoration: none;
 
−
  font-size: 1.2em;
 
−
}
 
−
 
−
.topnav .icon {
 
−
  display: none;
 
−
}
 
−
 
−
.navbar a:hover {
 
−
  background-color: #D4D4D4;
 
−
  color: #171717;
 
−
}
 
  
−
.navbar a.active {
 
−
  background-color: #3B3B3B;
 
−
  color: #ffffff;
 
−
}
 
  
−
.navbar .icon {
 
−
  display: none;
 
−
}
 
−
 
−
.dropdown {
 
−
  float: left;
 
−
  overflow: hidden;
 
−
}
 
  
−
.dropdown .dropbtn {
 
−
  font-size: 1.2em; 
 
−
  border: none;
 
−
  outline: none;
 
−
  color: #171717;
 
−
  padding: 14px 16px;
 
−
  background-color: inherit;
 
−
  font-family: inherit;
 
−
  margin: 0px 0px 0px 0px;
 
−
}
 
  
−
.navbar a:hover, .dropdown:hover .dropbtn {
+
  <!--ANIMATION-->
−
  background-color: #D4D4D4 ;
+
    <div id="jiggle" style="z-index:1; background-size: cover; background-image:url(https://static.igem.org/mediawiki/2020/thumb/0/02/T--IISER_Berhampur--DenV.png/900px-T--IISER_Berhampur--DenV.png);height:0px;width:0px;position:absolute"></div>
−
}
+
    <script>
 +
      var $w = $(document);
 +
      var $d = $('#jiggle');
 +
      var scale;
 +
      $w.scroll(function(){
 +
        scale = $w.width()/1524;
 +
        console.log($w.scrollTop());
 +
        $d.css('transform',spin())
 +
        if($w.scrollTop()>(845+106.75)*scale){
 +
          $d.css('width',scale*250)
 +
          $d.css('height',scale*250)
 +
          $d.css('left',wiggle()+($w.width()/(30))-200*scale)
 +
        }
 +
        else{
 +
          $d.css('height',0)
 +
          $d.css('width',0) 
 +
          $d.css('left',wiggle()+($w.width()/(30))-$w.scrollTop()/(scale*10))
 +
        }
 +
        if($w.scrollTop()>scale*(7692.7998046875+106.75)){
 +
          $d.css('width',0)
 +
        }
 +
        else{
 +
          $d.css('top',($w.scrollTop())+150*scale)
 +
        }
 +
      });
 +
      function wiggle(){
 +
        return $w.width()/2 +Math.sin(($w.scrollTop())/(scale*309.5))*$w.width()/(8)
 +
      }
 +
      function spin(){
 +
        return 'rotate('+ $w.scrollTop() +'deg)'
 +
      }
 +
    </script>
 +
  <!--ANIMATION ENDS-->
  
−
.dropdown-content {
+
   <div class="container">
−
   display: none;
+
−
  position: absolute;
+
−
  background-color: #E9E9E9;
+
−
  min-width: 160px;
+
−
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
−
  z-index: 1;
+
−
}
+
  
−
.dropdown-content a {
+
<div class="homebounce">
−
  float: none;
+
    <div class="dot1"></div>
−
  color: #171717;
+
    <div class="dot2"></div>
−
  padding: 12px 16px 12px 16px;
+
</div>
−
  text-decoration: none;
+
−
  display: block;
+
−
  text-align: left;
+
−
}
+
  
−
.dropdown-content a:hover {
 
−
  background-color: #ddd;
 
−
}
 
  
−
.dropdown:hover .dropdown-content {
 
−
  display: block;
 
−
}
 
  
  
 +
    <img src="https://static.igem.org/mediawiki/2020/2/2d/T--IISER_Berhampur--Homepage.png" alt="Project" class="responsive">
 +
    <div class="centered">
  
−
@media screen and (max-width: 600px) {
 
−
  .navbar a:not(:first-child), .dropdown .dropbtn {
 
−
    display: none;
 
−
  }
 
−
  .navbar a.icon {
 
−
    float: right;
 
−
    display: block;
 
−
  }
 
−
}
 
  
−
@media screen and (max-width: 600px) {
+
      <Flash style="animation-duration: 4s;">F</Flash><Flash style="animation-duration: 5s;">R</Flash><Flash style="animation-duration: 6s;">a</Flash><Flash style="animation-duration: 7s;">P</Flash><Flash style="animation-duration: 8s;">P</Flash><Flash style="animation-duration: 9s;">e</Flash><br><br>
−
  .navbar.responsive {position: fixed; overflow:auto;}
+
      <Flash style="animation-duration: 9.5s;font-size: 2vw;">FRET based Ranker for Proteins and Peptides</Flash>
−
  .navbar.responsive a.icon {
+
     </div>
−
    position: absolute;
+
−
    right: 0;
+
−
    top: 0;
+
−
  }
+
−
  .navbar.responsive a {
+
−
    float: none;
+
−
    display: block;
+
−
    text-align: left;
+
−
  }
+
−
  .navbar.responsive .dropdown {float: none;}
+
−
  .navbar.responsive .dropdown-content {position: relative;}
+
−
  .navbar.responsive .dropdown .dropbtn {
+
−
    display: block;
+
−
    width: 100%;
+
−
     text-align: left;
+
−
  }
+
−
}
+
  
−
#navright{
+
   
−
  float:right;
+
    <div class="homeimage" style="top: 18%;right: 8vw; text-align: right;"><img src="https://static.igem.org/mediawiki/2020/b/b1/T--IISER_Berhampur--_home101.gif" style="mix-blend-mode: multiply;" alt="Project">
−
  font-family:"Quicksand";
+
      <p style="width:40vw;line-height: normal;text-align: right;">This is our antagonist : the dreaded Dengue Virus or DENV, a Flavivirus that causes Dengue fever and is carried by the Aedes mosquito. Dengue fever, though normally not that harmful, can sometimes progress to Dengue Shock Syndrome which can cost lives all around the world. </p>
−
  font-size: 24px;
+
−
  margin-right:10px
+
−
}
+
−
</style>
+
−
</head>
+
−
 
+
−
<body>
+
−
<div class="navbar" id="myNavbar">
+
−
<a href="https://2020.igem.org/Team:IISER_Berhampur">Home</a>
+
−
  <div class="dropdown">
+
−
    <button class="dropbtn">Project&#9660;</button>
+
−
    <div class="dropdown-content">
+
−
<a href="https://2020.igem.org/Team:IISER_Berhampur/Contribution">Contribution</a>     
+
−
<a href="https://2020.igem.org/Team:IISER_Berhampur/Description">Description</a>
+
−
      <a href="https://2020.igem.org/Team:IISER_Berhampur/Design">Design</a>
+
−
  <a href="https://2020.igem.org/Team:IISER_Berhampur/Engineering">Engineering</a>
+
−
          <a href="https://2020.igem.org/Team:IISER_Berhampur/Experiments">Experiments</a>
+
−
          <a href="https://2020.igem.org/Team:IISER_Berhampur/Notebook">Notebook</a>
+
−
        <a href="https://2020.igem.org/Team:IISER_Berhampur/Partnership">Partnership</a>
+
−
        <a href="https://2020.igem.org/Team:IISER_Berhampur/Proof_of_concepts">Proof Of Concepts</a>
+
−
        <a href="https://2020.igem.org/Team:IISER_Berhampur/Results">Results</a>
+
 
     </div>
 
     </div>
−
  </div>
+
    <div class="homeimage" style="top: 27%;left: 8vw;text-align: left;"><img src="https://static.igem.org/mediawiki/2020/d/d5/T--IISER_Berhampur--graph2.gif" alt="Project">
−
<div class="dropdown">
+
      <p style="width:40vw;line-height: normal;text-align: left;">It has been spreading rapidly over the years and its incidence has increased almost 30 times over the last 50 years, with 390 million infections occurring annually around the world. This virus has now reached 129 countries and has put nearly half the world population at risk.
−
    <button class="dropbtn">Team&#9660;</button>
+
</p></div>
−
    <div class="dropdown-content">
+
    <div class="homeimage" style="top: 35%;left: 8vw;text-align: left;"><img src="https://static.igem.org/mediawiki/2020/2/2f/T--IISER_Berhampur--countriesinf.gif" alt="Project"></div>
−
      <a href="https://2020.igem.org/Team:IISER_Berhampur/Team">Team</a>
+
−
  <a href="https://2020.igem.org/Team:IISER_Berhampur/Collaborations">Collaborations</a>
+
−
          <a href="https://2020.igem.org/Team:IISER_Berhampur/Attributions">Attributions</a>
+
−
          <a href="https://2020.igem.org/Team:IISER_Berhampur/Inclusion">Inclusion</a>
+
 
     </div>
 
     </div>
−
  </div>
+
    <div class="homeimage" style="top: 40%;right: 7vw; text-align: right;"><img src="https://static.igem.org/mediawiki/2020/d/dc/T--IISER_Berhampur--capsule2.gif" alt="Project">
−
      <div class="dropdown">
+
      <p style="width:40vw;line-height: normal;text-align: right;">What’s worse is that there are still no viable antiviral drugs or vaccines in action against it. With drug development for such a major disease, usually taking more than 9 years, we came up with a research tool to assist researchers in speeding up the drug discovery process.
−
    <button class="dropbtn">Parts&#9660;</button>
+
</p>
−
     <div class="dropdown-content">
+
    </div>
−
      <a href="https://2020.igem.org/Team:IISER_Berhampur/Part_Collection">Part Collection</a>
+
     <div class="homeimage" style="top: 52%;left: 6vw;text-align: left;"><img src="https://static.igem.org/mediawiki/2020/d/dc/T--IISER_Berhampur--reporter2.gif" style="width:40vw;" alt="Project">
−
  <a href="https://2020.igem.org/Team:IISER_Berhampur/Parts">Parts</a>
+
      <p style="width:40vw;line-height: normal;text-align: left;">This brings us to our project, FRaPPe : A FRET based Ranker for Proteins and Peptides, which will use molecular biology tools assembled using Synthetic Biology principles. It will be a fast, cost-effective and high-throughput solution to screen drugs.
−
          <a href="https://2020.igem.org/Team:IISER_Berhampur/Improve">Improvement</a>
+
</p>
 +
    </div>
 +
    <div class="homeimage" style="top: 65%;right: 8vw; text-align: right;"><img src="https://static.igem.org/mediawiki/2020/e/ed/T--IISER_Berhampur--pepy.gif" style="width:40vw;" alt="Project">
 +
      <p style="width:40vw;line-height: normal;text-align: right;">Peptide drugs are our inhibitors of choice to inhibit the DENV and host protein interactions. Our FRaPPe system, when cloned and transfected in a mammalian cell line, will report which peptides work the best in interrupting the host-virus PPIs.
 +
</p>
 +
    </div>
 +
    <div class="homeimage" style="top: 75%; left: 8vw;text-align: left;"><img src="https://static.igem.org/mediawiki/2020/f/f1/T--IISER_Berhampur--Versatile.gif" alt="Project">
 +
      <p style="width:40vw;line-height: normal;text-align: left;">This versatile system can then be extended to any two interacting proteins and will not just help in ending the Dengue scourge, but also will prove to be an essential asset in the research of many other infectious diseases!
 +
</p>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
−
<a href="https://2020.igem.org/Team:IISER_Berhampur/Human_Practices">Human Practices</a>
 
−
        <a href="https://2020.igem.org/Team:IISER_Berhampur/Safety">Safety</a>
 
−
  <a href="javascript:void(0);" class="icon" onclick="myNavbarResponsive()">&#9776;</a>
 
−
<a href="https://2020.igem.org/Team:IISER_Berhampur/Awards">Awards</a>
 
−
  <div id="navright">
 
−
            <a href="https://2020.igem.org/Team:IISER_Berhampur">IISER Berhampur</a>
 
−
  </div>
 
−
</div>
 
  
−
<script>
 
−
function myNavbarResponsive() {
 
−
  var x = document.getElementById("myNavbar");
 
−
  if (x.className === "navbar") {
 
−
    x.className += " responsive";
 
−
  } else {
 
−
    x.className = "navbar";
 
−
  }
 
−
}
 
−
 
−
</script>
 
 
</body>
 
</body>
 +
</html>
  
−
 
+
{{IISER_Berhampur/footer}}
−
 
+
−
 
+
−
<style>
+
−
#home_logo, #sideMenu, #sideMenu, #top_title, .patrollink {display:none;}
+
−
#content {margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
−
body {background-color:#d2efe7;}
+
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {margin-bottom: 0px;}
+
−
#bodyContent a[href ^="https://"], .link-https {padding-right:0px;}
+
−
</style>
+
−
 
+
−
<style>
+
−
  .responsive {
+
−
  width: 100%;
+
−
  height: 550px;
+
−
  } 
+
−
</style>
+
−
 
+
−
<head>
+
−
        <title>Home-IISER Berhampur</title>
+
−
<meta charset="utf-8">
+
−
        <meta name="viewport" content="width=device-width, initial-scale=1">
+
−
+
−
</head>
+
−
 
+
−
<body>
+
−
 
+
−
<!--ANIMATION-->
+
−
<div id="jiggle" style="z-index:1; background-size: cover; background-image:url(https://static.igem.org/mediawiki/2020/thumb/0/02/T--IISER_Berhampur--DenV.png/900px-T--IISER_Berhampur--DenV.png);height:0px;width:0px;position:absolute"></div>
+
−
<script>
+
−
var $w = $(document);
+
−
var $d = $('#jiggle');
+
−
var scale = $w.width()/1524;
+
−
$w.scroll(function(){
+
−
  console.log($w.scrollTop());
+
−
  $d.css('transform',spin())
+
−
  if($w.scrollTop()>(845+106.75)*scale){
+
−
    $d.css('width',scale*250)
+
−
    $d.css('height',scale*250)
+
−
    $d.css('left',wiggle()+($w.width()/(30))-200*scale)
+
−
  }
+
−
  else{
+
−
    $d.css('height',0)
+
−
    $d.css('width',0) 
+
−
    $d.css('left',wiggle()+($w.width()/(30))-$w.scrollTop()/(scale*10))
+
−
  }
+
−
  if($w.scrollTop()>scale*(7692.7998046875+106.75)){
+
−
    $d.css('width',0)
+
−
  }
+
−
  else{
+
−
    $d.css('top',($w.scrollTop())+150*scale)
+
−
  }
+
−
 
+
−
});
+
−
function wiggle(){
+
−
  return $w.width()/2 +Math.sin(($w.scrollTop())/(scale*309.5))*$w.width()/(8)
+
−
}
+
−
function spin(){
+
−
  return 'rotate('+ $w.scrollTop() +'deg)'
+
−
}
+
−
</script>
+
−
<!--ANIMATION ENDS-->
+
−
 
+
−
 
+
−
<div class="container">
+
−
 
+
−
<img src="https://static.igem.org/mediawiki/2020/d/d3/T--IISER_Berhampur--HomeF.png" alt="Project" class="responsive">
+
−
<div class="centered">
+
−
<Flash>F</Flash><Flash style="animation-delay:-0.25s;">R</Flash><Flash style="animation-delay:-0.5s;">a</Flash><Flash style="animation-delay:-0.75s;">P</Flash><Flash style="animation-delay:-1s;">P</Flash><Flash style="animation-delay:-1.25s;">e</Flash>
+
−
<p style="color:#ffdb58;font-family: 'Quicksand';font-size: 2vw; text-shadow: 0px 0px 10px white;"><br>FRET based Ranker for Proteins and Peptides</p>
+
−
</div>
+
−
</div>
+
−
<title>Footer</title>
+
−
 
+
−
<style>
+
−
 
+
−
 
+
−
footer{
+
−
position: fixed;
+
−
bottom: 0;
+
−
}
+
−
 
+
−
@media (max-height:800px){
+
−
footer { position: static; }
+
−
header { padding-top:40px; }
+
−
}
+
−
 
+
−
 
+
−
.footer-distributed{
+
−
background-color: #2c292f;
+
−
box-sizing: border-box;
+
−
width: 100%;
+
−
text-align: left;
+
−
font: bold 16px sans-serif;
+
−
padding: 50px 50px 60px 50px;
+
−
margin-top: 80px;
+
−
}
+
−
 
+
−
.footer-distributed .footer-left,
+
−
.footer-distributed .footer-center,
+
−
.footer-distributed .footer-right{
+
−
display: inline-block;
+
−
vertical-align: top;
+
−
}
+
−
 
+
−
/* Footer left */
+
−
 
+
−
.footer-distributed .footer-left{
+
−
width: 30%;
+
−
}
+
−
 
+
−
.footer-distributed h3{
+
−
color:  #ffffff;
+
−
font: normal 36px 'Cookie', cursive;
+
−
margin: 0;
+
−
}
+
−
 
+
−
/* The company logo */
+
−
 
+
−
.footer-distributed .footer-left img{
+
−
width: 30%;
+
−
}
+
−
 
+
−
.footer-distributed h3 span{
+
−
color:  #e0ac1c;
+
−
}
+
−
 
+
−
/* Footer links */
+
−
 
+
−
.footer-distributed .footer-links{
+
−
color:  #ffffff;
+
−
margin: 20px 0 12px;
+
−
}
+
−
 
+
−
.footer-distributed .footer-links a{
+
−
display:inline-block;
+
−
line-height: 1.8;
+
−
text-decoration: none;
+
−
color:  inherit;
+
−
}
+
−
 
+
−
.footer-distributed .footer-company-name{
+
−
color:  #8f9296;
+
−
font-size: 14px;
+
−
font-weight: normal;
+
−
}
+
−
 
+
−
/* Footer Center */
+
−
 
+
−
.footer-distributed .footer-center{
+
−
width: 35%;
+
−
}
+
−
 
+
−
 
+
−
.footer-distributed .footer-center i{
+
−
background-color:  #33383b;
+
−
color: #ffffff;
+
−
font-size: 25px;
+
−
width: 38px;
+
−
height: 38px;
+
−
border-radius: 50%;
+
−
text-align: center;
+
−
line-height: 42px;
+
−
margin: 10px 15px;
+
−
vertical-align: middle;
+
−
}
+
−
 
+
−
.footer-distributed .footer-center i.fa-envelope{
+
−
font-size: 17px;
+
−
line-height: 38px;
+
−
}
+
−
 
+
−
.footer-distributed .footer-center p{
+
−
display: inline-block;
+
−
color: #ffffff;
+
−
vertical-align: middle;
+
−
margin:0;
+
−
}
+
−
 
+
−
.footer-distributed .footer-center p span{
+
−
display:block;
+
−
font-weight: normal;
+
−
font-size:14px;
+
−
line-height:2;
+
−
}
+
−
 
+
−
.footer-distributed .footer-center p a{
+
−
color:  #e0ac1c;
+
−
text-decoration: none;;
+
−
}
+
−
 
+
−
 
+
−
/* Footer Right */
+
−
 
+
−
.footer-distributed .footer-right{
+
−
width: 30%;
+
−
}
+
−
 
+
−
.footer-distributed .footer-company-about{
+
−
line-height: 20px;
+
−
color:  #92999f;
+
−
font-size: 13px;
+
−
font-weight: normal;
+
−
margin: 0;
+
−
}
+
−
 
+
−
.footer-distributed .footer-company-about span{
+
−
display: block;
+
−
color:  #ffffff;
+
−
font-size: 18px;
+
−
font-weight: bold;
+
−
margin-bottom: 20px;
+
−
}
+
−
 
+
−
.footer-distributed .footer-icons{
+
−
margin-top: 25px;
+
−
}
+
−
 
+
−
.footer-distributed .footer-icons a{
+
−
display: inline-block;
+
−
width: 35px;
+
−
height: 35px;
+
−
cursor: pointer;
+
−
background-color:  #33383b;
+
−
border-radius: 2px;
+
−
 
+
−
font-size: 20px;
+
−
color: #ffffff;
+
−
text-align: center;
+
−
line-height: 35px;
+
−
 
+
−
margin-right: 3px;
+
−
margin-bottom: 5px;
+
−
}
+
−
 
+
−
Why this happens?
+
−
 
+
−
img is an inline element and inline elements flows like text. The small whitespace is due to this. Possible solutions:
+
−
 
+
−
Change the display from inline to other - add display: block for instance
+
−
 
+
−
Change the vertical-align property to top (default is baseline)
+
−
 
+
−
Shrink the text size to 0 by font-size: 0 on the containing block of the inline element.
+
−
 
+
−
Example
+
−
 
+
−
Add vertical-align: top to all the three images - see updated fiddle here and snippet below:
+
−
 
+
−
#image-1 img,
+
−
#image-2 img,
+
−
#image-3 img {
+
−
  background-color: #00f;
+
−
  vertical-align: top;
+
−
}
+
−
.image-1,
+
−
.image-2,
+
−
image-3 {
+
−
  display: block;
+
−
}
+
−
.Wrapper {
+
−
  vertical-align: middle;
+
−
  display: block;
+
−
}
+
−
 
+
−
/* Here is the code for Responsive Footer */
+
−
/* You can remove below code if you don't want Footer to be responsive */
+
−
 
+
−
 
+
−
@media (max-width: 880px) {
+
−
 
+
−
.footer-distributed .footer-left,
+
−
.footer-distributed .footer-center,
+
−
.footer-distributed .footer-right{
+
−
display: block;
+
−
width: 100%;
+
−
margin-bottom: 40px;
+
−
text-align: center;
+
−
}
+
−
 
+
−
.footer-distributed .footer-center i{
+
−
margin-left: 0;
+
−
}
+
−
 
+
−
}
+
−
 
+
−
</style>
+
−
 
+
−
<footer class="footer-distributed">
+
−
 
+
−
<div class="footer-left">
+
−
                               
+
−
<h3>IISER<span>Berhampur</span></h3>
+
−
                                <div class="footer-icons">
+
−
<a href="https://www.facebook.com/igem.iiserbpr/"><i class="fa fa-facebook"></i></a>
+
−
<a href="https://twitter.com/igem_iiserbpr?lang=en"><i class="fa fa-twitter"></i></a>
+
−
<a href="https://www.instagram.com/igem.iiserbpr/"><i class="fa fa-instagram"></i></a>
+
−
<a href="https://www.youtube.com/channel/UCQ72pLMqGFVBqjID6uasMWg?app=desktop"><i class="fa fa-youtube"></i></a>
+
−
</div>
+
−
                                <br><br>
+
−
<p class="footer-company-name">© 2020 Frappe IISER Berhampur</p>
+
−
                             
+
−
</div>
+
−
 
+
−
<div class="footer-center">
+
−
<div>
+
−
<i class="fa fa-map-marker"></i>
+
−
  <p>IISER Transit Campus,<br>
+
−
Engineering School Junction,<br>
+
−
Berhampur, Odisha (760010), India<br>
+
−
                                                +91 xxxxxxxxxx
+
−
                                          </p>
+
−
</div>
+
−
 
+
−
<div>
+
−
<i class="fa fa-envelope"></i>
+
−
<p><a href="mailto:igem2020@iiserbpr.ac.in">igem2020@iiserbpr.ac.in</a></p>
+
−
</div>
+
−
</div>
+
−
<div class="footer-right">
+
−
<p class="footer-company-about">
+
−
<span>About Us</span>
+
−
We are a curious blend basic science undergraduate students hailing from diverse disciplines from Indian Institute of Science Education and Research (IISER), Berhampur. This year marks our maiden venture in iGEM. Stepping into the arena of Synthetic biology has been no less exhilarating for us than when a child discovers their hidden passion. With the hope that our efforts bear fruit, this venture can be testament to the potential we can nurture for years to come.. </p>
+
−
</div>
+
−
</footer>
+
−
 
+
−
</body>
+
−
 
+
−
</html>
+

Latest revision as of 07:26, 26 October 2020

IISER-BPR IGEM

Home-IISER Berhampur

Project
FRaPPe

FRET based Ranker for Proteins and Peptides
Project

This is our antagonist : the dreaded Dengue Virus or DENV, a Flavivirus that causes Dengue fever and is carried by the Aedes mosquito. Dengue fever, though normally not that harmful, can sometimes progress to Dengue Shock Syndrome which can cost lives all around the world.

Project

It has been spreading rapidly over the years and its incidence has increased almost 30 times over the last 50 years, with 390 million infections occurring annually around the world. This virus has now reached 129 countries and has put nearly half the world population at risk.

Project
Project

What’s worse is that there are still no viable antiviral drugs or vaccines in action against it. With drug development for such a major disease, usually taking more than 9 years, we came up with a research tool to assist researchers in speeding up the drug discovery process.

Project

This brings us to our project, FRaPPe : A FRET based Ranker for Proteins and Peptides, which will use molecular biology tools assembled using Synthetic Biology principles. It will be a fast, cost-effective and high-throughput solution to screen drugs.

Project

Peptide drugs are our inhibitors of choice to inhibit the DENV and host protein interactions. Our FRaPPe system, when cloned and transfected in a mammalian cell line, will report which peptides work the best in interrupting the host-virus PPIs.

Project

This versatile system can then be extended to any two interacting proteins and will not just help in ending the Dengue scourge, but also will prove to be an essential asset in the research of many other infectious diseases!

©iGEM IISER Berhampur