Difference between revisions of "Team:iTesla-SoundBio/description"

Line 1: Line 1:
 
{{iTesla-SoundBio}}
 
{{iTesla-SoundBio}}
 +
 
<html>
 
<html>
<center>
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Build the change<br>
+
<script>
<script>
+
$(document).ready(function(){
    $("#title").text("Project Description")
+
  // Add smooth scrolling to all links
 +
  $("a").on('click', function(event) {
  
</script>
+
    // Make sure this.hash has a value before overriding default behavior
<br>You want to see in the world</h1>
+
    if (this.hash !== "") {
</center>
+
      // Prevent default anchor click behavior
 +
      event.preventDefault();
  
<style>
+
      // Store hash
 +
      var hash = this.hash;
  
h1 {
+
      // Using jQuery's animate() method to add smooth page scroll
    font: 600 1.5em/1 'Raleway', sans-serif;
+
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
    color: rgba(0,0,0,.5);
+
      $('html, body').animate({
    text-align: center;
+
        scrollTop: $(hash).offset().top
    text-transform: uppercase;
+
      }, 800, function(){
    letter-spacing: .5em;
+
    top: 25%;
+
    width: 100%;
+
padding-top: 50px;
+
        padding-bottom: 50px;
+
  
}
+
        // Add hash (#) to URL when done scrolling (default click behavior)
span, span:after {
+
        window.location.hash = hash;
    font-weight: 900;
+
      });
    color: #efedce;
+
    } // End if
    white-space: nowrap;
+
  });
    display: inline-block;
+
});
     letter-spacing: .1em;
+
</script>
    padding: .2em 0 .25em 0;
+
<style>
 +
body {
 +
     font-family: "Lato", sans-serif;
 
}
 
}
  
span {
+
.sidenav {
     font-size: 4em;
+
     height: 100%;
     z-index: 100;
+
    width: 180px;
     text-shadow: .04em .04em 0 #9cb8b3;
+
    position: fixed;
 +
     z-index: 1;
 +
     top: 0;
 +
    left: 0;
 +
    background-color: #111;
 +
    overflow-x: hidden;
 +
    padding-top: 100px;
 
}
 
}
  
span:after {
+
.sidenav a {
     content: attr(data-shadow-text);
+
     padding-top: 5px 5px 5px 5px;
    color: rgba(0,0,0,.35);
+
     text-decoration: none;
     text-shadow: none;
+
     font-size: 20px;
     position: absolute;
+
     color: #818181;
     left: .0875em;
+
     display: block;
     top: .0875em;
+
    z-index: -1;
+
    -webkit-mask-image: url(https://f.cl.ly/items/1t1C0W3y040g1J172r3h/mask.png);
+
 
}
 
}
</style>
 
 
<body>
 
 
<center>
 
<img src="https://static.igem.org/mediawiki/2018/9/9b/T--iTesla-Soundbio--Project_Description1.png" alt="DID YOU KNOW? Every year, hundreds of thousands of horseshoe crabs are caught each year and drained of up to to 30% of their blood. Why? To collect LAL, a chemical that is crucial in the detection of endotoxins in everything from drugs to medical equipment", width=65%>
 
</center>
 
</body>
 
 
 
 
</html>
 
  
<!-- Archive
+
.sidenav a:hover {
#boxshadow {
+
     color: #f1f1f1;
    position: relative;
+
    box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
+
    padding: 10px;
+
     background: white;
+
 
}
 
}
  
#boxshadow img {
+
.main {
     width: 100%;
+
     margin-left: 180px; /* Same as the width of the sidenav */
     border: 1px solid #8a4419;
+
    padding: 0px 10px;
     border-style: inset;
+
     font-family: arial;  
 +
     font-size: 20px;  
 +
    padding: 30px
 
}
 
}
 +
@media screen and (max-height: 450px) {
 +
    .sidenav {padding-top: 15px;}
 +
    .sidenav a {font-size: 18px;}
 +
}
 +
</style>
 +
  
#boxshadow::after {
 
    content: '';
 
    position: absolute;
 
    z-index: -1; /* hide shadow behind image */
 
    box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
 
    width: 70%;
 
    left: 15%; /* one half of the remaining 30% */
 
    height: 100px;
 
    bottom: 0;
 
}
 
background-color: #008CBA;
 
    border: none;
 
    color: white;
 
    padding: 15px 32px;
 
    text-align: center;
 
    text-decoration: none;
 
    display: inline-block;
 
    font-size: 16px;
 
    margin: 4px 2px;
 
    cursor: pointer;
 
  display: flex; justify-content: center;
 
}
 
 
<div class="sidenav">
 
<div class="sidenav">
<a href="#graphicsum">Graphic Summary</a>
+
<a href="https://2018.igem.org/Team:iTesla-SoundBio">Main Page</a>
 
<br>
 
<br>
<a href="#constructdesign">Construct Design</a>
+
<a href=#top>Top</a>
 
<br>
 
<br>
<a href="#Biobrick">Biobrick: <br>Factor C gene in E. coli pSB1C3</a>
+
<a href=#Description><img src="https://static.igem.org/mediawiki/2018/3/3c/T--iTesla-SoundBio--ProjectDescription.png" alt="Description" style="width:100%"></a>
 
<br>
 
<br>
<a href="#Integration">Integration: <br>Factor C in B.Subtilis Chromosomal DNA</a>
+
<a href=#What Are Horseshoe Crabs><img src="https://static.igem.org/mediawiki/2018/2/24/T--iTesla-SoundBio--WhatAreThey.png" alt="Education" style="width:100%"></a>
 
<br>
 
<br>
<a href="#Expression">Expression: <br>Factor C protein verification</a>
+
<a href=#Why Are Horseshoe Crabs Bled><img src="https://static.igem.org/mediawiki/2018/2/2d/T--iTesla-SoundBio--WhyBled.png" alt="Design" style="width:100%"></a>
 
<br>
 
<br>
 +
<a href=#What Is LAL and Factor C><img src="https://static.igem.org/mediawiki/2018/9/9e/T--iTesla-SoundBio--LAL.png" alt="Design" style="width:100%"></a>
 
</div>
 
</div>
  
<div class="horizontalline">
+
<script>
 +
    $("#title").text("Human Practices")
 +
</script>
 +
<div class="main">
 +
<div id="top"></div>
 +
<div id="Research">
 +
<h1><strong>Research</strong></h1>
 
</div>
 
</div>
  
  
 
+
<div id="Education">
<div id="constructdesign">
+
<h1><strong>Education</strong></h1>
<p class="text">
+
Construct design: <br>
+
The goal for our project is to insert Factor C gene into the chromosomal DNA of B. Subtilis, and have it express this Factor C protein. At the same time, to fulfill iGEM competition requirements, we also need to insert Factor C gene into E.coli plasmid pSB1C3 and submit it as a biobrick for iGEM competition.
+
<br>
+
We decided to insert Factor C gene into E.coli plasmid pSB1C3 first; then, integrate Factor C gene into the chromosomal DNA of B. Subtilis using pAX01 integration factor (a B. Subtilis specific plasmid).
+
</P>
+
 
</div>
 
</div>
  
  
 
+
<div id="Design">
<div class="horizontalline">
+
<h1><strong>Design</strong></h1>
 
</div>
 
</div>
 
 
 
 
<div id="Biobrick">
 
<center><img src="https://static.igem.org/mediawiki/2018/c/c6/T--itesla-soundbio--twofragments.png", width=80%></center>
 
<p class="text">
 
Biobrick: <br>
 
Factor C in E.coli pSB1C3
 
We couldn't order Factor C from factory because it is too large (about 3000 base pairs https://benchling.com/itesla-soundbio/f/gPUeHZXf-drafts/seq-Jq87odxl-psb1c3factor-c/edit), so we order it as two fragments, FC1 and FC2.
 
First, insert FC1 into pSB1C3. Then, insert FC2 into the plasmid, too. This pSB1C3 with full Factor C will be submitted for biobrick.
 
</p>
 
 
</div>
 
</div>
 
+
</html>
 
+
<div class="horizontalline">
+
</div>
+
 
+
 
+
 
+
<div id="Integration">
+
<p class="text">
+
Integration: <br>
+
Factor C in B. Subtilis Chromosomal DNA.
+
We then digest full Factor C from Biobrick, and insert it into pAX01, a B. Subtilis integration factor. Then, we transform B. Subtilis with pAX01. After plasmid pAX01 enters B. Subtilis, there is a chance that it will integrate into chromosomal DNA.
+
</p>
+
</div>
+
 
+
 
+
 
+
<div class="horizontalline">
+
</div>
+
 
+
 
+
 
+
 
+
<div id="expression">
+
<p class="text">
+
Expression
+
Factor C protein extract: <br>
+
B. Subtilis are used to express Factor C because they are gram positive and will not damage the Factor C protein. In contrast, E. coli is gram negative and will cleave FC protein. After B. Subtilis express and produce Factor C, we can then extract Factor C protein for further experiment.   
+
</p>
+
</div>
+
-->
+

Revision as of 01:05, 7 October 2018

Research

Education

Design