Difference between revisions of "Team:CHINA CD UESTC/Protocol"

 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{Template:Team:CHINA_CD_UESTC/menu}}
 
{{Template:Team:CHINA_CD_UESTC/menu}}
 +
{{Template:Team:CHINA_CD_UESTC/cssstyle}}
 +
 +
 +
 
<!DOCTYPE html>
 
<!DOCTYPE html>
−
<!-- saved from url=(0028)http://www.whitefrontier.ch/ -->
+
<html>
−
<html lang="en" class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wf-brandongrotesque-i4-active wf-brandongrotesque-i7-active wf-brandongrotesque-n4-active wf-brandongrotesque-n7-active wf-dincondensedweb-n4-active wf-freightbigpro-i4-active wf-freightbigpro-i7-active wf-freightbigpro-n4-active wf-freightbigpro-n7-active wf-active">
+
 
<head>
 
<head>
  
−
<link rel="stylesheet" href="https://2015.igem.org/Team:CHINA_CD_UESTC/Template:RightStyle.css?action=raw&ctype=text/css" type="text/css" />
+
 
 
</head>
 
</head>
−
<style>
+
  <style>
−
#page {
+
−
margin-bottom: 200px;
+
−
z-index: 1000;
+
−
}
+
−
#page ul li{
+
−
list-style: none;
+
−
}
+
−
.leftside{
+
−
color: #000;
+
−
float:left;
+
−
width:23%;
+
−
}
+
−
#page .leftside li a {
+
−
cursor:pointer;
+
−
color: #000;
+
−
}
+
−
 
+
−
.rightside{
+
−
float:left;
+
−
margin-left:5%;
+
−
width:72%;
+
−
height:500px; 
+
−
overflow:hidden;
+
−
}
+
−
.protocol{
+
−
display:none;
+
−
width:95%;
+
−
margin-bottom:20px;
+
−
}
+
−
.protocolactive{
+
−
display:block;
+
−
width:95%;
+
−
margin-bottom:20px;
+
−
}
+
−
 
+
−
/*********green button***********/
+
−
.button{
+
−
width: 160px;
+
−
line-height: 38px;
+
−
text-align: center;
+
−
font-weight: bold;
+
−
font-size: 20px;
+
−
color: #fff;
+
−
text-shadow:1px 1px 1px #333;
+
−
border-radius: 5px;
+
−
margin:0 20px 20px 0;
+
−
position: relative;
+
−
overflow: hidden;
+
−
}
+
−
.button.green{
+
−
border:1px solid #64c878;
+
−
box-shadow: 0 1px 2px #b9ecc4 inset,0 -1px 0 #6c9f76 inset,0 -2px 3px #b9ecc4 inset;
+
−
background: -webkit-linear-gradient(top,#90dfa2,#84d494);
+
−
background: -moz-linear-gradient(top,#90dfa2,#84d494);
+
−
background: linear-gradient(top,#90dfa2,#84d494);
+
−
}
+
−
.green.larrow:before{
+
−
background: #64C878;
+
−
}
+
−
.green.larrow:after{
+
−
box-shadow: 0 -1px 0 #6C9F76 inset,0 -2px 0 #B9ECC4 inset,1px 0 0 #B9ECC4 inset;
+
−
background:-webkit-linear-gradient(top left,#90DFA2,#84D494);
+
−
background:-moz-linear-gradient(top left,#90DFA2,#84D494);
+
−
background:linear-gradient(top left,#90DFA2,#84D494);
+
−
}
+
−
 
+
−
/***green button over*/
+
−
table.tftable {font-size:12px;color:#333333;width:90%;border-width: 1px;border-color: #bcaf91;border-collapse: collapse;}
+
−
table.tftable th {font-size:12px;background-color:#ded0b0;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;text-align:left;}
+
−
table.tftable tr {background-color:#ffffff;}
+
−
table.tftable td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #bcaf91;}
+
  
 
</style>
 
</style>
  
−
 
+
  <style type="text/css">
−
<style type="text/css">
+
 
/*************************************************
 
/*************************************************
−
whole right section
+
        whole right section
  
 
***********************************************/
 
***********************************************/
 
#RightSection {
 
#RightSection {
−
position: fixed;
+
  position: fixed;
−
left: 260px;
+
  left: 260px;
−
top: 0;
+
  top: 0;
−
right: 0;
+
  right: 0;
−
height:1200px;
+
  height:1200px;
−
background:#F0F0F0;
+
  background:#F0F0F0;
−
background-image:url("https://static.igem.org/mediawiki/2015/7/79/CHINA_CD_UESTC_NBbg.jpg");
+
  background-image:url("https://static.igem.org/mediawiki/2015/7/79/CHINA_CD_UESTC_NBbg.jpg");
−
overflow-y: scroll;
+
  overflow-y: scroll;
−
background-repeat: repeat;
+
  background-repeat: repeat;
−
background-size: 180px;
+
  background-size: 180px;
−
background-position:  
+
  background-position:  
  
−
transition: all 200ms ease-out;
+
  transition: all 200ms ease-out;
−
transform: translate3d(0, 0, 0);
+
  transform: translate3d(0, 0, 0);
−
z-index:1;
+
  z-index:1;
  
 
}
 
}
−
#firstTitle {
 
−
left:600px;
 
  
−
}
 
 
</style>
 
</style>
  
 
<body id="homeIndexBody">
 
<body id="homeIndexBody">
−
<div id="RightSection"></div>
+
  <div id="RightSection"></div>
  
−
<div id="title">
+
  <div id="title">
−
<div id="firstTitle"><p><B>PROTOCOL</B></p></div>
+
    <div id="firstTitle">
−
</div>
+
      <p>
 +
        <B>PROTOCOL</B>
 +
      </p>
 +
    </div>
 +
  </div>
  
−
<div id="RightContent">
+
  <div id="RightContent">
−
<div class="transparent_class ">
+
    <div class="transparent_class ">
−
<p class="blockWords">&nbsp;&nbsp;We are a skillful and persistent group of nine Finns. We started as a group of students who didn't really know each other, assuming that we were going to spend our summer studying synthetic biology with strange colleagues. In the end we got a bunch of new friends and (in addition to studying synthetic biology) we just might have spent one of the best summers of our lives.</p>
+
      <p class="blockWords">
−
</div>
+
        &nbsp;&nbsp;Here is our entire experimental standard used in the project. If you want to repeat our project, we propose to operate in accordance with these standards. Meanwhile, the application of these specific experiment standards has been presented on the Method page, if necessary, you can go and have a view.
 +
      </p>
 +
    </div>
  
−
<div id="RightContentText">
+
    <div id="RightContentText">
  
−
<div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5" style="background-position: 0px 669px;">
+
      <div class="slide" id="slide2" data-slide="2" data-stellar-background-ratio="0.5" style="background-position: 0px 669px;">
−
<div class="container clearfix">
+
        <div class="container clearfix">
−
+
−
<div id="content" class="grid_12">
+
−
<strong><h2>Protocols</h2></strong>
+
−
</div>
+
−
<div class="clear"></div>
+
−
+
−
<div id="content">
+
−
<div class="grid_8">
+
−
<h4>Biography</h4>
+
−
<p>Morbi rutrum, elit ac fermentum egestas, tortor ante vestibulum est, eget scelerisque nisl velit eget tellus. Fusce porta facilisis luctus. Integer neque dolor, rhoncus nec euismod eget, pharetra et tortor. Nulla id pulvinar nunc. Vestibulum auctor nisl vel lectus ullamcorper sed pellentesque dolor eleifend. Praesent lobortis magna vel diam mattis sagittis.</p>
+
−
</div>
+
  
−
<div class="clear"></div>
+
          <div id="content" class="grid_12"> <strong><h2>Protocols</h2></strong>
−
+
          </div>
−
</div>
+
          <div class="clear"></div>
−
+
          <div id="content">
−
</div></div>
+
            <div class="grid_8">
 +
              <p>
 +
                In order to make our experiment can be repeated, we share our protocols to you responsibility.
 +
                <br>Our protocols are divided into four parts，as follow：</p>
 +
            </div>
  
 +
            <div class="clear"></div>
  
−
<div id="page">
+
          </div>
−
  <div class="leftside">
+
 
−
    <ul>
+
        </div>
−
      <li><button class="button green larrow" onclick="showprot('#prot1')">Heat Shock Transformation</button> </li>
+
      </div>
−
      <li><button class="button green larrow" onclick="showprot('#prot2')">CaCl2 Competent Cells</button></li>
+
 
−
      <li><button class="button green larrow" onclick="showprot('#prot3')">Glycerol Stocks</button></li>
+
      <div id="page">
−
    </ul>
+
        <div class="leftside">
−
  </div>
+
          <ul>
−
  <script type="text/javascript">
+
            <li>
 +
              <button class="button green larrow" onclick="showprot('#prot1')">Bacterial culture</button>
 +
            </li>
 +
            <li>
 +
              <button class="button green larrow" onclick="showprot('#prot2')">Molecular Biotechnology</button>
 +
            </li>
 +
            <li>
 +
              <button class="button green larrow" onclick="showprot('#prot3')">Analysis method</button>
 +
            </li>
 +
            <li>
 +
              <button class="button green larrow" onclick="showprot('#prot4')">Reagent</button>
 +
            </li>
 +
 
 +
          </ul>
 +
        </div>
 +
        <script type="text/javascript">
 
     function showprot(pid){
 
     function showprot(pid){
 
       $(".protocolactive").each(function() {
 
       $(".protocolactive").each(function() {
Line 176: Line 119:
 
   };
 
   };
 
   </script>
 
   </script>
−
  <div class="rightside">
+
        <div class="rightside">
−
    <div id="prot1" class="protocolactive">
+
          <div id="prot1" class="protocolactive">
−
<object data="https://static.igem.org/mediawiki/2014/d/da/10-16-14_Spec_Sheet_V2.pdf" type="application/pdf" width="100%" height="500px">
+
            <object data="https://static.igem.org/mediawiki/2015/5/52/CHINA_CD_UESTC_Protocol01.pdf" type="application/pdf" width="100%" height="580px">
−
<p>It appears you don't have a PDF plugin for this browser.
+
              <p>
−
  No biggie... you can <a href="myfile.pdf">click here to
+
                It appears you don't have a PDF plugin for this browser.
−
  download the PDF file.</a></p>
+
        No biggie... you can
−
</object>
+
                <a href="myfile.pdf">
−
    </div>
+
                  click here to
 +
        download the PDF file.
 +
                </a>
 +
              </p>
 +
            </object>
 +
          </div>
  
−
    <div id="prot2" class="protocol">
+
          <div id="prot2" class="protocol">
−
<object data="https://static.igem.org/mediawiki/2014/d/da/10-16-14_Spec_Sheet_V2.pdf" type="application/pdf" width="100%" height="500px">
+
            <object data="https://static.igem.org/mediawiki/2015/2/26/CHINA_CD_UESTC_Protocol02.pdf" width="100%" height="580px">
−
<p>It appears you don't have a PDF plugin for this browser.
+
              <p>
−
  No biggie... you can <a href="myfile.pdf">click here to
+
                It appears you don't have a PDF plugin for this browser.
−
download the PDF file.</a></p>
+
        No biggie... you can
−
</object>
+
                <a href="myfile.pdf">
−
    </div>
+
                  click here to
 +
      download the PDF file.
 +
                </a>
 +
              </p>
 +
            </object>
 +
          </div>
  
−
    <div id="prot3" class="protocol">
+
          <div id="prot3" class="protocol">
−
<object data="https://static.igem.org/mediawiki/2014/d/da/10-16-14_Spec_Sheet_V2.pdf" type="application/pdf" width="100%" height="500px">
+
            <object data="https://static.igem.org/mediawiki/2015/2/2b/CHINA_CD_UESTC_Protocol03.pdf" width="100%" height="580px">
−
<p>It appears you don't have a PDF plugin for this browser.
+
              <p>
−
  No biggie... you can <a href="myfile.pdf">click here to
+
                It appears you don't have a PDF plugin for this browser.
−
  download the PDF file.</a></p>
+
        No biggie... you can
−
</object>
+
                <a href="myfile.pdf">
−
    </div></div>
+
                  click here to
 +
        download the PDF file.
 +
                </a>
 +
              </p>
 +
            </object>
 +
          </div>
  
−
  </div>
+
          <div id="prot4" class="protocol">
−
  <div style="clear: both;"></div></div>
+
            <object data="https://static.igem.org/mediawiki/2015/1/12/CHINA_CD_UESTC_Protocol04.pdf" width="100%" height="580px">
−
<!-- ########## Don't edit below ########## -->
+
              <p>
 +
                It appears you don't have a PDF plugin for this browser.
 +
        No biggie... you can
 +
                <a href="myfile.pdf">
 +
                  click here to
 +
        download the PDF file.
 +
                </a>
 +
              </p>
 +
            </object>
 +
          </div>
 +
        </div>
  
−
 
+
      </div>
−
</div>
+
      <div style="clear: both;"></div>
 +
    </div>
 +
    <!-- ########## Don't edit below ########## --> </div>
  
 
</body>
 
</body>

Latest revision as of 16:15, 11 September 2015


<!DOCTYPE html>

PROTOCOL

  Here is our entire experimental standard used in the project. If you want to repeat our project, we propose to operate in accordance with these standards. Meanwhile, the application of these specific experiment standards has been presented on the Method page, if necessary, you can go and have a view.

Protocols

In order to make our experiment can be repeated, we share our protocols to you responsibility.
Our protocols are divided into four parts，as follow：

It appears you don't have a PDF plugin for this browser. No biggie... you can click here to download the PDF file.

It appears you don't have a PDF plugin for this browser. No biggie... you can click here to download the PDF file.

It appears you don't have a PDF plugin for this browser. No biggie... you can click here to download the PDF file.

It appears you don't have a PDF plugin for this browser. No biggie... you can click here to download the PDF file.