Difference between revisions of "Team:Mingdao/Notebook"

 
(157 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
{{:Team:Mingdao/test}}
+
{{:Team:Mingdao/test9}}
−
 
+
<html>
−
 
+
 
<html lang="en">
 
<html lang="en">
 
   <head>
 
   <head>
 
     <meta charset="UTF-8">
 
     <meta charset="UTF-8">
−
     <link href='https://fonts.googleapis.com/css?family=Quicksand' 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>Notebook</title>
 
     <title>Notebook</title>
 +
 
 
   </head>
 
   </head>
−
  <style type="text/css">
+
 
 +
<style type="text/css">
  
 
* {
 
* {
Line 21: Line 22:
 
   padding: 0;
 
   padding: 0;
 
   font-family: 'Ubuntu' !important; }
 
   font-family: 'Ubuntu' !important; }
 +
img.center {
 +
  display: block;
 +
  margin: 0 auto; }
  
  
 +
img.right {
 +
    float: right;
 +
  }
 
.bg-container {
 
.bg-container {
 +
  background-attachment: fixed;
 +
 
 
   overflow: hidden;
 
   overflow: hidden;
 
   position: relative;
 
   position: relative;
−
  background-color: #c5d7d9;
+
   background-image: url(https://static.igem.org/mediawiki/2018/4/4b/T--Mingdao--NotebookBackground.jpg);
−
   background-image: url(https://static.igem.org/mediawiki/2018/a/ab/T--Mingdao--Interlab_background.jpg);
+
   background-repeat: no-repeat;
−
   background-repeat: repeat-y;
+
 
   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: white;
+
   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;
 
   z-index: 10; }
 
   z-index: 10; }
  
−
.text-area {
+
.m-text-area h1 {
−
  margin-bottom: 80px; }
+
     font-size: 50px;
−
  .text-area h1 {
+
−
     font-size: 60px;
+
 
     font-weight: 700;
 
     font-weight: 700;
 
     font-family: 'Arizonia' !important;
 
     font-family: 'Arizonia' !important;
−
     text-align: center; }
+
     text-align: center;
−
  .text-area p {
+
    margin-bottom: 1rem;
−
     font-size: 22px;
+
    color: #385e66; }
 +
.m-text-area p {
 +
     font-size: 22px !important;
 +
    font-family: 'Ubuntu' !important;
 
     font-weight: 500; }
 
     font-weight: 500; }
  
−
.pdfbtn {
+
.m-block img {
−
   width: 100%;
+
   width: 100%; }
−
   margin: 20px 0 10px 0;
+
 
−
   padding: 10px 20px;
+
.path-btns {
−
   border-radius: 5px;
+
   position: fixed;
−
   background-color: #556b7e;
+
   width: 250px;
−
   color: white;
+
   top: 200px;
−
  display: block;
+
   left: 225px; }
−
  position: relative; }
+
   .path-btns .path-dot {
−
  .pdfbtn i {
+
    width: 25px;
 +
    height: 25px;
 +
    border-radius: 50%;
 
     position: absolute;
 
     position: absolute;
−
     right: 50px;
+
     background-color: #fff;
−
     top: 50%;
+
     top: 10px;
−
     transform: translateY(-50%); }
+
     left: 27px;
 +
    border: 5px solid #385e66;
 +
    cursor: pointer; }
 +
    .path-btns .path-dot.active {
 +
      background-color: #385e66; }
 +
    .path-btns .path-dot:hover {
 +
      transition: all .3s;
 +
      transform: scale(1.2); }
  
−
.pdf-container {
 
−
  width: 100%;
 
−
  text-align: center;
 
−
  height: 90vh;
 
−
  display: none; }
 
−
 
−
.ul-container {
 
−
  width: 100%;
 
−
  text-align: center;
 
−
  height: auto;
 
−
  }
 
−
 
−
.ul-container ul.medal li {
 
−
  list-style: none; }
 
−
  .ul-container ul.medal li:before {
 
−
    content: '';
 
−
    display: inline-block;
 
−
    height: 1em;
 
−
    width: 2em;
 
−
    background-size: 1em;
 
−
    background-image: url(../img/circle.png);
 
−
    background-repeat: no-repeat; }
 
−
 
−
.ul-container ul {
 
−
  text-align: left;
 
−
  padding: 20px 50px;
 
−
  margin-left: 0;
 
−
 
−
  border: #556b7e solid 2px;
 
−
  font-size: 22px; }
 
−
  .ul-container ul li {
 
−
    padding: 10px;
 
−
    list-style: disc; }
 
−
    .ul-container ul li a {
 
−
      text-decoration: none;
 
−
      color: #000; }
 
−
      .ul-container ul li a:visited, .ul-container ul li a:hover, .ul-container ul li a:focus {
 
−
        color: #000;
 
−
        text-decoration: none; }
 
−
    .ul-container ul li span {
 
−
      background-color: #fadd3a;
 
−
      padding: 1px 10px;
 
−
      border-radius: 5px;
 
−
      margin-left: 20px;
 
−
      cursor: pointer; }
 
−
    .ul-container ul li i {
 
−
      padding-left: 10px; }
 
  
 +
.path {
 +
  height: 65px;
 +
  display: flex; }
 +
  .path .pathSvg {
 +
    display: block; }
 +
  .path .pathWord {
 +
    padding-right: 10%; }
 +
  .path .path-btn {
 +
    cursor: pointer;
 +
    fill: #fff; }
 +
    .path .path-btn.path-active {
 +
      fill: #385e66; }
 +
  .path .path-word-sm {
 +
    font-size: 12px; }
 +
#HQ_page .path .pathWord p {
 +
      font-weight: 700;
 +
      text-align: left !important;
 +
      font-size: 16px;
 +
}
 
#HQ_page .text-area p {
 
#HQ_page .text-area p {
 
   font-size: 22px;
 
   font-size: 22px;
 
   font-family: 'Ubuntu';
 
   font-family: 'Ubuntu';
 
   font-weight: 500; }
 
   font-weight: 500; }
 +
img.center {
 +
  display: block;
 +
  margin: 0 auto; }
 +
 +
.text-area h2 {
 +
    text-align: center;
 +
    margin-bottom: 2rem !important;
 +
    margin-top: 2rem;
 +
    color: black !important; }
 +
 +
.m-text-area {
 +
  padding-left: 225px; }
 +
.m-text-area h2 {
 +
    text-align: center;
 +
    margin-bottom: 2rem !important;
 +
    margin-top: 2rem;
 +
    color: black !important;
 +
}
 +
.path-tags{
 +
  position: fixed;
 +
  left: 11%;
 +
  top: 200px;
 +
}
 +
.path-tags ul{
 +
  color: #385e66;
 +
  list-style: none;
 +
  font-size: 18px;
 +
  font-family: 'Ubuntu' !important;
 +
}
 +
 +
.path-tags li{
 +
  cursor: pointer;
 +
}
 +
 +
.path-tags span{
 +
    color: #385e66;
 +
    position: relative;
 +
    top: -8px;
 +
    left: 10px;
 +
    z-index: 1;
 +
 +
    font-size: 15px;
 +
}
 
.top {
 
.top {
 
   position: fixed;
 
   position: fixed;
Line 132: Line 166:
 
   .top img {
 
   .top img {
 
     width: 100%; }
 
     width: 100%; }
−
h2 {
+
.m-text-area h3 {
−
font-family: 'Ubuntu';
+
    font-size: 28px;
−
font-size: 30px;
+
    text-align: left;
−
text-align: center;
+
    font-weight:700;
−
color: #000000 !important;
+
    margin-bottom: 3rem !important;
−
}
+
    margin-top: 1rem;
 +
    color: #385e66  !important; }
 +
.m-text-area p2 {
 +
    font-size: 15px;
 +
    }
  
−
.resize {
 
−
width : auto;
 
−
width : 1260px;
 
−
}
 
  
−
.resize {
+
.img-container {
−
height : auto;
+
  width: 100%;
−
height : 660px;
+
  text-align: center;
 +
  display: none; }
 +
  .img-container img {
 +
    width: 100%; }
 +
 
 +
 
 +
.pdfbtn {
 +
  width: 100%;
 +
  margin: 20px 0 10px 0;
 +
  padding: 10px 20px;
 +
  border-radius: 5px;
 +
  background-color: #385e66;
 +
  color: white;
 +
  display: block;
 +
  position: relative; }
 +
  .pdfbtn i {
 +
    position: absolute;
 +
    right: 50px;
 +
    top: 50%;
 +
    transform: translateY(-50%); }
 +
 
 +
.tag{
 +
  font-size:26px !important;
 +
  font-weight:bold;
 +
  color:#385e66 !important;
 +
  font-family: 'Ubuntu' !important;
 +
}
 +
.top-picture{
 +
  position:absolute;
 +
  z-index:1
 
}
 
}
  
 
</style>
 
</style>
  
−
  <body>
+
<body>
−
    <div>
+
<div class="bg-container" style="max-height:none;">  
−
    <img src=https://static.igem.org/mediawiki/2018/1/15/T--Mingdao--notebook_background.jpg class="resize" alt=" ">
+
<img class="top-picture" src="https://static.igem.org/mediawiki/2018/8/85/T--Mingdao--Phil13-7.png" style="width:100%">
−
     <div class="bg-container">
+
      
 
       <div class="my-main-container">
 
       <div class="my-main-container">
 
         <div class="main-content">
 
         <div class="main-content">
−
           <div class="text-area">
+
           <div class="m-text-area">
−
             <h1>Notebook</h1>
+
       
−
         
+
             <div id="notebook-timeline" class="m-block" >
−
         
+
            <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">
 +
             
 +
            </div>
 +
<br />
 +
<br />
 +
<br />
 +
<br />             
 +
              <div id="notebook-functional" class="m-block" >
 +
                <h1>Functional Assay</h1>
 +
                <img src="https://static.igem.org/mediawiki/2018/f/fb/T--Mingdao--notebook_flaw_chart2.jpg">
 +
             
 +
           
 +
            </div>
 +
<br />
 +
<br />
 +
<br />
 +
<br /> 
  
 +
            <div id="notebook-plasmid" class="m-block" >
 +
<br />
 +
                <h1>Plasmid Extraction</h1>
 +
               
 +
               
 +
                <img src="https://static.igem.org/mediawiki/2018/3/39/T--Mingdao--notebook1.jpg">
 +
                <img src="https://static.igem.org/mediawiki/2018/a/a0/T--Mingdao--notebook2.jpg">
 +
            </div>
 +
<br />
 +
<br />
 +
<br />
 +
<br />           
 +
            <div id="notebook-PCR" class="m-block" >
 +
<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/a/aa/T--Mingdao--notebook4.jpg">
  
 +
<br />
 +
<br />
 +
<br />
 +
<br />               
 +
            </div>
 +
           
 +
            <div id="notebook-gel" class="m-block" >
 +
<br />
 +
                <h1>Gel Elution & PCR Cleanup</h1>
 +
             
 +
             
 +
                <img src="https://static.igem.org/mediawiki/2018/b/be/T--Mingdao--notebook5.jpg">
 +
                <img src="https://static.igem.org/mediawiki/2018/5/5e/T--Mingdao--notebook6.jpg">
 +
            </div>
 +
<br />
 +
<br />
 +
<br />
 +
<br />           
 +
            <div id="notebook-restriction" class="m-block" >
 +
<br />
 +
                <h1>Restriction Enzyme</h1>
 +
               
  
−
          <div class="pdf-area">
+
              <img src="https://static.igem.org/mediawiki/2018/5/5b/T--Mingdao--notebook7.jpg">
−
<div class="img-container" id="lab-1">
+
               
−
<embed src="https://static.igem.org/mediawiki/2018/3/32/T--Mingdao--notebook_flowchart.pdf" style="width:100%; height:1000px" frameborder="0"></embed>
+
 
             </div>
 
             </div>
 +
<br />
 +
<br />
 +
<br />
 +
<br /> 
 +
            <div id="notebook-transformation" class="m-block" >
 +
<br />
 +
                <h1>Transformation</h1>
 +
               
 +
              <img src="https://static.igem.org/mediawiki/2018/d/dc/T--Mingdao--notebook8.jpg"> 
 +
            </div>
 +
 +
         
 +
           
 +
               
 +
 
           </div>
 
           </div>
 +
        </div>
 +
      </div>
  
 +
      <div class="path-tags">
 +
        <ul>
 +
          <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="functional-btn" class="tag-btn">- Functional Assay</li>
 +
          <li id="plasmid-btn" class="tag-btn">- Plasmid Extraction</li>
 +
          <li id="PCR-btn" class="tag-btn">- PCR & Colony PCR</li>
 +
          <li id="gel-btn" class="tag-btn">- Gel Elution & PCR Cleanup</li>
 +
          <li id="restriction-btn" class="tag-btn">- Restriction Enzyme</li>
 +
          <li id="transformation-btn" class="tag-btn">- Transformation</li>
 +
         
 +
 +
         
 +
        </ul>
 +
      </div>
 +
    </div>
 +
    <div class="top">
 +
      <img src="https://static.igem.org/mediawiki/2018/5/58/T--Mingdao--go_to_top.jpg" alt="">
 +
    </div>
 +
  </body>
 
   <script type="text/javascript">
 
   <script type="text/javascript">
−
     $('#interlab-btn-1').on('click', function(){
+
     $(document).ready(function(){
−
      $('#interlab-1').css('height','250vh')
+
      $('.top').on('click', function(){
−
       $('#interlab-1').slideToggle("slow");
+
        $('html, body').animate({scrollTop: '0px'}, 500);
−
       $('.bg-container').css('max-height','500vh')
+
       });
−
       $('.main-content').css('min-height','200vh')
+
     
−
    });
+
      $("#timeline-btn").click(function() {
−
    $('#interlab-btn-2').on('click', function(){
+
        $('html, body').animate({
−
      $('#interlab-2').slideToggle("slow");
+
            scrollTop: $("#notebook-timeline").offset().top
−
       $('.bg-container').css('max-height','500vh')
+
        }, 500);
−
      $('.main-content').css('min-height','200vh')
+
       });
−
    });
+
     
−
    $('.top').on('click', function(){
+
      $("#assay-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-assay").offset().top
 +
        }, 500);
 +
      });
 +
     
 +
       $("#functional-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-functional").offset().top
 +
        }, 500);
 +
      });
 +
 
 +
 
 +
      $("ul>li#plasmid-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-plasmid").offset().top
 +
        }, 500);
 +
      });
 +
      $("#PCR-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-PCR").offset().top
 +
        }, 500);
 +
      });
 +
      $("#gel-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-gel").offset().top
 +
        }, 500);
 +
      });
 +
       $("#restriction-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-restriction").offset().top
 +
        }, 500);
 +
      });
 +
      $("#transformation-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-transformation").offset().top
 +
        }, 500);
 +
      });
 +
     
 +
  });
 +
  $(document).ready(function(){
 +
 
 +
      for( var i = 1; i < 2; i++){
 +
        $('#public-btn-' + i).click( toggleContainer(i) );
 +
      }
 +
 
 +
      $('.top').on('click', function(){
 
       $('html, body').animate({scrollTop: '0px'}, 500);
 
       $('html, body').animate({scrollTop: '0px'}, 500);
 
     });
 
     });
−
</script>
+
 
 +
});
 +
 
 +
function toggleContainer(i){
 +
  return function(){
 +
      if($('#public-'+i).is(":visible")){
 +
        $('#public-'+i).slideToggle(500);
 +
      }
 +
      else{
 +
        $('.img-container:visible').slideToggle(500);
 +
        $('#public-'+i).slideToggle(500);
 +
      }
 +
      $('.hp-bg-container').css('max-height','none')
 +
      $('.main-content').css('min-height','200vh')
 +
  }
 +
}
 +
  </script>
 +
 
 +
 
 
</html>
 
</html>
 +
 +
 +
{{:Team:Mingdao/test6}}

Latest revision as of 15:32, 15 October 2018

HOME
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