Difference between revisions of "Team:William and Mary/Notebook"

Line 22: Line 22:
 
     font-size: 18px;
 
     font-size: 18px;
 
}
 
}
 +
<!-- time line -->
  
 +
* {
 +
    box-sizing: border-box;
 +
}
 +
 +
body {
 +
    background-color: #474e5d;
 +
    font-family: Helvetica, sans-serif;
 +
}
 +
 +
/* The actual timeline (the vertical ruler) */
 +
.timeline {
 +
    position: relative;
 +
    max-width: 1200px;
 +
    margin: 0 auto;
 +
}
 +
 +
/* The actual timeline (the vertical ruler) */
 +
.timeline::after {
 +
    content: '';
 +
    position: absolute;
 +
    width: 6px;
 +
    background-color: white;
 +
    top: 0;
 +
    bottom: 0;
 +
    left: 50%;
 +
    margin-left: -3px;
 +
}
 +
 +
/* Container around content */
 +
.container {
 +
    padding: 10px 40px;
 +
    position: relative;
 +
    background-color: inherit;
 +
    width: 50%;
 +
}
 +
 +
/* The circles on the timeline */
 +
.container::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 */
 +
.left {
 +
    left: 0;
 +
}
 +
 +
/* Place the container to the right */
 +
.right {
 +
    left: 50%;
 +
}
 +
 +
/* Add arrows to the left container (pointing right) */
 +
.left::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) */
 +
.right::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 */
 +
.right::after {
 +
    left: -16px;
 +
}
 +
 +
/* The actual content */
 +
.content {
 +
    padding: 20px 30px;
 +
    background-color: white;
 +
    position: relative;
 +
    border-radius: 6px;
 +
}
 +
 +
/* Media queries - Responsive timeline on screens less than 600px wide */
 +
@media screen and (max-width: 600px) {
 +
  /* Place the timelime to the left */
 +
  .timeline::after {
 +
    left: 31px;
 +
  }
 +
 
 +
  /* Full-width containers */
 +
  .container {
 +
    width: 100%;
 +
    padding-left: 70px;
 +
    padding-right: 25px;
 +
  }
 +
 
 +
  /* Make sure that all arrows are pointing leftwards */
 +
  .container::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 */
 +
  .left::after, .right::after {
 +
    left: 15px;
 +
  }
 +
 
 +
  /* Make all right containers behave like the left ones */
 +
  .right {
 +
    left: 0%;
 +
  }
 +
}
  
 
</style>
 
</style>
Line 28: Line 162:
  
 
<body>
 
<body>
 +
<div class="timeline">
 +
  <div class="container left">
 +
    <div class="content">
 +
      <h2>2017</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container right">
 +
    <div class="content">
 +
      <h2>2016</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container left">
 +
    <div class="content">
 +
      <h2>2015</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container right">
 +
    <div class="content">
 +
      <h2>2012</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container left">
 +
    <div class="content">
 +
      <h2>2011</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
  <div class="container right">
 +
    <div class="content">
 +
      <h2>2007</h2>
 +
      <p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
 +
    </div>
 +
  </div>
 +
</div>
 +
 +
 +
 +
 +
 +
 +
 
<div style='padding-top: 50px;'></div>
 
<div style='padding-top: 50px;'></div>
  

Revision as of 20:13, 16 October 2018

2017

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

2016

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

2015

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

2012

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

2011

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

2007

Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.

Notebook

Week 1
  • Began cloning 3G parts based off the library sent from the Murray lab
  • Researched literature on dual inducible promoters
  • Sent out several cloned 3G parts for sequencing
  • Planned out several IFFLs to test.
Week 2
  • Continued cloning 3G parts onto our standard WM Pad backbone
  • Redesigned primers for cloning 3G promoter parts, as previous ones were faulty
  • Received results from sequencing, confirmed parts
  • Beginning to assemble circuits using 3G assembly
  • Making inducible reporter construct and an mf-Lon based IFFL
Week 3: 180611-180617
  • Completed cloning the portion of our comprehensive 3G assembly part library needed for our circuits
  • Adding remaining 3G parts from Murray’s lab to our library
  • Working on designing and building a dual inducible promoter and low copy backbone for assembly
  • Confirmed minipreps based on sequencing results
  • Started plate reader for experiments on circuits with IPTG and ATC inducer
  • Started using FACS machine for experiments