Difference between revisions of "Team:BostonU/Parts"

 
(37 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 +
{{BU17_template_global}}
 
{{BU17_template_menubar}}
 
{{BU17_template_menubar}}
 
<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 p {
+
#backgroundimage1 p {
−
  text-align:center;
+
top: 40%;
−
  font-size:275%;
+
color: #8C181B;
−
  color:#605E5E;
+
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 {
−
/* Style the buttons inside the tab */
+
background: #EFEFEE;
−
div.tab button {
+
width: 100%;
−
    background-color: inherit;
+
color: #1d1d1d;
−
    border: none;
+
z-index: 1;
−
    outline: none;
+
−
    cursor: pointer;
+
−
    padding: 20px 100px ;
+
−
    transition: 0.3s;
+
−
    font-size: 200%;
+
 
}
 
}
−
 
+
#backgroundimage2 {
−
/* Change background color of buttons on hover */
+
background-image: url("#");
−
div.tab button:hover {
+
background-repeat: no-repeat;
−
     background-color: pink;
+
     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 {
−
/* Create an active/current tablink class */
+
top: 40%;
−
div.tab button.active {
+
color: #8C181B;
−
    background-color: white;
+
 
}
 
}
−
 
+
#protocol-accordion .ui-accordion-content  {
−
/* Style the tab content */
+
background: #FFFFFF;
−
.tabcontent {
+
color: #A9A9A9;
−
    background-color: #fff0f0;
+
border-radius: 20px;
−
    display: none;
+
}
−
    padding: 10px 200px;
+
#protocol-accordion .ui-accordion-content > * {
−
    border: 1px solid #fff0f0;
+
  margin: 0;
−
    border-top: none;
+
  padding: 40px;
−
    font-size: 200%;
+
}
−
    white-space:nowrap;
+
.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></h1>
+
</div></div>
−
<seciton id = "part2">
+
<div id="panel1" class="link-slideup">
−
  <p><br><br>Summary<br></p>
+
<p class="inline-heading-type mainwrap">We submitted two composite parts to the registry: BBa_K2411005 and BBa_K2411008.</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"><a href = "http://parts.igem.org/Part:BBa_K2411005" style="text-indent:0pt;">BBa_K2411005</a>: Forward Engineered Toehold 1 with deGFP gene</p>
−
</section>
+
<p class="body-type mainwrap">This device encodes for a toehold that when activated expresses deGFP. It has an OR2-OR1 promoter, followed by the first forward engineered toehold sequence designed by Green et al. The deGFP follows the toehold, and the device ends with a T7 terminator. The part has been designed for and tested in an E. coli derived transcriptional translation cell free system. In order for the part to function, it needs to be used in conjunction with a trigger RNA. Characterization data can be view on our results page or on the registry.</p>
 +
<center>
 +
<img src="https://static.igem.org/mediawiki/2017/1/1b/T--BostonU--Part_th2comp.png" width = 25%></img>
 +
</center>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="body-type mainwrap"><a href = "http://parts.igem.org/Part:BBa_K2411008" style="text-indent:0pt;">BBa_K2411008</a>: Forward Engineered Toehold 2 with deGFP gene</p>
 +
<p class="body-type mainwrap">This device encodes for a toehold that when activated expresses deGFP. It has an OR2-OR1 promoter, followed by the second best forward engineered toehold sequence designed by Green et al. The deGFP follows the toehold, and the device ends with a T7 terminator. The part has been designed for and tested in an E. coli derived transcriptional translation cell free system. In order for the part to function, it needs to be used in conjunction with a trigger RNA. Characterization data can be view on our results page or on the registry.&nbsp;</p>
 +
<p class="body-type mainwrap">In addition to these composite parts, we created registry pages for the OR2-OR1 promoter, the T500 terminator, and both toehold architectures that we used in our composite parts.</p>
 +
<center>
 +
<img src="https://static.igem.org/mediawiki/2017/0/08/T--BostonU--Part_th1comp.png" width = 25%></img>
 +
</center>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="body-type mainwrap"><a href = "http://parts.igem.org/Part:BBa_K2411000" style="text-indent:0pt;">BBa_K2411000</a>: OR2-OR1 Promoter</p>
 +
<p class="body-type mainwrap">This is a constitutively active promoter that can be used in E. coli and E. coli derived transcription translation systems. This part is derived from the lambda bacteriaphage.</p>
 +
<center>
 +
<img src="https://static.igem.org/mediawiki/2017/1/1f/T--BostonU--Part_or2or1.png" width = 25%></img>
 +
</center>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="body-type mainwrap"><a href = "http://parts.igem.org/Part:BBa_K2411002" style="text-indent:0pt;">BBa_K2411002</a>: T500 Terminator</p>
 +
<p class="body-type mainwrap">This is a bacterial terminator.</p>
 +
<center>
 +
<img src="https://static.igem.org/mediawiki/2017/4/42/T--BostonU--Part_t500.png" width = 25%></img>
 +
</center>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="body-type mainwrap"><a href = "http://parts.igem.org/Part:BBa_K2411004" style="text-indent:0pt;">BBa_K2411004</a>: Toehold 1</p>
 +
<p class="body-type mainwrap">This sequence is the forward engineered toehold from Green et. al. This part contains the hairpin loop sequence that with the RBS. There is no gene associated with this toehold.</p>
 +
<center>
 +
<img src="https://static.igem.org/mediawiki/2017/c/c8/T--BostonU--Part_th2.png" width = 25%></img>
 +
</center>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="body-type mainwrap"><a href = "http://parts.igem.org/Part:BBa_K2411007" style="text-indent:0pt;">BBa_K2411007</a>: Toehold 2</p>
 +
<p class="body-type mainwrap">This sequence is the second best performing forward engineered toehold from Green et. al. There is no gene associated with this toehold.</p>
 +
<center>
 +
<img src="https://static.igem.org/mediawiki/2017/7/74/T--BostonU--Part_th1.png" width = 25%></img>
 +
</center>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="body-type mainwrap">In addition, the deGFP part utilized in our composite part was submitted under BBa_K2205001 by iGEM17_Newcastle.</p>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="body-type mainwrap">The sequences for the promoter, terminator, and deGFP were obtained from the pBEST plasmid used to Vincent Noireaux and his lab with their cell-free system [1].</p>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="body-type mainwrap">The sequences for the toeholds were obtained from Green et al. [2].</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">[1]Shin, Jonghyeon, and Vincent Noireaux. "Efficient cell-free expression with the endogenous E. Coli RNA polymerase and sigma factor 70." Journal of biological engineering 4.1 (2010): 8.</p>
 +
<p class="body-type mainwrap">&nbsp;</p>
 +
<p class="body-type mainwrap">[2] Green, Alexander A., et al. "Toehold switches: de-novo-designed regulators of gene expression." Cell 159.4 (2014): 925-939.</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>Description of First submitted part</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>

Latest revision as of 06:16, 31 October 2017

OUR PARTS