Difference between revisions of "Team:Edinburgh/Composite Part"

Line 83: Line 83:
 
</div>
 
</div>
  
−
  <div class="container"> 
+
 
−
     <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
+
 
−
      <div class="panel panel-default">
+
     <div id="accordion" class="panel-group">
−
         <div class="panel-heading" role="tab" id="headingOne">
+
 
−
          <h4 class="panel-title">
+
         <div class="panel panel-default">
−
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
+
 
−
              Part
+
             <div class="panel-heading">
−
             </a>
+
 
−
          </h4>
+
                 <h4 class="panel-title">
−
        </div>
+
 
−
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
+
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
−
          <div class="panel-body">
+
 
−
            <div class="col-md-6">
+
                 </h4>
−
              <p style="color: black;">
+
 
−
              <h2>Materials</h2>
+
−
              <ul>
+
−
                 <li>1g Agarose
+
−
                <li>100ml 1X TAE buffer
+
−
                <li>5µl GelRed stain
+
−
              </ul>
+
−
            </p>
+
−
            </div>
+
−
            <div class="col-md-6">
+
−
              <p class="text-muted">
+
−
              <h2>Procedure</h2>
+
−
              <ul>
+
−
                <li>1. Mix the agarose with the 1X TAE buffer in a flask.
+
−
                <li>2. Heat the mixture until all the agarose is dissolved.
+
−
                <li>3. Swirl the flask under cold running water to cool the mixture.
+
−
                <li> 4. Add the gel stain.
+
−
                <li>5. Pour into an assembled gel tray and let it cool.
+
−
              </uL>
+
−
            </p>
+
−
            </div>
+
−
          </div>
+
−
        </div>
+
−
      </div>
+
−
      <div class="panel panel-default">
+
−
        <div class="panel-heading" role="tab" id="headingTwo">
+
−
          <h4 class="panel-title">
+
−
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+
−
            Part
+
−
            </a>
+
−
          </h4>
+
−
        </div>
+
−
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
+
−
          <div class="panel-body">
+
−
            <div class="col-md-6">
+
−
              <p>
+
−
              <h2>Materials</h2>
+
−
              <ul>
+
−
                 <li>1% Agarose
+
−
                <li>1X TAE buffer
+
−
                <li>5X loading dye
+
−
                <li>DNA ladder
+
−
                <li>DNA samples
+
−
              </ul>
+
−
            </p>
+
 
             </div>
 
             </div>
−
            <div class="col-md-6">
 
−
              <p>
 
−
              <h2>Procedure</h2>
 
−
              <ul>
 
−
                <li>1. Place gel tray into the electrophoresis apparatus.
 
−
                <li>2. Pour 1X TAE so that the gel is covered by buffer.
 
−
                <li>3. Prepare the samples by adding the appropriate amount of loading dye.
 
−
                <li>4. Load samples and DNA ladder into wells on the gel.
 
−
                <li>5. Run the gel at roughly 100V for around an hour
 
  
−
              </uL>
+
             <div id="collapseOne" class="panel-collapse collapse">
−
             </p>
+
 
−
            </div>
+
                <div class="panel-body">
−
          </div>
+
 
−
        </div>
+
                    <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="http://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
−
      </div>
+
 
−
      <div class="panel panel-default">
+
                 </div>
−
        <div class="panel-heading" role="tab" id="headingThree">
+
 
−
          <h4 class="panel-title">
+
−
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+
−
              Part
+
−
            </a>
+
−
          </h4>
+
−
        </div>
+
−
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
+
−
          <div class="panel-body">
+
−
          <div class="col-md-6">
+
−
              <p>
+
−
              <h2>Materials</h2>
+
−
              <ul>
+
−
                <li>10ml Luria Broth (LB)
+
−
                <li>10µl Specific Antibiotic at 1000x (Chloramphenicol, Ampicillin or Kanamycin)
+
−
                <li>Loop (for picking colony)
+
−
                <li>Ethanol
+
−
              </ul>
+
−
            </p>
+
−
            </div>
+
−
            <div class="col-md-6">
+
−
              <p>
+
−
              <h2>Procedure</h2>
+
−
              <ul>
+
−
                 <li>1. Pour 10ml of LB into a 50ml Falcon tube.
+
−
                <li>2. Pipette 10µl of antibiotic into the broth.
+
−
                <li>3. Dip loop in ethanol and flame to sterilise. Once it is cool, pick colony and transfer to a 50ml Falcon tube.
+
−
                <li>4. Incubate at 37°C overnight in a shaking incubator.
+
−
              </uL>
+
−
            </p>
+
 
             </div>
 
             </div>
−
          </div>
 
−
        </div>
 
−
      </div>
 
−
    </div>
 
−
  </div>
 
  
−
<div class="panel panel-default">
 
−
  <div class="panel-heading">
 
−
    <h3 class="panel-title">Panel title</h3>
 
−
  </div>
 
−
</div>
 
−
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 
−
      <div class="panel panel-default">
 
−
        <div class="panel-heading" role="tab" id="headingOne">
 
−
          <h4 class="panel-title">
 
−
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
 
−
              1% Agarose Gel
 
−
            </a>
 
−
          </h4>
 
 
         </div>
 
         </div>
−
         <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
+
 
−
          <div class="panel-body">
+
         <div class="panel panel-default">
−
            <div class="col-md-6">
+
 
−
              <p style="color: black;">
+
            <div class="panel-heading">
−
              <h2>Materials</h2>
+
 
−
              <ul>
+
                <h4 class="panel-title">
−
                <li>1g Agarose
+
 
−
                <li>100ml 1X TAE buffer
+
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
−
                <li>5µl GelRed stain
+
 
−
              </ul>
+
                 </h4>
−
            </p>
+
 
−
            </div>
+
−
            <div class="col-md-6">
+
−
              <p class="text-muted">
+
−
              <h2>Procedure</h2>
+
−
              <ul>
+
−
                <li>1. Mix the agarose with the 1X TAE buffer in a flask.
+
−
                <li>2. Heat the mixture until all the agarose is dissolved.
+
−
                <li>3. Swirl the flask under cold running water to cool the mixture.
+
−
                <li> 4. Add the gel stain.
+
−
                 <li>5. Pour into an assembled gel tray and let it cool.
+
−
              </uL>
+
−
            </p>
+
 
             </div>
 
             </div>
−
          </div>
 
−
        </div>
 
−
      </div>
 
−
      <div class="panel panel-default">
 
−
        <div class="panel-heading" role="tab" id="headingTwo">
 
−
          <h4 class="panel-title">
 
−
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
 
−
            Agarose Gel Electrophoresis
 
−
            </a>
 
−
          </h4>
 
−
        </div>
 
−
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
 
−
          <div class="panel-body">
 
−
            <div class="col-md-6">
 
−
              <p>
 
−
              <h2>Materials</h2>
 
−
              <ul>
 
−
                <li>1% Agarose
 
−
                <li>1X TAE buffer
 
−
                <li>5X loading dye
 
−
                <li>DNA ladder
 
−
                <li>DNA samples
 
−
              </ul>
 
−
            </p>
 
−
            </div>
 
−
            <div class="col-md-6">
 
−
              <p>
 
−
              <h2>Procedure</h2>
 
−
              <ul>
 
−
                <li>1. Place gel tray into the electrophoresis apparatus.
 
−
                <li>2. Pour 1X TAE so that the gel is covered by buffer.
 
−
                <li>3. Prepare the samples by adding the appropriate amount of loading dye.
 
−
                <li>4. Load samples and DNA ladder into wells on the gel.
 
−
                <li>5. Run the gel at roughly 100V for around an hour
 
  
−
              </uL>
+
            <div id="collapseTwo" class="panel-collapse collapse in">
−
            </p>
+
 
 +
                <div class="panel-body">
 +
 
 +
                    <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
 +
 
 +
                </div>
 +
 
 
             </div>
 
             </div>
−
          </div>
 
−
        </div>
 
−
      </div>
 
−
      <div class="panel panel-default">
 
−
        <div class="panel-heading" role="tab" id="headingThree">
 
−
          <h4 class="panel-title">
 
−
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
 
−
              Culture
 
−
            </a>
 
−
          </h4>
 
−
        </div>
 
−
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
 
−
          <div class="panel-body">
 
−
          <div class="col-md-6">
 
−
              <p>
 
−
              <h2>Materials</h2>
 
−
              <ul>
 
−
                <li>10ml Luria Broth (LB)
 
−
                <li>10µl Specific Antibiotic at 1000x (Chloramphenicol, Ampicillin or Kanamycin)
 
−
                <li>Loop (for picking colony)
 
−
                <li>Ethanol
 
−
              </ul>
 
−
            </p>
 
−
            </div>
 
−
            <div class="col-md-6">
 
−
              <p>
 
−
              <h2>Procedure</h2>
 
−
              <ul>
 
−
                <li>1. Pour 10ml of LB into a 50ml Falcon tube.
 
−
                <li>2. Pipette 10µl of antibiotic into the broth.
 
−
                <li>3. Dip loop in ethanol and flame to sterilise. Once it is cool, pick colony and transfer to a 50ml Falcon tube.
 
−
                <li>4. Incubate at 37°C overnight in a shaking incubator.
 
−
              </uL>
 
−
            </p>
 
−
            </div>
 
−
          </div>
 
−
        </div>
 
−
      </div>
 
−
      <div class="panel panel-default">
 
−
        <div class="panel-heading" role="tab" id="headingFour">
 
−
          <h4 class="panel-title">
 
−
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
 
−
            Gel Purification using QIAquick Gel Extraction Kit
 
−
            </a>
 
−
          </h4>
 
−
        </div>
 
−
      </div>
 
−
    </div>
 
−
  </div>
 
  
−
<div class="panel panel-default">
 
−
  <div class="panel-heading">
 
−
    <h3 class="panel-title">Panel title</h3>
 
−
  </div>
 
−
</div>
 
−
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
 
−
      <div class="panel panel-default">
 
−
        <div class="panel-heading" role="tab" id="headingOne">
 
−
          <h4 class="panel-title">
 
−
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
 
−
              1% Agarose Gel
 
−
            </a>
 
−
          </h4>
 
 
         </div>
 
         </div>
−
         <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
+
 
−
          <div class="panel-body">
+
         <div class="panel panel-default">
−
            <div class="col-md-6">
+
 
−
              <p style="color: black;">
+
            <div class="panel-heading">
−
              <h2>Materials</h2>
+
 
−
              <ul>
+
                <h4 class="panel-title">
−
                 <li>1g Agarose
+
 
−
                <li>100ml 1X TAE buffer
+
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
−
                <li>5µl GelRed stain
+
 
−
              </ul>
+
                 </h4>
−
            </p>
+
 
 
             </div>
 
             </div>
−
            <div class="col-md-6">
 
−
              <p class="text-muted">
 
−
              <h2>Procedure</h2>
 
−
              <ul>
 
−
                <li>1. Mix the agarose with the 1X TAE buffer in a flask.
 
−
                <li>2. Heat the mixture until all the agarose is dissolved.
 
−
                <li>3. Swirl the flask under cold running water to cool the mixture.
 
−
                <li> 4. Add the gel stain.
 
−
                <li>5. Pour into an assembled gel tray and let it cool.
 
−
              </uL>
 
−
            </p>
 
−
            </div>
 
−
          </div>
 
−
        </div>
 
−
      </div>
 
−
      <div class="panel panel-default">
 
−
        <div class="panel-heading" role="tab" id="headingTwo">
 
−
          <h4 class="panel-title">
 
−
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
 
−
            Agarose Gel Electrophoresis
 
−
            </a>
 
−
          </h4>
 
−
        </div>
 
−
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
 
−
          <div class="panel-body">
 
−
            <div class="col-md-6">
 
−
              <p>
 
−
              <h2>Materials</h2>
 
−
              <ul>
 
−
                <li>1% Agarose
 
−
                <li>1X TAE buffer
 
−
                <li>5X loading dye
 
−
                <li>DNA ladder
 
−
                <li>DNA samples
 
−
              </ul>
 
−
            </p>
 
−
            </div>
 
−
            <div class="col-md-6">
 
−
              <p>
 
−
              <h2>Procedure</h2>
 
−
              <ul>
 
−
                <li>1. Place gel tray into the electrophoresis apparatus.
 
−
                <li>2. Pour 1X TAE so that the gel is covered by buffer.
 
−
                <li>3. Prepare the samples by adding the appropriate amount of loading dye.
 
−
                <li>4. Load samples and DNA ladder into wells on the gel.
 
−
                <li>5. Run the gel at roughly 100V for around an hour
 
  
−
              </uL>
+
            <div id="collapseThree" class="panel-collapse collapse">
−
            </p>
+
 
 +
                <div class="panel-body">
 +
 
 +
                    <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="http://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
 +
 
 +
                </div>
 +
 
 
             </div>
 
             </div>
−
          </div>
+
 
−
        </div>
+
−
      </div>
+
−
      <div class="panel panel-default">
+
−
        <div class="panel-heading" role="tab" id="headingThree">
+
−
          <h4 class="panel-title">
+
−
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+
−
              Culture
+
−
            </a>
+
−
          </h4>
+
 
         </div>
 
         </div>
−
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
+
 
−
          <div class="panel-body">
+
−
          <div class="col-md-6">
+
−
              <p>
+
−
              <h2>Materials</h2>
+
−
              <ul>
+
−
                <li>10ml Luria Broth (LB)
+
−
                <li>10µl Specific Antibiotic at 1000x (Chloramphenicol, Ampicillin or Kanamycin)
+
−
                <li>Loop (for picking colony)
+
−
                <li>Ethanol
+
−
              </ul>
+
−
            </p>
+
−
            </div>
+
−
            <div class="col-md-6">
+
−
              <p>
+
−
              <h2>Procedure</h2>
+
−
              <ul>
+
−
                <li>1. Pour 10ml of LB into a 50ml Falcon tube.
+
−
                <li>2. Pipette 10µl of antibiotic into the broth.
+
−
                <li>3. Dip loop in ethanol and flame to sterilise. Once it is cool, pick colony and transfer to a 50ml Falcon tube.
+
−
                <li>4. Incubate at 37°C overnight in a shaking incubator.
+
−
              </uL>
+
−
            </p>
+
−
            </div>
+
−
          </div>
+
−
        </div>
+
−
      </div>
+
−
      <div class="panel panel-default">
+
−
        <div class="panel-heading" role="tab" id="headingFour">
+
−
          <h4 class="panel-title">
+
−
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+
−
            Gel Purification using QIAquick Gel Extraction Kit
+
−
            </a>
+
−
          </h4>
+
−
        </div>
+
−
      </div>
+
 
     </div>
 
     </div>
−
  </div>
+
 
−
</div>
+
  
  

Revision as of 10:52, 1 September 2015

Composite Parts




Foreword

1. What is HTML?

HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. Learn more.

2. What is Bootstrap?

Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.

3. What is CSS?

CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.