Difference between revisions of "Team:British Columbia/Part Collection"

Line 21: Line 21:
  
  
 +
<div class="wrap">
 +
  <div class="header">
 +
    <h1>LESS Layout</h1>
 +
    <p>This interface is setup to be easily configured by changing the values of only a few variables. This layout is also built to be responsive.</p>
 +
  </div>
  
−
<style type="text/css">
+
  <div class="column">
−
.tftable {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #ebab3a;border-collapse: collapse;}
+
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere eget nulla a pharetra. Suspendisse ac venenatis odio. Sed blandit posuere erat a posuere. Suspendisse odio erat, elementum sodales ante vel, malesuada rutrum turpis.</p>
−
.tftable th {font-size:12px;background-color:#e6983b;border-width: 1px;padding: 8px;border-style: solid;border-color: #ebab3a;text-align:left;}
+
  </div>
−
.tftable tr {background-color:#f0c169;}
+
    <div class="column">
−
.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #ebab3a;}
+
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere eget nulla a pharetra. Suspendisse ac venenatis odio. Sed blandit posuere erat a posuere. Suspendisse odio erat, elementum sodales ante vel, malesuada rutrum turpis.</p>
−
.tftable tr:hover {background-color:#ffffff;}
+
  </div>
−
</style>
+
    <div class="column">
 +
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere eget nulla a pharetra. Suspendisse ac venenatis odio. Sed blandit posuere erat a posuere. Suspendisse odio erat, elementum sodales ante vel, malesuada rutrum turpis.</p>
 +
  </div>
 +
    <div class="column">
 +
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere eget nulla a pharetra. Suspendisse ac venenatis odio. Sed blandit posuere erat a posuere. Suspendisse odio erat, elementum sodales ante vel, malesuada rutrum turpis.</p>
 +
  </div>
  
−
<table class="tftable" border="1">
+
  <div class="footer">
−
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
+
    <p></p>
−
<tr><td>Row:1 Cell:1</td><td>Row:1 Cell:2</td><td>Row:1 Cell:3</td></tr>
+
  </div>
−
</table>
+
</div>
  
−
<p><small>Created with the <a href="http://www.textfixer.com/html/html-table-generator.php" target="_blank">HTML Table Generator</a></small></p>
+
<style>
 +
 
 +
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100|Open+Sans:400,700,300,600,800|Oswald:400,700,300);
 +
*,
 +
*:before,
 +
*:after {
 +
  -webkit-box-sizing: border-box;
 +
  -moz-box-sizing: border-box;
 +
  box-sizing: border-box;
 +
  padding: 0;
 +
  margin: 0;
 +
}
 +
html {
 +
  height: 100%;
 +
}
 +
body {
 +
  background-color: #f1595a;
 +
  font-size: 19px;
 +
  font-family: 'Open Sans', 'sans-serif';
 +
  color: #414141;
 +
  font-weight: 300;
 +
  height: 100%;
 +
}
 +
h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6 {
 +
  margin-bottom: 0.8em;
 +
}
 +
ul {
 +
  margin-left: 40px;
 +
}
 +
::selection {
 +
  background: #ffffff;
 +
}
 +
.wrap {
 +
  max-width: 1200px;
 +
  padding: 0 0 100px 0;
 +
  overflow: hidden;
 +
  margin: 0 auto;
 +
}
 +
@media screen and (max-width: 768px) {
 +
  .wrap {
 +
    padding: 0 3% 10px 3%;
 +
  }
 +
}
 +
.column {
 +
  box-shadow: 2px 2px 0 1px rgba(0, 0, 0, 0.25);
 +
  background: #efefef;
 +
  border-radius: 2px;
 +
  padding: 20px;
 +
  width: calc(46.66666667%);
 +
  margin: 0 calc(1.66666667%) 20px;
 +
  display: block;
 +
  float: left;
 +
}
 +
.column ::selection {
 +
  background: #f9b7b7;
 +
}
 +
@media screen and (max-width: 768px) {
 +
  .column {
 +
    margin: 0 0 20px 0;
 +
    width: 100%;
 +
  }
 +
}
 +
.header {
 +
  max-width: 1200px;
 +
  text-align: center;
 +
  margin: 50px auto;
 +
}
 +
.header h1 {
 +
  text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6);
 +
  text-transform: uppercase;
 +
  font-family: 'Oswald', 'sans-serif';
 +
  letter-spacing: 10px;
 +
  margin-bottom: 15px;
 +
  color: #efefef;
 +
  font-weight: 300;
 +
  font-size: 4.1em;
 +
}
 +
.header p {
 +
  color: rgba(0, 0, 0, 0.6);
 +
  font-family: 'Roboto Slab', 'serif';
 +
  line-height: 1.3em;
 +
  font-size: 1.4em;
 +
  font-weight: 500;
 +
  max-width: 55%;
 +
  margin: auto;
 +
}
 +
 
 +
</style>
  
  

Revision as of 01:09, 19 September 2015

UBC iGEM 2015

 

Part Collection

 

Our collection of parts contains genes required for modification of imidacloprid and degradation of 6-chloronicotinic acid (6-CNA). Final parts were assembled in pSB1C3 backbone harboring the chloramphenicol resistance gene and designed to have a LacI repressor, ribosome binding site, pTAC promoter, our degradation genes of interest, and double terminator.

The three composite parts each containing a cytochrome P450 (CYP) were designed to include an N-terminal pelB signal sequence to target expression to the periplasm and a cytochrome P450 reductase (CPR) for functionality of the CYP. The CPR was also made with it’s own designated rbs, promoter, pelB signal sequence, and terminator.

Composite parts with multiple degradation genes were designed so that each gene in the construct had a dedicated rbs, promoter, and double terminator.

LESS Layout

This interface is setup to be easily configured by changing the values of only a few variables. This layout is also built to be responsive.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere eget nulla a pharetra. Suspendisse ac venenatis odio. Sed blandit posuere erat a posuere. Suspendisse odio erat, elementum sodales ante vel, malesuada rutrum turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere eget nulla a pharetra. Suspendisse ac venenatis odio. Sed blandit posuere erat a posuere. Suspendisse odio erat, elementum sodales ante vel, malesuada rutrum turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere eget nulla a pharetra. Suspendisse ac venenatis odio. Sed blandit posuere erat a posuere. Suspendisse odio erat, elementum sodales ante vel, malesuada rutrum turpis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere eget nulla a pharetra. Suspendisse ac venenatis odio. Sed blandit posuere erat a posuere. Suspendisse odio erat, elementum sodales ante vel, malesuada rutrum turpis.