Difference between revisions of "Team:IIT Delhi/labs"

(Created page with "<html> <link href='https://fonts.googleapis.com/css?family=Boogaloo' rel='stylesheet'> <script> // When the user scrolls down 20px from the top of the document, show the butto...")
 
 
(26 intermediate revisions by 2 users not shown)
Line 23: Line 23:
 
@import url(font-awesome.min.css);
 
@import url(font-awesome.min.css);
 
@import url("http://fonts.googleapis.com/css?family=Lato:300,400");
 
@import url("http://fonts.googleapis.com/css?family=Lato:300,400");
−
@import url ("'https://fonts.googleapis.com/css?family=Boogaloo");
 
  
 +
 +
.boogaloo_font
 +
{ font-family:'Boogaloo'}
 +
 +
 +
.backbody2{
 +
 +
    background-image: url('https://static.igem.org/mediawiki/2017/8/8a/Export_%2846%29.png');
 +
    background-repeat: repeat;
 +
    background-attachment: fixed;
 +
    background-position: center;
 +
 +
}
 
#myBtn {
 
#myBtn {
 
   display: none;
 
   display: none;
Line 42: Line 54:
 
   }
 
   }
  
 +
 +
 +
 +
 
#myBtn:hover {
 
#myBtn:hover {
 
   background-color: #555;
 
   background-color: #555;
Line 59: Line 75:
 
height: auto;
 
height: auto;
 
}
 
}
−
.navbar {
+
 
−
position:fixed;/* ie6 will treat this as fixed because of a bug where overflow:auto is set on a parent */
+
−
top:0px;
+
−
left:0px;
+
−
height:28px;
+
−
width:100%;;
+
−
margin:0;
+
−
padding:20px;
+
−
z-index:999;
+
−
background-color: #333;
+
−
overflow:visible;
+
−
}
+
 
button.accordion:after {
 
button.accordion:after {
 
     content: '+';
 
     content: '+';
Line 107: Line 112:
 
     transition: 0.4s;
 
     transition: 0.4s;
 
     border: 2px solid black;
 
     border: 2px solid black;
−
     font-family: 'Boogaloo';
+
     font-family: "Times New Roman", Times, serif;
−
}
+
−
.h2font {
+
−
   
+
−
    color: #444;
+
−
    font-size: 50px;
+
−
+
−
    font-family: 'Boogaloo';
+
−
}
+
−
#pfont {
+
−
   
+
−
    color: #444;
+
−
    font-size: 30px;
+
−
+
−
    font-family: 'Boogaloo';
+
 
}
 
}
 +
 +
 
button.accordion.active, button.accordion:hover {
 
button.accordion.active, button.accordion:hover {
 
     background-color: #fff;  
 
     background-color: #fff;  
Line 149: Line 142:
 
body, input, select, textarea {
 
body, input, select, textarea {
 
color: #444;
 
color: #444;
−
font-family: 'Boogaloo', Helvetica, sans-serif;
+
font-family: "Boogaloo", Helvetica, sans-serif;
 
font-size: 15pt;
 
font-size: 15pt;
 
font-weight: 300;
 
font-weight: 300;
Line 320: Line 313:
  
 
header.major p {
 
header.major p {
−
border-top: thick double rgba(144, 144, 144, 0.25);
+
border-top: medium double rgba(144, 144, 144, 0.25);
 
display: inline-block;
 
display: inline-block;
 
padding: 2em 2em 0 2em;
 
padding: 2em 2em 0 2em;
Line 454: Line 447:
 
-moz-osx-font-smoothing: grayscale;
 
-moz-osx-font-smoothing: grayscale;
 
-webkit-font-smoothing: antialiased;
 
-webkit-font-smoothing: antialiased;
−
font-family:'Boogaloo';
+
font-family: 'Boogaloo';
 
font-style: normal;
 
font-style: normal;
 
font-weight: normal;
 
font-weight: normal;
Line 782: Line 775:
  
 
table {
 
table {
−
margin: 0 0 0em 0;
+
margin: 0 0 2em 0;
 
width: 98.5%;
 
width: 98.5%;
 
}
 
}
  
 
table tbody tr {
 
table tbody tr {
−
border: solid 0px #000;
+
border: solid 1px #000;
 
border-left: 0;
 
border-left: 0;
 
border-right: 0;
 
border-right: 0;
Line 795: Line 788:
 
background-color: #000;
 
background-color: #000;
 
}
 
}
−
 
 
.tr2{
 
.tr2{
 
background-color: rgba(82,82,82,0.99);
 
background-color: rgba(82,82,82,0.99);
 
}
 
}
 +
  
 
table td {
 
table td {
Line 817: Line 810:
  
 
table tfoot {
 
table tfoot {
−
border-top: solid 0.5px rgba(0,0,0, 0.25);
+
border-top: solid 2px rgba(0,0,0, 0.25);
 
}
 
}
  
Line 825: Line 818:
  
 
table.alt tbody tr td {
 
table.alt tbody tr td {
−
border: solid 0.5px rgba(144, 144, 144, 0.25);
+
border: solid 1px rgba(144, 144, 144, 0.25);
 
border-left-width: 0;
 
border-left-width: 0;
 
border-top-width: 0;
 
border-top-width: 0;
Line 1,094: Line 1,087:
  
 
#banner {
 
#banner {
−
background: url("https://static.igem.org/mediawiki/2017/8/8d/T--IIT_DELHI--banner_index.jpg") ;
+
background: url("https://static.igem.org/mediawiki/2017/8/80/T--IIT_Delhi--notebook.png") ;
  
 
background-position: center;
 
background-position: center;
Line 1,181: Line 1,174:
 
background: #202222;
 
background: #202222;
 
color: #ddd;
 
color: #ddd;
−
padding: 1em 0em;
+
padding: 1em 0em 1em;
 
}
 
}
  
Line 1,263: Line 1,256:
 
-webkit-font-smoothing: antialiased;
 
-webkit-font-smoothing: antialiased;
 
}
 
}
−
 
+
.navbar {
 +
position:fixed;/* ie6 will treat this as fixed because of a bug where overflow:auto is set on a parent */
 +
top:0px;
 +
left:0px;
 +
height:68px;
 +
width:100%;
 +
margin:0;
 +
padding:20px;
 +
z-index:999;
 +
background-color: #333;
 +
overflow:visible;
 +
}
  
  
Line 1,314: Line 1,318:
 
     z-index: 101;
 
     z-index: 101;
 
}
 
}
−
 
 
  .dropbtn1 {
 
  .dropbtn1 {
 
     font-size: 16px;     
 
     font-size: 16px;     
Line 1,324: Line 1,327:
 
     z-index: 101;
 
     z-index: 101;
 
}
 
}
−
 
 
.navbar a:hover, .dropdown:hover .dropbtn {
 
.navbar a:hover, .dropdown:hover .dropbtn {
 
     background-color: red;
 
     background-color: red;
 
     z-index: 101;
 
     z-index: 101;
 
}
 
}
−
 
  
 
.dropdown-content {
 
.dropdown-content {
Line 1,401: Line 1,402:
 
     margin-right: 60px;
 
     margin-right: 60px;
 
}
 
}
−
 
−
.right_menu1{
 
−
    float: left;
 
−
    text-align: left;
 
−
    width: auto;
 
−
    margin-right: 60px;
 
−
}
 
−
 
 
.backbody {
 
.backbody {
 
     background-image: url("1.png");
 
     background-image: url("1.png");
Line 1,426: Line 1,419:
 
     background-color: black;
 
     background-color: black;
 
}
 
}
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
<!-- -->
 +
* {
 +
  box-sizing: border-box;
 +
}
 +
 +
 +
 +
/* The actual timeline (the vertical ruler) */
 +
.timeline1 {
 +
  position: relative;
 +
  max-width: 1200px;
 +
  margin: 0 auto;
 +
}
 +
 +
/* The actual timeline (the vertical ruler) */
 +
.timeline1::after {
 +
  content: '';
 +
  position: absolute;
 +
  width: 6px;
 +
  background-color: white;
 +
  top: 0;
 +
  bottom: 0;
 +
  left: 50%;
 +
  margin-left: -3px;
 +
}
 +
 +
/* Container around content */
 +
.container1 {
 +
  padding: 10px 40px;
 +
  position: relative;
 +
  background-color: inherit;
 +
  width: 50%;
 +
}
 +
 +
/* The circles on the timeline */
 +
.container1::after {
 +
  content: '';
 +
  position: absolute;
 +
  width: 25px;
 +
  height: 25px;
 +
  right: -17px;
 +
  background-color: white;
 +
  border: 4px solid #FF9F55;
 +
  top: 15px;
 +
  border-radius: 50%;
 +
  z-index: 1;
 +
}
 +
 +
/* Place the container to the left */
 +
.left1 {
 +
  left: 0;
 +
}
 +
 +
/* Place the container to the right */
 +
.right1 {
 +
  left: 50%;
 +
}
 +
 +
/* Add arrows to the left container (pointing right) */
 +
.left1::before {
 +
  content: " ";
 +
  height: 0;
 +
  position: absolute;
 +
  top: 22px;
 +
  width: 0;
 +
  z-index: 1;
 +
  right: 30px;
 +
  border: medium solid white;
 +
  border-width: 10px 0 10px 10px;
 +
  border-color: transparent transparent transparent white;
 +
}
 +
 +
/* Add arrows to the right container (pointing left) */
 +
.right1::before {
 +
  content: " ";
 +
  height: 0;
 +
  position: absolute;
 +
  top: 22px;
 +
  width: 0;
 +
  z-index: 1;
 +
  left: 30px;
 +
  border: medium solid white;
 +
  border-width: 10px 10px 10px 0;
 +
  border-color: transparent white transparent transparent;
 +
}
 +
 +
/* Fix the circle for containers on the right side */
 +
.right1::after {
 +
  left: -16px;
 +
}
 +
 +
/* The actual content */
 +
.content1 {
 +
  padding: 20px 30px;
 +
  background-color: white;
 +
  position: relative;
 +
  border-radius: 6px;
 +
  font-family: Boogaloof;
 +
}
 +
 +
/* Media queries - Responsive timeline on screens less than 600px wide */
 +
@media all and (max-width: 600px) {
 +
/* Place the timelime to the left */
 +
  .timeline::after {
 +
    left: 31px;
 +
  }
 +
 +
/* Full-width containers */
 +
  .container1 {
 +
    width: 100%;
 +
    padding-left: 70px;
 +
    padding-right: 25px;
 +
  }
 +
 +
/* Make sure that all arrows are pointing leftwards */
 +
  .container1::before {
 +
    left: 60px;
 +
    border: medium solid white;
 +
    border-width: 10px 10px 10px 0;
 +
    border-color: transparent white transparent transparent;
 +
  }
 +
 +
/* Make sure all circles are at the same spot */
 +
  .left1::after, .right1::after {
 +
    left: 15px;
 +
  }
 +
 +
/* Make all right containers behave like the left ones */
 +
  .right1 {
 +
    left: 0%;
 +
  }
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
  
 
</style>
 
</style>
Line 1,537: Line 1,690:
 
<body class="landing .igem_iitd_delhi_body" background-color: black;>
 
<body class="landing .igem_iitd_delhi_body" background-color: black;>
  
 +
 
<!-- Header -->
 
<!-- Header -->
 
 
Line 1,623: Line 1,777:
  
  
−
 
−
<center><div class=" panel_back bggg">
 
−
      <header class="major">
 
−
       
 
−
       
 
−
            <h2 class="h2font">LAB PROTOCOLS</h2>
 
  
−
            <p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
−
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
−
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
−
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
−
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
−
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 
−
</p>
 
−
<h2 id="pfont">Accurate Experimenting for Accurate Results !!</h2>
 
−
          </header>
 
−
          <button class="accordion back1" style="font-weight: bold;">Transformation</button>
 
−
          <div class="panel ">
 
−
           
 
−
<!--<u><b><h4 id="pfont"  style="font-size: 90%;">Preparation of competent  cells:-</h4></b></u>-->
 
−
<b id="pfont">Preparation of competent  cells:-</b>
 
−
<div align="left" style="font-size: 84%;">
 
−
<ol ><left>
 
−
<li>Dilute an overnight culture of E. coli 1:200 with LB broth.
 
−
<li>Incubate at 37°C with shaking (at 200 rpm) until the cells reach early log phase (OD600 = 0.25-0.4).
 
−
<li>We already have 1X TSS in 4 deg fridge(old). Use it without dilution or thawing. Keep it inside the icebox just after taking out from the fridge. <br>
 
−
OR <br>
 
−
(if the above 1X TSS is not available)<br>
 
−
While cells are growing, thaw 2X TSS on ice and dilute an appropriate amount 1:1 with sterile distilled water (100µl of diluted TSS will be needed for each ml of cells). Chill on ice.
 
−
<li>  Place 2-ml aliquots of early log-phase cells into sterile 2-ml micro-centrifuge tubes and pellet the cells by centrifugation at 4°C  at 3000g for 10 min.(6-8 mins for taking part from Igem kit)
 
−
<li> Remove the supernatant and discard. Add 0.2 ml of the ice-cold 1X TSS and place the tubes on ice.
 
−
<li>Gently suspend the cells by pipetting.
 
−
<li> Proceed with the transformation protocol below (Step 2), or immediately freeze cells by immersion in liquid nitrogen or a dry ice/ethanol bath. Store the frozen cells at –70°C.
 
−
</left>
 
−
</ol>
 
−
</div>
 
  
−
<b id="pfont">Transformation:-</b>
 
−
<br>
 
−
<div align="left" style="font-size: 84%;">
 
−
<ol ><left>
 
−
<li>Thaw frozen TSS-competent cells slowly on ice(if stored at -70°C).
 
−
<li>Add 100 pg -200 ng (2.5 to 4 ul)(15ul for ligation product)of DNA to each tube of competent cells. <br>Note:Addition of more than 10ng of DNA may significantly decrease transformation efficiencies.
 
−
<li>Flick the tubes to mix the cells and DNA and incubate the cells on ice for 30 minutes. <br>
 
  
−
<li>  Transfer the tubes to water bath/dry bath(42°C) for 90 seconds.
 
−
<li> Transfer the tubes to ice and incubate for an additional 10 minutes.
 
−
<li>Add 800 ul (total 1 mL)of LB broth and incubate the cells at 37°C for up to 1 hour with shaking (at 200 rpm).
 
  
−
<li> Centrifuge the cells at 3000g for ~ 6min (10 mins after ligation)at 4deg(in temperature control centrifuge).
+
 
−
   <li> Aspirate the tubes to leave the pellets with 1/4 broth .(keep ~300ul)
+
<section id="two" class=" align-center">
−
     <li>Plate the cells on-to the appropriate selective or differential medium and incubate overnight at 37°C.Check the procedure for antibiotic.
+
<!-- <div class="container backbody"> -->
−
       <ol> <li>For Ampicillin: 12ul Amp + 188 ul MQ. In MCT spread it on the culture plate before adding the DNA.
+
<div class="backbody2">
−
        <li>For Chloramphenicol: 1:1000 volume ratio of antibiotic : culture broth. Directly suspend into the culture broth and spread it on the plate.
+
−
          <li> For Kanamycin: 1:1000 volume ratio of antibiotic : culture broth. Directly suspend into the culture broth and spread it on the plate.
+
<div class="timeline1">
−
          </ol>
+
  <div class="container1 left1">
−
          <ul> DNA should be added as soon as the last trace of ice in the tube disappears.  
+
    <div class="content1">
−
<ul>Incubate on ice for 30 minutes. Expect a 2-fold loss in TE for every 10 minutes you shorten this step.
+
      <h2 class="boogaloo_font ">march</h2>
−
</left>
+
      <p>Lorem ipsum..</p>
−
</ol>
+
    </div>
 +
   </div>
 +
  <div class="container1 right1">
 +
    <div class="content1 boogaloo_font " style="overflow:scroll; ">
 +
      <h2 class="boogaloo_font ">april</h2>
 +
      <p>Lorem ipsum..</p>
 +
     </div>
 +
  </div>
 +
 
 +
 
 +
 
 +
 
 +
  <div class="container1 left1">
 +
    <div class="content1  boogaloo_font">
 +
      <h2 class="boogaloo_font">may</h2>
 +
      <p>Lorem ipsum..</p>
 +
    </div>
 +
  </div>
 +
  <div class="container1 right1">
 +
    <div class="content1  boogaloo_font">
 +
       <h2 class="boogaloo_font ">june</h2>
 +
      <p>Lorem ipsum..</p>
 +
    </div>
 +
  </div><div class="container1 left1">
 +
    <div class="content1  boogaloo_font">
 +
      <h2 class="boogaloo_font ">july</h2>
 +
      <p>Lorem ipsum..</p>
 +
    </div>
 +
  </div>
 +
  <div class="container1 right1">
 +
    <div class="content1  boogaloo_font">
 +
      <h2 class="boogaloo_font ">august</h2>
 +
      <p>Lorem ipsum..</p>
 +
    </div>
 +
  </div><div class="container1 left1">
 +
    <div class="content1  boogaloo_font">
 +
      <h2 class="boogaloo_font ">september</h2>
 +
      <p>Lorem ipsum..</p>
 +
    </div>
 +
  </div>
 +
  <div class="container1 right1">
 +
    <div class="content1  boogaloo_font">
 +
      <h2 class="boogaloo_font ">october</h2>
 +
      <p>Lorem ipsum..</p>
 +
    </div>
 +
  </div>
 +
 
 +
 
 +
 
 +
 
 +
 
 
</div>
 
</div>
  
−
            </p>
+
</div>
−
          </div>
+
</section>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
  
−
         
 
−
          <br>
 
−
    <br>
 
−
    <br>
 
−
   
 
−
</div></center>
 
−
       
 
−
          <script>
 
−
          var acc = document.getElementsByClassName("accordion");
 
−
          var i;
 
  
−
          for (i = 0; i < acc.length; i++) {
 
−
              acc[i].onclick = function(){
 
−
                  this.classList.toggle("active");
 
−
                  var panel = this.nextElementSibling;
 
−
                  if (panel.style.display === "block") {
 
−
                      panel.style.display = "none";
 
−
                  } else {
 
−
                      panel.style.display = "block";
 
−
                  }
 
−
              }
 
−
          }
 
−
          </script>
 
  
−
</div>
 
−
 
 
<!-- Footer -->
 
<!-- Footer -->
 
<footer id="footer">
 
<footer id="footer">
−
<table  style="font-family:'Lato'; border: 0px solid black; ">
+
<table  style="font-family:'Boogaloo'; border: 0px solid black; ">
 
         <tr align="center"  >
 
         <tr align="center"  >
 
         <td align="center" width="50%" colspan="2" class="tr2"><b>Sponsored By</b></td></tr>
 
         <td align="center" width="50%" colspan="2" class="tr2"><b>Sponsored By</b></td></tr>

Latest revision as of 20:33, 31 October 2017

iGEM IIT Delhi

Description Results Interlab
Basic Parts Composite Parts Improved Parts Part Collection
Overview Simulation Database
Human Practices Integrated Practices Public Engagement Collaborations
Lab Records Protocols Recipes Medal Criteria
The Team Attributions

march

Lorem ipsum..

april

Lorem ipsum..

may

Lorem ipsum..

june

Lorem ipsum..

july

Lorem ipsum..

august

Lorem ipsum..

september

Lorem ipsum..

october

Lorem ipsum..

Sponsored By
Contact Us Address

E-mail: iitd.igem@gmail.com
Undergraduate Laboratory
Department of Biotechnology and Biochemical Engineering, IIT Delhi