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

 
(61 intermediate revisions by 7 users not shown)
Line 1: Line 1:
 +
 
{{Team:ASIJ_TOKYO/css}}
 
{{Team:ASIJ_TOKYO/css}}
 
<!--
 
<!--
Line 15: Line 16:
  
 
.navbar {
 
.navbar {
−
  overflow: hidden;
+
   background-color: #f2efe8;
−
   background-color: #333;
+
 
   font-family: Arial;
 
   font-family: Arial;
  
Line 28: Line 28:
 
.navbar a {
 
.navbar a {
 
   float: left;
 
   float: left;
−
   color: white;
+
   color: #858687;
−
   text-align: center;
+
   text-align: left;
−
   padding: 28px 18px;
+
   padding: 10px 32px;
 
   text-decoration: none;
 
   text-decoration: none;
 
   font-size: 28px;
 
   font-size: 28px;
Line 57: Line 57:
  
 
.navbar a:hover, .dropdown:hover .dropbtn {
 
.navbar a:hover, .dropdown:hover .dropbtn {
−
     background-color: #5d70dd;
+
     background-color: #d2dff7;
 
      
 
      
 
      
 
      
Line 68: Line 68:
 
     background-color: #f9f9f9;
 
     background-color: #f9f9f9;
 
     min-width: 160px;
 
     min-width: 160px;
−
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,.4);
+
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
     z-index: 100;
 
     z-index: 100;
−
     top: 80px;
+
     top: 57px;
  
  
Line 105: Line 105:
 
<div class="navbar">
 
<div class="navbar">
 
   <a href="https://2017.igem.org/Team:ASIJ_TOKYO">Home</a>
 
   <a href="https://2017.igem.org/Team:ASIJ_TOKYO">Home</a>
−
  <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Team">Team</a>
+
 
 
   <div class="dropdown">
 
   <div class="dropdown">
−
       <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Project">Project</a>
+
  <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Team">Team</a>
−
        
+
    <div class="dropdown-content">
 +
       <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Team">Team</a>
 +
       <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Collaborations">Collaborations</a>
 +
      <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Attributions">Attributions</a>
 +
    </div>
 +
  </div>
 +
 
 +
  <div class="dropdown">
 +
      <a href="#">Project</a>
 
     <div class="dropdown-content">
 
     <div class="dropdown-content">
 
       <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Description">Description</a>
 
       <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Description">Description</a>
Line 115: Line 123:
 
       <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Notebook">Notebook</a>
 
       <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Notebook">Notebook</a>
 
       <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Results">Results</a>
 
       <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Results">Results</a>
−
      <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Attributions">Attributions</a>
+
    </div>
−
 
+
  </div>
−
</div>
+
−
</div>
+
−
 
+
−
 
+
 
   <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Parts">Parts</a>
 
   <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Parts">Parts</a>
 
   <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Safety">Safety</a>
 
   <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Safety">Safety</a>
 
   <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Engagement">Human Practices</a>
 
   <a href="https://2017.igem.org/Team:ASIJ_TOKYO/Engagement">Human Practices</a>
−
+
</div>
  
  
  
−
 
−
 
−
</div>
 
  
  
Line 145: Line 146:
 
<meta charset="utf-8" />
 
<meta charset="utf-8" />
 
<meta name="viewport" content="width=device-width, initial-scale=1" />
 
<meta name="viewport" content="width=device-width, initial-scale=1" />
−
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
+
 
 
</head>
 
</head>
 
<body>
 
<body>
  
−
+
<!-- Two -->
−
 
+
<section id="three" class="wrapper spotlight style2">
−
<!-- Two -->
+
−
<section id="two" class="wrapper alt spotlight style2">
+
−
<div class="content">
+
−
</div>
+
−
</div>
+
−
</section>
+
−
 
+
−
<!-- Three -->
+
−
<section id="three" class="wrapper spotlight style3">
+
 
<div class="inner">
 
<div class="inner">
−
<a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/1/18/Title_image_asij.png" alt="" /></a>
+
<a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/7/71/Asijigem-designegg.jpg"></a>
−
<div class="content">
+
−
<h2 class="major">What is CRC?</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.
+
−
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>
+
−
</section>
+
−
 
+
−
<section id="four" class="wrapper alt style1">
+
−
<div class="inner">
+
−
<h2 class="major">Pictures</h2>
+
−
<section class="features">
+
−
+
−
</section>
+
−
 
+
−
<!-- Two -->
+
−
<section id="two" class="wrapper alt spotlight style2">
+
−
</div>
+
−
</div>
+
−
</section>
+
−
 
+
−
<!-- Three -->
+
−
<section id="two" class="wrapper spotlight style2">
+
−
<div class="inner">
+
−
<a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/1/18/Title_image_asij.png" alt="" /></a>
+
−
<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>
+
−
 
+
−
<section id="four" class="wrapper alt style1">
+
−
<div class="inner">
+
−
<h2 class="major">Pictures</h2>
+
−
<section class="features">
+
−
+
−
</section>
+
−
 
+
−
<!-- Two -->
+
−
<section id="two" class="wrapper alt spotlight style2">
+
−
</div>
+
−
</div>
+
−
</section>
+
−
 
+
−
<!-- Three -->
+
−
<section id="three" class="wrapper spotlight style3">
+
−
<div class="inner">
+
−
<a href="https://2017.igem.org/Team:ASIJ_TOKYO/Design" class="image"><img src="https://static.igem.org/mediawiki/2017/1/18/Title_image_asij.png" alt="" /></a>
+
 
<div class="content">
 
<div class="content">
 
<h2 class="major">Design</h2>
 
<h2 class="major">Design</h2>
−
<p>Our design – how we planned out our experiments.
+
<p>In the course of our experimentation, perhaps the most crucial step was the design of our experiment, prior to its actual carrying out. Below, we detail the steps we took and the ideas we came up with in order to reach our final goal.</p>
−
</p>
+
 
</div>
 
</div>
 
</div>
 
</div>
 
</section>
 
</section>
−
 
+
<!-- Four -->
−
<!-- Four -->
+
<section id="three" class="wrapper alt style3">
−
<section id="four" class="wrapper alt style1">
+
 
<div class="inner">
 
<div class="inner">
−
<h2 class="major">Design</h2>
+
<h2 class="major">Our Process</h2>
−
<section class="features">
+
<p>We began our experiments with a competent cell check to find the optimal concentration of DNA for working with NEB 5-alpha Competent E. coli. Next, we found the ideal promoter strength for the growth of COX-2 and c-Myc by performing the Gibson Assembly with three different Anderson promoters of different strengths. In order to observe phenotypic proof of these results the competent cells were transformed and plated, as well as expanded into solution so both the number of colonies, as well as the optical density of the solutions were used to support the optimal promoter strength. </p>
−
+
<p>We then moved on to find the most efficient promoter-to-binding domain combinations for both the c-Myc and COX-2 genes by testing a variety of them and seeing which produced the most glowing colonies in the presence of rapamycin. We also utilized this phase to make sure that the combinations glowed only when rapamycin was present. We concluded this test with the combinations of the COX-2 promoter with the FRB domain, and the c-Myc promoter with the FKBP domain being the most efficient combinations. The last step was to ensure that the construct glowed only when all parts were present, and to prove that the promoters had altered the shape of the nonspecific binding domains to become specific to the corresponding proteins. We did this by expanding incomplete combinations into tubes and observing whether they glowed or not. We found that none of the tubes glowed, no matter if they were missing a gene, or one of the promoter-reporter systems. The only tube that glowed was the one containing both COX-2 and c-Myc promoter-reporter systems, both respective genes, as well as rapamycin.
−
+
.</p>
−
<a href = "https://2017.igem.org/Team:ASIJ_TOKYO/Design">Click here for more design
+
−
 
+
−
</a>
+
−
+
−
+
−
 
+
−
</section>
+
−
+
−
<!-- Two -->
+
−
<section id="two" class="wrapper alt spotlight style2">
+
−
</div>
+
 
</div>
 
</div>
 
</section>
 
</section>
−
 
+
</section>
−
<!-- Three -->
+
<!-- Three -->
 
<section id="three" class="wrapper spotlight style3">
 
<section id="three" class="wrapper spotlight style3">
 
<div class="inner">
 
<div class="inner">
−
<a href="https://2017.igem.org/Team:ASIJ_TOKYO/Experiments" class="image"><img src="https://static.igem.org/mediawiki/2017/1/18/Title_image_asij.png" alt="" /></a>
+
<img src="https://static.igem.org/mediawiki/parts/1/1a/Isla.JPG" style="width:500px;height:100%;" class="image">
 
<div class="content">
 
<div class="content">
−
<h2 class="major">Experiments</h2>
+
<h2 class="major">Future Directions</h2>
−
<p>Our experiments – the procedure we carried out to gain our data
+
<p> With more time, we would like to implement our current model into a yeast system. This would prove advantageous as it will confirm the working of our model in an eukaryotic  organism. Using yeast, followed by flow cytometry, would allow us to collect quantitative data that could be better analyzed. Additionally, we would work on the upregulation of c-Myc production for the effectiveness of our experiment. This was a limiting factor in our experiment and continues to be a weak point in our design and planning. Most importantly, our team would like to develop a 3D prototype for a home-kit that would diagnose CRC. Our goal would be to develop a home-diagnosis kit similar in method and design to the home-pregnancy kit, where the product would be commercially approved and easily available. Our model would consist of two solutions that would be combined with the addition of a sample of fecal matter. This would address a major component of our project goal in developing a more convenient treatment and detection method for colorectal cancer. </p>
−
</p>
+
 
</div>
 
</div>
−
</div>
+
</div>
 
</section>
 
</section>
−
 
−
<!-- Four -->
 
−
<section id="four" class="wrapper alt style1">
 
−
<div class="inner">
 
−
<h2 class="major">Experiments</h2>
 
−
<section class="features">
 
−
 
−
 
−
<a href = "https://2017.igem.org/Team:ASIJ_TOKYO/Experiments">Click here for more experiments
 
−
 
−
</a>
 
−
 
−
 
−
 
−
</section>
 
−
<!-- Two -->
 
−
<section id="two" class="wrapper alt spotlight style2">
 
−
</div>
 
−
</div>
 
−
</section>
 
−
 
−
<!-- Three -->
 
−
<section id="three" class="wrapper spotlight style3">
 
−
<div class="inner">
 
−
<a href="https://2017.igem.org/Team:ASIJ_TOKYO/Notebook" class="image"><img src="https://static.igem.org/mediawiki/2017/1/18/Title_image_asij.png" alt="" /></a>
 
−
<div class="content">
 
−
<h2 class="major">Notebook</h2>
 
−
<p>Our lab notebook – all of our work, progress, and results in one document.</p>
 
−
</div>
 
−
</div>
 
−
</section>
 
−
 
−
<!-- Four -->
 
−
<section id="four" class="wrapper alt style1">
 
−
<div class="inner">
 
−
<h2 class="major">Notebook</h2>
 
−
<section class="features">
 
−
<a href = "https://2017.igem.org/Team:ASIJ_TOKYO/Notebook">Click here for the notebook (PDF format)</a>
 
−
</section>
 
−
</div>
 
−
</section>
 
−
 
−
<!-- Two -->
 
−
<section id="two" class="wrapper alt spotlight style2">
 
−
</div>
 
−
</div>
 
−
</section>
 
−
 
−
<!-- Three -->
 
−
<section id="three" class="wrapper spotlight style3">
 
−
<div class="inner">
 
−
<a href="https://2017.igem.org/Team:ASIJ_TOKYO/Results" class="image"><img src="https://static.igem.org/mediawiki/2017/1/18/Title_image_asij.png" alt="" /></a>
 
−
<div class="content">
 
−
<h2 class="major">Results</h2>
 
−
<p>Our results – conclusive answers to our study.</p>
 
−
</div>
 
−
</div>
 
−
</section>
 
−
 
−
<!-- Four -->
 
−
<section id="four" class="wrapper alt style1">
 
−
<div class="inner">
 
−
<h2 class="major">Results</h2>
 
−
<section class="features">
 
−
 
−
 
−
<a href = "https://2017.igem.org/Team:ASIJ_TOKYO/Results">Click here for the results-only page.</a>
 
−
 
−
</section>
 
−
</section>
 
−
<!-- Two -->
 
−
<section id="two" class="wrapper alt spotlight style2">
 
−
</div>
 
−
</div>
 
−
</section>
 
−
 
−
<!-- Three -->
 
−
<section id="three" class="wrapper spotlight style3">
 
−
<div class="inner">
 
−
<a href="#" class="image"><img src="https://static.igem.org/mediawiki/2017/1/18/Title_image_asij.png" alt="" /></a>
 
−
<div class="content">
 
−
<h2 class="major">Attributions</h2>
 
−
<p>Our attributions – credit given where credit is due.</p>
 
−
</div>
 
−
</div>
 
−
</section>
 
−
 
−
<!-- Four -->
 
−
<section id="four" class="wrapper alt style1">
 
−
<div class="inner">
 
−
<h2 class="major">Attributions</h2>
 
−
<section class="features">
 
−
<a href = "https://2017.igem.org/Team:ASIJ_TOKYO/Attributions">Click here for the attributions</a>
 
−
</section>
 
−
</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>
Line 375: Line 196:
 
/* 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, 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 {
+
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,989: Line 1,810:
  
 
body {
 
body {
−
background-color: #4221af;
+
background-color: #5d48a0;
 
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;
Line 2,329: Line 2,150:
 
select:focus,
 
select:focus,
 
textarea:focus {
 
textarea:focus {
−
border-color: #6a588e;
+
border-color: #5b6ba6;
 
}
 
}
  
Line 2,367: Line 2,188:
 
select option {
 
select option {
 
color: #ffffff;
 
color: #ffffff;
−
background: #4221af;
+
background: #5d48a0;
 
}
 
}
  
Line 2,442: Line 2,263:
 
border-color: #ffffff;
 
border-color: #ffffff;
 
content: '\f00c';
 
content: '\f00c';
−
color: #4221af;
+
color: #5d48a0;
 
}
 
}
  
 
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: #4c5c96;
+
border-color: #f2efe8;
 
}
 
}
  
Line 2,814: Line 2,635:
  
 
ul.pagination li > .page.active {
 
ul.pagination li > .page.active {
−
background-color: #4c5c96;
+
background-color: #f2efe8;
 
}
 
}
  
Line 2,996: Line 2,817:
 
button.special,
 
button.special,
 
.button.special {
 
.button.special {
−
background-color: #4c5c96;
+
background-color: #f2efe8;
 
box-shadow: none;
 
box-shadow: none;
 
}
 
}
Line 3,005: Line 2,826:
 
button.special:hover,
 
button.special:hover,
 
.button.special:hover {
 
.button.special:hover {
−
background-color: #6a588e;
+
background-color:#f2efe8;
 
}
 
}
  
Line 3,013: Line 2,834:
 
button.special:active,
 
button.special:active,
 
.button.special:active {
 
.button.special:active {
−
background-color: #45558d;
+
background-color:#f2efe8;
 
}
 
}
  
Line 3,090: Line 2,911:
 
.features article {
 
.features article {
 
padding: 1.75em 1.75em 0.1em 1.75em ;
 
padding: 1.75em 1.75em 0.1em 1.75em ;
−
background-color: #353849;
+
background-color: #f2efe8;
 
border-radius: 5px;
 
border-radius: 5px;
 
margin: 1.5em 3em 1.5em 0;
 
margin: 1.5em 3em 1.5em 0;
Line 3,364: Line 3,185:
 
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: #4c5c96;
+
background: #f2efe8;
 
border-radius: 5px;
 
border-radius: 5px;
 
display: block;
 
display: block;
Line 3,420: Line 3,241:
  
 
#menu .links li a:hover {
 
#menu .links li a:hover {
−
background: #45558d;
+
background:#f2efe8;
 
}
 
}
  
Line 3,464: Line 3,285:
  
 
#banner {
 
#banner {
−
padding: 10em 0 4.75em 0 ;
+
padding: 20em 0 15em 0 ;
 
}
 
}
  
Line 3,551: Line 3,372:
 
#banner {
 
#banner {
 
padding: 7em 0 8.25em 0 ;
 
padding: 7em 0 8.25em 0 ;
−
background-color: #4221af;
+
background-color: #5d48a0;
 
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;
Line 3,661: Line 3,482:
 
#wrapper > header {
 
#wrapper > header {
 
padding: 9em 0 6.25em 0 ;
 
padding: 9em 0 6.25em 0 ;
−
background-color: #4221af;
+
background-color: #5d48a0;
 
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;
Line 3,704: Line 3,525:
  
 
.wrapper {
 
.wrapper {
−
background-color: #4221af;
+
background-color: #5d48a0;
 
margin: 6.5em 0;
 
margin: 6.5em 0;
 
position: relative;
 
position: relative;
Line 3,714: Line 3,535:
  
 
.wrapper:before {
 
.wrapper:before {
−
box-shadow: inset 0 -1px 0 0 #4221af, 0 1px 0 0 #4221af;
+
box-shadow: inset 0 -1px 0 0 #5d48a0, 0 1px 0 0 #5d48a0;
 
}
 
}
  
 
.wrapper:after {
 
.wrapper:after {
−
box-shadow: inset 0 -1px 0 0 #4221af, 0 1px 0 0 #4221af;
+
box-shadow: inset 0 -1px 0 0 #5d48a0, 0 1px 0 0 #5d48a0;
 
}
 
}
  
Line 3,766: Line 3,587:
  
 
.wrapper.style2 {
 
.wrapper.style2 {
−
background-color: #353849;
+
background-color: #f2efe8;
 +
background-image: url("https://static.igem.org/mediawiki/2017/9/92/Asijigem-designbanner.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 #353849, 0 1px 0 0 #353849;
+
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 #353849, 0 1px 0 0 #353849;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
 
.wrapper.style3 {
 
.wrapper.style3 {
−
background-color: #3d4051;
+
background-color: #c2d4d8;
 
}
 
}
  
 
.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 #3d4051, 0 1px 0 0 #3d4051;
+
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
 
}
 
}
  
 
.wrapper.style3:after {
 
.wrapper.style3:after {
−
box-shadow: inset 0 -1px 0 0 #3d4051, 0 1px 0 0 #3d4051;
+
box-shadow: inset 0 -1px 0 0 #c2d4d8, 0 1px 0 0 #c2d4d8;
 
}
 
}
  
Line 3,802: Line 3,624:
  
 
.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");
+
 
 
}
 
}
  
Line 3,818: Line 3,640:
  
 
.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");
+
 
 
}
 
}
  
Line 3,834: Line 3,656:
  
 
.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,846: Line 3,668:
  
 
.wrapper.spotlight {
 
.wrapper.spotlight {
−
background-color: #4c5c96;
+
background-color: #f2efe8;
 
}
 
}
  
 
.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 #4c5c96, 0 1px 0 0 #4c5c96;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
 
.wrapper.spotlight:after {
 
.wrapper.spotlight:after {
−
box-shadow: inset 0 -1px 0 0 #4c5c96, 0 1px 0 0 #4c5c96;
+
box-shadow: inset 0 -1px 0 0 #f2efe8, 0 1px 0 0 #f2efe8;
 
}
 
}
  
Line 3,907: Line 3,729:
  
 
.wrapper.spotlight.style2 {
 
.wrapper.spotlight.style2 {
−
background-color: #45558d;
+
background-color:#f2efe8;
 
}
 
}
  
 
.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 #45558d, 0 1px 0 0 #45558d;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style2:after {
 
.wrapper.spotlight.style2:after {
−
box-shadow: inset 0 -1px 0 0 #45558d, 0 1px 0 0 #45558d;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style3 {
 
.wrapper.spotlight.style3 {
−
background-color: #3f4e85;
+
 +
text-align: left;
 +
width: 1440px;
 +
padding: 0px;
 +
margin: 0 auto;
 +
height: 100%;
 +
overflow-x:hidden;
 
}
 
}
  
 
.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 #3f4e85, 0 1px 0 0 #3f4e85;
+
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 #3f4e85, 0 1px 0 0 #3f4e85;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style4 {
 
.wrapper.spotlight.style4 {
−
background-color: #39477c;
+
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 #39477c, 0 1px 0 0 #39477c;
+
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 #39477c, 0 1px 0 0 #39477c;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style5 {
 
.wrapper.spotlight.style5 {
−
background-color: #324072;
+
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 #324072, 0 1px 0 0 #324072;
+
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 #324072, 0 1px 0 0 #324072;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style6 {
 
.wrapper.spotlight.style6 {
−
background-color: #2d3a69;
+
background-color:#f2efe8;
 
}
 
}
  
 
.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");
+
 
 
}
 
}
  
 
.wrapper.spotlight.style6:before {
 
.wrapper.spotlight.style6:before {
−
box-shadow: inset 0 -1px 0 0 #2d3a69, 0 1px 0 0 #2d3a69;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
 
.wrapper.spotlight.style6:after {
 
.wrapper.spotlight.style6:after {
−
box-shadow: inset 0 -1px 0 0 #2d3a69, 0 1px 0 0 #2d3a69;
+
box-shadow: inset 0 -1px 0 0#f2efe8, 0 1px 0 0#f2efe8;
 
}
 
}
  
Line 4,149: Line 3,977:
  
 
#footer {
 
#footer {
−
background-color: #4221af;
+
background-color: #5d48a0;
 
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;
Line 4,242: Line 4,070:
  
 
body {
 
body {
−
background-color: #4221af;
+
background-color: #5d48a0;
 
background-image: url("../../images/bg.jpg");
 
background-image: url("../../images/bg.jpg");
 
background-size: cover;
 
background-size: cover;
Line 4,435: Line 4,263:
  
 
#menu {
 
#menu {
−
background: #4221af;
+
background: #5d48a0;
 
}
 
}
  
Line 4,445: Line 4,273:
  
 
#header {
 
#header {
−
background-color: #353849;
+
background-color: #f2efe8;
 
}
 
}
  

Latest revision as of 15:58, 1 November 2017

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

Design

In the course of our experimentation, perhaps the most crucial step was the design of our experiment, prior to its actual carrying out. Below, we detail the steps we took and the ideas we came up with in order to reach our final goal.

Our Process

We began our experiments with a competent cell check to find the optimal concentration of DNA for working with NEB 5-alpha Competent E. coli. Next, we found the ideal promoter strength for the growth of COX-2 and c-Myc by performing the Gibson Assembly with three different Anderson promoters of different strengths. In order to observe phenotypic proof of these results the competent cells were transformed and plated, as well as expanded into solution so both the number of colonies, as well as the optical density of the solutions were used to support the optimal promoter strength.

We then moved on to find the most efficient promoter-to-binding domain combinations for both the c-Myc and COX-2 genes by testing a variety of them and seeing which produced the most glowing colonies in the presence of rapamycin. We also utilized this phase to make sure that the combinations glowed only when rapamycin was present. We concluded this test with the combinations of the COX-2 promoter with the FRB domain, and the c-Myc promoter with the FKBP domain being the most efficient combinations. The last step was to ensure that the construct glowed only when all parts were present, and to prove that the promoters had altered the shape of the nonspecific binding domains to become specific to the corresponding proteins. We did this by expanding incomplete combinations into tubes and observing whether they glowed or not. We found that none of the tubes glowed, no matter if they were missing a gene, or one of the promoter-reporter systems. The only tube that glowed was the one containing both COX-2 and c-Myc promoter-reporter systems, both respective genes, as well as rapamycin. .

Future Directions

With more time, we would like to implement our current model into a yeast system. This would prove advantageous as it will confirm the working of our model in an eukaryotic  organism. Using yeast, followed by flow cytometry, would allow us to collect quantitative data that could be better analyzed. Additionally, we would work on the upregulation of c-Myc production for the effectiveness of our experiment. This was a limiting factor in our experiment and continues to be a weak point in our design and planning. Most importantly, our team would like to develop a 3D prototype for a home-kit that would diagnose CRC. Our goal would be to develop a home-diagnosis kit similar in method and design to the home-pregnancy kit, where the product would be commercially approved and easily available. Our model would consist of two solutions that would be combined with the addition of a sample of fecal matter. This would address a major component of our project goal in developing a more convenient treatment and detection method for colorectal cancer.