Difference between revisions of "Team:BostonU/Parts"

Line 3: Line 3:
 
<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>
 +
#top_menu_inside ul li > a { /* RECOLORS IGEM MENU */
 +
color: #a9a9a9 !important;
 +
}
 +
.menu-type {
 +
font-family: 'Roboto Condensed', sans-serif;
 +
letter-spacing: 5 pt !important;
 +
font-size: 14pt !important;
 +
text-align: center;
 +
text-decoration: none !important;
 +
text-transform: uppercase;
 +
font-weight: 700;
 +
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 +
}
 +
.wide-heading-type {
 +
font-family: 'Roboto', sans-serif;
 +
font-size: 24pt !important;
 +
letter-spacing: 5pt !important;
 +
text-align: center;
 +
text-decoration: none !important;
 +
text-transform: uppercase;
 +
font-weight: bold;
 +
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 +
}
 +
.body-type {
 +
font-family: 'Roboto', sans-serif;
 +
font-size: 16pt !important;
 +
text-decoration: none !important;
 +
line-height: 2;
 +
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 +
}
 +
.caption-type {
 +
font-family: 'Roboto', sans-serif;
 +
font-size: 18pt !important;
 +
text-decoration: none !important;
 +
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 +
}
 +
.inline-heading-type {
 +
font-family: 'Roboto', sans-serif !important;
 +
font-size: 20pt !important;
 +
font-weight: bold !important;
 +
text-decoration: none !important;
 +
line-height: 2 pt !important;
 +
-webkit-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 +
}
 +
.float-left {
 +
float: left !important;
 +
}
 +
.float-right {
 +
float: right !important;
 +
}
 +
.align-right {
 +
text-align: right !important;
 +
}
 +
.align-center {
 +
text-align: center !important;
 +
}
 +
.indented {
 +
text-indent: 80px;
 +
}
 +
.mainwrap {
 +
width: 90%;
 +
max-width: 960px;
 +
min-width: 360px;
 +
margin: 0 auto;
 +
top:0;
 +
display: none;
 +
}
 
body {
 
body {
−
  background-color: #fff0f0;
+
background-image: url("https://static.igem.org/mediawiki/2017/c/c1/T--BostonU--seaport.png");
−
  font-family: Arial, sans-serif;
+
background-repeat: no-repeat;
 +
    background-attachment: fixed;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover !important;
 
}
 
}
−
#landingwrapper {
+
#backgroundimage1 {
−
  width: 900px;
+
margin-top: -85px;
−
  height: 100%;
+
background-image: url("#");
−
  margin: 0 auto;
+
background-repeat: no-repeat;
−
  padding-top: 100px;
+
    background-attachment: cover;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover !important;
 +
height: 360px;
 +
width: 100%;
 +
align-content:center;
 +
text-align:center
 +
vertical-align:middle;
 
}
 
}
−
#part1 h1 {
+
#backgroundimage1 p {
−
  text-align:center;
+
top: 40%;
−
  font-size:250%;
+
color: #8C181B;
−
  color:#B9B4B4;
+
position: relative;
−
  font-family: Arial,sans-serif;
+
−
  white-space: nowrap;
+
 
}
 
}
−
#part2 p {
+
.background-gradient-down {
−
  text-align:center;
+
height: 360px;
−
  font-size: 200%;
+
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+100&0+0,1+100 */
−
  color: #605E5E;
+
background: -moz-linear-gradient(top, rgba(239,239,238,0) 0%, rgba(239,239,238,1) 100%); /* FF3.6-15 */
−
  font-family: Arial, sans-serif;
+
background: -webkit-linear-gradient(top, rgba(239,239,238,0) 0%,rgba(239,239,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
−
  white-space:nowrap;
+
background: linear-gradient(to bottom, rgba(239,239,238,0) 0%,rgba(239,239,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00efefee', endColorstr='#efefee',GradientType=0 ); /* IE6-9 */
 
}
 
}
−
#part3 p {
+
.background-gradient-up {
−
  text-align:center;
+
height: 360px;
−
  font-size:150%;
+
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+100&1+0,0+100 */
−
  color: #b9b4b4;
+
background: -moz-linear-gradient(top, rgba(239,239,238,1) 0%, rgba(239,239,238,0) 100%); /* FF3.6-15 */
−
  font-family: Arial, sans-serif;
+
background: -webkit-linear-gradient(top, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 100%); /* Chrome10-25,Safari5.1-6 */
−
  white-space: nowrap;
+
background: linear-gradient(to bottom, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefee', endColorstr='#00efefee',GradientType=0 ); /* IE6-9 */
 
}
 
}
−
 
+
.background-gradient-both {
−
div.tab {
+
height: 360px;
−
    text-align:center;
+
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+50,efefee+100&1+0,0+50,1+100 */
−
    overflow: hidden;
+
background: -moz-linear-gradient(top, rgba(239,239,238,1) 0%, rgba(239,239,238,0) 50%, rgba(239,239,238,1) 100%); /* FF3.6-15 */
−
    border: 1px solid #fff0f0;
+
background: -webkit-linear-gradient(top, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 50%,rgba(239,239,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
−
    background-color: #fff0f0;
+
background: linear-gradient(to bottom, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 50%,rgba(239,239,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
−
    white-space: nowrap;
+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefee', endColorstr='#efefee',GradientType=0 ); /* IE6-9 */
 
}
 
}
−
 
+
#panel1 {
−
div.tab button {
+
background: #EFEFEE;
−
    background-color: inherit;
+
width: 100%;
−
    border: none;
+
color: #1d1d1d;
−
    outline: none;
+
z-index: 1;
−
    cursor: pointer;
+
−
    padding: 20px 100px ;
+
−
    transition: 0.3s;
+
−
    font-size: 200%;
+
 
}
 
}
−
 
+
#backgroundimage2 {
−
div.tab button:hover {
+
background-image: url("#");
−
     background-color: pink;
+
background-repeat: no-repeat;
 +
     background-attachment: cover;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover !important;
 +
height: 360px;
 +
width: 100%;
 +
position: relative;
 
}
 
}
−
 
+
#backgroundimage2 p {
−
div.tab button.active {
+
top: 40%;
−
    background-color: white;
+
color: #8C181B;
 
}
 
}
−
 
+
#protocol-accordion .ui-accordion-content  {
−
.tabcontent {
+
background: #FFFFFF;
−
    background-color: #fff0f0;
+
color: #A9A9A9;
−
    display: none;
+
border-radius: 20px;
−
    padding: 10px 200px;
+
}
−
    border: 1px solid #fff0f0;
+
#protocol-accordion .ui-accordion-content > * {
−
    border-top: none;
+
  margin: 0;
−
    font-size: 200%;
+
  padding: 40px;
−
    white-space:normal;
+
}
 +
.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: #A9A9A9;
 +
opacity: 1;
 +
content: '';
 +
-webkit-transition: -webkit-transform 0.2s;
 +
transition: transform 0.2s;
 +
-webkit-transform: translateY(95%);
 +
transform: translateY(95%);
 +
opacity: 0.3;
 +
}
 +
.link-slideup a:hover::before, .link-slideup a:focus::before {
 +
-webkit-transform: translateY(0);
 +
transform: translateY(0);
 
}
 
}
 
</style>
 
</style>
 
</head>
 
</head>
 
<body>
 
<body>
−
<div id="landingwrapper">
+
<div id="backgroundimage1"><div class="background-gradient-down">
−
<section id="part1">
+
   <p class="wide-heading-type mainwrap align-center">OUR PARTS</p>
−
   <h1><br><br>Registry Parts<br><br></h1>
+
</div></div>
−
<seciton id = "part2">
+
<div id="panel1" class="link-slideup">
−
  <p><br>Summary<br></p>
+
  <p class="inline-heading-type mainwrap">Composite: toeholdFE1</p>
−
</section>
+
  <p class="body-type mainwrap">Composite part consisting of deGFP under the control of the first toehold switch we characterized in our cell-free system, the best performer from the switches developed by <a href="#">Green et al.</a> Also includes our bacterial promoter and terminator parts.</p>
−
<section id = "part3">
+
<p class="body-type mainwrap">&nbsp;</p>
−
  <p>This is a summary of all the parts we submitted to registry<br><br><br></p>
+
<p class="body-type mainwrap">FIG </p>
−
</section>
+
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="inline-heading-type mainwrap">Composite toeholdFE2</p>
 +
<p class="body-type mainwrap">Composite part consisting of deGFP under the control of the second toehold switch we characterized in our cell-free system, the second best performer from the switches developed by <a href="#">Green et al.</a> Also includes our bacterial promoter and terminator parts.</p>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="body-type mainwrap">FIG </p>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="inline-heading-type mainwrap">OR2-OR1 Bacterial Promoter</p>
 +
<p class="body-type mainwrap">Promoter used in constructs designed for our cell-free system.</p>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="body-type mainwrap">FIG </p>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="inline-heading-type mainwrap">T500 Bacterial Terminator</p>
 +
<p class="body-type mainwrap">Terminator used in constructs designed for our cell-free system. Absolutely a reference to the movie.</p>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="body-type mainwrap">FIG </p>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="inline-heading-type mainwrap">toeholdFE1</p>
 +
<p class="body-type mainwrap">A toehold switch part including a ribosomal binding site and start codon.</p>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="body-type mainwrap">FIG </p>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="inline-heading-type mainwrap">toeholdFE2 </p>
 +
<p class="body-type mainwrap">A toehold switch part including a ribosomal binding site and a start codon.</p>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="body-type mainwrap">FIG </p>
 +
<p class="body-type mainwrap">&nbsp;</p>
 
</div>
 
</div>
−
<div class="tab">
+
<div id="backgroundimage2"><div class="background-gradient-up">
−
  <button class="tablinks" onclick="openCity(event, '1st Part')">1st Part</button>
+
</div></div>
−
  <button class="tablinks" onclick="openCity(event, '2nd Part')">2nd Part</button>
+
<script> /* THIS MAKES ANY WRAPPED ELEMENT ON THE PAGE FADE IN */
−
  <button class="tablinks" onclick="openCity(event, '3rd Part')">3rd Part</button>
+
$(document).ready(function () {
−
</div>
+
     $('.mainwrap').fadeIn(1000);
−
<div id="1st Part" class="tabcontent">
+
});
−
  <p>We partnered with STEM Pathways to host Summer Pathways - a Synthetic Biology Workshop for high school girls interested in STEM. The workshop was composed of four activities: bioethics forum, where we discussed controversial issues in Synthetic Biology; plasmid design, where we play paper games to visually introduce them to the concept of plasmid, primers and so forth; gel running, where we used food coloring to show the basic principal of gel electrophoresis and microfluidic, where we present the logic behind microfluidic devices on cardboard. Around 21 girls attended our workshop, and they all enjoyed the activities and were impressed by the work we’ve done. Many girls also expressed a tendency to learn more about synthetic biology.  </p>
+
−
</div>
+
−
<div id="2nd Part" class="tabcontent">
+
−
  <p>Description of second submitted part.</p>
+
−
</div>
+
−
<div id="3rd Part" class="tabcontent">
+
−
  <p>Description of third submitted part.</p>
+
−
</div>
+
−
<script>
+
−
function openCity(evt, cityName) {
+
−
    var i, tabcontent, tablinks;
+
−
    tabcontent = document.getElementsByClassName("tabcontent");
+
−
    for (i = 0; i < tabcontent.length; i++) {
+
−
        tabcontent[i].style.display = "none";
+
−
     }
+
−
    tablinks = document.getElementsByClassName("tablinks");
+
−
    for (i = 0; i < tablinks.length; i++) {
+
−
        tablinks[i].className = tablinks[i].className.replace(" active", "");
+
−
    }
+
−
    document.getElementById(cityName).style.display = "block";
+
−
    evt.currentTarget.className += " active";
+
−
}
+
 
</script>
 
</script>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 01:02, 19 October 2017

OUR PARTS