Difference between revisions of "Team:BostonU"

 
(422 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
<!DOCTYPE html>
+
{{BU17_template_global}}
 
<html>
 
<html>
 
<head>
 
<head>
 +
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
 +
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:400,900" rel="stylesheet">
 
<style>
 
<style>
−
#menubar {
+
<style>
−
    list-style-type: none;
+
<style>
−
    margin: 0;
+
#top_menu_inside ul li > a { /* RECOLORS IGEM MENU */
−
border: 0;
+
color: #a9a9a9 !important;
−
    padding: 0;
+
−
    overflow: hidden;
+
−
    background-color: #339;
+
−
white-space: nowrap;
+
−
top: 20px;
+
−
width: 100%;
+
 
}
 
}
−
#menubar li {
+
.menu-type {
−
    display: inline-block;
+
font-family: 'Roboto', sans-serif !important;
 +
letter-spacing: 5pt !important;
 +
font-size: 14pt !important;
 +
text-align: center;
 +
text-decoration: none !important;
 +
text-transform: uppercase !important;
 +
font-weight: bold !important;
 +
text-rendering: geometricPrecision !important;
 +
-webkit-font-smoothing: antialiased !important;
 +
font-smoothing: antialiased !important;
 
}
 
}
−
li .menuitem, .dropbtn {
+
.body-type {
−
    display: inline-block;
+
font-family: 'Roboto', sans-serif;
−
    color: white;
+
font-size: 16pt !important;
−
    text-align: center;
+
text-decoration: none !important;
−
    padding: 14px 16px;
+
line-height: 2 !important;
−
    text-decoration: none;
+
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 +
-webkit-transition: all 1s ease;
 +
-moz-transition: all 1s ease;
 +
-ms-transition: all 1s ease;
 +
-o-transition: all 1s ease;
 +
transition: all 1s ease;
 
}
 
}
−
li .menuitem:hover, .dropdown:hover .dropbtn {
+
body {
−
    background-color: red;
+
background: #1d1d1d;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover !important;
 +
z-index: -100;
 +
display: none;
 
}
 
}
−
li.dropdown {
+
#mybody {
−
    display: inline-block;
+
opacity: 0.0;
 +
background-color: #f8f9f9;
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
top: 0;
 +
left: 0;
 +
z-index: -1;
 +
}
 +
.wordmark img {
 +
margin-top: 4.4%;
 +
margin-left: 5%;
 +
width: 300px;
 +
}
 +
#mainwrap {
 +
margin: 0 auto;
 +
height: 100% !important;
 +
}
 +
#menubartable {
 +
border: 0;
 +
list-style-type: none;
 +
margin-top: 5%;
 +
margin-right: 5%;
 +
padding: 0;
 +
position: relative;
 +
float: right;
 +
white-space: nowrap;
 +
width: 0 auto !important;
 +
z-index: 10;
 +
}
 +
#menubartable li {
 +
display: table-cell;
 +
}
 +
li .menuitem, .dropbtn {
 +
color: #f8f9f9 !important;
 +
display: table-cell;
 +
padding: 5px 18px;
 +
vertical-align: middle;
 +
}
 +
.dropbtn {
 +
position: relative;
 +
text-decoration: none !important;
 
}
 
}
 
.dropdown-content {
 
.dropdown-content {
−
    display: none;
+
display: none;
−
    position: absolute;
+
position: absolute;
−
    background-color: #f9f9f9;
+
z-index: 1;
−
    min-width: 160px;
+
−
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+
−
    z-index: 1;
+
 
}
 
}
 
.dropdown-content .menuitem {
 
.dropdown-content .menuitem {
−
    color: black;
+
color: #f8f9f9;
−
    padding: 12px 16px;
+
display: block;
−
    text-decoration: none;
+
padding: 5px 18px;
−
    display: block;
+
text-align: left;
−
    text-align: left;
+
text-decoration: none;
 
}
 
}
−
.dropdown-content .menuitem:hover {background-color: #f1f1f1}
+
#myfooter {
−
 
+
position: absolute;
−
.dropdown:hover .dropdown-content {
+
bottom: 0pt;
−
    display: block;
+
width: 100%;
 +
height: 15%;
 +
}
 +
#myfooterL {
 +
position: relative;
 +
float: left;
 +
width: 45%;
 +
height: 50%;
 +
text-align: left;
 +
padding-left: 5%;
 +
vertical-align: middle;
 +
}
 +
#myfooterR {
 +
position: relative;
 +
float: right;
 +
width: 45%;
 +
height: 50%;
 +
text-align: right;
 +
padding-right: 5%;
 +
}
 +
#myfooterC {
 +
position: relative;
 +
float: top;
 +
width: 100%;
 +
height: 50%;
 +
text-align: center;
 +
}
 +
#myfooter a {
 +
vertical-align: center;
 +
color: #f8f9f9 !important;
 +
text-decoration: none !important;
 +
}
 +
#myfooterR img {
 +
height: 20px;
 +
padding: 0 10px;
 +
vertical-align: middle;
 +
}
 +
#myfooterR a {
 +
padding: 0 22px;
 +
vertical-align: middle;
 +
}
 +
.fade-in-div {
 +
width: 100%;
 +
height: 100%;
 +
bottom: 0;
 +
border: none;
 +
position: absolute;
 +
width: 100%;
 +
display: none;
 +
z-index: 1;
 +
}
 +
#fade-in-wrapper {
 +
position: absolute;
 +
width: 70%;
 +
max-height: 100%;
 +
margin: 0 15%;
 +
margin-top: 5%;
 +
}
 +
#fade-in-wrapper p {
 +
color: #4D4D4D;
 +
position: relative;
 +
overflow: hidden;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
#fade-in-footer {
 +
position: absolute;
 +
bottom: 0pt;
 +
width: 100%;
 +
height: 15%;
 +
}
 +
#fade-in-footer a {
 +
text-align: center;
 +
color: #4D4D4D !important;
 +
text-decoration: none !important;
 +
}
 +
.fade-in-div-2 {
 +
width: 100%;
 +
height: 100%;
 +
bottom: 0;
 +
border: none;
 +
position: absolute;
 +
display: none;
 +
z-index: 1;
 +
}
 +
#gallery-wrapper {
 +
position: absolute;
 +
height: 25%;
 +
width: 100%;
 +
bottom: 0;
 +
align-content: center;
 +
}
 +
#gallery-wrapper p {
 +
position: relative;
 +
overflow: hidden;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
top: 10px;
 +
z-index: 1;
 +
margin: 0 5%;
 +
}
 +
#gallery-tab {
 +
background: #f8f9f9;
 +
height: 25%;
 +
width: 100%;
 +
bottom: 0;
 +
position: absolute;
 +
z-index: -1;
 +
}
 +
.menu-column:hover .dropdown-content { /* MENU DISPLAY ANIMATION */
 +
display: block;
 +
}
 +
.link-slideup {
 +
position: relative;
 +
overflow: hidden;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
.link-slideup a {
 +
position: relative;
 +
display: inline-block;
 +
outline: none;
 +
color: #D45B5C;
 +
vertical-align: bottom;
 +
text-decoration: none;
 +
white-space: nowrap;
 +
}
 +
.link-slideup a::before, .link-slideup a::after {
 +
pointer-events: none;
 +
-webkit-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
.link-slideup a {
 +
overflow: hidden;
 +
font-weight: 500;
 +
}
 +
.link-slideup a::before {
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
z-index: -1;
 +
width: 100%;
 +
height: 100%;
 +
background-color: #EFEFEE;
 +
opacity: 1;
 +
content: '';
 +
-webkit-transition: -webkit-transform 0.2s;
 +
transition: transform 0.2s;
 +
-webkit-transform: translateY(95%);
 +
transform: translateY(95%);
 +
}
 +
.link-slideup a:hover::before, .link-slideup a:focus::before {
 +
-webkit-transform: translateY(0);
 +
transform: translateY(0);
 
}
 
}
 
</style>
 
</style>
 
</head>
 
</head>
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
−
 
 
<body>
 
<body>
−
<ul id="menubar">
+
<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>
−
   <li><a href="#logo" class="logo">BOSTONU</a></li>
+
   <div id="mybody"></div>
−
  <li><a href="#news">Project</a></li>
+
  <ul id="menubartable" class="menu-type">
−
  <li class="dropdown">
+
 
−
     <a href="javascript:void(0)" class="dropbtn">People</a>
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Team" class="dropbtn">People</a>
−
    <div class="dropdown-content">
+
      <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Team">Team</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Attributions">Attributions</a></div>
−
      <a class="menuitem" href="#">Link 1</a>
+
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Description" class="dropbtn">Research</a>
−
      <a class="menuitem" href="#">Link 2</a>
+
      <div class="dropdown-content"> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Description">Overview</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Experiments">Experiments</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">Modeling</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Notebook">Notebook</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Protocols">Protocols</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/Safety">Safety</a> </div>
−
      <a class="menuitem" href="#">Link 3</a>
+
    </li>
 +
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/Engagement" class="dropbtn">Beyond the Bench</a>
 +
      <div class="dropdown-content"><a class="menuitem" href="https://2017.igem.org/Team:BostonU/HP/Silver">Human Practices</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/HP/Gold_Integrated">Integrated Human Practices</a><a class="menuitem" href="https://2017.igem.org/Team:BostonU/Engagement">Public Engagement</a><a class="menuitem" href="https://2017.igem.org/Team:BostonU/Collaborations">Collaborations</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/InterLab">InterLab Contribution</a> </div>
 +
     </li>
 +
    <li class="menu-column"> <a href="https://2017.igem.org/Team:BostonU/JudgingCriteria" class="dropbtn">Achievements</a>
 +
      <div class="dropdown-content"><a class="menuitem" href="https://2017.igem.org/Team:BostonU/Parts">Parts</a> <a class="menuitem" href="https://2017.igem.org/Team:BostonU/JudgingCriteria">Judging Criteria</a> </div>
 +
    </li></ul>  <div id="myfooter" class="menu-type">
 +
    <div id="myfooterC"><a href="#project" class="fade-in-button">ABOUT US</a></div>
 +
    <div id="myfooterL"><a href="#gallery" class="fade-in-button-2">ABOUT THIS PHOTO</a></div>
 +
    <div id="myfooterR"><a>SAY HI</a><a href="https://twitter.com/BostonU_iGEM_WL"><img src="https://static.igem.org/mediawiki/2017/2/21/T--BostonU--prettysureweareallowedtouploadthis.svg"></img></a> <a href="mailto:bu.igemwl2017@gmail.com"><img style="height: 19px;" src="https://static.igem.org/mediawiki/2017/c/ca/T--BostonU--MailTo.svg"></img></a> </div>
 +
  </div>
 +
  <div class="fade-in-div"> <a class="wordmark" href="https://2017.igem.org/Team:BostonU"><img src="https://static.igem.org/mediawiki/2017/f/f2/T--BostonU--RedGrey.svg"></img></a>
 +
    <section id="fade-in-wrapper" class="link-slideup">
 +
      <p class="body-type"><a href='https://2017.igem.org/Team:BostonU/Team'>We</a> are the 2017 Boston University Wet-lab iGEM Team! <a href='https://2017.igem.org/Team:BostonU/Description'>Our research</a> seeks to develop a platform that integrates de novo designed RNA sensors known as toehold switches with recombinase-based molecular computation systems in a cell-free system. By expanding the application space of combinatorial logic to RNAs, we anticipate applications within biological systems with characteristic RNA profiles of any complexity. <strong>Click <a href='https://2017.igem.org/Team:BostonU/Description'>here</a> to learn more!</strong></p>
 +
    </section>
 +
    <div id="fade-in-footer">
 +
      <div id="myfooterC"><a href="#" class="fade-out-button menu-type">CLOSE THIS WINDOW</a></div>
 +
      <div id="myfooterL"></div>
 +
      <div id="myfooterR"></div>
 
     </div>
 
     </div>
−
   </li>
+
   </div>
−
<li class="dropdown">
+
  <div class="fade-in-div-2">
−
     <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
+
     <div id="gallery-tab"></div>
−
     <div class="dropdown-content">
+
     <section id="gallery-wrapper" class="link-slideup body-type">
−
       <a class="menuitem" href="#">Link 1</a>
+
       <p class="body-type">Something is wrong! The description didn't load properly.</p>
−
       <a class="menuitem" href="#">Link 2</a>
+
    </section>
−
       <a class="menuitem" href="#">Link 3</a>
+
    <div id="fade-in-footer">
 +
      <div id="myfooterC"></div>
 +
       <div id="myfooterL"><a href="#" class="fade-out-button-2 menu-type">CLOSE THIS WINDOW</a></div>
 +
       <div id="myfooterR"><a href="#" class="toggle menu-type">SHOW ME ANOTHER PICTURE</a></div>
 
     </div>
 
     </div>
−
   </li>
+
   </div>
−
<li class="dropdown">
+
</div>
−
    <a href="javascript:void(0)" class="dropbtn">Dropdown</a>
+
<script type="text/javascript"> /* FADE IN SCRIPT */
−
    <div class="dropdown-content">
+
$(document).ready(function(){
−
      <a class="menuitem" href="#">Link 1</a>
+
$(".fade-in-button").click(function(){
−
      <a class="menuitem" href="#">Link 2</a>
+
$(".fade-in-div").fadeIn(300);
−
      <a class="menuitem" href="#">Link 3</a>
+
    $("#myfooter").fadeOut(300);
−
    </div>
+
    $("#menubartable").fadeOut(300);
−
  </li>
+
    $("#mybody").fadeTo(300, 1.0, function() {
−
</ul>
+
    });
−
<h3>BOSTONU iGEM 2017</h3>
+
});
−
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+
$(".fade-out-button").click(function(){
 +
$(".fade-in-div").fadeOut(300);
 +
    $("#myfooter").fadeIn(300);
 +
    $("#menubartable").fadeIn(300);
 +
    $("#mybody").fadeTo(300, 0.0, function() {
 +
    });
 +
});
 +
$(".fade-in-button-2").click(function(){
 +
$(".fade-in-div-2").fadeIn(300);
 +
    $("#myfooter").fadeOut(300);
 +
});
 +
$(".fade-out-button-2").click(function(){
 +
$(".fade-in-div-2").fadeOut(300);
 +
    $("#myfooter").fadeIn(300);
 +
});
 +
});
 +
</script>  
 +
<script type="text/javascript"> /* GALLERY SCRIPT */
 +
var captions = ["<p class='body-type'>The North End and Charlestown as seen from <a href='http://www.ginkgobioworks.com/'>Ginkgo Bioworks</a> during our  <a href='https://2017.igem.org/Team:BostonU/HP/Silver'>July visit</a>.</p>","<p class='body-type'>The team (minus <a href='https://2017.igem.org/Team:BostonU/Team'>Thomas</a>) turns a corner inside <a href='http://www.ginkgobioworks.com/'>Ginkgo Bioworks</a>.</p>","<p class='body-type'>Circadia Synthetica, a triptych designed by Saimrunali Dadigala, explores the application of synthetic circadian rhythms in multiple organisms as as part of our <a href='https://2017.igem.org/Team:BostonU/HP/Silver'>Human Practices</a> work.</p>","<p class='body-type'>Sai uses the vortex in preparation of the cell-free mixture used to host our <a href='https://2017.igem.org/Team:BostonU/Experiments'>experiments</a>.</p>"];
 +
var links = ["https://static.igem.org/mediawiki/2017/c/c1/T--BostonU--seaport.png","https://static.igem.org/mediawiki/2017/9/9b/T--BostonU--hallway.png",
 +
"https://static.igem.org/mediawiki/2017/f/ff/T--BostonU--CircadiaSynthetica.png",
 +
"https://static.igem.org/mediawiki/2017/c/c9/T--BostonU--SaiPipetting3.png"];
 +
var maxCounter = 3;
 +
var counter = maxCounter;
 +
var bg = '#1d1d1d url('+links[counter]+') no-repeat center center fixed';
 +
$("#gallery-wrapper").html(captions[counter]);
 +
document.body.style.background = bg;
 +
$(".toggle").click(function(){
 +
counter = counter-1;
 +
if (counter < 0) {
 +
counter = maxCounter;
 +
};
 +
var bg = '#1d1d1d url('+links[counter]+') no-repeat center center fixed';
 +
    document.body.style.background = bg;
 +
$("#gallery-wrapper").fadeOut(300, function(){
 +
$("#gallery-wrapper").html(captions[counter]).fadeIn(300);
 +
});
 +
});
 +
</script>
 +
<script> /* THIS MAKES BODY CONTENT OF THE PAGE FADE IN */
 +
$(document).ready(function () {
 +
    $('body').fadeIn(1000);
 +
});
 +
</script>
 
</body>
 
</body>
−
 
−
 
−
 
−
 
−
 
 
</html>
 
</html>

Latest revision as of 03:51, 2 November 2017

Something is wrong! The description didn't load properly.