Difference between revisions of "Team:RUM-UPRM/Notebook"

Line 1: Line 1:
 
{{RUM-UPRM}}
 
{{RUM-UPRM}}
 
{{RUM-UPRM/Nav}}
 
{{RUM-UPRM/Nav}}
 +
 
<html lang="en">
 
<html lang="en">
 +
<head>
 +
  <meta charset="utf-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 +
  
 +
<style>
 +
  body {
 +
    position: relative;
 +
     
  
 +
  }
 +
  ul.nav-pills {
 +
    top: 70px;
 +
}
  
 +
ul.nav {
 +
position: sticky;
  
−
<body.
+
  }
−
<section class="bg-light content" style="background-size: 100%;margin-middle: 0em;padding-top: 1.1em;" class="height-90 parallax">
+
  div.col-8 div {
−
<div class="d-flex h-100 align-items-center">
+
    height: 500px;
−
          <h3 class="display-5">Lab Protocols</h3>
+
  }
 +
.sticky {
 +
    position: relative;
 +
    top: 0;
 +
    width: 100%;
 +
}
 +
#myScrollspy {
 +
position: sticky;  
 +
top: 70px;
 +
 
 +
}
 +
 
 +
  </style>
 +
</head>
 +
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
 +
 
 +
<div class="container-fluid; bg-info" style="height:100px; top: 200px">
 +
  <center><h1>Notebook</h1></center>
 
</div>
 
</div>
 +
 +
 +
<div class="container-fluidtwo">
 +
  <div class="row">
 +
    <nav class="col-sm-2 col-3" id="myScrollspy">
 +
      <ul class="nav nav-pills flex-sm-column">
 +
        <li class="nav-item">
 +
          <a class="nav-link active" href="#section1">Ligation and Digestion</a>
 +
        </li>
 +
        <li class="nav-item">
 +
          <a class="nav-link" href="#section2">DNA Extraction</a>
 +
        </li>
 +
        <li class="nav-item">
 +
          <a class="nav-link" href="#section3">DNA Precipitation</a>
 +
        </li>
 +
<li class="nav-item">
 +
          <a class="nav-link" href="#section4">DNA Gel Extraction</a>
 +
        </li>
 +
<li class="nav-item">
 +
          <a class="nav-link" href="#section5">Bacterial Transformation</a>
 +
        </li>
 +
<li class="nav-item">
 +
          <a class="nav-link" href="#section6">Preparation of Competent Cells</a>
 +
        </li>
 +
<li class="nav-item">
 +
          <a class="nav-link" href="#section7">Gibson Assembly</a>
 +
        </li>
 +
 +
      </ul>
 +
    </nav>
 +
 +
 +
    <div class="col-sm-9 col-8; scroll"> <div align="justify">
 +
      <div id="section1" style="background-color:rgba(255,0,0,0.07)">   
  
 
<div id="accordion">
 
<div id="accordion">
Line 46: Line 113:
 
       </div>
 
       </div>
 
       </div>
 
       </div>
−
  <div class="card">
+
</div>
 +
 
 +
      <div id="section2">
 +
<div class="card">
 
     <div class="card-header" id="headingTwo">
 
     <div class="card-header" id="headingTwo">
 
     <h5 class="mb-0">
 
     <h5 class="mb-0">
Line 62: Line 132:
 
       </div>
 
       </div>
 
       </div>
 
       </div>
−
  <div class="card">
+
</div>
 +
       
 +
      <div id="section3" style="background-color:rgba(255,0,0,0.07)">       
 +
<div class="card">
 
     <div class="card-header" id="headingThree">
 
     <div class="card-header" id="headingThree">
 
       <h5 class="mb-0">
 
       <h5 class="mb-0">
Line 76: Line 149:
 
       </div>
 
       </div>
 
   </div>
 
   </div>
 +
</div>
 
</div>
 
</div>
  
−
<div class="card">
+
 
 +
      <div id="section4" style="background-color:rgba(255,0,0,0.07)">       
 +
<div class="card">
 
     <div class="card-header" id="headingFour">
 
     <div class="card-header" id="headingFour">
 
     <h5 class="mb-0">
 
     <h5 class="mb-0">
Line 94: Line 170:
 
       </div>
 
       </div>
 
       </div>
 
       </div>
 +
</div>
 +
 +
      <div id="section5" style="background-color:rgba(255,0,0,0.07)">       
  
 
<div class="card">
 
<div class="card">
Line 111: Line 190:
 
       </div>
 
       </div>
 
       </div>
 
       </div>
 +
</div>
  
 +
<div id="section6" style="background-color:rgba(255,0,0,0.07)">       
 
<div class="card">
 
<div class="card">
 
     <div class="card-header" id="headingSix">
 
     <div class="card-header" id="headingSix">
Line 128: Line 209:
 
       </div>
 
       </div>
 
       </div>
 
       </div>
 +
</div>
 +
  
 +
<div id="section7" style="background-color:rgba(255,0,0,0.07)">       
 
<div class="card">
 
<div class="card">
 
     <div class="card-header" id="headingSeven">
 
     <div class="card-header" id="headingSeven">
Line 147: Line 231:
 
</div>
 
</div>
  
 +
 +
 +
 +
 +
 +
</div>
 +
    </div>
 +
  </div>
 +
</div>
 +
</div>
 +
 +
<script>
 +
window.onscroll = function() {myFunction()};
 +
 +
var myScrollspy = document.getElementById("myScrollspy");
 +
var sticky = myScrollspy.offsetTop+70px;
 +
 +
function myFunction() {
 +
  if (window.pageYOffset >= sticky) {
 +
    myScrollspy.classList.add("sticky")
 +
  } else {
 +
    myScrollspy.classList.remove("sticky");
 +
  }
 +
}
 +
</script>
 
    
 
    
 
</body>
 
</body>
−
      </div>
 
−
</section>
 
−
    </body>
 
 
</html>
 
</html>
 +
 
{{RUM-UPRM/Footer}}
 
{{RUM-UPRM/Footer}}

Revision as of 15:14, 27 October 2020


RUM-UPRM Wiki Source Code

Notebook


Our Sponsors

Amgen Snapgene UPRM Goya Genscript PRABIA MolecularCloud MatLab IDT ReviveRestore Twist

Follows Us!