Difference between revisions of "Team:Lethbridge"

 
(88 intermediate revisions by 4 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*/
+
p {text-align: center !important;}
body {padding-top: 3.89em; font-family: Arial, sans-serif !important; background-color:#F2F2F2; color: black !important;}
+
.bannerImg {max-width: 100%; height:auto;}
+
#slogan {text-align: center; font-size: calc(30px + 2vw) !important; line-height: calc(1.1em + 1.5vw) !important; font-weight: bold;}
+
.segmentHeader {font-size: calc(26px + 1vw) !important; line-height: calc(1.1em + 0.5vw) !important;}
+
.segmentHeader {overflow: hidden; text-align: center; margin-left: 5%; margin-right: 5%;}
+
.segmentHeader:before, .segmentHeader:after {background-color: black; content: ""; display: inline-block; height: 3px; position: relative; vertical-align: middle; width: 50%;}
+
.segmentHeader:before {margin-left: -50%; right- 0.5 em;}
+
.segmentHeader:after {left: 0,5em; margin-right: -50%;}
+
  
 +
/* FOR INLINE-BLOCK PURPOSES */
 
.contentDiv {display: inline-block;}
 
.contentDiv {display: inline-block;}
.segmentContainer p.segment1 {font-size: calc(18px + 0.5vw) !important; line-height: calc(1.1em + 0.5vw) !important; margin-left: 5%; margin-right: 5%;}
+
#text60 {width: 60%; vertical-align:middle;}
.segmentContainer p.segment2 {font-size: calc(22px + 0.5vw) !important; line-height: calc(1.1em + 0.5vw) !important;}
+
.segmentContainer .imageDiv img {display: block; height: auto; max-width: 100%;}
+
 
+
p {text-align: center !important;}
+
 
+
 
#text50 {width: 50%; vertical-align:middle;}
 
#text50 {width: 50%; vertical-align:middle;}
 
#text40 {width: 40%; vertical-align:middle;}
 
#text40 {width: 40%; vertical-align:middle;}
Line 34: Line 20:
 
#text25 {width: 25%; vertical-align:middle;}
 
#text25 {width: 25%; vertical-align:middle;}
  
#image65 {width:65; height: 100%; vertical-align:middle;}
+
/* not for all pages, since all pages do not use inline-block */
#image60 {width:60; height: 100%; vertical-align:middle;}
+
@media only screen and (max-width: 500px) {
#image50 {width:50; height: 100%; vertical-align:middle;}
+
    #allContent img {width: 95%; height: 95%;}}
#image40 {width:40; height: 100%; vertical-align:middle;}
+
 
+
.dividerLine {margin-left: 30%; margin-right:30%; border: 1px solid darkgrey;}
+
  
 
</style>
 
</style>
 
<body>
 
<body>
 
<br>
 
<br>
<img src="https://static.igem.org/mediawiki/2017/5/56/Banner_nextvivo.png" class="bannerImg"><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>-->
  
 
<p id="slogan">Cell-free Synthetic Biology<br> for the Masses</p><br>
 
<p id="slogan">Cell-free Synthetic Biology<br> for the Masses</p><br>
  
<h1 class="segmentHeader">Why Cell-free?</h1>
+
<!-- anchor buttons -->
 +
<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>
 +
 
 +
<br><br><br><br>
 +
<h2 class="segmentHeader">Why Cell-free?</h2>
  
 
<center>
 
<center>
 
     <div class="segmentContainer">
 
     <div class="segmentContainer">
         <div class="contentDiv" id="text50"><p class="segment1"><br> <a href="https://2017.igem.org/Team:Lethbridge/Description" >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 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>
         <div class="contentDiv" id="image65"><img src="https://static.igem.org/mediawiki/2017/b/b4/Celltocellfree.png" width=384px; height=500px; padding:10px; />
+
         <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>
 
</center>
  
    <div style="clear: both"></div>
+
<div style="clear: both" id="anchor2"></div>
  
 +
<br><br><br><br>
 +
<h2 class="segmentHeader">Motivation</h2>
  
<h1 class="segmentHeader">Motivation</h1>
+
<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>
 +
</center>
  
<center><div class="segmentContainer"><p class="segment1">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" >education system and Do-It-Yourself (DIY) community</a></p></div></center>
+
<center>
 +
    <img src="https://static.igem.org/mediawiki/2017/4/40/Userswithtext.png" width=704px; height=250px; padding: 30px class="bannerImg" />
 +
</center>
  
<center><img src="https://static.igem.org/mediawiki/2017/4/40/Userswithtext.png" width=704px; height=250px; padding: 30px class="fitBanner" /></center>
+
<div style="clear: both" id="anchor3"></div>
  
<div style="clear: both"></div><br>
+
<br><br><br><br>
 
+
<h2 class="segmentHeader">Design</h2>
 
+
<h1 class="segmentHeader">Design</h1>
+
  
 
<center>
 
<center>
    <div class="segmentContainer"><p class="segment1">Lowering the barrier to synthetic biology, our <a href="https://2017.igem.org/Team:Lethbridge/Design" >project</a> aims to create a <b>STANDARD, SAFE, MODULAR</b> and <b>USER-FRIENDLY</b> cell-free system</p>
+
    <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>
 
</center>
  
 
<center>
 
<center>
     <img src="https://static.igem.org/mediawiki/2017/1/16/Designwithwords.png" width=712px; height=200px; padding: 30px; class="fitBanner" />
+
     <img src="https://static.igem.org/mediawiki/2017/1/16/Designwithwords.png" width=712px; height=200px; padding: 30px; class="bannerImg" />
 
</center>
 
</center>
  
    <div style="clear: both"></div><br>
+
<div style="clear: both" id="anchor4"></div>
  
 
+
<br><br><br><br>
<h1 class="segmentHeader">Our System</h1>
+
<h2 class="segmentHeader">Our System</h2>
  
 
<center>
 
<center>
 
     <div class="segmentContainer">
 
     <div class="segmentContainer">
         <div class="contentDiv" id="text40"><p class="segment2">A collection of standard <a href="https://2017.igem.org/Team:Lethbridge/Parts" >parts</a> for essential TX-TL components<br><br>Streamline and novel purification techniques</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 class="contentDiv" id="image40"><img src="https://static.igem.org/mediawiki/2017/9/98/T--Lethbridge--generaloep.png" width=371px; height=350px; padding:20px class="testImage" />
+
 
         </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>
 
     </div>
 
</center>
 
</center>
 
                  
 
                  
    <div style="clear: both"></div><br><br>
+
<div style="clear: both"></div><br><br>
 
+
    <hr class="dividerLine">
+
  
 +
<hr class="dividerLine">
 
      
 
      
 
<center>
 
<center>
 
     <div class="segmentContainer">
 
     <div class="segmentContainer">
         <div class="contentDiv" id="image65"><img src="https://static.igem.org/mediawiki/2017/1/13/Codonswappingwithwords.png" width=408px; height=200px; class="testImage" />
+
         <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>
         <div class="contentDiv" id="text40"><p class="segment2"><br>A tool to create an orthogonal system</p>
+
         <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>
 
     </div>
 
     </div>
 
</center>
 
</center>
  
    <div style="clear: both"></div><br>
+
<div style="clear: both"></div><br>
 
+
    <hr class="dividerLine">
+
  
 +
<hr class="dividerLine">
  
 
<center>
 
<center>
 
     <div class="segmentContainer">
 
     <div class="segmentContainer">
         <div class="contentDiv" id="image65"><img src="https://static.igem.org/mediawiki/2017/1/1c/Softwarewithwords.png" width=408px; height=252px; class="testImage" />
+
         <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" id="text40"><p class="segment2"><br>A tool to detect potentially harmful encrypted sequences</p>
+
         <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><br>
+
 
+
    <hr class="dividerLine">
+
 
+
 
+
<center>
+
    <div class="segmentContainer">
+
        <div class="contentDiv" id="text40"><p class="segment2">A safe synthetic biology teaching tool<br><br>Simplified protocols<br><br>Curriculum aligned lesson plans</p>
+
        </div>
+
        <div class="contentDiv" id="image40"><img src="https://static.igem.org/mediawiki/2017/8/89/T--Lethbridge--edkitsimple.png" width=500px; height=421px; class="testImage" />
+
 
         </div>
 
         </div>
 
     </div>
 
     </div>
Line 140: Line 138:
 
     <div style="clear: both"></div>
 
     <div style="clear: both"></div>
 
<br><br><br><br><br>
 
<br><br><br><br><br>
   
+
 +
</div>
 +
<br><br>
 
<img src="https://static.igem.org/mediawiki/2017/6/63/Banner_footer.png" alt="footer with sponsors" class="bannerImg">
 
<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


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