Difference between revisions of "Team:British Columbia/Notebook"

Line 1: Line 1:
 
{{British_Columbia_2}}
 
{{British_Columbia_2}}
 
{{British_Columbia_Navbar}}
 
{{British_Columbia_Navbar}}
 +
{{British_Columbia_Sidebar}}
 +
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
 
     <title>Notebook</title>
 
     <title>Notebook</title>
    <meta charset="utf-8">
+
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
 
     <style>
 
     <style>
 
         .cover{
 
         .cover{
Line 14: Line 15:
 
         @media screen and (min-width: 768px) {
 
         @media screen and (min-width: 768px) {
 
             .cover{
 
             .cover{
                 background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.10) 50%, rgba(0, 0, 0, 0) 100%), url("https://static.igem.org/mediawiki/2016/8/89/T--British_Columbia--header-leaves-3.JPG");
+
                 background: linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.15) 25%, rgba(0, 0, 0, 0) 100%),   url("https://static.igem.org/mediawiki/2016/d/d8/T--British_Columbia--header-branches-2.JPG");
 
                 background-size: cover; background-repeat: no-repeat;
 
                 background-size: cover; background-repeat: no-repeat;
 
                 background-position: 0 0, 0 -220px;
 
                 background-position: 0 0, 0 -220px;
 
             }
 
             }
 +
        }
 +
 +
        #previous img{
 +
            width: 100%; min-width: 100%; height: auto;
 +
            top: -250px;
 +
            transition: all 1s ease;
 +
        }
 +
 +
        #next img{
 +
            width: 100%; min-width: 100%; height: auto;
 +
            top: -250px;
 +
            transition: all 1s ease;
 
         }
 
         }
  
Line 47: Line 60:
  
 
     </script>
 
     </script>
 
 
</head>
 
</head>
<body>
+
 
 +
<body data-spy="scroll" data-target="#side-menu" data-offset="255">
 +
 
 
<div class="cover">
 
<div class="cover">
 
     <div class="container-fluid">
 
     <div class="container-fluid">
Line 65: Line 79:
 
         <a href="https://2016.igem.org/Team:British_Columbia/Notebook">Notebook</a></strong>
 
         <a href="https://2016.igem.org/Team:British_Columbia/Notebook">Notebook</a></strong>
 
</div><!--#breadcrumbs-->
 
</div><!--#breadcrumbs-->
 +
  
 
<div class="content-wrap">
 
<div class="content-wrap">
 +
    <div class="row">
 +
        <nav class="col-sm-3" id="side-menu">
 +
            <ul class="nav sidebar-nav nav-pills nav-stacked">
 +
                <li class="active"><a href="#1">Beta Carotene Extraction</a></li>
 +
                <li><a href="#2">Caulobacter Electroporation Transformation</a></li>
 +
                <li><a href="#3">Chemically Competent E. coli Transformation</a></li>
 +
                <li><a href="#4">DNA Agarose Gel Electrophoresis</a></li>
 +
                <li><a href="#5">PCR Master Mix</a></li>
 +
                <li><a href="#6">PCR Amplification</a></li>
 +
                <li><a href="#7">Colony PCR DNA Amplification</a></li>
 +
                <li><a href="#8">Protocol for Restriction Enzyme Digest, Ligation, and Transformation</a></li>
 +
                <li><a href="#9">Western Blot</a></li>
 +
            </ul>
 +
        </nav>
  
    <div class="content-wrap">
+
         <div class="col-sm-9">
         <div class="row">
+
            <nav class="col-sm-3" id="side-menu">
+
                <ul class="nav sidebar-nav nav-pills nav-stacked">
+
                    <li class="active"><a href="#1">Beta Carotene Extraction</a></li>
+
                    <li><a href="#2">Caulobacter Electroporation Transformation</a></li>
+
                    <li><a href="#3">Chemically Competent E. coli Transformation</a></li>
+
                    <li><a href="#4">DNA Agarose Gel Electrophoresis</a></li>
+
                    <li><a href="#5">PCR Master Mix</a></li>
+
                    <li><a href="#6">PCR Amplification</a></li>
+
                    <li><a href="#7">Colony PCR DNA Amplification</a></li>
+
                    <li><a href="#8">Protocol for Restriction Enzyme Digest, Ligation, and Transformation</a></li>
+
                    <li><a href="#9">Western Blot</a></li>
+
                </ul>
+
            </nav>
+
            <div class="col-sm-9">
+
 
             <section id="1" class="anchor">
 
             <section id="1" class="anchor">
 
                 <h2>Beta Carotene Extraction</h2>
 
                 <h2>Beta Carotene Extraction</h2>
Line 146: Line 160:
 
                 </div>
 
                 </div>
 
             </section>
 
             </section>
 +
        </div><!--.col-sm-9-->
 +
    </div><!--.row-->
 +
</div><!--.content-wrap-->
 +
</body>
 +
 +
<p id="read-more"><strong>Check out other parts of our project below!</strong></p>
 +
 +
<div id="up-next">
 +
 +
    <div class="row" style="max-width: 100%; margin: 0">
 +
 +
        <div class="col-sm-6" id="previous">
 +
            <a href="https://2016.igem.org/Team:British_Columbia/Project/Model">
 +
                <img src="https://static.igem.org/mediawiki/2016/8/80/T--British_Columbia--header-fog.JPG"></a>
 +
            <a href="https://2016.igem.org/Team:British_Columbia/Project/Model">
 +
                <strong><figcaption>Modelling</figcaption></strong></a>
 +
        </div>
 +
 +
        <div class="col-sm-6" id="next">
 +
            <a href="https://2016.igem.org/Team:British_Columbia/Human_Practices">
 +
                <img src="https://static.igem.org/mediawiki/2016/8/8e/T--British_Columbia--header-fog-far-away.JPG"></a>
 +
            <a href="https://2016.igem.org/Team:British_Columbia/Human_Practices">
 +
                <strong><figcaption>Human Practices</figcaption></strong></a>
 +
        </div>
  
 +
    </div><!--.row-->
 +
</div><!--#up-next-->
  
</div>
+
</html>
</div>
+

Revision as of 04:48, 19 October 2016

Main CSS Navbar CSS

Sidebar CSS

Notebook

Notebook

Beta Carotene Extraction

Caulobacter Electroporation Transformation

Chemically Competent E. coli Transformation

DNA Agarose Gel Electrophoresis

PCR Master Mix

PCR Amplification

Colony PCR DNA Amplification

Protocol for Restriction Enzyme Digest, Ligation, and Transformation

Western Blot

Check out other parts of our project below!