Difference between revisions of "Team:BostonU/Parts"

 
(26 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 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:150%;
+
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+100&0+0,1+100 */
−
  color: #b9b4b4;
+
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 */
 
}
 
}
−
 
+
.background-gradient-up {
−
div.tab {
+
height: 360px;
−
    text-align:center;
+
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+100&1+0,0+100 */
−
    overflow: hidden;
+
background: -moz-linear-gradient(top, rgba(239,239,238,1) 0%, rgba(239,239,238,0) 100%); /* FF3.6-15 */
−
    border: 1px solid #fff0f0;
+
background: -webkit-linear-gradient(top, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 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) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
−
    white-space: nowrap;
+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefee', endColorstr='#00efefee',GradientType=0 ); /* IE6-9 */
 
}
 
}
−
 
+
.background-gradient-both {
−
div.tab button {
+
height: 360px;
−
    background-color: inherit;
+
/* 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 */
−
    border: none;
+
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 */
−
    outline: none;
+
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 */
−
    cursor: pointer;
+
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+ */
−
    padding: 20px 100px ;
+
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefee', endColorstr='#efefee',GradientType=0 ); /* IE6-9 */
−
    transition: 0.3s;
+
−
    font-size: 200%;
+
 
}
 
}
−
 
+
#panel1 {
−
div.tab button:hover {
+
background: #EFEFEE;
−
    background-color: pink;
+
width: 100%;
 +
color: #1d1d1d;
 +
z-index: 1;
 
}
 
}
−
 
+
#backgroundimage2 {
−
div.tab button.active {
+
background-image: url("#");
−
     background-color: white;
+
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 {
−
.tabcontent {
+
top: 40%;
−
    background-color: #fff0f0;
+
color: #8C181B;
−
    display: none;
+
}
−
    padding: 10px 200px;
+
#protocol-accordion .ui-accordion-content  {
−
    border: 1px solid #fff0f0;
+
background: #FFFFFF;
−
    border-top: none;
+
color: #A9A9A9;
−
    font-size: 200%;
+
border-radius: 20px;
−
    white-space:nowrap;
+
}
 +
#protocol-accordion .ui-accordion-content > * {
 +
  margin: 0;
 +
  padding: 40px;
 +
}
 +
.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>Human Practices<br><br></h1>
+
</div></div>
−
<seciton id = "part2">
+
<div id="panel1" class="link-slideup">
−
  <p><br>Brief Introduction: <br></p>
+
<p class="inline-heading-type mainwrap">We submitted two composite parts to the registry: BBa_K2411005 and BBa_K2411008.</p>
−
</section>
+
<p class="body-type mainwrap">&nbsp;</p>
−
</section>
+
<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>
 +
<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, 'Summer Pathways')">Summer Pathways</button>
+
</div></div>
−
  <button class="tablinks" onclick="openCity(event, 'Artist Collaboration')">Artist Collaboration</button>
+
<script> /* THIS MAKES ANY WRAPPED ELEMENT ON THE PAGE FADE IN */
−
  <button class="tablinks" onclick="openCity(event, 'Industry Visits')">Industry Visits</button>
+
$(document).ready(function () {
−
  <button class="tablinks" onclick="openCity(event,'CNA')">CNA</button>
+
     $('.mainwrap').fadeIn(1000);
−
</div>
+
});
−
<div id="Summer Pathways" class="tabcontent">
+
−
  <p>WORDS</p>
+
−
</div>
+
−
<div id="Artist" class="tabcontent">
+
−
  <p>WORDS</p>
+
−
</div>
+
−
<div id="Industry Visits" class="tabcontent">
+
−
  <p>WORDS</p>
+
−
</div>
+
−
<div id="CNA" class="tabcontent">
+
−
  <p> WORDS</P>
+
−
<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