Difference between revisions of "Team:ASTWS-China/try"

Line 1: Line 1:
 
<html>
 
<html>
−
    <head>
+
<head>
−
        <meta charset="utf-8">
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
       
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
−
        <style>
+
<style>
−
           
+
body {margin:0;font-family:Arial}
−
       
+
−
/*            //css rest end*/
+
−
            .mw-content-ltr ul, .mw-content-rtl .mw-content-ltr ul{
+
−
                margin: 0 !important;
+
−
            }
+
−
           
+
−
            #HQ_page p{
+
−
                font-size: .8em;
+
−
            }
+
−
           
+
−
            #top_title{
+
−
                display: none;
+
−
            }
+
−
            html{
+
−
                height:100%;
+
−
                width:100%;
+
−
            }
+
−
            body {
+
−
                height:100%;
+
−
                width:100%;
+
−
                background-color: white;
+
−
            }
+
−
           
+
−
            img{
+
−
                width:100%;
+
−
            }
+
−
           
+
−
            #content{
+
−
                width: 80%;
+
−
                margin-top: 38px;
+
−
                margin: 0 auto 0 auto;
+
−
                font-size: 16px;
+
−
                position: relative;
+
−
            }
+
−
        </style>
+
−
       
+
−
    </head>
+
−
   
+
−
    <body>
+
−
        <!--Content-->
+
−
        <div class="igem_2018_team_content">
+
−
            <div class="igem_2018_team_column_wrapper">
+
−
                <div class="clear extra_space"></div>
+
−
                <div class="clear extra_space"></div>
+
  
−
                <div class="column full_size">
+
.topnav {
−
                    <img src="https://static.igem.org/mediawiki/2018/5/50/T--ASTWS-China--InterLab_pic1.jpg">
+
  overflow: hidden;
−
                    <h1 style="text-align: center; font-size: 40">InterLab</h1>
+
  background-color: #333;
−
                    <p>The most direct aim of the entire InterLab is to standardize the fluorescence measurements. And the topic of standardization varies every year to be more specific and comprehensive. </p>
+
}
−
                </div>
+
  
−
                <!--Overall description-->
+
.topnav a {
−
                <div class="column full-size">
+
  float: left;
−
                    <h2 style="text-align: center">Overall Description</h2>
+
  display: block;
−
                    <h3>Standardization</h3>
+
  color: #f2f2f2;
−
                    <p>Standardization plays an extremely important role in science experiments. There are multiple kinds of methods which will keep the lab results accurate. </p>
+
  text-align: center;
−
                    <ol>
+
  padding: 14px 16px;
−
                        <li>Every protocol is read and followed carefully by group members and checked by each member. </li>
+
  text-decoration: none;
−
                        <li>Any indices should be the same unit and same figure. </li>
+
  font-size: 17px;
−
                        <li>Any experiment is better to hold two control groups. (one is 100% source, the other is 100% solution) </li>
+
}
−
                        <li>An ideal standardization experiment needs more than 3 repeating experiments. </li>
+
−
                    </ol>
+
−
                    <p>Standardization is the process of developing and implementing technical standards. It can help to maximize compatibility, interoperability, safety, repeatability, or quality as well. </p>
+
  
−
                    <h3>Goals</h3>
+
.active {
−
                    <p>As a whole, the InterLab is trying to minimize variability across labs. Trying to further contribute amenity to the synthetic biological study, instead of measuring one fluorescent molecule, this year the IGEM teams are standardizing the optical measurement of the entire population of GFP (Green Fluorescent Protein) cells. Because ordinarily means to measure populated cells in optical devices have complicated process and uncertain results, this year, we are using massive data to verify if there is a method that can simplify the process and increase comparability.</p>
+
  background-color: #4CAF50;
 +
  color: white;
 +
}
  
−
                    <p style="color: blue">The method that is been proving by our team is the one that if we can reduce lab-to-lab variability in fluorescence measurements by normalizing to absolute cell count or colony-forming units (CFUs) instead of OD</p>
+
.topnav .icon {
−
                </div>
+
  display: none;
 +
}
  
−
                <!--Experiment Process-->
+
.dropdown {
−
                <div class="column full-size">
+
    float: left;
−
                    <h2 style="text-align: center">Experiment Process</h2>
+
    overflow: hidden;
−
                    <h3>Preparation</h3>
+
}
−
                    <p>Carefully reading through the protocol is necessary for the preparation of the entire lab and getting materials that we need is required as well. </p>
+
−
                    <h3>Setting Standards</h3>
+
−
                    <p>We standardized the OD600 Reference point, Particle Standard Curve, and Fluorescence standard curve. We used E. coli K-12 DH5-alpha as well for the sake of consistency and reproducibility.</p>
+
−
                    <h3>Cell Measurement</h3>
+
−
                    <p>After the three steps of calibration, cell measurements should be starting. We followed <a href="https://static.igem.org/mediawiki/2018/0/09/2018_InterLab_Plate_Reader_Protocol.pdf">2018 iGEM’s InterLab Protocol</a> to do the lab and to collect our results.</p>
+
−
                    <ul>
+
−
                        <li>Installation</li>
+
−
                        <p id="cell_measurement_list">We first transformed E.coli DH5α with plasmids provided in the IGEM tool box.</p>
+
  
−
                        <li>Cultivation</li>
+
.dropdown .dropbtn {
−
                        <p id="cell_measurement_list">We picked 2 colonies from each of the transformation plates and inoculated in 5-10 mL LB medium and Chloramphenicol. The cells grew overnight (16-18 hours) at 37°C and 220 rpm. And we measured the OD600 of both initial and final cells. </p>
+
    font-size: 17px;   
 +
    border: none;
 +
    outline: none;
 +
    color: white;
 +
    padding: 14px 16px;
 +
    background-color: inherit;
 +
    font-family: inherit;
 +
    margin: 0;
 +
}
  
−
                        <li>Dilution</li>
+
.dropdown-content {
−
                        <p id="cell_measurement_list">We poured in 1900μL of LB and Cam to make a 1:20 dilution for three times. Then we poured in 900μL of LB and Cam to make a 1:10 dilution twice and got three numbers of colonies and dilution factors from the last three dilution.</p>
+
    display: none;
 +
    position: absolute;
 +
    background-color: #f9f9f9;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 1;
 +
}
  
−
                        <li>Counting Colonies</li>
+
.dropdown-content a {
−
                        <p id="cell_measurement_list">We counted the number of colonies after dilution and multiplied it by the final dilution factor to calculate the total number of colonies.</p>
+
    float: none;
−
                    </ul>
+
    color: black;
−
                </div>
+
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
    text-align: left;
 +
}
  
−
                <!--Graph and Analysis-->
+
.topnav a:hover, .dropdown:hover .dropbtn {
−
                <div calss="column full-size">
+
  background-color: #555;
−
                    <h2 style="text-align: center">Graph and Analysis</h2>
+
  color: white;
−
                    <div calss="column full-size">
+
}
−
                        <p>These are the graphs for the results.</p>
+
−
                        <img id="InterLab_Image" src="https://static.igem.org/mediawiki/2018/7/7b/T--ASTWS-China--Particles_Standard_Curve.jpg">
+
−
                        <div class="clear extra_space"></div>
+
−
                        <div class="clear extra_space"></div>
+
−
                        <img id="InterLab_Image" src="https://static.igem.org/mediawiki/2018/3/3e/T--ASTWS-China--Fluorescein_Standard_Curve_Measurement.jpg">
+
−
                        <div class="clear extra_space"></div>
+
−
                        <div class="clear extra_space"></div>
+
−
                        <img id="InterLab_Image" src="https://static.igem.org/mediawiki/2018/e/e5/T--ASTWS-China--Fluorescence_Measurement.jpg">
+
−
                    </div>
+
−
                </div>
+
  
−
                <!--Conclusion-->
+
.dropdown-content a:hover {
−
                <div calss="column full-size">
+
    background-color: #ddd;
−
                    <h2 style="text-align: center">Conclusion</h2>
+
    color: black;
−
                    <p>To sum up, the result of this InterLab Study is quite satisfying. All the related replicates shared the similar curve（posted in the previous section）and we were able to figure out that the number of each colony was positively related to the corresponding absorbance. So we roughly concluded that it is possible to simplify the original process with calculated formula（the transition from Absorbance to colony amount）. However, the data we could aggregate was quite limited, and thus, the specific equation, if we have generated, would be both atypical and inaccurate.</p>
+
}
−
                </div>
+
  
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
  
−
        <!--  
+
@media screen and (max-width: 600px) {
−
        NewPP limit report
+
  .topnav a:not(:first-child), .dropdown .dropbtn {
−
        CPU time usage: 0.002 seconds
+
    display: none;
−
        Real time usage: 0.002 seconds
+
  }
−
        Preprocessor visited node count: 4/1000000
+
  .topnav a.icon {
−
        Preprocessor generated node count: 20/1000000
+
    float: right;
−
        Post‐expand include size: 0/2097152 bytes
+
    display: block;
−
        Template argument size: 0/2097152 bytes
+
  }
−
        Highest expansion depth: 2/40
+
}
−
        Expensive parser function count: 0/100
+
−
        -->
+
  
−
        <!-- Saved in parser cache with key 2018_igem_org:pcache:idhash:9636-0!*!*!*!*!*!* and timestamp 20180725025742 and revision id 67315
+
@media screen and (max-width: 600px) {
−
        -->
+
  .topnav.responsive {position: relative;}
−
                </div>            
+
  .topnav.responsive .icon {
−
            <div class="visualClear"></div>
+
    position: absolute;
−
            </div>
+
    right: 0;
−
          
+
    top: 0;
−
     </body>
+
  }
 +
  .topnav.responsive a {
 +
    float: none;
 +
    display: block;
 +
    text-align: left;
 +
  }
 +
  .topnav.responsive .dropdown {float: none;}
 +
  .topnav.responsive .dropdown-content {position: relative;}
 +
  .topnav.responsive .dropdown .dropbtn {
 +
    display: block;
 +
    width: 100%;
 +
    text-align: left;
 +
  }
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
 
 +
<div class="topnav" id="myTopnav">
 +
  <a href="#home" class="active">Home</a>
 +
  <a href="#news">News</a>
 +
  <a href="#contact">Contact</a>
 +
  <div class="dropdown">
 +
    <button class="dropbtn">Dropdown
 +
      <i class="fa fa-caret-down"></i>
 +
    </button>
 +
    <div class="dropdown-content">
 +
      <a href="#">Link 1</a>
 +
      <a href="#">Link 2</a>
 +
      <a href="#">Link 3</a>
 +
    </div>
 +
  </div>
 +
  <a href="#about">About</a>
 +
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
 +
</div>
 +
 
 +
<div style="padding-left:16px">
 +
  <h2>Responsive Topnav with Dropdown</h2>
 +
  <p>Resize the browser window to see how it works.</p>
 +
  <p>Hover over the dropdown button to open the dropdown menu.</p>
 +
</div>
 +
 
 +
<script>
 +
function myFunction() {
 +
    var x = document.getElementById("myTopnav");
 +
    if (x.className === "topnav") {
 +
         x.className += " responsive";
 +
     } else {
 +
        x.className = "topnav";
 +
    }
 +
}
 +
</script>
 +
 
 +
</body>
 
</html>
 
</html>

Revision as of 23:08, 17 October 2018

Responsive Topnav with Dropdown

Resize the browser window to see how it works.

Hover over the dropdown button to open the dropdown menu.