Difference between revisions of "Team:ASIJ TOKYO/Description"

 
(65 intermediate revisions by 7 users not shown)
Line 8: Line 8:
 
<head>
 
<head>
  
−
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
 
  
 
<style>
 
<style>
Line 129: Line 129:
 
</div>
 
</div>
  
−
</body>
 
−
<head>
 
−
<title>IGEM ASIJ TOKYO</title>
 
−
<meta charset="utf-8" />
 
−
<meta name="viewport" content="width=device-width, initial-scale=1" />
 
−
<!--[if lte IE 8]>
 
  
−
<script>
 
  
−
<title>Solid State by HTML5 UP</title>
+
<!-- Three -->
−
<meta charset="utf-8" />
+
<section id="three" class="wrapper spotlight style2">
−
<meta name="viewport" content="width=device-width, initial-scale=1" />
+
<div class="inner">
−
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
+
<a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/3/31/Anchiegg.png" alt="" /></a>
−
</head>
+
−
<body>
+
−
 
+
−
+
−
 
+
−
<!-- Two -->
+
−
<section id="two" class="wrapper alt spotlight style2">
+
−
<div>
+
 
<div class="content">
 
<div class="content">
 +
<h2 class="major"style="color:#ffffff;">Description</h2>
 
</div>
 
</div>
 
</div>
 
</div>
 
</section>
 
</section>
  
−
<!-- Three -->
+
<!-- Three -->
−
<section id="three" class="wrapper spotlight style3">
+
<section id="four" class="wrapper spotlight style1">
 
<div class="inner">
 
<div class="inner">
 
<div class="content">
 
<div class="content">
−
<h2 class="major">What is CRC?</h2>
+
<h2 class="major">Construct Model</h2>
−
<p>Colorectal cancer (CRC), or colon/bowel cancer, is a common form of cancer that most frequently develops starting with polyps. In 2014, an estimated 1.3 million people lived with colon and rectum cancer in the United States. In fact, about 1 in 20 men and women are expected to have colon cancer at some point in their life.
+
<p>Building off of a rapamycin induced split-luciferase system characterized by the 2015 Peking iGEM team, our construct consists of a promoter reporter system that looks at two downstream products, c-Myc and COX-2 (Peking iGEM Team 2015, 2015). These products are assembled into a construct composed of fusion proteins as well as split luciferase fragments (COX-2 - FRB - nLuc and c-Myc - FKBP - cLuc). In the presence of rapamycin, the interacting protein partners dimerize and subsequently cause luciferase to activate. In order to test this model, we created vectors of our constructs and inserted them into E. coli cells. </p>
−
CRC is caused by the APC gene, or activating mutation in β-catenin, which results in the accumulation of β-catenin and subsequent complex formation with TCF/LEF transcription factors. Excessive β-catenin can interact with TCF to activate the transcription of proliferative genes, such as c-Myc and cyclin D1, in the colon.</p>
+
 
</div>
 
</div>
−
</div>
+
</div>
 
</section>
 
</section>
 +
<!-- Two -->
  
−
<section id="four" class="wrapper alt style1">
+
<!-- Four -->
 +
<section id="four" class="wrapper alt style1">
 
<div class="inner">
 
<div class="inner">
−
 
−
<a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/2/2a/Diagram_Models_%286%29.jpg" alt=""style="width:431px;height:100%;" /></a>
 
  
−
<p>Figure 1: This is an inactive Wnt pathway with no mutated genes. Here, β-catenin is degraded appropriately and does not activate transcription of Wnt genes.</p>
+
<section class="features">
−
<a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/c/c7/PROJECT.jpg" alt=""style="width:431px;height:100%;" /></a>
+
<article>
 +
<a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/c/cc/Diagram_Models_%283%29-1.jpg" /></a>
 +
<h3 class="major">Figure 1</h3>
 +
<p>Our gene production construct is modeled to produce COX-2 and c-Myc, which we used to simulate conditions in human bodies when these proteins are overproduced, in the case of CRC. The construct consists of an Anderson promoter, a ribosomal binding site, a COX-2 gene/c-Myc gene, and a terminator.</p>
 +
</article>
 +
<article>
 +
<a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/9/90/P-Rsystemanchiegg.jpg" title="Click to return back to the top." /></a>
 +
<h3 class="major">Figure 2</h3>
 +
<p>Our promoter-reporter construct is built so that only when there is both COX-2 and c-Myc will the binding sites be able to come together and glow with the addition of rapamycin. The construct built to bind with COX-2 consists of a COX-2 promoter, FRB, n-Luc, and terminator. The construct built to bind with c-Myc consists of a c-Myc promoter, FKBP, c-Luc, and terminator.</p>
 +
</article>
 +
<article>
 +
<a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/a/a5/P-Rsystemanchiegg2.jpg" title="Click to return back to the top." /></a>
 +
<h3 class="major">Figure 3</h3>
 +
<p>Our promoter-reporter system consists of two separate constructs each with a gene-specific promoter attached to a non-specific binding site fused to a domain of split luciferase. One construct consists of a COX-2 promoter, a FRB domain, and n-Luc, and the other consists of a c-Myc promoter, a FKBP domain, and c-Luc. The split system is built so that only when the presence of both COX-2 and c-Myc is detected will the binding sites be able to come together with the addition of rapamycin and cause glowing.</p>
  
−
<p>Figure 2: LiCl activates canonical Wnt signaling by inhibiting GSK3β-mediated phosphorylation of β-catenin. The inhibition of GSK3β activity prevents β-catenin degradation in the ubiquitin dependent proteasome pathway and leads β-catenin to enter the nucleus and interact with LEF/TCF family proteins to activate Wnt target genes. Without Wnt signalling, LKB1 serves as a binding partner for APC, recruits the APC/β-catenin destruction complex to the membrane, and inhibits Wnt signaling activity.</p>
+
</article>
−
 
+
<article>
−
<section class="features">
+
−
</section>
+
<a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/e/ec/Insolutionanchiegg.jpg" title="Click to return back to the top." /></a>
−
</div>
+
<h3 class="major">Figure 4</h3>
−
</section>
+
<p>In solution, our two gene constructs are able to simulate the conditions in the human body by producing proteins COX-2 and c-Myc. These proteins then interact with the promoter-reporter constructs by connecting to the non- specific binding sites, allowing the dimerization of the FKBP-Rapamycin-FRB complex. This then orients the split- luciferase so they can come together.</p>
−
 
+
</article>
−
 
+
</section>
−
<!-- Three -->
+
</div>
−
<section id="four" class="wrapper spotlight style4">
+
</section>
−
<div class="inner">
+
−
<div class="content">
+
−
<h2 class="major">Project Motivations</h2>
+
−
<p>After speaking to Minako Abe, an immunologist, we became aware of the immense prevalence and impact--especially in Japan--of colorectal cancer. In Japan alone, in 2015, there were almost 50,000 deaths from colorectal cancer, marking a sudden, sharp spike in the number of young adults that were diagnosed with this cancer. Finding out that two faculty members at our school were survivors of this disease further cemented our belief in the importance of addressing it at its root.
+
−
The issue is especially prevalent in Japan mostly because the younger generation is not fully aware on how common colorectal cancer is becoming and because they are not checking up on their bodies as frequently as they should be. This motivated us to not limit our project on only addressing early detection of CRC, but also raising awareness.</p>
+
−
<h2 class="major">How did we do it?</h2>
+
−
<p>Our goal was to create a biosensor that would be able to diagnose CRC at an earlier stage and have it fit for a home-kit where use would be accessible and convenient. To do so, we looked upstream fill in. The activation of the Wnt pathway inhibits the degradation of beta-catenin, a protein that triggers the mutation of oncogenes and tumor suppressor genes. Building off of a rapamycin induced split-luciferase system characterized by the 2015 Peking iGEM team, our construct consists of a promoter reporter system that looks at two downstream products, C-myc and COX-2.
+
−
As for community outreach, we wanted to take advantage of the fact that we live in the most metropolitan area in Japan. We did so by carrying out our project mainly in Harajuku, which is one of the most popular areas in Tokyo. As ASIJ is also central to many international communities, we’ve also promoted our project at family events held at ASIJ, as well as through our virtual pre-medical club where we were able to interact with schools around the globe.</p>
+
−
</div>
+
−
</div>
+
−
</section>
+
  
 
 
−
 
 
 
−
<!-- Scripts -->
+
−
<script src="assets/js/skel.min.js"></script>
+
−
<script src="assets/js/jquery.min.js"></script>
+
−
<script src="assets/js/jquery.scrollex.min.js"></script>
+
−
<script src="assets/js/util.js"></script>
+
−
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
+
−
<script src="assets/js/main.js"></script>
+
−
 
+
−
 
+
 
<style>
 
<style>
 
@import url(font-awesome.min.css);
 
@import url(font-awesome.min.css);
−
@import url("https://fonts.googleapis.com/css?family=Raleway:200,700|Source+Sans+Pro:300,600,300italic,600italic");
+
 
  
 
/*
 
/*
Line 220: Line 198:
 
/* Reset */
 
/* Reset */
  
−
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, left, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+
html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
 
margin: 0;
 
margin: 0;
 
padding: 0;
 
padding: 0;
Line 1,834: Line 1,812:
  
 
body {
 
body {
−
background-color: #f2efe8;
+
background-color: #dbe9d8;
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-size: auto, cover;
 
background-size: auto, cover;
 
background-attachment: fixed, fixed;
 
background-attachment: fixed, fixed;
−
background-position: left, left;
+
background-position: center, center;
 
}
 
}
  
Line 1,945: Line 1,923:
 
border-radius: 100%;
 
border-radius: 100%;
 
border: solid 2px rgba(255, 255, 255, 0.125);
 
border: solid 2px rgba(255, 255, 255, 0.125);
−
content: '\f105’;
+
content: '\f105';
 
display: inline-block;
 
display: inline-block;
 
font-size: 1.25em;
 
font-size: 1.25em;
 
height: 2em;
 
height: 2em;
 
line-height: 1.65em;
 
line-height: 1.65em;
−
margin-left: 0.85em;
+
margin-right: 0.85em;
−
text-align: left;
+
text-align: center;
 
text-indent: 0.15em;
 
text-indent: 0.15em;
 
vertical-align: middle;
 
vertical-align: middle;
Line 2,090: Line 2,068:
 
}
 
}
  
−
.align-left {
+
.align-center {
−
text-align: left;
+
text-align: center;
 
}
 
}
  
−
.align-left {
+
.align-right {
 
text-align: left;
 
text-align: left;
 
}
 
}
Line 2,101: Line 2,079:
  
 
section.special, article.special {
 
section.special, article.special {
−
text-align: left;
+
text-align: center;
 
}
 
}
  
Line 2,200: Line 2,178:
 
pointer-events: none;
 
pointer-events: none;
 
position: absolute;
 
position: absolute;
−
left: 0;
+
right: 0;
−
text-align: left;
+
text-align: center;
 
top: 0;
 
top: 0;
 
width: 2.75em;
 
width: 2.75em;
Line 2,212: Line 2,190:
 
select option {
 
select option {
 
color: #ffffff;
 
color: #ffffff;
−
background: #f2efe8;
+
background: #dbe9d8;
 
}
 
}
  
Line 2,234: Line 2,212:
 
display: block;
 
display: block;
 
float: left;
 
float: left;
−
margin-left: -2em;
+
margin-right: -2em;
 
opacity: 0;
 
opacity: 0;
 
width: 1em;
 
width: 1em;
Line 2,252: Line 2,230:
 
font-weight: 300;
 
font-weight: 300;
 
padding-left: 2.4em;
 
padding-left: 2.4em;
−
padding-left: 0.75em;
+
padding-right: 0.75em;
 
position: relative;
 
position: relative;
 
}
 
}
Line 2,277: Line 2,255:
 
line-height: 1.58125em;
 
line-height: 1.58125em;
 
position: absolute;
 
position: absolute;
−
text-align: left;
+
text-align: center;
 
top: 0;
 
top: 0;
 
width: 1.65em;
 
width: 1.65em;
Line 2,287: Line 2,265:
 
border-color: #ffffff;
 
border-color: #ffffff;
 
content: '\f00c';
 
content: '\f00c';
−
color: #f2efe8;
+
color: #dbe9d8;
 
}
 
}
  
 
input[type="checkbox"]:focus + label:before,
 
input[type="checkbox"]:focus + label:before,
 
input[type="radio"]:focus + label:before {
 
input[type="radio"]:focus + label:before {
−
border-color: #c2d4d8;
+
border-color: #dbe9d8;
 
}
 
}
  
Line 2,384: Line 2,362:
 
}
 
}
  
−
.image.left, .image.left {
+
.image.left, .image.right {
 
max-width: 40%;
 
max-width: 40%;
 
}
 
}
  
−
.image.left img, .image.left img {
+
.image.left img, .image.right img {
 
width: 100%;
 
width: 100%;
 
}
 
}
Line 2,398: Line 2,376:
 
}
 
}
  
−
.image.left {
+
.image.right {
−
float: left;
+
float: right;
 
padding: 0 0 1em 1.5em;
 
padding: 0 0 1em 1.5em;
 
top: 0.25em;
 
top: 0.25em;
Line 2,473: Line 2,451:
  
 
ul.icons li:last-child {
 
ul.icons li:last-child {
−
padding-left: 0;
+
padding-right: 0;
 
}
 
}
  
Line 2,493: Line 2,471:
  
 
ul.actions li:last-child {
 
ul.actions li:last-child {
−
padding-left: 0;
+
padding-right: 0;
 
}
 
}
  
Line 2,556: Line 2,534:
 
padding: 1em 0 0 0;
 
padding: 1em 0 0 0;
 
display: block;
 
display: block;
−
text-align: left;
+
text-align: center;
 
width: 100%;
 
width: 100%;
 
}
 
}
Line 2,609: Line 2,587:
 
line-height: 2.35em;
 
line-height: 2.35em;
 
position: absolute;
 
position: absolute;
−
text-align: left;
+
text-align: center;
 
top: 0;
 
top: 0;
 
width: 2.5em;
 
width: 2.5em;
Line 2,651: Line 2,629:
 
min-width: 1.5em;
 
min-width: 1.5em;
 
padding: 0 0.5em;
 
padding: 0 0.5em;
−
text-align: left;
+
text-align: center;
 
}
 
}
  
Line 2,659: Line 2,637:
  
 
ul.pagination li > .page.active {
 
ul.pagination li > .page.active {
−
background-color: #c2d4d8;
+
background-color: #dbe9d8;
 
}
 
}
  
 
ul.pagination li:first-child {
 
ul.pagination li:first-child {
−
padding-left: 0.75em;
+
padding-right: 0.75em;
 
}
 
}
  
Line 2,683: Line 2,661:
 
width: calc(50% - 2px);
 
width: calc(50% - 2px);
 
text-align: left;
 
text-align: left;
−
padding-left: 0.325em;
+
padding-right: 0.325em;
 
}
 
}
  
Line 2,723: Line 2,701:
 
border: solid 1px rgba(255, 255, 255, 0.125);
 
border: solid 1px rgba(255, 255, 255, 0.125);
 
border-left: 0;
 
border-left: 0;
−
border-left: 0;
+
border-right: 0;
 
}
 
}
  
Line 2,805: Line 2,783:
 
line-height: 3.75em;
 
line-height: 3.75em;
 
padding: 0 2.25em;
 
padding: 0 2.25em;
−
text-align: left;
+
text-align: center;
 
text-decoration: none;
 
text-decoration: none;
 
text-transform: uppercase;
 
text-transform: uppercase;
Line 2,832: Line 2,810:
 
button.icon:before,
 
button.icon:before,
 
.button.icon:before {
 
.button.icon:before {
−
margin-left: 0.5em;
+
margin-right: 0.5em;
 
color: rgba(255, 255, 255, 0.35);
 
color: rgba(255, 255, 255, 0.35);
 
}
 
}
Line 2,841: Line 2,819:
 
button.special,
 
button.special,
 
.button.special {
 
.button.special {
−
background-color: #c2d4d8;
+
background-color: #dbe9d8;
 
box-shadow: none;
 
box-shadow: none;
 
}
 
}
Line 2,858: Line 2,836:
 
button.special:active,
 
button.special:active,
 
.button.special:active {
 
.button.special:active {
−
background-color: #c2d4d8;
+
background-color: #dbe9d8;
 
}
 
}
  
Line 2,935: Line 2,913:
 
.features article {
 
.features article {
 
padding: 1.75em 1.75em 0.1em 1.75em ;
 
padding: 1.75em 1.75em 0.1em 1.75em ;
−
background-color: #c2d4d8;
+
background-color: #f2efe8;
 
border-radius: 5px;
 
border-radius: 5px;
 
margin: 1.5em 3em 1.5em 0;
 
margin: 1.5em 3em 1.5em 0;
Line 2,942: Line 2,920:
  
 
.features article:nth-child(2n) {
 
.features article:nth-child(2n) {
−
margin-left: 0;
+
margin-right: 0;
 
}
 
}
  
Line 3,041: Line 3,019:
 
line-height: 3em;
 
line-height: 3em;
 
position: absolute;
 
position: absolute;
−
left: 0.7em;
+
right: 0.7em;
 
text-transform: uppercase;
 
text-transform: uppercase;
 
top: 0.7em;
 
top: 0.7em;
Line 3,053: Line 3,031:
  
 
#header nav a:before {
 
#header nav a:before {
−
float: left;
+
float: right;
 
margin-left: 0.75em;
 
margin-left: 0.75em;
 
}
 
}
Line 3,107: Line 3,085:
 
#header nav {
 
#header nav {
 
top: 0;
 
top: 0;
−
left: 0;
+
right: 0;
 
height: inherit;
 
height: inherit;
 
line-height: inherit;
 
line-height: inherit;
Line 3,146: Line 3,124:
 
text-align: left;
 
text-align: left;
 
margin-left: 0;
 
margin-left: 0;
−
padding-left: 1.25em;
+
padding-right: 1.25em;
 
}
 
}
  
Line 3,161: Line 3,139:
  
 
#menu {
 
#menu {
−
-moz-align-items: left;
+
-moz-align-items: center;
−
-webkit-align-items: left;
+
-webkit-align-items: center;
−
-ms-align-items: left;
+
-ms-align-items: center;
−
align-items: left;
+
align-items: center;
 
display: -moz-flex;
 
display: -moz-flex;
 
display: -webkit-flex;
 
display: -webkit-flex;
 
display: -ms-flex;
 
display: -ms-flex;
 
display: flex;
 
display: flex;
−
-moz-justify-content: left;
+
-moz-justify-content: center;
−
-webkit-justify-content: left;
+
-webkit-justify-content: center;
−
-ms-justify-content: left;
+
-ms-justify-content: center;
−
justify-content: left;
+
justify-content: center;
 
-moz-pointer-events: none;
 
-moz-pointer-events: none;
 
-webkit-pointer-events: none;
 
-webkit-pointer-events: none;
Line 3,192: Line 3,170:
 
opacity: 0;
 
opacity: 0;
 
position: fixed;
 
position: fixed;
−
text-align: left;
+
text-align: center;
 
top: 0;
 
top: 0;
 
visibility: hidden;
 
visibility: hidden;
Line 3,209: Line 3,187:
 
transition: opacity 0.35s ease, transform 0.35s ease;
 
transition: opacity 0.35s ease, transform 0.35s ease;
 
-webkit-overflow-scrolling: touch;
 
-webkit-overflow-scrolling: touch;
−
background: #c2d4d8;
+
background: #dbe9d8;
 
border-radius: 5px;
 
border-radius: 5px;
 
display: block;
 
display: block;
Line 3,234: Line 3,212:
 
overflow: hidden;
 
overflow: hidden;
 
position: absolute;
 
position: absolute;
−
left: 0;
+
right: 0;
−
text-align: left;
+
text-align: center;
 
text-indent: 4em;
 
text-indent: 4em;
 
top: 0;
 
top: 0;
Line 3,265: Line 3,243:
  
 
#menu .links li a:hover {
 
#menu .links li a:hover {
−
background: #c2d4d8;
+
background: #dbe9d8;
 
}
 
}
  
Line 3,338: Line 3,316:
 
height: 2.25em;
 
height: 2.25em;
 
line-height: 2.25em;
 
line-height: 2.25em;
−
text-align: left;
+
text-align: center;
 
width: 2.25em;
 
width: 2.25em;
 
}
 
}
Line 3,396: Line 3,374:
 
#banner {
 
#banner {
 
padding: 7em 0 8.25em 0 ;
 
padding: 7em 0 8.25em 0 ;
−
background-color: #f2efe8;
+
background-color: #dbe9d8;
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-size: auto, cover;
 
background-size: auto, cover;
−
background-position: left, left;
+
background-position: center, center;
 
margin-bottom: -6.5em;
 
margin-bottom: -6.5em;
 
}
 
}
Line 3,506: Line 3,484:
 
#wrapper > header {
 
#wrapper > header {
 
padding: 9em 0 6.25em 0 ;
 
padding: 9em 0 6.25em 0 ;
−
background-color: #f2efe8;
+
background-color: #dbe9d8;
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-size: auto, cover;
 
background-size: auto, cover;
−
background-position: left, 0% 30%;
+
background-position: center, 0% 30%;
 
margin-bottom: -6.5em;
 
margin-bottom: -6.5em;
 
}
 
}
Line 3,520: Line 3,498:
 
padding: 11em 3em 7.375em 3em ;
 
padding: 11em 3em 7.375em 3em ;
 
background-size: auto, cover;
 
background-size: auto, cover;
−
background-position: left, 0% 0%;
+
background-position: center, 0% 0%;
 
margin-bottom: -4.75em;
 
margin-bottom: -4.75em;
 
}
 
}
Line 3,549: Line 3,527:
  
 
.wrapper {
 
.wrapper {
−
background-color: #f2efe8;
+
background-color: #dbe9d8;
 
margin: 6.5em 0;
 
margin: 6.5em 0;
 
position: relative;
 
position: relative;
Line 3,555: Line 3,533:
  
 
.wrapper:before, .wrapper:after {
 
.wrapper:before, .wrapper:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232e3141%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper:before {
 
.wrapper:before {
−
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
+
box-shadow: inset 0 -1px 0 0 #dbe9d8, 0 1px 0 0 #dbe9d8;
 
}
 
}
  
 
.wrapper:after {
 
.wrapper:after {
−
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
+
box-shadow: inset 0 -1px 0 0 #dbe9d8, 0 1px 0 0 #dbe9d8;
 
}
 
}
  
Line 3,611: Line 3,589:
  
 
.wrapper.style2 {
 
.wrapper.style2 {
−
background-color: #c2d4d8;
+
background-color: #f2efe8;
 +
background-image: url("https://static.igem.org/mediawiki/2017/3/32/Descriptionthingasij.png")
 
}
 
}
  
 
.wrapper.style2:before, .wrapper.style2:after {
 
.wrapper.style2:before, .wrapper.style2:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23353849%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.style2:before {
 
.wrapper.style2:before {
−
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
 
.wrapper.style2:after {
 
.wrapper.style2:after {
−
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
 
.wrapper.style3 {
 
.wrapper.style3 {
−
background-color: #c2d4d8;
+
background-color: #f2efe8;
 
}
 
}
  
 
.wrapper.style3:before, .wrapper.style3:after {
 
.wrapper.style3:before, .wrapper.style3:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%233d4051%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.style3:before {
 
.wrapper.style3:before {
−
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
 
.wrapper.style3:after {
 
.wrapper.style3:after {
−
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
 
.wrapper.style4 {
 
.wrapper.style4 {
−
background-color: #454858;
+
background-color: #dbe9d8;
 
}
 
}
  
 
.wrapper.style4:before, .wrapper.style4:after {
 
.wrapper.style4:before, .wrapper.style4:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23454858%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.style4:before {
 
.wrapper.style4:before {
−
box-shadow: inset 0 -1px 0 0 #454858, 0 1px 0 0 #454858;
+
box-shadow: inset 0 -1px 0 0 #dbe9d8, 0 1px 0 0 #dbe9d8;
 
}
 
}
  
 
.wrapper.style4:after {
 
.wrapper.style4:after {
−
box-shadow: inset 0 -1px 0 0 #454858, 0 1px 0 0 #454858;
+
box-shadow: inset 0 -1px 0 0 #dbe9d8, 0 1px 0 0 #dbe9d8;
 
}
 
}
  
 
.wrapper.style5 {
 
.wrapper.style5 {
−
background-color: #4d5060;
+
background-color: #dbe9d8;
 
}
 
}
  
 
.wrapper.style5:before, .wrapper.style5:after {
 
.wrapper.style5:before, .wrapper.style5:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%234d5060%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.style5:before {
 
.wrapper.style5:before {
−
box-shadow: inset 0 -1px 0 0 #4d5060, 0 1px 0 0 #4d5060;
+
box-shadow: inset 0 -1px 0 0 #dbe9d8, 0 1px 0 0 #dbe9d8;
 
}
 
}
  
 
.wrapper.style5:after {
 
.wrapper.style5:after {
−
box-shadow: inset 0 -1px 0 0 #4d5060, 0 1px 0 0 #4d5060;
+
box-shadow: inset 0 -1px 0 0 #dbe9d8, 0 1px 0 0 #dbe9d8;
 
}
 
}
  
Line 3,679: Line 3,658:
  
 
.wrapper.style6:before, .wrapper.style6:after {
 
.wrapper.style6:before, .wrapper.style6:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23555867%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
Line 3,691: Line 3,670:
  
 
.wrapper.spotlight {
 
.wrapper.spotlight {
−
background-color: #c2d4d8;
+
background-color: #dbe9d8;
 
}
 
}
  
 
.wrapper.spotlight:before, .wrapper.spotlight:after {
 
.wrapper.spotlight:before, .wrapper.spotlight:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%234c5c96%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.spotlight:before {
 
.wrapper.spotlight:before {
−
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
+
box-shadow: inset 0 -1px 0 0 #dbe9d8, 0 1px 0 0 #dbe9d8;
 
}
 
}
  
 
.wrapper.spotlight:after {
 
.wrapper.spotlight:after {
−
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
+
box-shadow: inset 0 -1px 0 0 #dbe9d8, 0 1px 0 0 #dbe9d8;
 
}
 
}
  
Line 3,711: Line 3,690:
 
display: -ms-flex;
 
display: -ms-flex;
 
display: flex;
 
display: flex;
−
-moz-align-items: left;
+
-moz-align-items: center;
−
-webkit-align-items: left;
+
-webkit-align-items: center;
−
-ms-align-items: left;
+
-ms-align-items: center;
−
align-items: left;
+
align-items: center;
 
-moz-flex-direction: row;
 
-moz-flex-direction: row;
 
-webkit-flex-direction: row;
 
-webkit-flex-direction: row;
Line 3,744: Line 3,723:
 
-ms-flex-direction: row-reverse;
 
-ms-flex-direction: row-reverse;
 
flex-direction: row-reverse;
 
flex-direction: row-reverse;
−
text-align: left;
+
text-align: right;
 
}
 
}
  
Line 3,752: Line 3,731:
  
 
.wrapper.spotlight.style2 {
 
.wrapper.spotlight.style2 {
−
background-color: #c2d4d8;
+
background-color: #dbe9d8;
 
}
 
}
  
 
.wrapper.spotlight.style2:before, .wrapper.spotlight.style2:after {
 
.wrapper.spotlight.style2:before, .wrapper.spotlight.style2:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2345558d%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.spotlight.style2:before {
 
.wrapper.spotlight.style2:before {
−
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
+
box-shadow: inset 0 -1px 0 0 #dbe9d8, 0 1px 0 0 #dbe9d8;
 
}
 
}
  
 
.wrapper.spotlight.style2:after {
 
.wrapper.spotlight.style2:after {
−
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
+
box-shadow: inset 0 -1px 0 0 #dbe9d8, 0 1px 0 0 #dbe9d8;
 
}
 
}
  
 
.wrapper.spotlight.style3 {
 
.wrapper.spotlight.style3 {
−
background-color: #c2d4d8;
+
background-color: #f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style3:before, .wrapper.spotlight.style3:after {
 
.wrapper.spotlight.style3:before, .wrapper.spotlight.style3:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%233f4e85%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.spotlight.style3:before {
 
.wrapper.spotlight.style3:before {
−
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style3:after {
 
.wrapper.spotlight.style3:after {
−
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style4 {
 
.wrapper.spotlight.style4 {
−
background-color: #c2d4d8;
+
background-color: #f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style4:before, .wrapper.spotlight.style4:after {
 
.wrapper.spotlight.style4:before, .wrapper.spotlight.style4:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%2339477c%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.spotlight.style4:before {
 
.wrapper.spotlight.style4:before {
−
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style4:after {
 
.wrapper.spotlight.style4:after {
−
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style5 {
 
.wrapper.spotlight.style5 {
−
background-color: #c2d4d8;
+
background-color: #f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style5:before, .wrapper.spotlight.style5:after {
 
.wrapper.spotlight.style5:before, .wrapper.spotlight.style5:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%23324072%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
 
.wrapper.spotlight.style5:before {
 
.wrapper.spotlight.style5:before {
−
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style5:after {
 
.wrapper.spotlight.style5:after {
−
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
Line 3,820: Line 3,799:
  
 
.wrapper.spotlight.style6:before, .wrapper.spotlight.style6:after {
 
.wrapper.spotlight.style6:before, .wrapper.spotlight.style6:after {
−
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,100 100,0 100,100' style='fill:%232d3a69%3B' /%3E%3C/svg%3E");
+
 
 
}
 
}
  
Line 3,962: Line 3,941:
 
}
 
}
  
−
#footer .inner .copyleft {
+
#footer .inner .copyright {
 
border-top: solid 2px rgba(255, 255, 255, 0.125);
 
border-top: solid 2px rgba(255, 255, 255, 0.125);
 
list-style: none;
 
list-style: none;
Line 3,970: Line 3,949:
 
}
 
}
  
−
#footer .inner .copyleft li {
+
#footer .inner .copyright li {
 
border-left: solid 2px rgba(255, 255, 255, 0.125);
 
border-left: solid 2px rgba(255, 255, 255, 0.125);
 
color: rgba(255, 255, 255, 0.35);
 
color: rgba(255, 255, 255, 0.35);
Line 3,981: Line 3,960:
 
}
 
}
  
−
#footer .inner .copyleft li:first-child {
+
#footer .inner .copyright li:first-child {
 
border-left: 0;
 
border-left: 0;
 
margin-left: 0;
 
margin-left: 0;
Line 3,987: Line 3,966:
 
}
 
}
  
−
#footer .inner .copyleft li a {
+
#footer .inner .copyright li a {
 
color: inherit;
 
color: inherit;
 
}
 
}
Line 3,994: Line 3,973:
  
 
#footer {
 
#footer {
−
background-color: #f2efe8;
+
background-color: #dbe9d8;
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/bg.jpg");
 
background-size: auto, cover;
 
background-size: auto, cover;
−
background-position: left, left;
+
background-position: center, center;
 
margin-top: -6.5em;
 
margin-top: -6.5em;
 
padding-top: 6.5em;
 
padding-top: 6.5em;
Line 4,027: Line 4,006:
 
}
 
}
  
−
#footer .inner .copyleft {
+
#footer .inner .copyright {
 
margin: 4em 0 2em 0;
 
margin: 4em 0 2em 0;
 
}
 
}
Line 4,056: Line 4,035:
 
@media screen and (max-width: 640px) {
 
@media screen and (max-width: 640px) {
  
−
#footer .inner .copyleft li {
+
#footer .inner .copyright li {
 
border-left: 0;
 
border-left: 0;
 
display: block;
 
display: block;
Line 4,063: Line 4,042:
 
}
 
}
  
−
#footer .inner .copyleft li:first-child {
+
#footer .inner .copyright li:first-child {
 
margin-top: 0;
 
margin-top: 0;
 
}
 
}
Line 4,087: Line 4,066:
  
 
body {
 
body {
−
background-color: #f2efe8;
+
background-color: #dbe9d8;
 
background-image: url("../../images/bg.jpg");
 
background-image: url("../../images/bg.jpg");
 
background-size: cover;
 
background-size: cover;
 
background-attachment: fixed;
 
background-attachment: fixed;
−
background-position: left;
+
background-position: center;
 
}
 
}
  
Line 4,238: Line 4,217:
 
border: solid 1px #ffffff;
 
border: solid 1px #ffffff;
 
border-left: 0;
 
border-left: 0;
−
border-left: 0;
+
border-right: 0;
 
}
 
}
  
Line 4,280: Line 4,259:
  
 
#menu {
 
#menu {
−
background: #f2efe8;
+
background: #dbe9d8;
 
}
 
}
  
Line 4,290: Line 4,269:
  
 
#header {
 
#header {
−
background-color: #c2d4d8;
+
background-color: #f2efe8;
 
}
 
}
  
Line 4,325: Line 4,304:
 
/* Footer */
 
/* Footer */
  
−
#footer .inner .copyleft {
+
#footer .inner .copyright {
 
border-top: solid 2px #ffffff;
 
border-top: solid 2px #ffffff;
 
}
 
}
  
−
#footer .inner .copyleft li {
+
#footer .inner .copyright li {
 
border-left: solid 2px #ffffff;
 
border-left: solid 2px #ffffff;
 
}
 
}
 
</style>
 
</style>
 +
 +
  
 
</body>
 
</body>
 
</html>
 
</html>
 +
p

Latest revision as of 15:53, 1 November 2017

Home
Team
Team Collaborations Attributions
Project
Description Design Experiments Notebook Results
Parts Safety Human Practices

Description

Construct Model

Building off of a rapamycin induced split-luciferase system characterized by the 2015 Peking iGEM team, our construct consists of a promoter reporter system that looks at two downstream products, c-Myc and COX-2 (Peking iGEM Team 2015, 2015). These products are assembled into a construct composed of fusion proteins as well as split luciferase fragments (COX-2 - FRB - nLuc and c-Myc - FKBP - cLuc). In the presence of rapamycin, the interacting protein partners dimerize and subsequently cause luciferase to activate. In order to test this model, we created vectors of our constructs and inserted them into E. coli cells.

Figure 1

Our gene production construct is modeled to produce COX-2 and c-Myc, which we used to simulate conditions in human bodies when these proteins are overproduced, in the case of CRC. The construct consists of an Anderson promoter, a ribosomal binding site, a COX-2 gene/c-Myc gene, and a terminator.

Figure 2

Our promoter-reporter construct is built so that only when there is both COX-2 and c-Myc will the binding sites be able to come together and glow with the addition of rapamycin. The construct built to bind with COX-2 consists of a COX-2 promoter, FRB, n-Luc, and terminator. The construct built to bind with c-Myc consists of a c-Myc promoter, FKBP, c-Luc, and terminator.

Figure 3

Our promoter-reporter system consists of two separate constructs each with a gene-specific promoter attached to a non-specific binding site fused to a domain of split luciferase. One construct consists of a COX-2 promoter, a FRB domain, and n-Luc, and the other consists of a c-Myc promoter, a FKBP domain, and c-Luc. The split system is built so that only when the presence of both COX-2 and c-Myc is detected will the binding sites be able to come together with the addition of rapamycin and cause glowing.

Figure 4

In solution, our two gene constructs are able to simulate the conditions in the human body by producing proteins COX-2 and c-Myc. These proteins then interact with the promoter-reporter constructs by connecting to the non- specific binding sites, allowing the dimerization of the FKBP-Rapamycin-FRB complex. This then orients the split- luciferase so they can come together.

p