Difference between revisions of "Team:Mingdao/Notebook"

 
(174 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
{{:Team:Mingdao/test}}
+
{{:Team:Mingdao/test9}}
 +
<html>
 +
<html lang="en">
 +
  <head>
 +
    <meta charset="UTF-8">
 +
    <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'>
 +
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'>
 +
    <title>Notebook</title>
 +
 
 +
  </head>
  
−
<embed src:"https://static.igem.org/mediawiki/2018/2/21/T--Mingdao--Notebook.pdf">
+
<style type="text/css">
 +
 
 +
* {
 +
  margin: 0;
 +
  padding: 0;
 +
  box-sizing: border-box; }
 +
 
 +
body {
 +
  width: 100%;
 +
  margin: 0;
 +
  padding: 0;
 +
  font-family: 'Ubuntu' !important; }
 +
img.center {
 +
  display: block;
 +
  margin: 0 auto; }
 +
 
 +
 
 +
img.right {
 +
    float: right;
 +
  }
 +
.bg-container {
 +
  background-attachment: fixed;
 +
 
 +
  overflow: hidden;
 +
  position: relative;
 +
  background-image: url(https://static.igem.org/mediawiki/2018/4/4b/T--Mingdao--NotebookBackground.jpg);
 +
  background-repeat: no-repeat;
 +
  background-size: 100%;
 +
  background-position: center;
 +
}
 +
 
 +
.my-main-container {
 +
  width: 100%;
 +
  padding: 600px 7%;
 +
}
 +
 
 +
.main-content {
 +
  background-color: rgba(255, 255, 255, .4);
 +
  width: 90%;
 +
  margin-left: 5%;
 +
  padding: 50px;
 +
  min-height: 180vh;
 +
  z-index: 10; }
 +
 
 +
.m-text-area h1 {
 +
    font-size: 50px;
 +
    font-weight: 700;
 +
    font-family: 'Arizonia' !important;
 +
    text-align: center;
 +
    margin-bottom: 1rem;
 +
    color: #385e66; }
 +
.m-text-area p {
 +
    font-size: 22px !important;
 +
    font-family: 'Ubuntu' !important;
 +
    font-weight: 500; }
 +
 
 +
.m-block img {
 +
  width: 100%; }
 +
 
 +
.path-btns {
 +
  position: fixed;
 +
  width: 250px;
 +
  top: 200px;
 +
  left: 225px; }
 +
  .path-btns .path-dot {
 +
    width: 25px;
 +
    height: 25px;
 +
    border-radius: 50%;
 +
    position: absolute;
 +
    background-color: #fff;
 +
    top: 10px;
 +
    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); }
 +
 
 +
 
 +
.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 {
 +
  font-size: 22px;
 +
  font-family: 'Ubuntu';
 +
  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 {
 +
  position: fixed;
 +
  right: 50px;
 +
  bottom: 50px;
 +
  height: 50px;
 +
  width: 50px;
 +
  cursor: pointer; }
 +
  .top img {
 +
    width: 100%; }
 +
.m-text-area h3 {
 +
    font-size: 28px;
 +
    text-align: left;
 +
    font-weight:700;
 +
    margin-bottom: 3rem !important;
 +
    margin-top: 1rem;
 +
    color: #385e66  !important; }
 +
.m-text-area p2 {
 +
    font-size: 15px;
 +
    }
 +
 
 +
 
 +
.img-container {
 +
  width: 100%;
 +
  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>
 +
 
 +
<body>
 +
<div class="bg-container" style="max-height:none;">
 +
<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="main-content">
 +
          <div class="m-text-area">
 +
       
 +
            <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>
 +
               
 +
 
 +
              <img src="https://static.igem.org/mediawiki/2018/5/5b/T--Mingdao--notebook7.jpg">
 +
               
 +
            </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 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">
 +
    $(document).ready(function(){
 +
      $('.top').on('click', function(){
 +
        $('html, body').animate({scrollTop: '0px'}, 500);
 +
      });
 +
     
 +
      $("#timeline-btn").click(function() {
 +
        $('html, body').animate({
 +
            scrollTop: $("#notebook-timeline").offset().top
 +
        }, 500);
 +
      });
 +
     
 +
      $("#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);
 +
    });
 +
 
 +
});
 +
 
 +
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>
 +
 
 +
 
 +
{{: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