Difference between revisions of "Team:Lethbridge"

 
(258 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
{{Team:Lethbridge/assets/reset.css}}
 
{{Team:Lethbridge/assets/reset.css}}
 +
{{Team:Lethbridge/assets/sidemenuremove.css}}
 
{{Team:Lethbridge/navbar}}
 
{{Team:Lethbridge/navbar}}
 +
{{Team:Lethbridge/assets/allpages.css}}
 +
{{Team:Lethbridge/top}}
 
<html>
 
<html>
 
<style>
 
<style>
−
/*SIDE MENU FOR IGEM STUFF*/
+
/*RESET AND REMOVAL CSS IS PART OF RESET AND SIDEMENUREMOVE TEMPLATE*/
−
#sideMenu{width: 200px;position: absolute;top: 20px;left: 1020px;z-index: 10;padding-top: 0px;padding-bottom: 15px;padding-left: 15px;padding-right: 15px;background-color: white;text-align: left;display: none;z-index: 9996;}
+
/* RULES FOR ALL PAGES ARE PART OF THE ALLPAGES.CSS TEMPLATE*/
−
#content{width: 100%;padding: 0px;margin-left: 0px;}
+
/* RULES FOR THIS PAGE ONLY */
−
#top_title{overflow: hidden;display: none;}
+
−
#top_menu_14{height: 20px;}
+
−
#top_menu_under{height: 0px;}
+
−
/*#globalWrapper{padding-bottom: 200px;}*/
+
−
 
+
  
−
/*VISIBLE CONTENT STYLING BEGINS HERE*/
 
−
body {padding-top: 3.89em; font-family: Arial, sans-serif !important;}
 
−
/*.centerBanner {display: block; margin: auto;}*/
 
−
.fitBanner {max-height: 100%; max-width: 100%;}
 
−
/*.centerContainer {margin-left: 5%; margin-right: 5%; text-align: center; font-family: "Arial"; font-size: 125%;}*/
 
−
.textTitle {font-size: 200%; font-style: oblique; text-align: center;}
 
 
p {text-align: center !important;}
 
p {text-align: center !important;}
−
h1 {font-size: 4vw; text-align: center;}
 
  
−
.segmentHeader {font-size: 4vw; overflow: hidden; text-align: center;}
+
/* FOR INLINE-BLOCK PURPOSES */
−
.segmentHeader:before, .segmentHeader:after {background-color: black; content: ""; display: inline-block; height: 3px; position: relative; vertical-align: middle; width: 50%;}
+
.contentDiv {display: inline-block;}
−
.segmentHeader:before {margin-left: -50%; right- 0.5 em;}
+
#text60 {width: 60%; vertical-align:middle;}
−
.segmentHeader:after {left: 0,5em; margin-right: -50%;}
+
#text50 {width: 50%; vertical-align:middle;}
−
.segmentDiv {margin-left: 5%; margin-right: 5%;}
+
#text40 {width: 40%; vertical-align:middle;}
−
.segmentP {font-size: 2.5vw !important;}
+
#text30 {width: 30%; vertical-align:middle;}
−
.segmentP2 {font-size: 2.2vw !important;}
+
#text25 {width: 25%; vertical-align:middle;}
  
−
.widthImage {max-width: 100%; height: auto;}
+
/* not for all pages, since all pages do not use inline-block */
−
.leftImage {}
+
@media only screen and (max-width: 500px) {
−
.rightImage {}
+
    #allContent img {width: 95%; height: 95%;}}
−
 
+
−
.testContent {display: inline-block;}
+
−
#testText {width: 50%;}
+
−
#testImage {width: 40%;}
+
  
 
</style>
 
</style>
 
<body>
 
<body>
−
<font color="black">
 
−
<!--<body style="background-color:#F2F2F2;">-- please don't alter styling without keeping me in the loop beforehand, when two people are editing, it will cause problems-->
 
−
<img src="https://static.igem.org/mediawiki/2017/c/c9/Logo_banner.png" class="centerBanner fitBanner">
 
−
<div><h1>Cell-free Synthetic Biology<br> for the Masses</h1></div>
 
−
<br>
 
 
<br>
 
<br>
 +
<img src="https://static.igem.org/mediawiki/2017/5/56/Banner_nextvivo.png" class="bannerImg">
 +
<div id="allContent"><!--div to set margin for all content but header and footer image -->
 +
<!--<div class="circleTop" style="margin-left:90%"><a href="#top">top</a></div>-->
  
−
<div class="testContainer">
+
<p id="slogan">Cell-free Synthetic Biology<br> for the Masses</p><br>
−
    <div class="testContent" id="testText"><p>content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content</p></div>
+
−
    <div class="testContent" id="testImage"><img src="https://static.igem.org/mediawiki/2017/6/63/Tempbiophoto.jpg" class="testIMG" width=300 height=300 /></div>
+
−
</div
+
  
−
 
+
<!-- anchor buttons -->
−
    <div class="segmentDiv">
+
−
        <div class="centerContainer">
+
−
            <h3 class="segmentHeader">Why Cell-free?</h3>
+
−
            <img src="https://static.igem.org/mediawiki/2017/b/b4/Celltocellfree.png" style="float:right" width=384px; height=500px; padding:10px; class="rightImage" />
+
−
            <p class="segmentP"><br>Cell-free systems include all the necessary biomachinery for producing proteins outside of a living cell<br><br>Due to their inherent safety and simplicity, cell-free systems provide a powerful tool to synthetic biologists for engineering novel systems without the constraints of cellular life</p>
+
−
        </div>
+
−
    </div>
+
−
   
+
−
<div style="clear: both"></div>
+
 
<br>
 
<br>
 +
<center>
 +
<form>
 +
    <input class="tealButton" type="button" value="Why Cell-free?" onclick="window.location.href='#anchor1'" />
 +
</form>
 +
   
 +
<form>
 +
    <input class="tealButton" type="button" value="Motivation" onclick="window.location.href='#anchor2'" />
 +
</form>
 +
   
 +
<form>
 +
    <input class="tealButton" type="button" value="Design" onclick="window.location.href='#anchor3'" />
 +
</form>
 +
   
 +
<form>
 +
    <input class="tealButton" type="button" value="Our System" onclick="window.location.href='#anchor4'" />
 +
</form>
 +
<div style="clear:both" id="anchor1"></div>
 +
</center>
  
−
     <div class="segmentDiv">
+
<br><br><br><br>
−
         <div class="centerContainer">
+
<h2 class="segmentHeader">Why Cell-free?</h2>
−
        <h3 class="segmentHeader">Motivation</h3>
+
 
−
        <p class="segmentP">A lack of standardization, simplification and flexibility has limited the application of cell-free systems, including its use within the education system and DIY community</p>
+
<center>
−
         <p class="segmentP">We have identified three target user-groups for our system:</p>
+
     <div class="segmentContainer">
−
         <center><img src="https://static.igem.org/mediawiki/2017/4/40/Userswithtext.png" width=704px; height=250px; padding: 30px class="widthImage" /></center>
+
         <div class="contentDiv" id="text50"><p class="text18"><br><a href="https://2017.igem.org/Team:Lethbridge/Description" id="pageLink">Cell-free systems</a> include all the necessary biomachinery to produce proteins outside of a living cell<br><br>Due to their inherent safety and simplicity, cell-free systems provide a powerful tool to synthetic biologists for engineering novel systems without the constraints of cellular life</p>
 +
         </div>
 +
         <div class="contentDiv"><img src="https://static.igem.org/mediawiki/2017/b/b4/Celltocellfree.png" width=384px; height=500px; padding:10px; />
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 +
</center>
  
−
<div style="clear: both"></div>
+
<div style="clear: both" id="anchor2"></div>
−
<br>
+
−
<br>
+
  
−
    <div class="segmentDiv"">
+
<br><br><br><br>
−
        <div class="centerContainer">
+
<h2 class="segmentHeader">Motivation</h2>
−
        <h3 class="segmentHeader">Design</h3>
+
 
−
        <p class="segmentP">To lower the barrier of synthetic biology our project aims to create a <b>STANDARD</b>, <b>SAFE</b>, <b>MODULAR</b> and <b>USER-FRIENDLY</b> cell-free system</p>
+
<center>
−
      <center><img src="https://static.igem.org/mediawiki/2017/1/16/Designwithwords.png" width=712px; height=200px; padding: 30px; class="widthImage" /></center>
+
    <div class="segmentContainer"><p class="text18">A lack of standardization, simplification and flexibility has limited the application of cell-free systems, including its use within the <a href="https://2017.igem.org/Team:Lethbridge/HP/Silver" id="pageLink">education system and Do-It-Yourself (DIY) community</a></p>
−
        </div>
+
    </div>
 +
</center>
 +
 
 +
<center>
 +
    <img src="https://static.igem.org/mediawiki/2017/4/40/Userswithtext.png" width=704px; height=250px; padding: 30px class="bannerImg" />
 +
</center>
 +
 
 +
<div style="clear: both" id="anchor3"></div>
 +
 
 +
<br><br><br><br>
 +
<h2 class="segmentHeader">Design</h2>
 +
 
 +
<center>
 +
    <div class="segmentContainer"><p class="text18">Lowering the barrier to synthetic biology, our project aims to create a <a href="https://2017.igem.org/Team:Lethbridge/Design" id="pageLink"><b>STANDARD, SAFE, MODULAR</b>, and <b>USER-FRIENDLY</b></a> cell-free system</p>
 
     </div>
 
     </div>
 +
</center>
  
−
<div style="clear: both"></div>
+
<center>
−
<br>
+
    <img src="https://static.igem.org/mediawiki/2017/1/16/Designwithwords.png" width=712px; height=200px; padding: 30px; class="bannerImg" />
−
<br>
+
</center>
  
−
    <div class="segmentDiv">
+
<div style="clear: both" id="anchor4"></div>
−
        <div class="centerContainer">
+
−
        <h3 class="segmentHeader">Our System</h3>
+
−
        <img src="https://static.igem.org/mediawiki/2017/3/3b/Generalfigure.png" style="float:right"; width=494px; height=350px; padding:30px class="widthImage" />
+
−
        <p class="segmentP2"><br>A collection of standard parts for essential TX-TL components<br><br><br><br><br>Streamline and novel purification techniques</p>
+
−
        </div>
+
−
  </div>
+
  
−
<div style="clear: both"></div>
+
<br><br><br><br>
−
<br>
+
<h2 class="segmentHeader">Our System</h2>
−
<br>
+
  
−
      <div class="segmentDiv">
+
<center>
−
          <img src="https://static.igem.org/mediawiki/2017/1/13/Codonswappingwithwords.png" style="float:left" width=408px; height=200px; class="leftImage" />
+
    <div class="segmentContainer">
−
          <p class="segmentP2"><br><br> A tool to create an orthogonal system</p>
+
        <div class="contentDiv" id="text40"><p class="text22">A <a href="https://2017.igem.org/Team:Lethbridge/Parts" id="pageLink">collection of standard parts</a> for essential TX-TL components<br><br>Streamline and novel purification techniques</p>
−
      </div>
+
        </div>
 +
        <div class="contentDiv">
 +
        <img src="https://static.igem.org/mediawiki/2017/9/98/T--Lethbridge--generaloep.png" width=371px; height=350px; padding:20px class="testImage" />
 +
        </div>
 +
    </div>
 +
</center>
 +
               
 +
<div style="clear: both"></div><br><br>
  
−
<div style="clear: both"></div>
+
<hr class="dividerLine">
−
<br>
+
   
−
<br>
+
<center>
 +
    <div class="segmentContainer">
 +
        <div class="contentDiv"><a href="https://2017.igem.org/Team:Lethbridge/Software"><img src="https://static.igem.org/mediawiki/2017/8/88/T--Lethbridge--SoftwareMain.png" width=408px; height=200px; /></a>
 +
        </div>
 +
        <div class="contentDiv" id="text40"><p class="text22"><br>
 +
          <a href="https://2017.igem.org/Team:Lethbridge/Software" id="pageLink">Software</a> to keep synthetic biology safe</p>
 +
        </div>
 +
    </div>
 +
</center>
  
−
      <div class="segmentDiv">
+
<div style="clear: both"></div><br>
−
          <img src="https://static.igem.org/mediawiki/2017/1/1c/Softwarewithwords.png" style="float:left" width=408px; height=252px; class="leftImage" />
+
−
          <p class="segmentP2"><br><br>A tool to detect potentially harmful encrypted sequences</p>
+
−
      </div>
+
  
−
<div style="clear: both"></div>
+
<hr class="dividerLine">
−
<br>
+
−
<br>
+
  
−
      <div class="segmentDiv">
+
<center>
−
          <img src="https://static.igem.org/mediawiki/2017/3/36/Educationkit.png" style="float:right" width=542px; height=400px; class="leftImage" />
+
    <div class="segmentContainer">
−
          <p class="segmentP2"><br><br><br>A safe synthetic biology teaching tool<br><br>Simplified protocols<br><br>Curriculum aligned lesson plans</p>
+
        <div class="contentDiv" id="text40"><p class="text22">Curriculum aligned synthetic biology <a href="https://2017.igem.org/Team:Lethbridge/HP/Gold_Integrated" id="pageLink">teaching tool</a> <br><br>Simplified protocols</p>
−
      </div>
+
        </div>
 +
        <div class="contentDiv"><img src="https://static.igem.org/mediawiki/2017/d/df/T--Lethbridge--edkitsimple2.png" width=500px; height=421px; />
 +
        </div>
 +
    </div>
 +
</center>
  
−
<div style="clear: both"></div>
+
    <div style="clear: both"></div>
−
<!--<img src="https://static.igem.org/mediawiki/2017/9/96/Temp_footer_banner.png" class="centerBanner fitBanner">-->
+
<br><br><br><br><br>
−
</font>
+
 +
</div>
 +
<br><br>
 +
<img src="https://static.igem.org/mediawiki/2017/6/63/Banner_footer.png" alt="footer with sponsors" class="bannerImg">
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 02:51, 2 November 2017

top

Cell-free Synthetic Biology
for the Masses







Why Cell-free?


Cell-free systems include all the necessary biomachinery to produce proteins outside of a living cell

Due to their inherent safety and simplicity, cell-free systems provide a powerful tool to synthetic biologists for engineering novel systems without the constraints of cellular life





Motivation

A lack of standardization, simplification and flexibility has limited the application of cell-free systems, including its use within the education system and Do-It-Yourself (DIY) community





Design

Lowering the barrier to synthetic biology, our project aims to create a STANDARD, SAFE, MODULAR, and USER-FRIENDLY cell-free system





Our System

A collection of standard parts for essential TX-TL components

Streamline and novel purification techniques




Software to keep synthetic biology safe


Curriculum aligned synthetic biology teaching tool

Simplified protocols








footer with sponsors