Difference between revisions of "Team:Uppsala/Reporter System"

 
(143 intermediate revisions by 7 users not shown)
Line 1: Line 1:
−
 
 
{{Uppsala/javascript/iGemRemoval_js}}
 
{{Uppsala/javascript/iGemRemoval_js}}
 
{{Uppsala/css_removal}}
 
{{Uppsala/css_removal}}
 +
{{Uppsala/main_template}}
 +
{{Uppsala/scroll-button}}
 +
{{Uppsala/javascript/scroll-button}}
 +
{{Uppsala/javascript/redirect_js}}
 +
{{Uppsala/buttons}}
 +
  
 
<html>
 
<html>
 
     <head>
 
     <head>
−
        <meta name="viewport" content="width=device-width, initial-scale=1">
+
   
−
        <style>
+
<style type="text/css">
−
 
+
 
−
            :root{
+
.parallax {
−
                --primary: #8b1a32;
+
−
                --secondary:#969696;
+
−
                --tertiary: #f15025;
+
−
                --whiteish: #fcf7ff;
+
−
                --light-blue:#cde6f5;
+
−
                --alt-secondary: #554640;
+
−
 
+
−
            }
+
−
 
+
−
 
+
−
            html{
+
−
                width: 100%;
+
−
                height: 100%;
+
−
            }
+
−
            *{
+
−
                margin: 0;
+
−
                padding: 0;
+
−
                box-sizing: border-box;
+
−
            }
+
−
           
+
−
            .parallax {
+
 
                 /* The image used */
 
                 /* The image used */
 
                 background-image: url("https://static.igem.org/mediawiki/2018/a/a6/T--Uppsala--UnaGPotentialBackground.png");
 
                 background-image: url("https://static.igem.org/mediawiki/2018/a/a6/T--Uppsala--UnaGPotentialBackground.png");
  
−
                /* Set a specific height */
 
−
                min-height: 99vh;
 
−
 
−
                /* Create the parallax scrolling effect */
 
−
                background-attachment: fixed;
 
−
                background-position: center;
 
−
                background-repeat: no-repeat;
 
−
                background-size: cover;
 
−
                /*background: linear-gradient(to bottom, transparent 90%);*/
 
−
            }
 
−
           
 
−
            .blur-box {
 
−
            background-color: var(--whiteish);
 
−
            box-shadow: 0 0 10px 10px var(--whiteish);
 
−
            }
 
−
 
−
            .sub-header{
 
−
 
−
                /* Set a specific height */
 
−
                height:20vw;
 
−
                min-height: 150px;
 
−
               
 
−
 
−
                /* Create the parallax scrolling effect */
 
−
                /*background-attachment: fixed;*/
 
−
                background-position: center;
 
−
                background-repeat: no-repeat;
 
−
                background-size: cover;
 
 
                  
 
                  
−
             
 
−
            }
 
−
           
 
−
            .sub-header h1{
 
−
                font-size: 60;
 
−
                text-align: center;
 
−
                position:absolute;
 
−
                left:0;
 
−
                right:0;
 
−
                margin-top:6.5% ;
 
−
                margin-left:auto;
 
−
                margin-right: auto;
 
−
                color:white;
 
−
                bottom: px;
 
−
            }
 
−
 
−
            #blue{
 
−
                background-image: url(redbanner.jpg);
 
−
            }
 
−
 
−
            h1, h2{
 
−
 
−
                color: #661325;
 
−
            }
 
−
            h1{
 
−
                margin-top:2em;
 
−
                margin-bottom: 0.5em;
 
−
            }
 
−
            #first-title{
 
−
                top:100px;
 
−
                margin-top: 0;
 
−
            }
 
−
           
 
−
            .content{
 
−
                position:relative;
 
−
             
 
−
                background-color: var(--whiteish);
 
−
            }
 
−
 
−
            .content-text{
 
−
                margin-top:2em;
 
−
                min-width: 400px;
 
−
                width:70%;
 
−
                position: relative;
 
−
                margin: auto;
 
−
                /*background-color: #8c7cff;*/
 
−
 
−
            }
 
−
 
−
 
−
            .scroll-pointer{
 
−
                top:85%;
 
−
                position:absolute;
 
−
                /*margin-left:auto;
 
−
                margin-right:auto;*/
 
−
                width: 100%;
 
−
                padding: 0;
 
−
            }
 
−
 
−
            .scroll-pointer img{
 
−
                color: var(--primary) ;
 
−
 
−
            }
 
−
 
−
            .center-icon{
 
−
                width:100px;
 
−
                position: relative;
 
−
                display: block;
 
−
                margin-right: auto;
 
−
                margin-left: auto;
 
−
                opacity: 0.8;
 
−
            }
 
−
.center {
 
−
    display: block;
 
−
    margin-left: auto;
 
−
    margin-right: auto;
 
−
    width: 50%;
 
−
}
 
−
 
−
 
−
            .inner-card > img{
 
−
                /*height:100%;*/
 
−
                width:100%;
 
−
                object-fit: cover;
 
−
                /*border-radius: 8px;*/
 
−
            }
 
−
 
−
            .content-card{
 
−
                grid-gap:10px;
 
−
                background-color: var(--whiteish) ;
 
−
                border-radius: 8px;
 
−
            }
 
−
 
−
            .content-card-2{
 
−
                display: grid;
 
−
                /*grid-template-rows: 10em 1fr;*/
 
−
                grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
 
−
                position: relative;
 
−
                align-items:center;
 
−
                /*justify-content: center;*/
 
−
                grid-gap:1vw;
 
−
                padding:1vw;
 
−
 
−
            }
 
−
 
−
 
−
            .content-card-3{
 
−
                display: grid;
 
−
                /*grid-template-rows: 10em 1fr;*/
 
−
                grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
 
−
                position: relative;
 
−
                align-items:center;
 
−
                /*justify-content: center;*/
 
−
                padding:0.5vw;
 
−
            }
 
−
            .card-holder{
 
−
                background-color: var(--whiteish);
 
−
            }
 
−
 
−
            .inner-card{
 
−
                height: 100%;
 
−
                /* Or just make sure that the texts are equal length*/
 
−
                display: flex;
 
−
                flex-direction: column;
 
−
                background-color: ;
 
−
                padding: 1vw;
 
−
                border-radius: 8px;
 
−
                /* border: 1px solid var(--tertiary);*/
 
−
                background-color: var(--whiteish);
 
−
            }
 
−
 
−
            .inner-card-text{
 
−
                flex:1 1 auto;
 
−
                margin-bottom: 2vw;
 
−
                padding-right:0.2vw ;
 
−
                padding-left:0.2vw ;
 
−
            }
 
−
 
−
            .content-card-heading{
 
−
                margin: 5px;
 
−
                padding: 1vw;
 
−
                /*grid-row: 1/2;
 
−
                grid-column: 1/3;*/
 
−
                /*background-color: white;*/
 
−
                /*border: 1px solid var(--light-blue);*/
 
−
                text-align: center;
 
−
            }
 
−
 
−
            .content-card-img{
 
−
                width:100%;
 
−
                /*
 
−
                margin-left: auto;
 
−
                margin-right: auto;
 
−
                */
 
−
                border: 1px solid var(--primary);
 
−
            }
 
−
 
−
            .left-card{
 
−
 
−
 
−
            }
 
−
            .right-card{
 
−
 
−
 
−
            }
 
−
 
−
            /************************COLLABORATIONS TABS **************************/
 
−
            .collaborations{
 
−
 
−
                text-align: center;
 
−
                position:relative;
 
−
                display: grid;
 
−
                grid-template-columns: repeat(4,1fr);
 
−
                grid-template-rows:  50px 1fr;
 
−
                grid-column-gap: 5vw;
 
−
                padding-left:4em ;
 
−
                padding-right:4em;
 
−
 
−
            }
 
−
 
−
            .collaborations  img{
 
−
                width: 100%;
 
−
                max-height: 100%;
 
−
                object-fit: cover;
 
−
            }
 
−
 
−
            .popup-area{
 
−
                grid-column: 1/5;
 
−
            }
 
−
 
−
 
−
            .collaborations label:hover{
 
−
                color:#8B1A32;
 
−
                cursor: ;
 
−
            }
 
−
 
−
            .collaborations input{
 
−
                display:none ;
 
−
            }
 
−
 
−
            .collab{
 
−
                display: none;
 
−
                padding: 1em 1em;
 
−
                border-top: 1px solid #ddd;
 
−
                border: 1px solid #ddd;
 
−
                background-color: aliceblue;
 
−
                border-radius: 8px;
 
−
                position: relative;
 
−
                margin: 1em 0em;
 
−
            }
 
−
 
−
            /*The arrow that appears on the chat bubble*/
 
−
 
−
 
−
            label {
 
−
                display: inline-block;
 
−
                margin: 1px;
 
−
                /*padding: 15px 25px;*/
 
−
                font-weight: 600;
 
−
                color: black;
 
−
                /*border: 1px solid transparent;*/
 
−
                position: relative;
 
−
               
 
−
             
 
−
            }
 
−
 
−
            label::after {
 
−
                content: "";
 
−
                position: absolute;
 
−
                display:none;
 
−
                top: 54px;
 
−
                width: 20px;
 
−
                height:20px;
 
−
                border-top: 1px solid #ddd;
 
−
                border-right: 0px solid #ddd;
 
−
                border-bottom: 0px solid #ddd;
 
−
                border-left: 1px solid #ddd;
 
−
                transform: rotate(45deg);
 
−
                background: aliceblue;
 
−
 
−
                margin-left: 0px;
 
−
                z-index: 100;
 
−
                /*margin-top: -10px;*/
 
−
                /*
 
−
                border-width: 10px;
 
−
                border-style: solid;
 
−
                border-color: transparent transparent #000 transparent;
 
−
                */
 
−
            }
 
−
 
−
            /*Only when it is checked should the arrow be shown*/
 
−
 
−
            #tab1:checked + label:after{
 
−
                left: 80%;
 
−
                display:block;
 
−
            }
 
−
            #tab2:checked + label:after{
 
−
                left:40% ;
 
−
                display:block;
 
−
            }
 
−
            #tab3:checked + label:after{
 
−
                left:40%;
 
−
                display:block;
 
−
            }
 
−
            #tab4:checked + label:after{
 
−
                left:-5%;
 
−
                display:block;
 
−
            }
 
−
 
−
 
−
            input:checked + label p{
 
−
                /*border: 1px solid #ddd;*/
 
−
                border-top: 2px solid #F15025 ;
 
−
                /*
 
−
                text-decoration:overline;
 
−
                text-decoration-color:#F15025;
 
−
                */
 
−
 
−
            }
 
−
 
−
            #tab1:checked  ~div #content1,
 
−
            #tab2:checked  ~div #content2,
 
−
            #tab3:checked  ~div #content3,
 
−
            #tab4:checked  ~div #content4 {
 
−
                display: block;
 
−
            }
 
−
            /*End of Collaborations CSS*/
 
−
            /* Start of ide by side pic*/
 
−
            .pic-next-to-text{
 
−
            display: grid;
 
−
                /*grids-template-rows: 10em 1fr;*/
 
−
                grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
 
−
                position: relative;
 
−
                align-items:center;
 
−
                grid-gap:1vw;
 
−
                padding:1vw;
 
−
            }
 
−
           
 
−
            .side-text{
 
−
                padding-right:1.5vw ;
 
−
               
 
−
            }
 
−
            .side-img > img{
 
−
                width:100%;
 
−
                /*height:100%;*/
 
−
                object-fit: cover;
 
 
             }
 
             }
 +
     
 
            
 
            
−
           
 
−
           
 
−
           
 
−
            /*Start of the code related to CSS Shapes */
 
−
           
 
−
            /*****Code related to Animations*/
 
−
       
 
−
 
−
        .svg-wrapper{
 
−
        position:absolute;
 
−
        top:45vh;
 
−
        left:50%;
 
−
        transform: translate(-50%, -50%);
 
−
        width: 60%;
 
−
    }
 
−
   
 
−
    path{
 
−
        stroke: red;
 
−
        fill: #fff;
 
−
        stroke-dasharray:2000 ;
 
−
        opacity: 10;
 
−
        animation: animate 3s cubic-bezier(0,.21,1,.47) ;
 
−
    }
 
−
   
 
−
    @keyframes animate{
 
−
        0% {
 
−
            opacity: 0;
 
−
            fill: none;
 
−
            stroke-dashoffset:2000;
 
−
        }
 
−
       
 
−
        30% {
 
−
            opacity: 10;
 
−
            fill: none;
 
−
            stroke-dashoffset:2000;
 
−
        }
 
−
       
 
−
            90% {
 
−
           
 
−
            fill: rgba(255,255,255,0);
 
−
           
 
−
            }
 
−
           
 
−
        100% {
 
−
            opacity: 10;
 
−
            fill: rgba(255,255,255,1);
 
−
            stroke-dashoffset:0;
 
−
            }
 
−
    }
 
−
   
 
−
           
 
 
         </style>
 
         </style>
 
     </head>
 
     </head>
  
  
−
    <body>
+
<div class ="body">
−
 
+
−
 
+
 
        
 
        
 
         <div class="parallax"></div>
 
         <div class="parallax"></div>
−
         <div class="svg-wrapper">
+
         <div class="svg-wrapper" id="Project_Description">
  
 
   
 
   
Line 574: Line 172:
  
 
</div>
 
</div>
−
                   
+
              <div class="igem-icon"><a href="https://2018.igem.org/Team:Uppsala"><img src="https://static.igem.org/mediawiki/2018/7/7a/T--Uppsala--WormBusterLogo_White.png"></a>
 +
        </div>       
 
          
 
          
 
         <div class ="scroll-pointer">
 
         <div class ="scroll-pointer">
Line 581: Line 180:
  
 
         <div class= "content blur-box" style="font-size:16px;">
 
         <div class= "content blur-box" style="font-size:16px;">
−
            <div class ="content-text" >
+
 
  
−
                 <div style="height:1em;"></div>
+
 
 +
 
 +
<!-- CONTENT OF WHATS ON THE PAGE -->
 +
 
 +
        <div id="toc" class="toc">
 +
            <div id="toctitle"></div>
 +
            <ul>
 +
                <li class="toclevel tocsection"><a href="#Project_Description" class="scroll"> <span id="whereYouAre"> Reporter System</span> </a>
 +
                        <ul>
 +
                            <li class="toclevel nav-item active"><a href="#unag" class="nav-link scroll"> UnaG Reporter</a></li>
 +
                            <li class="toclevel nav-item"><a href="#Feces" class="nav-link scroll">  Feces Analysis</a></li>
 +
                            <li class="toclevel nav-item"><a href="#Grass" class="nav-link scroll">  Grass Sample Analysis</a></li>
 +
                            <li class="toclevel nav-item"><a href="#References" class="nav-link scroll"> References </a></li>
 +
                        </ul>
 +
                </li>
 +
           
 +
            </ul>
 +
        </div>
 +
 
 +
 
 +
 
 +
 
 +
            <div class ="content-text" id="scrolldown" >
 +
 
 +
 
 +
 
 +
                 <div style="height:5em;"></div>
 
          
 
          
−
                <h1 id="first-title">UnaG Troubleshooting</h1>
+
  
−
                 <p>One of the biobrick parts submitted by the 2016 Uppsala team was <a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2003011"><b>UnaG combined with a histidine tag and a flexible linker</b></a> for extraction in affinity chromatography.  We decided to use this part as our reporter system when we read about it.  Mammalian intestines naturally have small amounts of bilirubin in them and also have a limited amount of oxygen present [1] (which is necessary for chromoprotein maturation [2]). we thought this could be a useful reporter. It also came with a flexible linker, which could be used to potentially connect this reporter system with another output molecule that might be usable to act as a secondary reporter to help detect our target nematodes.   
+
 
 +
<div class="card-holder">
 +
 
 +
              <h1 id="unag">UnaG Reporter</h1>
 +
 
 +
 
 +
 
 +
 
 +
                 <p>One of the biobrick parts submitted by the 2016 Uppsala team was <a href="http://parts.igem.org/wiki/index.php?title=Part:BBa_K2003011"><b>UnaG combined with a histidine tag and a flexible linker</b></a> for extraction in affinity chromatography (AC).  We decided to use this part as our reporter system when we read about it.  Mammalian intestines naturally have small amounts of bilirubin in them and also have a limited amount of oxygen present (which is necessary for chromoprotein maturation ) [1, 2]. we thought this could be a useful reporter. It also came with a flexible linker, which could be used to potentially connect this reporter system with another output molecule that might be usable to act as a secondary reporter to help detect our target nematodes.   
 
<br>
 
<br>
 
<br>
 
<br>
−
While observing this part's sequence however, we found that there was an error and no histidine tag would be expressed due to the start codon being placed after the histidine tag.  In addition, this part would also express less or no UnaG at all due to the RBS now having a significant amount of space between it and the start codon.  We decided to incorporate this biobrick part into a custom composite part by moving the start codon to its proper location and then proving that the histidine tag works by extracting and purifying the protein via affinity chromatography. In addition, we conducted a fluorescent bilirubin test and used a plate reader to determine if our new part expressed more UnaG than the 2016 part.  </p>
+
While observing this part's sequence however, we found that there was an error and no histidine tag would be expressed due to the start codon being placed after the histidine tag.  In addition, this part would also express less or no UnaG at all due to the RBS now having a significant amount of space between it and the start codon.  We decided to incorporate this biobrick part into a custom composite part by moving the start codon to its proper location and then proving that the histidine tag works by extracting and purifying the protein via affinity chromatography. In addition, we conducted a fluorescent bilirubin test and used a plate reader to determine if our new part expressed more UnaG than the 2016 part.  </p>
 
                 <br>
 
                 <br>
−
                 <P>However extraction of this protein poses some difficulty.  UnaG, many other chromoproteins, is a membrane protein [3] and therefore needs special conditions to purify. The following report will show how we successfully extracted and purified UnaG from BL21 E. coli cells expressing our custom made plasmid.   
+
                 <p>However extraction of this protein poses some difficulty.  UnaG, unlike most other chromoproteins, is a membrane protein and therefore needs special conditions to purify [3]. Under "<b><i>find out more</i></b>" we will show how we successfully extracted and purified UnaG from BL21 <i>E. coli</i> cells expressing our custom made plasmid.   
−
</P>
+
</p>
  
 
<br><br><br>
 
<br><br><br>
 +
 +
</div>
 +
 +
  
  
Line 601: Line 238:
  
  
 +
<!-------BUTTONS FOR UnaG------->
  
  
−
<html>
 
−
<head>
 
−
<meta name="viewport" content="width=device-width, initial-scale=1">
 
−
<style>
 
−
.btn-group button {
 
−
    background-color: #8B1A32;
 
−
    color: #f9f9f9; /* White text */
 
−
    padding: 10px 24px; /* Some padding */
 
−
    cursor: pointer; /* Pointer/hand icon */
 
−
    font-size: 26px;
 
−
    border-radius: 4px;
 
−
text-align: center;
 
  
−
transition: all 0.5s;
 
−
font-family: "raleway";
 
  
  
−
}
+
<div class="card-holder">
 +
                <div class="buttons">
 +
                          <div class="container-button">
 +
   
 +
                                              <a href="https://2018.igem.org/Team:Uppsala/Reporter_System/UnaG" class="btn"> Find Out More! </a>
 +
                                              <a href="https://2018.igem.org/Team:Uppsala/Notebook" class="btn"> Notebook </a>
 +
<a href="https://2018.igem.org/Team:Uppsala/Protocol" class="btn"> Protocol </a>
 +
                                         
 +
     
 +
                                          <!--End of Button 3 -->
 +
                        </div>
 +
            </div>
 +
</div>
  
−
.btn-group span {
 
−
  cursor: pointer;
 
−
  display: inline-block;
 
−
  position: relative;
 
−
  transition: 0.5s;
 
−
}
 
  
−
.btn-group span:after {
 
−
  content: '\00bb';
 
−
  position: absolute;
 
−
  opacity: 0;
 
−
  top: 0;
 
−
  right: -20px;
 
−
  transition: 0.5s;
 
−
}
 
  
−
/* Have added button:hover*/
 
−
.btn-group button:hover span {
 
−
  padding-right: 25px;
 
−
}
 
  
−
/* Have added button:hover*/
 
−
.btn-group button:hover span:after {
 
−
  opacity: 1;
 
−
  right: 0;
 
−
}
 
−
</style>
 
−
</head>
 
−
<body>
 
  
−
<div class="btn-group" style="width:100%">
 
−
  <button onclick="window.location.href='https://2018.igem.org/Team:Uppsala/Reporter_System/UnaG_Design
 
−
          "style="width:18%"><span>Design</span></button>
 
−
  <button onclick="window.location.href='https://2018.igem.org/Team:Uppsala/Reporter_System/UnaG_Protocols" style="width:19%"><span>Protocols</span></button>
 
−
  <button onclick="window.location.href='https://2018.igem.org/Team:Uppsala/Reporter_System/UnaG_Experiment" style="width:22%"><span>Experiment</span></button>
 
−
  <button onclick="window.location.href='https://2018.igem.org/Team:Uppsala/Reporter_System/UnaG_Result" style="width:18%"><span>Result</span></button>
 
−
<button onclick="window.location.href='https://2018.igem.org/Team:Uppsala/Reporter_System/UnaG_Notebook" style="width:21%"><span>Notebook</span></button>
 
−
</div>
 
  
−
</body>
+
<!--------NEXT PART---------->
−
</html>
+
  
 +
<h1 id="Feces">Feces Analysis</h1>
 +
                <p>The purpose of this experiment was to determine if fluorescent eukaryotic chromoproteins could be used as a reporter in horse manure. One of these proteins, amilGFP (green fluorescent protein) was chosen because it gave us an opportunity to work with a reporter system developed by earlier iGEM teams of Uppsala, namely those of 2011, 2012 and 2013. To test whether amilGFP was viable or not as a reporter system we decided to run some tests to see if amilGFP could be detected in horse manure, and later, to what extent using a plate reader (fluorescence spectrophotometer) with varying concentrations of amilGFP in liquid culture in horse manure.</p>
  
  
  
  
−
<!--------NEXT PART---------->
 
  
−
<h1 id="first-title">Feces Analysis</h1>
+
<!-------BUTTONS FOR UnaG------->
−
                <p>The purpose of this experiment was to determine if fluorescent eukaryotic chromoproteins could be used as a reporter in horse manure. One of these proteins, amilGFP (green fluorescent protein) was chosen because it gave us a opportunity to work with a reporter system developed by earlier iGEM teams of Uppsala, namely those of 2011, 2012 and 2013. To test whether amilGFP was viable or not as a reporter system we decided to run some tests to see if amilGFP could be detected in horse manure, and later, to what extent using a plate reader (fluorescence spectrophotometer) with varying concentrations of amilGFP in liquid culture in horse manure.</p>
+
−
             
+
  
−
<!-------BUTTONS FOR Feces Analysis------->
 
  
  
  
  
−
<html>
+
<div class="card-holder">
−
<head>
+
                <div class="buttons">
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
                          <div class="container-button">
−
<style>
+
   
−
.btn-group button {
+
                                              <a href="https://2018.igem.org/Team:Uppsala/Reporter_System/Feces_Analysis" class="btn"> Find Out More! </a>  
−
    background-color: #8B1A32;
+
                                              <a href="https://2018.igem.org/Team:Uppsala/Notebook" class="btn"> Notebook </a>
−
    color: #f9f9f9; /* White text */
+
<a href="https://2018.igem.org/Team:Uppsala/Protocol" class="btn"> Protocol </a>
−
    padding: 10px 24px; /* Some padding */
+
                                         
−
    cursor: pointer; /* Pointer/hand icon */
+
     
−
    font-size: 26px;
+
                                          <!--End of Button 3 -->
−
    border-radius: 4px;
+
                        </div>
−
text-align: center;
+
            </div>
 +
</div>
  
−
transition: all 0.5s;
 
−
font-family: "raleway";
 
  
  
−
}
+
<!--------NEXT PART---------->
  
−
.btn-group span {
+
<h1 id="Grass">Grass Sample Analysis</h1>
−
  cursor: pointer;
+
−
  display: inline-block;
+
−
  position: relative;
+
−
  transition: 0.5s;
+
−
}
+
  
−
.btn-group span:after {
+
<h2>Design, Experiment and Result</h2>
−
  content: '\00bb';
+
                <p>The purpose of the grass sample analysis was to research the possibility of a future second worm buster, targeting large strongyles. Due to the life cycle of large strongyles, they need to be detected in the grass to prevent ingestion by horses. To see if GFP(Figure 1)/RFP(Figure 2) (common chromoproteins) are visible on the tops of grass using a UV lamp (312 nm), we spread colonies from transformed <i>E. coli</i> expressing these proteins onto grass. The top portion of blades of grass were used due to large strongyle larvae commonly residing there, waiting to be eaten by their unsuspecting hosts.
−
  position: absolute;
+
−
  opacity: 0;
+
−
  top: 0;
+
−
  right: -20px;
+
−
  transition: 0.5s;
+
−
}
+
  
−
/* Have added button:hover*/
+
<br><br>
−
.btn-group button:hover span {
+
−
  padding-right: 25px;
+
−
}
+
  
−
/* Have added button:hover*/
+
Our results (Figure 1 and Figure 2) were promising which broadened our potential market with the worm buster technology.</p>
−
.btn-group button:hover span:after {
+
−
  opacity: 1;
+
−
  right: 0;
+
−
}
+
−
</style>
+
−
</head>
+
−
<body>
+
  
−
<div class="btn-group" style="width:100%">
+
 
−
  <button onclick="window.location.href='https://2018.igem.org/Team:Uppsala/Reporter_System/Feces_Analysis_Design
+
 
−
          "style="width:18%"><span>Design</span></button>
+
<div class="card-holder">
−
  <button onclick="window.location.href='https://2018.igem.org/Team:Uppsala/Reporter_System/Feces_Analysis_Protocols" style="width:19%"><span>Protocols</span></button>
+
                 
−
  <button onclick="window.location.href='https://2018.igem.org/Team:Uppsala/Reporter_System/Feces_Analysis_Experiment" style="width:22%"><span>Experiment</span></button>
+
    <div class="content-card content-card-2">
−
  <button onclick="window.location.href='https://2018.igem.org/Team:Uppsala/Reporter_System/Feces_Analysis_Result" style="width:18%"><span>Result</span></button>
+
        <div class="inner-card left-card">
−
<button onclick="window.location.href='https://2018.igem.org/Team:Uppsala/Reporter_System/Feces_Analysis_Notebook" style="width:21%"><span>Notebook</span></button>
+
                        <!--change src to that of the image you want-->
 +
            <img class="content-card-img" src="https://static.igem.org/mediawiki/2018/c/cd/T--Uppsala--Grass_Analysis-RFP.jpeg" >
 +
<div class="inner-card-text">  
 +
                <!-- start of paragraph-->
 +
                <p><strong>Figure 1.</strong> Grass samples that have been spread with bacteria cultures expressing GFP. Photographed under 312 nm UV-light. </p>
 +
            </div>
 +
 
 +
            <!-- end of paragraph -->
 +
        </div>
 +
        <div class="inner-card right-card">
 +
         
 +
 
 +
            <img class="content-card-img" src="https://static.igem.org/mediawiki/2018/d/dd/T--Uppsala--Grass_Analysis-GFP.jpeg">
 +
  <div class="inner-card-text">  
 +
                <!-- start of paragraph -->
 +
                <p><strong>Figure 2.</strong> Grass samples that have been spread with bacteria cultures expressing RFP. Photographed under 312 nm UV-light. </p>  
 +
                <!-- End of paragraphs -->
 +
            </div>
 +
 
 +
        </div>
 +
    </div>
 
</div>
 
</div>
  
−
</body>
 
−
</html>
 
  
  
  
−
<h1>Refereces</h1>
+
<div class="card-holder">
 +
<h2 id="References">References</h2>
  
−
<p><strong>[1]</strong> Bowen R. Microbial Life in the Digestive Tract. online: http://www.vivo.colostate.edu/hbooks/pathphys/digestion/basics/gi_bugs.html. Accessed October 12, 2018.<br><br>
+
<p><strong>[1]</strong> Bowen R. Microbial Life in the Digestive Tract. online: <a href="http://www.vivo.colostate.edu/hbooks/pathphys/digestion/basics/gi_bugs.html">http://www.vivo.colostate.edu/hbooks/pathphys/digestion/basics/gi_bugs.html</a>. Accessed October 12, 2018.<br>
  
−
<strong>[2]</strong> Engineering a palette of eukaryotic chromoproteins for bacterial synthetic biology | Journal of Biological Engineering | Full Text. online: https://jbioleng.biomedcentral.com/articles/10.1186/s13036-018-0100-0. Accessed October 12, 2018. <br><br>
+
<strong>[2]</strong> Engineering a palette of eukaryotic chromoproteins for bacterial synthetic biology | Journal of Biological Engineering | Full Text. online: <a href="https://jbioleng.biomedcentral.com/articles/10.1186/s13036-018-0100-0">https://jbioleng.biomedcentral.com/articles/10.1186/s13036-018-0100-0</a>. Accessed October 12, 2018. <br>
  
−
<strong>[3]</strong> Kumagai A, Ando R, Miyatake H, Greimel P, Kobayashi T, Hirabayashi Y, Shimogori T, Miyawaki A. 2013. A Bilirubin-Inducible Fluorescent Protein from Eel Muscle. Cell 153: 1602–1611.</p>
+
<strong>[3]</strong> Kumagai A, Ando R, Miyatake H, Greimel P, Kobayashi T, Hirabayashi Y, Shimogori T, Miyawaki A. 2013. A Bilirubin-Inducible Fluorescent Protein from Eel Muscle. Cell 153: 1602–1611.<br></p>
 +
</div>
  
  
  
−
         
+
            </div>
−
<!-- now more shit -->
+
        </div>
 +
</div>
 +
</html>

Latest revision as of 21:31, 2 December 2018