Difference between revisions of "Team:Mingdao/Notebook"

 
(113 intermediate revisions by 4 users not shown)
Line 1: Line 1:
{{:Team:Mingdao/test}}
+
{{:Team:Mingdao/test9}}
 
<html>
 
<html>
 
 
<html lang="en">
 
<html lang="en">
 
   <head>
 
   <head>
Line 7: Line 6:
 
     <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'>
 
     <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'>
 
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
 
     <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
     <title>Model</title>
+
     <title>Notebook</title>
 
    
 
    
 
   </head>
 
   </head>
Line 32: Line 31:
 
   }
 
   }
 
.bg-container {
 
.bg-container {
 +
  background-attachment: fixed;
 +
 
 
   overflow: hidden;
 
   overflow: hidden;
 
   position: relative;
 
   position: relative;
   background-image: url(https://static.igem.org/mediawiki/2017/3/34/T--CSMU_NCHU_Taiwan--long-model.png);
+
   background-image: url(https://static.igem.org/mediawiki/2018/4/4b/T--Mingdao--NotebookBackground.jpg);
   background-repeat: repeat-y;
+
   background-repeat: no-repeat;
 
   background-size: 100%;
 
   background-size: 100%;
 +
  background-position: center;
 
}
 
}
  
 
.my-main-container {
 
.my-main-container {
 
   width: 100%;
 
   width: 100%;
   padding: 50px 7%;
+
   padding: 600px 7%;
 
  }
 
  }
  
 
.main-content {
 
.main-content {
   background-color: rgba(255, 255, 255, .5);
+
   background-color: rgba(255, 255, 255, .4);
   width: 80%;
+
   width: 90%;
   margin-left: 10%;
+
   margin-left: 5%;
 
   padding: 50px;
 
   padding: 50px;
 
   min-height: 180vh;
 
   min-height: 180vh;
Line 53: Line 55:
  
 
.m-text-area h1 {
 
.m-text-area h1 {
     font-size: 60px;
+
     font-size: 50px;
 
     font-weight: 700;
 
     font-weight: 700;
 
     font-family: 'Arizonia' !important;
 
     font-family: 'Arizonia' !important;
 
     text-align: center;
 
     text-align: center;
     margin-bottom: 1rem; }
+
     margin-bottom: 1rem;
 +
    color: #385e66; }
 
.m-text-area p {
 
.m-text-area p {
 
     font-size: 22px !important;
 
     font-size: 22px !important;
Line 77: Line 80:
 
     position: absolute;
 
     position: absolute;
 
     background-color: #fff;
 
     background-color: #fff;
     top: 5px;
+
     top: 10px;
 
     left: 27px;
 
     left: 27px;
 
     border: 5px solid #385e66;
 
     border: 5px solid #385e66;
Line 131: Line 134:
 
.path-tags{
 
.path-tags{
 
   position: fixed;
 
   position: fixed;
   left: 15%;
+
   left: 11%;
 
   top: 200px;
 
   top: 200px;
 
}
 
}
Line 146: Line 149:
  
 
.path-tags span{
 
.path-tags span{
     color: #fff;
+
     color: #385e66;
 
     position: relative;
 
     position: relative;
 
     top: -8px;
 
     top: -8px;
Line 167: Line 170:
 
     text-align: left;
 
     text-align: left;
 
     font-weight:700;
 
     font-weight:700;
     margin-bottom: 2rem !important;
+
     margin-bottom: 3rem !important;
 
     margin-top: 1rem;
 
     margin-top: 1rem;
     color: #385e66 !important; }
+
     color: #385e66 !important; }
 
.m-text-area p2 {
 
.m-text-area p2 {
 
     font-size: 15px;
 
     font-size: 15px;
Line 203: Line 206:
 
   color:#385e66 !important;
 
   color:#385e66 !important;
 
   font-family: 'Ubuntu' !important;
 
   font-family: 'Ubuntu' !important;
 +
}
 +
.top-picture{
 +
  position:absolute;
 +
  z-index:1
 
}
 
}
  
Line 208: Line 215:
  
 
<body>
 
<body>
    <div class="bg-container" style="max-height:none;">
+
<div class="bg-container" style="max-height:none;">  
      <!-- <img src="https://static.igem.org/mediawiki/2017/1/1b/T--CSMU_NCHU_Taiwan--modeling.png"> -->
+
<img class="top-picture" src="https://static.igem.org/mediawiki/2018/8/85/T--Mingdao--Phil13-7.png" style="width:100%">
 +
   
 
       <div class="my-main-container">
 
       <div class="my-main-container">
 
         <div class="main-content">
 
         <div class="main-content">
 
           <div class="m-text-area">
 
           <div class="m-text-area">
             <h1>Notebook</h1>
+
       
             <div id="notebook-assay" class="m-block" >
+
             <div id="notebook-timeline" class="m-block" >
                 <h3>Mosquito Assay</h3>
+
            <h1>Timeline</h1>
 +
            <!-- <h3>Timeline</h3> -->
 +
             <img src="https://static.igem.org/mediawiki/2018/e/e5/T--Mingdao--notebook_timeline_hp.jpg">
 +
            <img src="https://static.igem.org/mediawiki/2018/4/42/T--Mingdao--notebook_timeline_hp2.jpg">
 +
<br />
 +
<br />
 +
<br />
 +
<br />
 +
            <img src="https://static.igem.org/mediawiki/2018/6/61/T--Mingdao--notebook_timeline1.jpg">
 +
            <img src="https://static.igem.org/mediawiki/2018/b/bc/T--Mingdao--notebook_timeline4.jpg">
 +
            <img src="https://static.igem.org/mediawiki/2018/4/42/T--Mingdao--notebook_timeline_hp2.jpg">
 +
<br />
 +
<br />
 +
<br />
 +
<br />
 +
                <div id="notebook-assay" class="m-block" >
 +
                 <h1>Mosquito Assay</h1>
 +
              <!--  <h3>Mosquito Assay</h3> -->
 
                 <img src="https://static.igem.org/mediawiki/2018/3/35/T--Mingdao--notebook_flow_chart1.jpg">
 
                 <img src="https://static.igem.org/mediawiki/2018/3/35/T--Mingdao--notebook_flow_chart1.jpg">
 
                
 
                
 
             </div>
 
             </div>
               
+
<br />
 +
<br />
 +
<br />
 +
<br />             
 
               <div id="notebook-functional" class="m-block" >
 
               <div id="notebook-functional" class="m-block" >
                 <h3>Functional Assay</h3>
+
                 <h1>Functional Assay</h1>
 
                 <img src="https://static.igem.org/mediawiki/2018/f/fb/T--Mingdao--notebook_flaw_chart2.jpg">
 
                 <img src="https://static.igem.org/mediawiki/2018/f/fb/T--Mingdao--notebook_flaw_chart2.jpg">
 
                
 
                
 
              
 
              
 
             </div>
 
             </div>
 
+
<br />
 +
<br />
 +
<br />
 +
<br /> 
  
 
             <div id="notebook-plasmid" class="m-block" >
 
             <div id="notebook-plasmid" class="m-block" >
                 <h3>Plasmid Extraction</h3>
+
<br />
 +
                 <h1>Plasmid Extraction</h1>
 
                  
 
                  
 
                  
 
                  
Line 235: Line 267:
 
                 <img src="https://static.igem.org/mediawiki/2018/a/a0/T--Mingdao--notebook2.jpg">
 
                 <img src="https://static.igem.org/mediawiki/2018/a/a0/T--Mingdao--notebook2.jpg">
 
             </div>
 
             </div>
              
+
<br />
 +
<br />
 +
<br />
 +
<br />              
 
             <div id="notebook-PCR" class="m-block" >
 
             <div id="notebook-PCR" class="m-block" >
                 <h3>PCR & Conoly PCR</h3>
+
<br />
 +
                 <h1>PCR & Conoly PCR</h1>
 
                
 
                
 
                 <img src="https://static.igem.org/mediawiki/2018/2/2d/T--Mingdao--notebook3.jpg">
 
                 <img src="https://static.igem.org/mediawiki/2018/2/2d/T--Mingdao--notebook3.jpg">
 
                 <img src="https://static.igem.org/mediawiki/2018/a/aa/T--Mingdao--notebook4.jpg">
 
                 <img src="https://static.igem.org/mediawiki/2018/a/aa/T--Mingdao--notebook4.jpg">
  
                  
+
<br />
 +
<br />
 +
<br />
 +
<br />                  
 
             </div>
 
             </div>
 
              
 
              
 
             <div id="notebook-gel" class="m-block" >
 
             <div id="notebook-gel" class="m-block" >
                 <h3>Gel Elution & PCR Cleanup</h3>
+
<br />
 +
                 <h1>Gel Elution & PCR Cleanup</h1>
 
                
 
                
 
                
 
                
Line 252: Line 292:
 
                 <img src="https://static.igem.org/mediawiki/2018/5/5e/T--Mingdao--notebook6.jpg">  
 
                 <img src="https://static.igem.org/mediawiki/2018/5/5e/T--Mingdao--notebook6.jpg">  
 
             </div>
 
             </div>
              
+
<br />
 +
<br />
 +
<br />
 +
<br />              
 
             <div id="notebook-restriction" class="m-block" >
 
             <div id="notebook-restriction" class="m-block" >
                 <h3>Restriction Enzyme</h3>
+
<br />
 +
                 <h1>Restriction Enzyme</h1>
 
                  
 
                  
  
Line 260: Line 304:
 
                  
 
                  
 
             </div>
 
             </div>
 
+
<br />
 +
<br />
 +
<br />
 +
<br /> 
 
             <div id="notebook-transformation" class="m-block" >
 
             <div id="notebook-transformation" class="m-block" >
                 <h3>Transformation</h3>
+
<br />
 +
                 <h1>Transformation</h1>
 
                  
 
                  
 
               <img src="https://static.igem.org/mediawiki/2018/d/dc/T--Mingdao--notebook8.jpg">   
 
               <img src="https://static.igem.org/mediawiki/2018/d/dc/T--Mingdao--notebook8.jpg">   
Line 278: Line 326:
 
         <ul>
 
         <ul>
 
           <p class="tag">Notebook</p>
 
           <p class="tag">Notebook</p>
 +
          <li id="timeline-btn" class="tag-btn">- Timeline</li>
 
           <li id="assay-btn" class="tag-btn">- Mosquito Assay </li>
 
           <li id="assay-btn" class="tag-btn">- Mosquito Assay </li>
 
           <li id="functional-btn" class="tag-btn">- Functional Assay</li>
 
           <li id="functional-btn" class="tag-btn">- Functional Assay</li>
Line 292: Line 341:
 
     </div>
 
     </div>
 
     <div class="top">
 
     <div class="top">
       <img src="https://static.igem.org/mediawiki/2017/5/52/T--CSMU_NCHU_Taiwan--top.png" alt="">
+
       <img src="https://static.igem.org/mediawiki/2018/5/58/T--Mingdao--go_to_top.jpg" alt="">
 
     </div>
 
     </div>
 
   </body>
 
   </body>
Line 299: Line 348:
 
       $('.top').on('click', function(){
 
       $('.top').on('click', function(){
 
         $('html, body').animate({scrollTop: '0px'}, 500);
 
         $('html, body').animate({scrollTop: '0px'}, 500);
 +
      });
 +
     
 +
      $("#timeline-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-timeline").offset().top
 +
        }, 500);
 
       });
 
       });
 
        
 
        
Line 370: Line 425:
  
 
</html>
 
</html>
 +
 +
 +
{{:Team:Mingdao/test6}}

Latest revision as of 15:32, 15 October 2018

Notebook

Timeline









Mosquito Assay





Functional Assay






Plasmid Extraction






PCR & Conoly PCR






Gel Elution & PCR Cleanup






Restriction Enzyme






Transformation

    Notebook

  • - Timeline
  • - Mosquito Assay
  • - Functional Assay
  • - Plasmid Extraction
  • - PCR & Colony PCR
  • - Gel Elution & PCR Cleanup
  • - Restriction Enzyme
  • - Transformation