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

 
(63 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{{RUM-UPRM}}
 
{{RUM-UPRM}}
−
<html lang="en">
+
{{RUM-UPRM/Nav}}
  
 +
<html lang="en">
 
<head>
 
<head>
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
  <meta charset="utf-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <script src="https://2020.igem.org/wiki/index.php?
title=Template:RUM-UPRM/popper.min&action=raw&ctype=text/javascript"></script>

 +
 +
 
 
<style>
 
<style>
−
.collapsible {
+
  body {
−
  background-color: #777;
+
    position: relative;
−
  color: white;
+
     
−
  cursor: pointer;
+
 
−
   padding: 18px;
+
   }
−
   width: 100%;
+
   ul.nav-pills {
−
  border: none;
+
    top: 120px;
−
  text-align: left;
+
−
  outline: none;
+
−
  font-size: 15px;
+
 
}
 
}
  
−
.active, .collapsible:hover {
+
ul.nav {
−
   background-color: #555;
+
position: sticky;
 +
 
 +
   }
 +
  div.col-8 div {
 +
    height: 500px;
 +
  }
 +
.sticky {
 +
    position: relative;
 +
    top: 0;
 +
    width: 100%;
 
}
 
}
 +
#myScrollspy {
 +
position: sticky;
 +
top: 70px;
  
−
.content {
 
−
  padding: 0 18px;
 
−
  max-height: 0;
 
−
  overflow: hidden;
 
−
  transition: max-height 0.2s ease-out;
 
−
  background-color: #f1f1f1;
 
 
}
 
}
−
</style>
+
 
 +
  </style>
 
</head>
 
</head>
 +
<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">
  
−
<body>
+
<div class="container-fluid" style= "background-color:#3BB9FF; height:100px; top: 200px">
−
<!--Preloader-->
+
  <center><h1>Notebook</h1></center>
−
<div class="se-pre-con"></div>
+
</div>
−
<!-- Navigation-->
+
−
        <nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
+
−
            <div class="container">
+
−
                <a class="navbar-brand js-scroll-trigger" href="https://2020.igem.org/Team:RUM-UPRM">RUM-UPRM</a>
+
−
                <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
+
−
                    Menu
+
−
                    <i class="fas fa-bars"></i>
+
−
                </button>
+
−
                <div class="collapse navbar-collapse" id="navbarResponsive">
+
−
                    <ul class="navbar-nav ml-auto">
+
−
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="https://2020.igem.org/Team:RUM-UPRM/Members">Team</a></li>
+
−
                        <li class="nav-item"><a class="nav-link js-scroll-trigger" href="https://2020.igem.org/Team:RUM-UPRM/Description">Projects</a></li>
+
−
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="https://2020.igem.org/Team:RUM-UPRM/Safety">Safety</a></li>
+
−
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="https://2020.igem.org/Team:RUM-UPRM/Engineering">Engineering Success</a></li>
+
−
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="https://2020.igem.org/Team:RUM-UPRM/Human_Practices">Human Practices</a></li>
+
−
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Awards</a></li>
+
−
<li class="nav-item"><a class="nav-link js-scroll-trigger" href="#">Judging Form</a></li>
+
−
                    </ul>
+
−
                </div>
+
−
            </div>
+
−
        </nav>
+
  
  
 +
<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">Overview</a>
 +
        </li>
 +
        <li class="nav-item">
 +
          <a class="nav-link active" href="#section2">Ligation and Digestion</a>
 +
        </li>
 +
        <li class="nav-item">
 +
          <a class="nav-link" href="#section3">DNA Extraction</a>
 +
        </li>
 +
        <li class="nav-item">
 +
          <a class="nav-link" href="#section4">DNA Precipitation</a>
 +
        </li>
 +
<li class="nav-item">
 +
          <a class="nav-link" href="#section5">DNA Gel Extraction</a>
 +
        </li>
 +
<li class="nav-item">
 +
          <a class="nav-link" href="#section6">Bacterial Transformation</a>
 +
        </li>
 +
<li class="nav-item">
 +
          <a class="nav-link" href="#section7">Preparation of Competent Cells</a>
 +
        </li>
 +
<li class="nav-item">
 +
          <a class="nav-link" href="#section8">Gibson Assembly</a>
 +
        </li>
  
−
<section class="bg-light content" style="background-size: 100%;margin-top: 0em;padding-top: 1.1em;" class="height-90 parallax">
+
      </ul>
−
<div class="d-flex h-100 align-items-center">
+
    </nav>
−
          <h3 class="display-5">Lab Protocols</h3>
+
  
−
<h2>Animated Collapsibles</h2>
+
<div class="col-sm-9 col-8; scroll"> <div align="justify">
 +
      <div id="section1" style="background-color:rgba(0,0,0,0)">   
 +
        <center><h1>Overview</h1></center>
  
−
<p>A Collapsible:</p>
+
        <p style="margin-left:7%; margin-right:7%; text-indent:5%"> Laboratory Technique Workshops were given to all team members in order to be prepared to perform in the wet lab. The following protocols were discussed and practiced. Unfortunately, plans changed with COVID 19. We are looking forward to the moment we can go back to our lab and apply all this knowledge.</p>
−
<button class="collapsible">Open Collapsible</button>
+
−
<div class="content">
+
−
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
 
</div>
 
</div>
 +
<center><img src="https://static.igem.org/mediawiki/parts/1/15/T--RUM-UPRM--labwork.png" style="width: 50%"> </center>
 +
   
 +
      <div id="section2" style="background-color:rgba(0,0,0,0)">   
  
−
<p>Collapsible Set:</p>
+
<div id="accordion">
−
<button class="collapsible">Open Section 1</button>
+
 
−
<div class="content">
+
<style>
−
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
.accordion {
 +
  background-color:rgb(60,179,113);
 +
  color: rgba(255,255,255,0.9);
 +
  cursor: pointer;
 +
  padding: 24px;
 +
  width: 100%;
 +
  text-align: center;
 +
  outline: none;
 +
  font-size: 18px;
 +
  border: 1px solid black;
 +
  border-radius: 16px
 +
}
 +
  </style>  
 +
 
 +
<div class="text-center">
 +
<div class="card">
 +
    <div class="card-header" id="headingOne">
 +
    <h5 class="mb-0">
 +
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
 +
        Ligation and Digestion
 +
        </button>
 +
      </h5>
 +
    </div>
 +
    <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion">
 +
      <div class="card-body">
 +
   <div class="content">
 +
  <object data="https://static.igem.org/mediawiki/2020/1/11/T--RUM-UPRM--LigationProtocol.pdf" width="50%" height="500" />
 +
    </object>
 +
      </div>
 +
      </div>
 +
      </div>
 
</div>
 
</div>
−
<button class="collapsible">Open Section 2</button>
+
 
−
<div class="content">
+
      <div id="section3">
−
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
<div class="card">
 +
    <div class="card-header" id="headingTwo">
 +
    <h5 class="mb-0">
 +
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
 +
        DNA Extraction
 +
        </button>
 +
      </h5>
 +
    </div>
 +
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
 +
      <div class="card-body">
 +
   <div class="content">
 +
  <object data="https://static.igem.org/mediawiki/2020/e/e1/T--RUM-UPRM--DNAEXTRACTION.pdf" type="application/pdf" width="50%" height="500" />
 +
    </object>
 +
      </div>
 +
      </div>
 +
      </div>
 
</div>
 
</div>
−
<button class="collapsible">Open Section 3</button>
+
       
−
<div class="content">
+
      <div id="section4" style="background-color:rgba(0,0,0,0)">       
−
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+
<div class="card">
 +
    <div class="card-header" id="headingThree">
 +
      <h5 class="mb-0">
 +
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
 +
          DNA Precipitation
 +
        </button>
 +
      </h5>
 +
    </div>
 +
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
 +
    <div class="content">
 +
  <object data="https://static.igem.org/mediawiki/2020/2/23/T--RUM-UPRM--DNAPRECIPITATION.pdf" type="application/pdf" width="50%" height="500" />
 +
      </object>
 +
      </div>
 +
  </div>
 
</div>
 
</div>
 +
</div>
 +
 +
 +
      <div id="section5" style="background-color:rgba(0,0,0,0)">       
 +
<div class="card">
 +
    <div class="card-header" id="headingFour">
 +
    <h5 class="mb-0">
 +
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
 +
        DNA Gel Extraction
 +
        </button>
 +
      </h5>
 +
    </div>
 +
    <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
 +
      <div class="card-body">
 +
  <div class="content">
 +
  <object data="https://static.igem.org/mediawiki/2020/0/07/T--RUM-UPRM--Gel_extraction.pdf" width="50%" height="500" />
 +
    </object>
 +
      </div>
 +
      </div>
 +
      </div>
 +
</div>
 +
 +
      <div id="section6" style="background-color:rgba(0,0,0,0)">       
 +
 +
<div class="card">
 +
    <div class="card-header" id="headingFive">
 +
    <h5 class="mb-0">
 +
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
 +
        Bacterial Transformation
 +
        </button>
 +
      </h5>
 +
    </div>
 +
    <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordion">
 +
      <div class="card-body">
 +
  <div class="content">
 +
  <object data="https://static.igem.org/mediawiki/2020/a/ac/T--RUM-UPRM--Bacterial_Transformation.pdf" width="50%" height="500" />
 +
    </object>
 +
      </div>
 +
      </div>
 +
      </div>
 +
</div>
 +
 +
<div id="section7" style="background-color:rgba(0,0,0,0)">       
 +
<div class="card">
 +
    <div class="card-header" id="headingSix">
 +
    <h5 class="mb-0">
 +
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
 +
        Preparation of Competent Cells
 +
        </button>
 +
      </h5>
 +
    </div>
 +
    <div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordion">
 +
      <div class="card-body">
 +
  <div class="content">
 +
  <object data="https://static.igem.org/mediawiki/2020/d/dc/T--RUM-UPRM--Competent_Cells.pdf" width="50%" height="500" />
 +
    </object>
 +
      </div>
 +
      </div>
 +
      </div>
 +
</div>
 +
 +
 +
<div id="section8" style="background-color:rgba(0,0,0,0)">       
 +
<div class="card">
 +
    <div class="card-header" id="headingSeven">
 +
    <h5 class="mb-0">
 +
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
 +
        Gibson Assembly
 +
        </button>
 +
      </h5>
 +
    </div>
 +
    <div id="collapseSeven" class="collapse" aria-labelledby="headingSeven" data-parent="#accordion">
 +
      <div class="card-body">
 +
  <div class="content">
 +
  <object data="https://static.igem.org/mediawiki/2020/3/30/T--RUM-UPRM--GibsonAssembly.pdf" width="50%" height="500" />
 +
    </object>
 +
      </div>
 +
      </div>
 +
      </div>
 +
</div>
 +
 +
 +
 +
 +
 +
 +
</div>
 +
    </div>
 +
  </div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<script>
 +
window.onscroll = function() {myFunction()};
  
−
<script>
+
var myScrollspy = document.getElementById("myScrollspy");
−
var coll = document.getElementsByClassName("collapsible");
+
var sticky = myScrollspy.offsetTop+70px;
−
var i;
+
  
−
for (i = 0; i < coll.length; i++) {
+
function myFunction() {
−
   coll[i].addEventListener("click", function() {
+
   if (window.pageYOffset >= sticky) {
−
     this.classList.toggle("active");
+
     myScrollspy.classList.add("sticky")
−
    var content = this.nextElementSibling;
+
  } else {
−
    if (content.style.maxHeight){
+
    myScrollspy.classList.remove("sticky");
−
      content.style.maxHeight = null;
+
   }
−
    } else {
+
−
      content.style.maxHeight = content.scrollHeight + "px";
+
−
    }
+
−
   });
+
 
}
 
}
 
</script>
 
</script>
 +
 
 
</body>
 
</body>
 +
</html>
  
−
      </div>
+
{{RUM-UPRM/Footer}}
−
</section>
+
−
<footer class="footer bg-black small text-center text-white-50"><div class="container">Copyright © UPRM-RUM 2020</div></footer>
+
−
    </body>
+
−
</html>
+

Latest revision as of 02:53, 28 October 2020


RUM-UPRM Wiki Source Code




Notebook

Overview

Laboratory Technique Workshops were given to all team members in order to be prepared to perform in the wet lab. The following protocols were discussed and practiced. Unfortunately, plans changed with COVID 19. We are looking forward to the moment we can go back to our lab and apply all this knowledge.


Our Sponsors

Amgen Snapgene UPRM Goya Genscript PRABIA MolecularCloud MatLab IDT ReviveRestore Twist

Follows Us!