Difference between revisions of "Team:CU-Boulder/Collaborations"

(Replaced content with "{{Team:CU-Boulder/Templates/Navigation}} <html> </html>")
 
Line 2: Line 2:
  
 
<html>
 
<html>
 +
<style>
 +
 +
section {
 +
  height:100vh;
 +
  position:relative;
 +
  align-content: center;
 +
  justify-content: center;
 +
  display: flex;
 +
  flex-wrap: nowrap;
 +
  flex-direction: column;
 +
  align-items: center;
 +
  background-color: black;
 +
}
 +
 +
sectionTwo {
 +
  position:relative;
 +
  align-content: center;
 +
  justify-content: center;
 +
  display: flex;
 +
  flex-wrap: nowrap;
 +
  flex-direction: column;
 +
  align-items: center;
 +
  background-color: black;
 +
}
 +
 +
.mainhead{
 +
  text-shadow: -3px -3px #70a5f9;
 +
  font-size: 90px;
 +
  color: #fffbea;
 +
  font-family: inconsolata, sans-serif;
 +
  border-top: solid 5px;
 +
  border-bottom: solid 5px;
 +
  border-color: #fffbea;
 +
  padding-left: 45px;
 +
  padding-right: 45px;
 +
  padding-top: 45px;
 +
  padding-bottom: 45px;
 +
}
 +
 +
.sectionHead{
 +
  margin-top:100px;
 +
  margin-bottom: 30px;
 +
  text-shadow: -2px -2px #70a5f9;
 +
  font-size: 45px;
 +
  color: #fffbea;
 +
  font-family: inconsolata, sans-serif;
 +
  padding-left: 20px;
 +
  padding-right: 20px;
 +
  padding-top: 30px;
 +
  padding-bottom: 30px;
 +
}
 +
 +
 +
.pageBuffer{
 +
  margin-top: 50px;
 +
  max-width: 1100px;
 +
  background-color: #898989;
 +
  border-radius: 20px;
 +
  display: flex;
 +
  align-content: center;
 +
  justify-content: flex-start;
 +
  flex-wrap: nowrap;
 +
  flex-direction: column;
 +
  align-items: center;
 +
 +
}
 +
 +
 +
.textboxTop{
 +
  margin: 30px;
 +
  padding: 15px;
 +
  font-family: inconsolata, sans-serif;
 +
  font-size: 25px;
 +
  background-color: #70a5f9;
 +
  border-radius: 12px;
 +
  box-shadow: 5px 5px #223fbf;
 +
 +
  }
 +
 +
.textboxMiddle{
 +
  margin: 30px;
 +
  padding: 15px;
 +
  font-family: inconsolata, sans-serif;
 +
  font-size: 15px;
 +
  background-color: #70a5f9;
 +
  border-radius: 12px;
 +
  box-shadow: 5px 5px #223fbf;
 +
  width: 700px;
 +
 +
  }
 +
 +
 +
.middleboxContainer{
 +
 +
  margin: 20px;
 +
  padding: 15px;
 +
  float: left;
 +
  font-family: inconsolata, sans-serif;
 +
  font-size: 25px;
 +
  background-color: #898989;
 +
  border-radius: 12px;
 +
  display: flex;
 +
  align-content: center;
 +
  justify-content: center;
 +
  flex-wrap: nowrap;
 +
  align-items: center;
 +
 +
}
 +
 +
.middleboxVert{
 +
  overflow: auto;
 +
  max-width: 1000px;
 +
  margin: 20px;
 +
  padding: 15px;
 +
  float: left;
 +
  font-family: inconsolata, sans-serif;
 +
  font-size: 25px;
 +
  background-color: #b2b2b2;
 +
  border-radius: 12px;
 +
 +
 +
}
 +
.middleboxVertBottom{
 +
  overflow: auto;
 +
  max-width: 1000px;
 +
  width: 750px;
 +
  margin: 20px;
 +
  padding: 15px;
 +
  font-family: inconsolata, sans-serif;
 +
  font-size: 25px;
 +
  background-color: #b2b2b2;
 +
  border-radius: 12px;
 +
 +
 +
}
 +
 +
.dummyGraphContainer{
 +
  background-color: #70a5f9;
 +
  margin: 5px auto;
 +
 +
}
 +
 +
.dummyParagraph{
 +
   
 +
    border-radius: 12px;
 +
    padding: 10px;
 +
    font-size: 20px;
 +
    background-color: #70a5f9;
 +
    margin: 10px;
 +
    color: white;
 +
    display: flex;
 +
    border-radius: 12px;
 +
    align-content: center;
 +
    justify-content: flex-start;
 +
    flex-direction: column;
 +
    overflow: auto;
 +
}
 +
 +
.dummyGraph{
 +
    margin-top: 40px;
 +
    border: solid 5px #70a5f9;
 +
    background-color: #e0e0e0;
 +
 +
}
 +
 +
.graphOneContainer{
 +
    margin: auto;
 +
    overflow: scroll;
 +
 +
 +
}
 +
 +
.dummyGraphOneTitle{
 +
    padding: 10px;
 +
    font-size: 25px;
 +
    font-color: white;
 +
}
 +
 +
.dummyGraphOnePara{
 +
    margin: 0 auto;
 +
    font-size: 15px;
 +
    color: red;
 +
    padding: 20px;
 +
}
 +
 +
.talk-bubble {
 +
margin: 60px;
 +
        padding: 10px;
 +
        display: inline-block;
 +
        position: relative;
 +
height: auto;
 +
background-color: #5b5b5b;
 +
        font-size: 25px;
 +
        border-radius: 12px;
 +
        font-color: white;
 +
        font-family: palatino;
 +
}
 +
 +
.head{
 +
  position: relative;
 +
  text-shadow: -2px -2px red;
 +
  float: left;
 +
  margin-top: 200px;
 +
  font-size: 45px;
 +
  color: white;
 +
  font-family: inconsolata, sans-serif;
 +
}
 +
 +
.tri-right.border.btm-left:before {
 +
content: ' ';
 +
position: absolute;
 +
width: 0;
 +
height: 0;
 +
left: -8px;
 +
  right: auto;
 +
  top: auto;
 +
bottom: -40px;
 +
border: 32px solid;
 +
border-color: transparent transparent transparent #5b5b5b;
 +
}
 +
.tri-right.btm-left:after{
 +
content: ' ';
 +
position: absolute;
 +
width: 0;
 +
height: 0;
 +
left: 0px;
 +
  right: auto;
 +
  top: auto;
 +
bottom: -20px;
 +
border: 22px solid;
 +
border-color: transparent transparent transparent #5b5b5b;
 +
}
 +
 +
</style>
 +
 +
<section>
 +
 +
<body>
 +
<div class = "mainhead"><h><i> &#8226; Collaboration &#8226;</i></h></div>
 +
 +
</section>
 +
 +
<section>
 +
<div class = "pageBuffer">
 +
<span class = "textboxTop">
 +
 +
<p>
 +
This year, we decided early on to try and reach out to other iGEM teams who we might be able to help, or could help us. Of particular interest to us was a BioBrick and iGEM-internal system for non-canonical amino acid incorporation, because even until now our pEVOL AzoPhe incorporation plasmid remains something of a black box to us. </p>
 +
</span>
 +
 +
<span class = "textboxTop"><p>
 +
We ended up reaching out to and collaborating with Bielefeld-CiBiTec, whose project focused on the development of new non-canonical base pairs to try and expand the genetic code. While we were not ultimately able to test out their new system, we did provide them with some of our ncAA (AzoPhe) and the incorporation plasmid so that they could test it against their own system for ncAA incorporation. We also sent them a number of plasmids from our own project, which they graciously validated in their own lab as working as intended, and also provided us with some beautiful imaging data you can see below.
 +
</p>
 +
</span>
 +
</div>
 +
</section>
 +
 +
 +
 +
<sectionTwo>
 +
 +
 +
<div class = "pageBuffer">
 +
 +
<div class = "middleboxContainer">
 +
<div class = "middleboxVert">
 +
<div class = "dummyParagraph">
 +
<div class = "dummyGraphOneTitle">
 +
<h> EutS LVA Image Stack </h>
 +
<div class = "dummyGraphContainer">
 +
<div class = "dummyGraph">
 +
 +
<img src = "https://static.igem.org/mediawiki/2017/0/03/T-CU_Boulder--EutSCo.gif" width = "375px"/>
 +
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class = "middleboxVert">
 +
<div class = "dummyParagraph">
 +
 +
 +
<h> Fusion Red Image Stack </h>
 +
 +
<div class = "dummyGraphContainer">
 +
<div class = "dummyGraph">
 +
 +
<img src = "https://static.igem.org/mediawiki/2017/1/14/T-CU_Boulder--FusRed.gif" width = "375px"/>
 +
</div>
 +
</div>
 +
</div>
 +
 +
</div>
 +
</div>
 +
</div>
 +
 +
 +
 +
<div class = "pageBuffer">
 +
 +
<div class = "dummyGraphOneContainer">
 +
<div class = "middleboxContainer">
 +
<div class = "middleboxVert">
 +
<div class = "dummyParagraph">
 +
<div class = "dummyGraphOneTitle">
 +
<h> EutS LVA 3D Model </h>
 +
<div class = "dummyGraphContainer">
 +
<div class = "dummyGraph">
 +
 +
<video width = "375px" controls>
 +
  <source src = "https://static.igem.org/mediawiki/2017/7/75/T-CU_Boulder--EutSCoVideo.mp4" type="video/mp4">
 +
  </video>
 +
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<div class = "middleboxVert">
 +
<div class = "dummyParagraph">
 +
 +
<div class = "dummyGraphOneTitle">
 +
<h>Fusion Red 3D Model </h>
 +
 +
<div class = "dummyGraphContainer">
 +
<div class = "dummyGraph">
 +
 +
<video width = "375px" controls>
 +
  <source src = "https://static.igem.org/mediawiki/2017/a/a7/T-CU_Boulder--FusRedVideo.mp4" type="video/mp4">
 +
  </video>
 +
 +
 +
</div>
 +
</div>
 +
</div>
 +
 +
</div>
 +
</div>
 +
</div>
 +
 +
 +
 +
 +
</sectionTwo>
 +
</body>
  
 
</html>
 
</html>

Latest revision as of 03:06, 2 November 2017

• Collaboration •

This year, we decided early on to try and reach out to other iGEM teams who we might be able to help, or could help us. Of particular interest to us was a BioBrick and iGEM-internal system for non-canonical amino acid incorporation, because even until now our pEVOL AzoPhe incorporation plasmid remains something of a black box to us.

We ended up reaching out to and collaborating with Bielefeld-CiBiTec, whose project focused on the development of new non-canonical base pairs to try and expand the genetic code. While we were not ultimately able to test out their new system, we did provide them with some of our ncAA (AzoPhe) and the incorporation plasmid so that they could test it against their own system for ncAA incorporation. We also sent them a number of plasmids from our own project, which they graciously validated in their own lab as working as intended, and also provided us with some beautiful imaging data you can see below.

EutS LVA Image Stack
Fusion Red Image Stack
EutS LVA 3D Model
Fusion Red 3D Model