Difference between revisions of "Team:EPF Lausanne/Notebook/Protocols"

Line 20: Line 20:
 
   max-height:50%;
 
   max-height:50%;
 
}
 
}
 
+
body {
#masthead {
+
      position: relative;
    min-height:270px;
+
    background-color:#117711;
+
    color:#ddeedd;
+
}
+
 
+
#masthead h1 {
+
    font-size: 55px;
+
    line-height: 1;
+
}
+
 
+
#masthead .well {
+
    margin-top:16%;
+
    background-color:#226622;
+
    border-color:#225522;
+
}
+
 
+
@media screen and (min-width: 768px) {
+
    #masthead h1 {
+
        font-size: 100px;
+
    }
+
}
+
 
+
.navbar-bright {
+
    background-color:#226622;
+
    color:#fff;
+
}
+
 
+
.navbar-bright a, #masthead a, #masthead .lead {
+
    color:#aaccaa;
+
}
+
 
+
.navbar-bright li > a:hover {
+
    background-color:#003300;
+
}
+
 
+
@media (min-width: 979px) {
+
  #mynav.affix-top {
+
    position: static;
+
    margin-top:30px;
+
    width:228px;
+
 
   }
 
   }
    
+
   ul.nav-pills {
  #mynav.affix {
+
      top: 20px;
    position: relative;
+
      position: relative;
    top:70px;
+
    width:228px;
+
 
   }
 
   }
}
 
 
#mynav li.active a {background-color:red;}
 
 
</style>
 
</style>
 
     <!--  
 
     <!--  
Line 97: Line 52:
  
 
     <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/mordernizr-2.6.2?action=raw&amp;ctype=text/js"></script>
 
     <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/mordernizr-2.6.2?action=raw&amp;ctype=text/js"></script>
 +
 
</head>
 
</head>
<body  class="loading" data-spy="scroll" data-target="#myScrollspy" data-offset="20">
+
<body  class="loading">
 
     <!--[if lt IE 7]>
 
     <!--[if lt IE 7]>
 
     <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
 
     <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
Line 178: Line 134:
 
         </div>
 
         </div>
 
     </div>
 
     </div>
 +
    <body data-spy="scroll" data-target="#myScrollspy" data-offset="20">
  
<div class="first-section" id="mycontentcon">
+
    <div class="first-section">
    <div class="row">
+
        <div class="row">
        <div class="col-md-3">
+
            <nav class="col-sm-3" id="myScrollspy">
            <div class="list-group navbar" id="sidebar">
+
              <ul class="nav nav-pills nav-stacked">
                 <ul class="nav" id="mynav" data-spy="affix" data-offset-top="280">
+
                 <li class="active"><a href="#section1">Section 1</a></li>
                    <li><a href="#c1" class="list-group-item">
+
                <li><a href="#section2">Section 2</a></li>
                          Content 1
+
                <li><a href="#section3">Section 3</a></li>
                        </a>
+
                <li class="dropdown">
                    </li>
+
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
                    <li> <a href="#c2" class="list-group-item" contenteditable="false">Content 2
+
                  <ul class="dropdown-menu">
                        </a>
+
                     <li><a href="#section41">Section 4-1</a></li>
                     </li>
+
                     <li><a href="#section42">Section 4-2</a></li>                   
                     <li> <a href="#c3" class="list-group-item" contenteditable="false">Content 3
+
                  </ul>
                        </a>
+
                </li>
                    </li>
+
              </ul>
                    <li> <a href="#c4" class="list-group-item" contenteditable="false">Content 4
+
            </nav>
                        </a>
+
            <div class="col-sm-9">
                    </li>
+
              <div id="section1" class="well">  
                    <li> <a href="#c5" class="list-group-item" contenteditable="false">Content 5
+
                <h1>Agarose Gel Preparation</h1>
                        </a>
+
    <h2>1,2% agarose gel – for small DNA fragments</h2>
                    </li>
+
<p>Mix 50 mL 1X TAE and 0.6 g Agarose</p>
                </ul>
+
<p>Melt in microwave until agarose has melted (about 50 seconds)</p>
 +
<p>Add 1.3 μL Gel Red</p>
 +
<p>Pour solution into agarose gel mold with comb</p>
 +
<p>Let set for 20 minutes or until solid</p>
 +
<p>Place gel in 1X TAE and remove comb</p>
 +
<p>Load samples of 200 ng (or 2  μL) DNA mixed with 2  μL 6X loading dye and water up to 12  μL</p>
 +
<p>Run gel at 100-120 Volts for 40-50 minutes (depending on size of fragments)</p>
 +
<p>Take a picture of the gel at the UV detector</p>
 +
<h2>3% agarose gel – for large DNA fragments</h2>
 +
<p>Mix 50 mL 1X TAE and 1.5 g Agarose</p>
 +
<p>Melt in microwave until agarose has melted (about 50 seconds)</p>
 +
<p>Add 1.5 μL Gel Red</p>
 +
<p>Pour solution into agarose gel mold with comb</p>
 +
<p>Let set for 20 minutes or until solid</p>
 +
<p>Place gel in 1X TAE and remove comb</p>
 +
<p>Load samples of 200 ng (or 2  μL) DNA mixed with 2  μL 6X loading dye and water up to 12  μL</p>
 +
<p>Run gel at 80 Volts for 2 hours</p>
 +
<p>Take a picture of the gel at the UV detector</p>
 +
              </div>
 +
              <div id="section2" class="well">
 +
                <h1>Section 2</h1>
 +
                <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
              </div>       
 +
              <div id="section3" class="well">        
 +
                <h1>Section 3</h1>
 +
                <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
              </div>
 +
              <div id="section41" class="well">       
 +
                <h1>Section 4-1</h1>
 +
                <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
              </div>     
 +
              <div id="section42" class="well">        
 +
                <h1>Section 4-2</h1>
 +
                <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 +
              </div>
 
             </div>
 
             </div>
        </div>
 
        <div class="col-md-9" id="mycontent">
 
            <div id="c1">
 
                <h2 class="">Content 1</h2>
 
At Bootply we attempt to build simple Bootstrap templates that utilize
 
            the code Bootstap CSS without a lot of customization. Tia cor magni dolores
 
            eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
 
            dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia
 
            non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
 
            quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem
 
            ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?
 
            <hr class="col-md-12">
 
            </div>
 
            <div id="c2">
 
                    <h2>Content 2</h2>
 
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
 
                beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
 
                sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione
 
                voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
 
                quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
 
                eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
 
                laboriosam, nisi ut
 
                <hr class="col-md-12">
 
            </div> <div id="c3"> 
 
                    <h2 class="">Content 3</h2>
 
Rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto
 
                beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas
 
                sit aspernatur aut odit aut fugit, sed quia cor magni dolores eos qui ratione
 
                voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum
 
                quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam
 
                eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
 
                Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
 
                laboriosam, nisi ut
 
                <hr class="col-md-12">
 
                </div><div id="c4">
 
                    <h2 class="">Content 4</h2>
 
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
 
                doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
 
                veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
 
                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
 
                cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
 
                quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
 
                velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
 
                magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
 
                exercitationem ullam corporis suscipit laboriosam, nisi ut
 
          </div><div id="c5" style="min-height:500px;">
 
                    <h2 class="">Content 5</h2>
 
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
 
                doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
 
                veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
 
                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
 
                cor magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro
 
                quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
 
                velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
 
                magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
 
                exercitationem ullam corporis suscipit laboriosam, nisi ut
 
                </div>
 
 
         </div>
 
         </div>
 
     </div>
 
     </div>
</div>
 
 
  
 
     <div class="fourth-section">
 
     <div class="fourth-section">
Line 319: Line 250:
 
     <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/plugins?action=raw&amp;ctype=text/js"></script>
 
     <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/plugins?action=raw&amp;ctype=text/js"></script>
 
     <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/main?action=raw&amp;ctype=text/js"></script>
 
     <script src="https://2015.igem.org/Team:EPF_Lausanne/Test/js/main?action=raw&amp;ctype=text/js"></script>
     <script type="https://2015.igem.org/Team:EPF_Lausanne/js/Sidebarscript?action=raw&amp;ctype=text/js"></script>  
+
     <script type="https://2015.igem.org/Team:EPF_Lausanne/js/Sidebarscript?action=raw&amp;ctype=text/js"></script>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 12:21, 21 July 2015

Protocols

Agarose Gel Preparation

1,2% agarose gel – for small DNA fragments

Mix 50 mL 1X TAE and 0.6 g Agarose

Melt in microwave until agarose has melted (about 50 seconds)

Add 1.3 μL Gel Red

Pour solution into agarose gel mold with comb

Let set for 20 minutes or until solid

Place gel in 1X TAE and remove comb

Load samples of 200 ng (or 2 μL) DNA mixed with 2 μL 6X loading dye and water up to 12 μL

Run gel at 100-120 Volts for 40-50 minutes (depending on size of fragments)

Take a picture of the gel at the UV detector

3% agarose gel – for large DNA fragments

Mix 50 mL 1X TAE and 1.5 g Agarose

Melt in microwave until agarose has melted (about 50 seconds)

Add 1.5 μL Gel Red

Pour solution into agarose gel mold with comb

Let set for 20 minutes or until solid

Place gel in 1X TAE and remove comb

Load samples of 200 ng (or 2 μL) DNA mixed with 2 μL 6X loading dye and water up to 12 μL

Run gel at 80 Volts for 2 hours

Take a picture of the gel at the UV detector

Section 2

Try to scroll this section and look at the navigation list while scrolling!

Section 3

Try to scroll this section and look at the navigation list while scrolling!

Section 4-1

Try to scroll this section and look at the navigation list while scrolling!

Section 4-2

Try to scroll this section and look at the navigation list while scrolling!

Still under construction