Difference between revisions of "Team:BostonU"

Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
−
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
+
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
−
<style>
+
<style>
−
body {
+
body {
−
background: url("https://static.igem.org/mediawiki/2017/d/dc/T--BostonU--LandingPageBG.jpg") no-repeat center center fixed;
+
background: url("https://static.igem.org/mediawiki/2017/d/dc/T--BostonU--LandingPageBG.jpg") no-repeat center center fixed;
−
-webkit-background-size: cover;
+
-webkit-background-size: cover;
−
-moz-background-size: cover;
+
-moz-background-size: cover;
−
-o-background-size: cover;
+
-o-background-size: cover;
−
background-size: cover;
+
background-size: cover;
−
z-index: -100;
+
z-index: -100;
−
}
+
}
−
#mybody {
+
#mybody {
−
opacity: 0.0;
+
opacity: 0.0;
−
background-color:#f8f9f9;
+
background-color: #f8f9f9;
−
position:absolute;
+
position: absolute;
−
width:100%;
+
width: 100%;
−
height:100%;
+
height: 100%;
−
top: 0;
+
top: 0;
−
left: 0;
+
left: 0;
−
z-index: -1;
+
z-index: -1;
−
}
+
}
−
.wordmark img {
+
.wordmark img {
−
margin-top: 4.4%;
+
margin-top: 4.4%;
−
margin-left: 5%;
+
margin-left: 5%;
−
width: 300px;
+
width: 300px;
−
}
+
}
−
#mainwrap {
+
#mainwrap {
−
margin: 0 auto;
+
margin: 0 auto;
−
height: 100% !important;
+
height: 100% !important;
−
}
+
}
−
#menubartable { /* MASTER MENU TABLE */
+
#menubartable { /* MASTER MENU TABLE */
−
border: 0;
+
border: 0;
−
list-style-type: none;
+
list-style-type: none;
−
margin-top: 5%;
+
margin-top: 5%;
−
margin-right: 5%;
+
margin-right: 5%;
−
padding: 0;
+
padding: 0;
−
position: relative;
+
position: relative;
−
float: right;
+
float: right;
−
white-space: nowrap;
+
white-space: nowrap;
−
width: 0 auto !important;
+
width: 0 auto !important;
−
}
+
}
−
#menubartable li {
+
#menubartable li {
−
display: table-cell;
+
display: table-cell;
−
}
+
}
−
li .menuitem, .dropbtn { /* MAIN MENU BUTTONS */
+
li .menuitem, .dropbtn { /* MAIN MENU BUTTONS */
−
color: #f8f9f9 !important;
+
color: #f8f9f9 !important;
−
display: table-cell;
+
display: table-cell;
−
padding: 5px 18px;
+
padding: 5px 18px;
−
font-family: Arial, sans-serif;
+
font-family: Arial, sans-serif;
−
font-size: 120%;
+
font-size: 120%;
−
text-align: center;
+
text-align: center;
−
text-decoration: none !important;
+
text-decoration: none !important;
−
text-transform: uppercase;
+
text-transform: uppercase;
−
font-weight: bold;
+
font-weight: bold;
−
vertical-align: middle;
+
vertical-align: middle;
−
}
+
}
−
  .dropbtn {
+
.dropbtn {
−
    position: relative;
+
position: relative;
−
  }
+
}
−
.dropdown-content { /* DROP DOWN MENU CONTAINERS */
+
.dropdown-content { /* DROP DOWN MENU CONTAINERS */
−
display: none;
+
display: none;
−
position: absolute;
+
position: absolute;
−
z-index: 1;
+
z-index: 1;
−
}
+
}
−
.dropdown-content .menuitem { /* RAIN DROP ... DROP DOWN */
+
.dropdown-content .menuitem { /* RAIN DROP ... DROP DOWN */
−
color: #f8f9f9;
+
color: #f8f9f9;
−
display: block;
+
display: block;
−
padding: 5px 18px;
+
padding: 5px 18px;
−
text-align: left;
+
text-align: left;
−
text-decoration: none;
+
text-decoration: none;
−
}
+
}
−
#myfooter {
+
#myfooter {
−
position: absolute;
+
position: absolute;
−
bottom: 0pt;
+
bottom: 0pt;
−
width:100%;
+
width: 100%;
−
height:15%;  /* Height of the footer */
+
height: 15%;  /* Height of the footer */
−
text-align: center;
+
text-align: center;
−
font-family: Arial, sans-serif;
+
font-family: Arial, sans-serif;
−
font-size: 120%;
+
font-size: 120%;
−
text-align: center;
+
text-align: center;
−
text-decoration: none !important;
+
text-decoration: none !important;
−
text-transform: uppercase;
+
text-transform: uppercase;
−
font-weight: bold;
+
font-weight: bold;
−
}
+
}
−
#myfooterL {
+
#myfooterL {
 +
position: relative;
 +
float: left;
 +
width: 45%;
 +
height: 50%;
 +
text-align: left;
 +
padding-left: 5%;
 +
vertical-align: middle;
 +
}
 +
#myfooterR {
 +
position: relative;
 +
float: right;
 +
width: 45%;
 +
height: 50%;
 +
text-align: right;
 +
padding-right: 5%;
 +
}
 +
#myfooterC {
 +
position: relative;
 +
float: top;
 +
width: 100%;
 +
height: 50%;
 +
text-align: center !important;
 +
}
 +
#myfooter a {
 +
vertical-align: center;
 +
color: #f8f9f9 !important;
 +
text-decoration: none !important;
 +
}
 +
#myfooterR img {
 +
height: 20px;
 +
padding: 0 10px;
 +
vertical-align: middle;
 +
}
 +
#myfooterR a {
 +
padding: 0 22px;
 +
vertical-align: middle;
 +
}
 +
.fade-in-div {
 +
width: 100%;
 +
height: 100%;
 +
bottom: 0;
 +
background: none;
 +
border: none;
 +
position: absolute;
 +
width: 100%;
 +
display: none;
 +
z-index: 1;
 +
}
 +
#fade-in-wrapper {
 +
position: absolute;
 +
width: 70%;
 +
max-height: 100%;
 +
margin: 0 15%;
 +
margin-top: 10%;
 +
}
 +
#fade-in-wrapper p {
 +
font-family: Arial, sans-serif;
 +
font-size: 100%;
 +
text-decoration: none !important;
 +
color: #1d1d1d;
 +
line-height: 2;
 +
position: relative;
 +
overflow: hidden;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
#fade-in-footer {
 +
position: absolute;
 +
bottom: 0pt;
 +
width: 100%;
 +
height: 15%;  /* Height of the footer */
 +
}
 +
#fade-in-footer a {
 +
text-align: center;
 +
font-family: Arial, sans-serif;
 +
font-size: 120%;
 +
text-decoration: none !important;
 +
text-transform: uppercase;
 +
font-weight: bold;
 +
color: #610B0C !important;
 +
}
 +
.fade-in-div-2 {
 +
width: 100%;
 +
height: 100%;
 +
bottom: 0;
 +
border: none;
 +
position: absolute;
 +
width: 100%;
 +
display: none;
 +
}
 +
#gallery-tab {
 +
background: #f8f9f9;
 +
position: absolute;
 +
height: 20%;
 +
width: 100%;
 +
bottom: 0;
 +
opacity: 0.6;
 +
}
 +
#gallery-tab a {
 +
text-align: center;
 +
font-family: Arial, sans-serif;
 +
font-size: 120%;
 +
text-decoration: none !important;
 +
color: black;
 +
padding-left: 40%;
 +
top: 10px;
 +
}
 +
/* ANIMATIONS */
  
−
position: relative;
+
.menu-column:hover .dropdown-content {
−
float: left;
+
display: block;
−
width:45%;
+
}
−
height:50%;
+
.dropbtn:hover {
−
text-align: left;
+
}
−
padding-left: 5%;
+
.dropdown-content a:hover {
−
vertical-align: middle;
+
}
−
}
+
.link-slideup {
−
#myfooterR {
+
position: relative;
−
position: relative;
+
overflow: hidden;
−
float: right;
+
-webkit-backface-visibility: hidden;
−
width:45%;
+
backface-visibility: hidden;
−
height:50%;
+
}
−
text-align: right;
+
.link-slideup a {
−
padding-right: 5%;
+
position: relative;
−
}
+
display: inline-block;
−
#myfooterC {
+
outline: none;
−
position: relative;
+
color: #610b0c;
−
float: top;
+
vertical-align: bottom;
−
width:100%;
+
text-decoration: none;
−
height: 50%;
+
white-space: nowrap;
−
text-align: center;
+
}
−
}
+
.link-slideup a::before, .link-slideup a::after {
−
#myfooter a {
+
pointer-events: none;
−
vertical-align: center;
+
-webkit-backface-visibility: hidden;
−
    color: #f8f9f9 !important;
+
backface-visibility: hidden;
−
    text-decoration: none !important;
+
-webkit-font-smoothing: antialiased;
−
}
+
font-smoothing: antialiased;
−
#myfooterR img {
+
}
−
height: 20px;
+
.link-slideup a {
−
padding: 0 10px;
+
overflow: hidden;
−
vertical-align: middle;
+
font-weight: 500;
−
}
+
}
−
  #myfooterR a {
+
.link-slideup a::before {
−
    padding: 0 22px;
+
position: absolute;
−
    vertical-align: middle;
+
top: 0;
−
  }
+
left: 0;
−
.slide-up-div {
+
z-index: -1;
−
width: 100%;
+
width: 100%;
−
height: 100%;
+
height: 100%;
−
bottom: 0;
+
background-color: #a9a9a9;
−
background: none;
+
opacity: 0.75;
−
border: none;
+
content: '';
−
position: absolute;
+
-webkit-transition: -webkit-transform 0.2s;
−
width:100%;
+
transition: transform 0.2s;
−
font-size: 120%;
+
-webkit-transform: translateY(95%);
−
font-family: Arial, sans-serif;
+
transform: translateY(95%);
−
text-decoration: none !important;
+
}
−
display: none;
+
.link-slideup a:hover::before, .link-slideup a:focus::before {
−
z-index: 1;
+
-webkit-transform: translateY(0);
−
}
+
transform: translateY(0);
−
  #slide-up-wrapper {
+
}
−
    position: absolute;
+
</style>
−
    width: 70%;
+
−
    max-height: 100%;
+
−
    margin: 0 15%;
+
−
    margin-top: 10%;
+
−
  }
+
−
  #slide-up-wrapper p {
+
−
    font-family: Arial, sans-serif;
+
−
    font-size: 100%;
+
−
    text-decoration: none !important;
+
−
    color: #1d1d1d;
+
−
    line-height: 2;
+
−
    position: relative;
+
−
    overflow: hidden;
+
−
    -webkit-backface-visibility: hidden;
+
−
    backface-visibility: hidden;
+
−
  }
+
−
  #slide-up-footer {
+
−
    position: absolute;
+
−
    bottom: 0pt;
+
−
    width:100%;
+
−
    height:15%;  /* Height of the footer */
+
−
  }
+
−
  #slide-up-footer div {
+
−
    position: relative;
+
−
width:100%;
+
−
height: 50%;
+
−
    text-align: center;
+
−
  }
+
−
  #slide-up-footer a {
+
−
    text-align: center;
+
−
    font-family: Arial, sans-serif;
+
−
    font-size: 120%;
+
−
    text-decoration: none !important;
+
−
    text-transform: uppercase;
+
−
    font-weight: bold;
+
−
    color: #610B0C !important;
+
−
  }
+
−
/* ANIMATIONS */
+
−
.menu-column:hover .dropdown-content {display: block;}
+
−
    .dropbtn:hover {}
+
−
    .dropdown-content a:hover {}
+
−
 
+
−
      .link-slideup {
+
−
      position: relative;
+
−
      overflow: hidden;
+
−
      -webkit-backface-visibility: hidden;
+
−
      backface-visibility: hidden;
+
−
      }
+
−
 
+
−
      .link-slideup a {
+
−
      position: relative;
+
−
      display: inline-block;
+
−
      outline: none;
+
−
      color: #610b0c;
+
−
      vertical-align: bottom;
+
−
      text-decoration: none;
+
−
      white-space: nowrap;
+
−
      }
+
−
 
+
−
      .link-slideup a::before,
+
−
      .link-slideup a::after {
+
−
      pointer-events: none;
+
−
      -webkit-backface-visibility: hidden;
+
−
      backface-visibility: hidden;
+
−
      -webkit-font-smoothing: antialiased;
+
−
      font-smoothing: antialiased;
+
−
      }
+
−
      .link-slideup a {
+
−
      overflow: hidden;
+
−
      font-weight: 500;
+
−
      }
+
−
 
+
−
      .link-slideup a::before {
+
−
      position: absolute;
+
−
      top: 0;
+
−
      left: 0;
+
−
      z-index: -1;
+
−
      width: 100%;
+
−
      height: 100%;
+
−
      background-color: #a9a9a9;
+
−
        opacity: 0.5;
+
−
      content: '';
+
−
      -webkit-transition: -webkit-transform 0.2s;
+
−
      transition: transform 0.2s;
+
−
      -webkit-transform: translateY(95%);
+
−
      transform: translateY(95%);
+
−
      }
+
−
 
+
−
      .link-slideup a:hover::before,
+
−
      .link-slideup a:focus::before {
+
−
      -webkit-transform: translateY(0);
+
−
      transform: translateY(0);
+
−
      }
+
−
</style>
+
 
</head>
 
</head>
 
<body>
 
<body>
−
<div id="mybody"></div>
+
<div id="mainwrap"> <a href="https://2017.igem.org/Team:BostonU" class="wordmark"><img src="https://static.igem.org/mediawiki/2017/d/de/T--BostonU--LandingPageLogo1.svg"></img></a>
−
<div id="mainwrap">
+
<div id="mybody"></div>
−
<a href="https://2017.igem.org/Team:BostonU" class="wordmark"><img src="https://static.igem.org/mediawiki/2017/d/de/T--BostonU--LandingPageLogo1.svg"></img></a>
+
  <ul id="menubartable">
−
    <ul id="menubartable">
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Overview" class="dropbtn">Research</a>
−
<li class="menu-column">
+
      <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Description">Project Description</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Results">Results</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Model">Modelling</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Notebook">Notebook</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Safety">Safety</a> </div>
−
<a href="https://2017.igem.org/Team:BostonU/Overview" class="dropbtn">Research</a>
+
    </li>
−
<div class="dropdown-content">
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Achievements" class="dropbtn">Achievements</a>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Description">Project Description</a>
+
      <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Demonstrate">Demonstration</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Parts">Parts</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/JudgingCriteria">Judging Criteria</a> </div>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Results">Results</a>
+
    </li>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Model">Modelling</a>
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/BTB" class="dropbtn">Beyond the Bench</a>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Notebook">Notebook</a>
+
      <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/HP">Human Practices</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Collaborations">Collaborations</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Contribution">Contribution</a> </div>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Safety">Safety</a>
+
    </li>
−
</div>
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/attributions" class="dropbtn">Attributions</a> </li>
−
</li>
+
  </ul> /* end of #menubartable */
−
<li class="menu-column">
+
  <div id="myfooter">
−
<a href="https://2017.igem.org/Team:BostonU/Achievements" class="dropbtn">Achievements</a>
+
    <div id="myfooterC"><a href="#project" class="fade-in-button">ABOUT OUR PROJECT</a></div>
−
<div class="dropdown-content">
+
    <div id="myfooterL"><a href="#gallery" class="fade-in-button-2">ABOUT THIS PHOTO</a></div>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Demonstrate">Demonstration</a>
+
    <div id="myfooterR"><a>SAY HI</a><a href="https://twitter.com/BostonU_iGEM_WL"><img src="https://static.igem.org/mediawiki/2017/2/21/T--BostonU--prettysureweareallowedtouploadthis.svg"></img></a> <a href="mailto:bu.igemwl2017@gmail.com"><img style="height: 19px;" src="https://static.igem.org/mediawiki/2017/c/ca/T--BostonU--MailTo.svg"></img></a> </div>
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Parts">Parts</a>
+
  </div> /* end of #myfooter */
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/JudgingCriteria">Judging Criteria</a>
+
  <div class="fade-in-div"> <a class="wordmark" href="https://2017.igem.org/Team:BostonU"><img src="https://static.igem.org/mediawiki/2017/4/41/T--BostonU--LandingPageLogoRed.svg"></img></a>
−
</div>
+
    <section id="fade-in-wrapper" class="link-slideup">
−
</li>
+
      <p>We explore the use of de novo designed riboriboregulators known as <a href="#">toehold switches</a> to drive recombinase-based logic in <a href="#">cell-free TX-TL systems.</a> We anticipate applications in <a href="#">point-of-care diagnostic technologies</a> such as those for Zika and Ebola developed by the Collins group at MIT, targeted at diseases with RNA profiles that are more computationally demanding, such as cancer.</p>
−
<li class="menu-column">
+
−
<a href="https://2017.igem.org/Team:BostonU/BTB" class="dropbtn">Beyond the Bench</a>
+
−
<div class="dropdown-content">
+
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/HP">Human Practices</a>
+
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Collaborations">Collaborations</a>
+
−
<a class="menuitem" href="https://2017.igem.org/Team:BostonU/Contribution">Contribution</a>
+
−
</div>
+
−
</li>
+
−
<li class="menu-column">
+
−
<a href="https://2017.igem.org/Team:BostonU/attributions" class="dropbtn">Attributions</a>
+
−
</li>
+
−
</li>
+
−
</ul>
+
−
<div id="myfooter">
+
−
<div id="myfooterC"><a href="#project" class="div-slide-up-button">ABOUT OUR PROJECT</a></div>
+
−
<div id="myfooterL"><a href="#gallery">ABOUT THIS PHOTO</a></div>
+
−
<div id="myfooterR"><a>SAY HI</a><a href="https://twitter.com/BostonU_iGEM_WL"><img src=https://static.igem.org/mediawiki/2017/2/21/T--BostonU--prettysureweareallowedtouploadthis.svg></img></a>
+
−
<a href="mailto:bu.igemwl2017@gmail.com"><img style="height: 19px;" src=https://static.igem.org/mediawiki/2017/c/ca/T--BostonU--MailTo.svg></img></a>
+
−
</div>
+
−
</div>
+
−
<div class="slide-up-div">
+
−
<a class="wordmark" href="https://2017.igem.org/Team:BostonU"><img src="https://static.igem.org/mediawiki/2017/4/41/T--BostonU--LandingPageLogoRed.svg"></img></a>
+
−
<section id="slide-up-wrapper" class="link-slideup">
+
−
    <p>We explore the use of de novo designed riboriboregulators known as <a href="#">toehold switches</a> to drive recombinase-based logic in <a href="#">cell-free TX-TL systems.</a> We anticipate applications in <a href="#">point-of-care diagnostic technologies</a> such as those for Zika and Ebola developed by the Collins group at MIT, targeted at diseases with RNA profiles that are more computationally demanding, such as cancer.</p>
+
 
     </section>
 
     </section>
−
     <div id="slide-up-footer">
+
     <div id="fade-in-footer">
−
       <div><a href="#" class="div-slide-down-button">CLOSE THIS WINDOW</a></div>
+
       <div id="myfooterC"><a href="#" class="fade-out-button">CLOSE THIS WINDOW</a></div>
−
       <div></div>
+
      <div id="myfooterL"></div>
 +
      <div id="myfooterR"></div>
 +
    </div>
 +
  </div> /* end of .fade-in-div */
 +
<div class="fade-in-div-2">
 +
    <div id="gallery-tab"></div>
 +
   
 +
    <div id="fade-in-footer">
 +
      <div id="myfooterC"></div>
 +
      <div id="myfooterL"><a href="#" class="fade-out-button-2">CLOSE THIS WINDOW</a></div>
 +
       <div id="myfooterR"></div>
 
     </div>
 
     </div>
−
</div>
 
 
</div>
 
</div>
 +
</div> /* end of #mainwrap */
 
<script type="text/javascript">
 
<script type="text/javascript">
 
$(document).ready(function(){
 
$(document).ready(function(){
−
$(".div-slide-up-button").click(function(){
+
$(".fade-in-button").click(function(){
−
$(".slide-up-div").fadeToggle("100");
+
$(".fade-in-div").fadeIn("100");
−
    $("#myfooter").fadeToggle("100");
+
    $("#myfooter").fadeOut("100");
−
    $("#menubartable").fadeToggle("100");
+
    $("#menubartable").fadeOut("100");
−
    $("#mybody").fadeTo("100", 0.7, function() {
+
    $("#mybody").fadeTo("100", 0.7, function() {
−
    })
+
    });
 +
});
 +
$(".fade-out-button").click(function(){
 +
$(".fade-in-div").fadeOut("100");
 +
    $("#myfooter").fadeIn("100");
 +
    $("#menubartable").fadeIn("100");
 +
    $("#mybody").fadeTo("100", 0.0, function() {
 +
    });
 +
});
 +
$(".fade-in-button-2").click(function(){
 +
$(".fade-in-div-2").fadeIn("100");
 +
    $("#myfooter").fadeOut("100");
 
});
 
});
−
$(".div-slide-down-button").click(function(){
+
$(".fade-out-button-2").click(function(){
−
$(".slide-up-div").fadeToggle("100");
+
$(".fade-in-div-2").fadeOut("100");
−
    $("#myfooter").fadeToggle("100");
+
    $("#myfooter").fadeIn("100");
−
    $("#menubartable").fadeToggle("100");
+
−
    $("#mybody").fadeTo("100", 0.0, function() {
+
−
    })
+
 
});
 
});
 
});
 
});

Revision as of 21:20, 14 August 2017

/* end of #menubartable */ /* end of #myfooter */
/* end of .fade-in-div */
/* end of #mainwrap */