Difference between revisions of "Team:Grenoble-Alpes/Protocols"

Line 29: Line 29:
 
}
 
}
 
 
−
            @-webkit-keyframes fadeIn {
+
@-webkit-keyframes fadeIn {
−
                from {opacity: 0;}  
+
    from {opacity: 0;}  
−
                to {opacity: 1;}
+
    to {opacity: 1;}
−
            }
+
    }
  
−
            @keyframes fadeIn {
+
@keyframes fadeIn {
−
                from {opacity: 0;}
+
    from {opacity: 0;}
−
                to {opacity:1 ;}
+
    to {opacity:1 ;}
−
            }  
+
    }  
  
 
            
 
            
 
/**************** RESULTS BANNER *****************/
 
/**************** RESULTS BANNER *****************/
−
            #resultsbanner{
 
−
                text-decoration: none;
 
−
                font-family: 'Lato';
 
−
                font-size: 2vw;
 
−
                color: #FFF;
 
−
                text-transform: uppercase;
 
−
            }
 
  
−
/**************** Protocols *****************/
+
#resultsbanner{
−
 
+
     text-decoration: none;
−
.titre_categorie {
+
     font-family: 'Lato';  
−
     font-family: 'Dancing Script', cursive;
+
−
     color:white;
+
−
    text-align: center;
+
−
    }
+
−
 
+
−
 
+
−
.titre_protocole {
+
 
     font-size: 2vw;
 
     font-size: 2vw;
−
     color:black;  
+
     color: #FFF;
−
     }
+
    text-transform: uppercase;
 +
     }  
  
−
.top {
+
/**************** Protocols *****************/
−
    font-size: 1vw;
+
−
    color: white;
+
−
    }
+
  
−
#protocol_name{
 
−
    width: 100%;
 
−
    margin: 0%;
 
−
    }
 
  
−
.logo{
 
−
  width:10%;
 
−
  }
 
−
 
−
#protocol1:target, #protocol2:target, #protocol3:target, #protocol4:target, #protocol5:target, #protocol6:target, #protocol7:target, #protocol8:target, #protocol9:target {
 
−
  display: block;
 
−
  -webkit-animation: fadeIn 1s;
 
−
  animation: fadeIn 1s;
 
−
  }
 
−
 
−
#protocol1, #protocol2, #protocol3, #protocol4, #protocol5, #protocol6, #protocol7, #protocol8, #protocol9{
 
−
    display: none;
 
−
    width: 100%;
 
−
    background:#2ecc71;
 
−
    margin: 0%;
 
−
    }
 
−
 
−
.fleche_bas {
 
−
    width: 0;
 
−
    height: 0;
 
−
    border-left: 10px solid transparent;
 
−
    border-right: 10px solid transparent;   
 
−
    border-top: 10px solid white;
 
−
    margin:0%;
 
−
    padding: 0%;
 
−
}
 
−
 
−
.fleche_haut {
 
−
    width: 0;
 
−
    height: 0;
 
−
    border-left: 10px solid transparent;
 
−
    border-right: 10px solid transparent;
 
−
    border-bottom: 10px solid black;
 
−
    padding:0%;
 
−
}
 
−
 
 
 
       </style>
 
       </style>
−
      
+
     </head>
  
−
    </head>
 
−
   
 
 
     <body id="body">
 
     <body id="body">
 
         <header>
 
         <header>
Line 119: Line 61:
 
         </header>
 
         </header>
  
−
        <h2 class="titre_categorie" id="cat1" style="padding-bottom: 2%; background:#27ae60; margin:0%;"> Categorie 1 </h2>
+
<!- -------------- RESULTS BANNER --------------- ->
−
 
+
−
        <div style="width:100%;">
+
−
              <a href="#protocol2" style="text-decoration: none;"> <img class="logo" src="https://static.igem.org/mediawiki/2017/0/06/Lab_2.png"></a>
+
−
              <a href="#protocol2" style="text-decoration: none;"> <img class="logo" src="https://static.igem.org/mediawiki/2017/0/06/Lab_2.png"></a>
+
−
              <a href="#protocol3" style="text-decoration: none;"> <img class="logo" src="https://static.igem.org/mediawiki/2017/0/06/Lab_2.png"></a>
+
−
              <a href="#protocol1" style="text-decoration: none;"> <img class="logo" src="https://static.igem.org/mediawiki/2017/0/06/Lab_2.png"></a>
+
−
              <a href="#protocol1" style="text-decoration: none;"> <img class="logo" src="https://static.igem.org/mediawiki/2017/0/06/Lab_2.png"></a>
+
−
        </div>
+
−
 
+
−
        <div id="protocol1">
+
−
        <div class="fleche_bas" style="margin-left:5%;"></div>
+
−
<h5 style="padding-top:5%;">
+
−
Materials :
+
−
<li>20g LB Broth Base (powder)</li>
+
−
<li>1L Distillated Water</li>
+
−
 
+
−
Methods :
+
−
<ol>
+
−
<li>Add 20g of LB Broth Base per 1L of distillated water</li>
+
−
<li>Homogenize</li>
+
−
<li>Autoclave at 121°C for 15 minutes</li>
+
−
</ol>
+
−
</h5>
+
−
        <a href="#cat1" style="text-decoration: none;"><h2 class="top">TOP</h2></a>
+
−
        <div class="fleche_haut"></div>
+
−
        </div>
+
−
 
+
−
        <div id="protocol2">
+
−
        <div class="fleche_bas"></div>
+
−
<h5 style="padding-top:5%;">
+
−
Materials :
+
−
<li>32g LB Agar (powder)</li>
+
−
<li>1L Distillated Water</li>
+
−
 
+
−
Methods :
+
−
<ol>
+
−
<li>Add 32g of LB Agar per 1L of distillated water</li>
+
−
<li>Homogenize</li>
+
−
<li>Autoclave at 121°C for 15 minutes</li>
+
−
</ol>
+
−
</h5>
+
−
        <a href="#cat1" style="text-decoration: none;"><h2 class="top">TOP</h2></a>
+
−
        <div class="fleche_haut"></div>
+
−
        </div>
+
−
 
+
−
        <div id="protocol3">
+
−
        <div class="fleche_bas"></div>
+
−
<h5 style="padding-top:5%;">
+
−
Materials :
+
−
<li>1g Agarose (powder)</li>
+
−
<li>100mL TAE</li>
+
−
<li>Distillated Water</li>
+
−
<li>25uL Gel Red</li>
+
−
 
+
−
Methods :
+
−
<ol>
+
−
<li>Gel preparation</li>
+
−
<ol>
+
−
<li>Dissolve 1g of agarose in 100mL of TAE (1X)</li>
+
−
<li>Pour the solution into the gel mould</li>
+
−
<li>Let the solution gel (almost 15 minutes)</li>
+
−
</ol>
+
−
<li>Preparation of the samples to deposit</li>
+
−
<li>The migration is done at 100V during 30 minutes</li>
+
−
<li>Revelation</li>
+
−
<ol>
+
−
<li>Prepare 250mL of distillated water in a tank</li>
+
−
<li>Add 25uL of Gel Red. Do not forget to use gloves to manipulate the Gel Red.</li>
+
−
<li>Incubate the gel in the solution for 10 minutes at the obscurity</li>
+
−
<li>Wash the gel in a tank of distillated water</li>
+
−
</ol>
+
−
</ol>
+
−
</h5>
+
−
        <a href="#cat1" style="text-decoration: none;"><h2 class="top">TOP</h2></a>
+
−
        <div class="fleche_haut"></div>
+
−
        </div>
+
−
 
+
−
 
+
−
        <h2 class="titre_categorie" id="cat2" style="padding-bottom: 2%; background:#27ae60; margin:0%;"> Categorie 2 </h2>
+
−
       
+
−
        <div id="protocol_name">
+
−
              <a href="#protocol4" style="text-decoration: none;"><h2 class="titre_protocole"> Protocol 1 </h2></a>
+
−
        </div>
+
−
        <div id="protocol4">
+
−
        <div class="fleche_bas"></div>
+
−
              <h5 style="padding-top:5%;"> blablabla </h5>
+
−
        <a href="#cat2" style="text-decoration: none;"><h2 class="top">TOP</h2></a>
+
−
        <div class="fleche_haut"></div>
+
−
        </div>
+
−
 
+
−
              <div id="protocol_name">
+
−
              <a href="#protocol5" style="text-decoration: none;"><h2 class="titre_protocole"> Protocol 2 </h2></a>
+
−
        </div>
+
−
        <div id="protocol5">
+
−
        <div class="fleche_bas"></div>
+
−
              <h5 style="padding-top:5%;"> blablabla </h5>
+
−
        <a href="#cat2" style="text-decoration: none;"><h2 class="top">TOP</h2></a>
+
−
        <div class="fleche_haut"></div>
+
−
        </div>
+
−
 
+
−
       
+
−
        <div id="protocol_name">
+
−
              <a href="#protocol6" style="text-decoration: none;"><h2 class="titre_protocole"> Protocol 3 </h2></a>
+
−
        </div>
+
−
        <div id="protocol6">
+
−
        <div class="fleche_bas"></div>
+
−
              <h5 style="padding-top:5%;"> blablabla </h5>
+
−
        <a href="#cat2" style="text-decoration: none;"><h2 class="top">TOP</h2></a>
+
−
        <div class="fleche_haut"></div>
+
−
        </div>
+
−
     
+
−
        <h2 class="titre_categorie" id="cat3" style="padding-bottom: 2%; background:#27ae60; margin:0%;"> Categorie 3 </h2>
+
−
 
+
−
                <div id="protocol_name">
+
−
              <a href="#protocol7" style="text-decoration: none;"><h2 class="titre_protocole"> Protocol 1 </h2></a>
+
−
        </div>
+
−
        <div id="protocol7">
+
−
        <div class="fleche_bas"></div>
+
−
              <h5 style="padding-top:5%;"> blablabla </h5>
+
−
        <a href="#cat3" style="text-decoration: none;"><h2 class="top">TOP</h2></a>
+
−
        <div class="fleche_haut"></div>
+
−
        </div>
+
−
 
+
−
        <div id="protocol_name">
+
−
              <a href="#protocol8" style="text-decoration: none;"><h2 class="titre_protocole"> Protocol 2 </h2></a>
+
−
        </div>
+
−
        <div id="protocol8">
+
−
        <div class="fleche_bas"></div>
+
−
              <h5 style="padding-top:5%;"> blablabla </h5>
+
−
        <a href="#cat3" style="text-decoration: none;"><h2 class="top">TOP</h2></a>
+
−
        <div class="fleche_haut"></div>
+
−
        </div>
+
−
 
+
−
        <div id="protocol_name">
+
−
              <a href="#protocol9" style="text-decoration: none;"><h2 class="titre_protocole"> Protocol 3 </h2></a>
+
−
        </div>
+
−
        <div id="protocol9">
+
−
        <div class="fleche_bas"></div>
+
−
              <h5 style="padding-top:5%;"> blablabla </h5>
+
−
        <a href="#cat3" style="text-decoration: none;"><h2 class="top">TOP</h2></a>
+
−
        <div class="fleche_haut"></div>
+
−
        </div>
+
−
 
+
  
 
         <div style="background-color:#007EFD; padding: 2% 2%; text-align:center;">
 
         <div style="background-color:#007EFD; padding: 2% 2%; text-align:center;">
Line 269: Line 68:
 
             </a>
 
             </a>
 
         </div>
 
         </div>
−
 
 
      
 
      
−
  </body>
+
  </body>
 
</html>
 
</html>
 
{{Grenoble-Alpes/footer}}
 
{{Grenoble-Alpes/footer}}

Revision as of 14:32, 29 August 2017

Lab

Protocols

Designed by iGEM Grenoble-Alpes 2017 team | Site Map