Difference between revisions of "Team:CAU China/Notebook"

Line 1: Line 1:
−
 
 
{{CAU_China/CSS/Top}}
 
{{CAU_China/CSS/Top}}
 
<html>
 
<html>
−
<div class="showCase container-fluid jumbotron jumbotron-fluid text-center bg-white align-items-center text-light mb-0">
+
<style>
−
        <div class="row" style="">
+
−
            <div class="col-12 col-md-6">
+
−
               
+
−
            </div>
+
−
            <div class="col-12 col-md-6 p-5">
+
−
               
+
−
                <span class="d-block mt-5">
+
−
               
+
−
             
+
−
               
+
−
            </div>
+
−
        </div>
+
  
−
        <div class="row mt-4" style="">
+
.pictureTitle{
−
         
+
    background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.7)), url("http://2018.igem.org/wiki/images/c/c4/T--Munich--background_notebook.jpeg");
−
        </div>
+
    background-repeat: no-repeat;
 +
    background-size: cover;
 +
    background-position:center;
 +
}      /* Other CSS */
  
−
     </div>  
+
        /**************************************************************************************************************************************************************************************************/
−
<div>
+
 
−
<h3>Notebook</h3>
+
/* reset css */
 +
/* https://meyerweb.com/eric/tools/css/reset/
 +
  v2.0 | 20110126
 +
  License: none (public domain)
 +
*/
 +
 
 +
 
 +
/* HTML5 display-role reset for older browsers */
 +
article, aside, details, figcaption, figure,
 +
footer, header, hgroup, menu, nav, section, main {
 +
display: block;
 +
}
 +
body {
 +
line-height: 1;
 +
}
 +
ol, ul {
 +
list-style: none;
 +
}
 +
blockquote, q {
 +
quotes: none;
 +
}
 +
blockquote:before, blockquote:after,
 +
q:before, q:after {
 +
content: '';
 +
content: none;
 +
}
 +
table {
 +
border-collapse: collapse;
 +
border-spacing: 0;
 +
}
 +
ul{
 +
     line-height: 1em;
 +
}
 +
/* style css */
 +
/* --------------------------------
 +
 
 +
Primary style
 +
 
 +
-------------------------------- */
 +
*, *::after, *::before {
 +
  box-sizing: border-box;
 +
}
 +
 
 +
/* --------------------------------
 +
 
 +
Main Components
 +
 
 +
-------------------------------- */
 +
.cd-schedule {
 +
  position: relative;
 +
  margin: 2em 0;
 +
}
 +
 
 +
.cd-schedule::before {
 +
  /* never visible - this is used in js to check the current MQ */
 +
  content: 'mobile';
 +
  display: none;
 +
}
 +
 
 +
@media only screen and (min-width: 800px) {
 +
  .cd-schedule {
 +
    width: 90%;
 +
    max-width: 1400px;
 +
    margin: 2em auto;
 +
  }
 +
  .cd-schedule::after {
 +
    clear: both;
 +
    content: "";
 +
    display: block;
 +
  }
 +
  .cd-schedule::before {
 +
    content: 'desktop';
 +
  }
 +
}
 +
 
 +
.cd-schedule .timeline {
 +
  display: none;
 +
}
 +
 
 +
@media only screen and (min-width: 800px) {
 +
  .cd-schedule .timeline {
 +
    display: block;
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    height: 100%;
 +
    width: 100%;
 +
    padding-top: 50px;
 +
  }
 +
  .cd-schedule .timeline li {
 +
    width: 100%;
 +
    position: relative;
 +
    height: 50px;
 +
  }
 +
  .cd-schedule .timeline li::after {
 +
    /* this is used to create the table horizontal lines */
 +
    content: '';
 +
    position: absolute;
 +
    bottom: 0;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 1px;
 +
    background: #EAEAEA;
 +
  }
 +
  .cd-schedule .timeline li:last-of-type::after {
 +
    display: none;
 +
  }
 +
  .cd-schedule .timeline li span {
 +
    display: none;
 +
  }
 +
}
 +
 
 +
@media only screen and (min-width: 1000px) {
 +
  .cd-schedule .timeline li::after {
 +
    width: calc(100% - 30px);
 +
    left: 70px;
 +
  }
 +
  .cd-schedule .timeline li span {
 +
    display: inline-block;
 +
    -webkit-transform: translateY(-50%);
 +
        -ms-transform: translateY(-50%);
 +
            transform: translateY(-50%);
 +
  }
 +
  .cd-schedule .timeline li:nth-of-type(2n) span {
 +
    display: none;
 +
  }
 +
}
 +
 
 +
.cd-schedule .events {
 +
  position: relative;
 +
  z-index: 1;
 +
}
 +
 
 +
.cd-schedule .events .events-group {
 +
  margin-bottom: 30px;
 +
}
 +
 
 +
.cd-schedule .events .top-info {
 +
  width: 100%;
 +
  padding: 0 5%;
 +
}
 +
 
 +
.cd-schedule .events .top-info > span {
 +
  display: inline-block;
 +
  line-height: 1.2;
 +
  margin-bottom: 10px;
 +
  font-weight: bold;
 +
}
 +
 
 +
.cd-schedule .events .events-group > ul {
 +
  position: relative;
 +
  padding: 0 5%;
 +
  /* force its children to stay on one line */
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  overflow-x: scroll;
 +
  -webkit-overflow-scrolling: touch;
 +
  margin: 0;
 +
}
 +
 
 +
.cd-schedule .events .events-group > ul::after {
 +
  /* never visible - used to add a right padding to .events-group > ul */
 +
  display: inline-block;
 +
  content: '-';
 +
  width: 1px;
 +
  height: 100%;
 +
  opacity: 0;
 +
  color: transparent;
 +
}
 +
 
 +
.cd-schedule .events .single-event {
 +
  /* force them to stay on one line */
 +
  -ms-flex-negative: 0;
 +
      flex-shrink: 0;
 +
  float: left;
 +
  height: 150px;
 +
  width: 70%;
 +
  max-width: 300px;
 +
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
 +
  margin-right: 20px;
 +
  -webkit-transition: opacity .2s, background .2s;
 +
  transition: opacity .2s, background .2s;
 +
}
 +
 
 +
.cd-schedule .events .single-event:last-of-type {
 +
  margin-right: 5%;
 +
}
 +
 
 +
.cd-schedule .events .single-event a {
 +
  display: block;
 +
  height: 100%;
 +
  padding: 0.8em;
 +
}
 +
 
 +
@media only screen and (min-width: 550px) {
 +
  .cd-schedule .events .single-event {
 +
    width: 40%;
 +
  }
 +
}
 +
 
 +
@media only screen and (min-width: 800px) {
 +
  .cd-schedule .events {
 +
    float: left;
 +
    width: 100%;
 +
  }
 +
  .cd-schedule .events .events-group {
 +
    width: 25%;
 +
    float: left;
 +
    border: 1px solid #EAEAEA;
 +
    /* reset style */
 +
    margin-bottom: 0;
 +
  }
 +
  .cd-schedule .events .events-group:not(:first-of-type) {
 +
    border-left-width: 0;
 +
  }
 +
  .cd-schedule .events .top-info {
 +
    /* vertically center its content */
 +
    display: table;
 +
    height: 50px;
 +
    border-bottom: 1px solid #EAEAEA;
 +
    /* reset style */
 +
    padding: 0;
 +
  }
 +
  .cd-schedule .events .top-info > span {
 +
    /* vertically center inside its parent */
 +
    display: table-cell;
 +
    vertical-align: middle;
 +
    padding: 0 .5em;
 +
    text-align: center;
 +
    /* reset style */
 +
    font-weight: normal;
 +
    margin-bottom: 0;
 +
  }
 +
  .cd-schedule .events .events-group > ul {
 +
    height: 650px;
 +
    /* reset style */
 +
    display: block;
 +
    overflow: visible;
 +
    padding: 0;
 +
  }
 +
  .cd-schedule .events .events-group > ul::after {
 +
    clear: both;
 +
    content: "";
 +
    display: block;
 +
  }
 +
  .cd-schedule .events .events-group > ul::after {
 +
    /* reset style */
 +
    display: none;
 +
  }
 +
  .cd-schedule .events .single-event {
 +
    position: absolute;
 +
    z-index: 3;
 +
    /* top position and height will be set using js */
 +
    width: calc(100% + 2px);
 +
    left: -1px;
 +
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
 +
    /* reset style */
 +
    -ms-flex-negative: 1;
 +
        flex-shrink: 1;
 +
    height: auto;
 +
    max-width: none;
 +
    margin-right: 0;
 +
  }
 +
  .cd-schedule .events .single-event a {
 +
    padding: 0.2em;
 +
  }
 +
  .cd-schedule .events .single-event:last-of-type {
 +
    /* reset style */
 +
    margin-right: 0;
 +
  }
 +
  .cd-schedule .events .single-event.selected-event {
 +
    /* the .selected-event class is added when an user select the event */
 +
    visibility: hidden;
 +
  }
 +
}
 +
 
 +
@media only screen and (min-width: 1000px) {
 +
  .cd-schedule .events {
 +
    /* 60px is the .timeline element width */
 +
    width: calc(100% - 60px);
 +
    margin-left: 100px;
 +
  }
 +
}
 +
 
 +
.cd-schedule.loading .events .single-event {
 +
  /* the class .loading is added by default to the .cd-schedule element
 +
  it is removed as soon as the single events are placed in the schedule plan (using javascript) */
 +
  opacity: 0;
 +
}
 +
 
 +
.cd-schedule .event-name,
 +
.cd-schedule .event-date {
 +
  display: block;
 +
  color: white;
 +
  font-weight: bold;
 +
  -webkit-font-smoothing: antialiased;
 +
  -moz-osx-font-smoothing: grayscale;
 +
}
 +
 
 +
.cd-schedule .event-name {
 +
  font-size: 1rem;
 +
}
 +
 
 +
.display-4{
 +
  font-size: 2rem;
 +
}
 +
 
 +
@media only screen and (min-width: 800px) {
 +
  .cd-schedule .event-name {
 +
    font-size: 1rem;
 +
  }
 +
.display-4{
 +
  font-size: 3.5rem;
 +
}
 +
}
 +
 
 +
.cd-schedule .event-date {
 +
  /* they are not included in the the HTML but added using JavScript */
 +
  font-size: 1rem;
 +
  opacity: .7;
 +
  line-height: 1.2;
 +
  margin-bottom: .2em;
 +
  display: none;
 +
}
 +
 
 +
.cd-schedule .single-event[data-event="event-1"],
 +
.cd-schedule [data-event="event-1"] .header-bg {
 +
  /* this is used to set a background color for the event and the modal window */
 +
  background: rgba(0,203,177,1);
 +
}
 +
 
 +
.cd-schedule .single-event[data-event="event-1"]:hover {
 +
  background: rgba(1,101,224,1);
 +
}
 +
 
 +
.cd-schedule .single-event[data-event="event-2"],
 +
.cd-schedule [data-event="event-2"] .header-bg {
 +
  background: rgba(213,59,72,1);
 +
}
 +
 
 +
.cd-schedule .single-event[data-event="event-2"]:hover {
 +
  background: rgba(247,148,77,1);
 +
}
 +
 
 +
.cd-schedule .single-event[data-event="event-3"],
 +
.cd-schedule [data-event="event-3"] .header-bg {
 +
  background: rgba(153, 0, 204,1);
 +
}
 +
 
 +
.cd-schedule .single-event[data-event="event-3"]:hover {
 +
  background: rgba(153, 51, 102,1);
 +
}
 +
 
 +
.cd-schedule .single-event[data-event="event-4"],
 +
.cd-schedule [data-event="event-4"] .header-bg {
 +
  background: #f6b067;
 +
}
 +
 
 +
.cd-schedule .single-event[data-event="event-4"]:hover {
 +
  background: #f7bd7f;
 +
}
 +
 
 +
.cd-schedule .event-modal {
 +
  position: fixed;
 +
  z-index: 500;
 +
  top: 0;
 +
  right: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  visibility: hidden;
 +
  /* Force Hardware acceleration */
 +
  -webkit-transform: translateZ(0);
 +
          transform: translateZ(0);
 +
  -webkit-transform: translateX(100%);
 +
      -ms-transform: translateX(100%);
 +
          transform: translateX(100%);
 +
  -webkit-transition: visibility .4s, -webkit-transform .4s;
 +
  transition: visibility .4s, -webkit-transform .4s;
 +
  transition: transform .4s, visibility .4s;
 +
  transition: transform .4s, visibility .4s, -webkit-transform .4s;
 +
  -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
          transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
}
 +
 
 +
.cd-schedule .event-modal .header {
 +
  position: relative;
 +
  height: 70px;
 +
  /* vertically center its content */
 +
  display: table;
 +
  width: 100%;
 +
}
 +
 
 +
.cd-schedule .event-modal .header .content {
 +
  position: relative;
 +
  z-index: 3;
 +
  /* vertically center inside its parent */
 +
  display: table-cell;
 +
  vertical-align: middle;
 +
  padding: .6em 5%;
 +
}
 +
 
 +
.cd-schedule .event-modal .body {
 +
  position: relative;
 +
  width: 100%;
 +
  /* 70px is the .header height */
 +
  height: calc(100% - 70px);
 +
}
 +
 
 +
.cd-schedule .event-modal .event-info {
 +
  position: relative;
 +
padding: 1em;
 +
  z-index: 2;
 +
  line-height: 1.4;
 +
  height: 100%;
 +
overflow-x:hidden;
 +
overflow-y:auto;
 +
}
 +
 
 +
.cd-schedule .event-modal .event-info > div {
 +
  overflow: auto;
 +
  height: 100%;
 +
  padding: 1.4em 5%;
 +
}
 +
 
 +
.cd-schedule .event-modal .header-bg, .cd-schedule .event-modal .body-bg {
 +
  /* these are the morphing backgrounds - visible on desktop only */
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
}
 +
 
 +
.cd-schedule .event-modal .body-bg {
 +
  z-index: 1;
 +
  background: white;
 +
  -webkit-transform-origin: top left;
 +
      -ms-transform-origin: top left;
 +
          transform-origin: top left;
 +
}
 +
 
 +
.cd-schedule .event-modal .header-bg {
 +
  z-index: 2;
 +
  -webkit-transform-origin: top center;
 +
      -ms-transform-origin: top center;
 +
          transform-origin: top center;
 +
}
 +
 
 +
.cd-schedule .event-modal .close {
 +
  /* this is the 'X' icon */
 +
  position: absolute;
 +
  top: 0;
 +
  right: 0;
 +
  z-index: 3;
 +
  background: rgba(0, 0, 0, 0.1);
 +
  /* replace text with icon */
 +
  color: transparent;
 +
  white-space: nowrap;
 +
  text-indent: 100%;
 +
  height: 70px;
 +
  width: 70px;
 +
}
 +
 
 +
.cd-schedule .event-modal .close::before, .cd-schedule .event-modal .close::after {
 +
  /* these are the two lines of the 'X' icon */
 +
  content: '';
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  width: 2px;
 +
  height: 22px;
 +
  background: white;
 +
  -webkit-backface-visibility: hidden;
 +
  backface-visibility: hidden;
 +
}
 +
 
 +
.cd-schedule .event-modal .close::before {
 +
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
 +
      -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
 +
          transform: translateX(-50%) translateY(-50%) rotate(45deg);
 +
}
 +
 
 +
.cd-schedule .event-modal .close::after {
 +
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
 +
      -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
 +
          transform: translateX(-50%) translateY(-50%) rotate(-45deg);
 +
}
 +
 
 +
.cd-schedule .event-modal .event-date {
 +
  display: none;
 +
}
 +
 
 +
.cd-schedule .event-modal.no-transition {
 +
  -webkit-transition: none;
 +
  transition: none;
 +
}
 +
 
 +
.cd-schedule .event-modal.no-transition .header-bg, .cd-schedule .event-modal.no-transition .body-bg {
 +
  -webkit-transition: none;
 +
  transition: none;
 +
}
 +
.cd-schedule .event-modal .event-name {
 +
font-size: 1rem;
 +
}
 +
 
 +
@media only screen and (min-width: 800px) {
 +
  .cd-schedule .event-modal {
 +
    /* reset style */
 +
    right: auto;
 +
    width: auto;
 +
    height: auto;
 +
    -webkit-transform: translateX(0);
 +
        -ms-transform: translateX(0);
 +
            transform: translateX(0);
 +
    will-change: transform, width, height;
 +
    -webkit-transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
 +
    transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
 +
    transition: height .4s, width .4s, transform .4s, visibility .4s;
 +
    transition: height .4s, width .4s, transform .4s, visibility .4s, -webkit-transform .4s;
 +
    -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
            transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
  }
 +
  .cd-schedule .event-modal .header {
 +
    position: absolute;
 +
    display: block;
 +
    top: 0;
 +
    left: 0;
 +
    height: 100%;
 +
  }
 +
  .cd-schedule .event-modal .header .content {
 +
    /* reset style */
 +
    display: block;
 +
    padding: .8em;
 +
  }
 +
  .cd-schedule .event-modal .event-info > div {
 +
    padding: 2em 3em 2em 2em;
 +
  }
 +
  .cd-schedule .event-modal .body {
 +
    height: 100%;
 +
    width: auto;
 +
  }
 +
  .cd-schedule .event-modal .header-bg, .cd-schedule .event-modal .body-bg {
 +
    /* Force Hardware acceleration */
 +
    -webkit-transform: translateZ(0);
 +
            transform: translateZ(0);
 +
    will-change: transform;
 +
    -webkit-backface-visibility: hidden;
 +
            backface-visibility: hidden;
 +
  }
 +
  .cd-schedule .event-modal .header-bg {
 +
    -webkit-transition: -webkit-transform .4s;
 +
    transition: -webkit-transform .4s;
 +
    transition: transform .4s;
 +
    transition: transform .4s, -webkit-transform .4s;
 +
    -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
            transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
  }
 +
  .cd-schedule .event-modal .body-bg {
 +
    opacity: 0;
 +
    -webkit-transform: none;
 +
        -ms-transform: none;
 +
            transform: none;
 +
  }
 +
  .cd-schedule .event-modal .event-date {
 +
    display: none;
 +
  }
 +
  .cd-schedule .event-modal .close, .cd-schedule .event-modal .event-info {
 +
    opacity: 0;
 +
  }
 +
  .cd-schedule .event-modal .close {
 +
    width: 40px;
 +
    height: 40px;
 +
    background: transparent;
 +
  }
 +
  .cd-schedule .event-modal .close::after, .cd-schedule .event-modal .close::before {
 +
    background: #222222;
 +
    height: 16px;
 +
  }
 +
}
 +
 
 +
@media only screen and (min-width: 1000px) {
 +
  .cd-schedule .event-modal .header .content {
 +
    padding: 1.2em;
 +
  }
 +
}
 +
 
 +
.cd-schedule.modal-is-open .event-modal {
 +
  /* .modal-is-open class is added as soon as an event is selected */
 +
  -webkit-transform: translateX(0);
 +
      -ms-transform: translateX(0);
 +
          transform: translateX(0);
 +
  visibility: visible;
 +
}
 +
 
 +
.cd-schedule.modal-is-open .event-modal .event-info > div {
 +
  /* smooth scroll on iOS touch devices */
 +
  -webkit-overflow-scrolling: touch;
 +
}
 +
 
 +
@media only screen and (min-width: 800px) {
 +
  .cd-schedule.animation-completed .event-modal .close,
 +
  .cd-schedule.content-loaded.animation-completed .event-modal .event-info {
 +
    /* the .animation-completed class is added when the modal animation is completed
 +
the .content-loaded class is added when the modal content has been loaded (using ajax) */
 +
    opacity: 1;
 +
    -webkit-transition: opacity .2s;
 +
    transition: opacity .2s;
 +
  }
 +
  .cd-schedule.modal-is-open .body-bg {
 +
    opacity: 1;
 +
    -webkit-transition: -webkit-transform .4s;
 +
    transition: -webkit-transform .4s;
 +
    transition: transform .4s;
 +
    transition: transform .4s, -webkit-transform .4s;
 +
    -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
            transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
  }
 +
}
 +
 
 +
.cd-schedule .cover-layer {
 +
  /* layer between the content and the modal window */
 +
  position: fixed;
 +
  z-index: 2;
 +
  top: 0;
 +
  left: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  background: rgba(0, 0, 0, 0.8);
 +
  opacity: 0;
 +
  visibility: hidden;
 +
  -webkit-transition: opacity .4s, visibility .4s;
 +
  transition: opacity .4s, visibility .4s;
 +
}
 +
 
 +
.cd-schedule.modal-is-open .cover-layer {
 +
  opacity: 1;
 +
  visibility: visible;
 +
}
 +
 
 +
 
 +
#toc{
 +
display:none;
 +
}
 +
 
 +
 
 +
 
 +
@media only screen and (max-width: 575.98px) {}
 +
 
 +
@media only screen and (max-width: 767.98px) {}
 +
 
 +
@media only screen and (max-width: 991.98px) {}
 +
 
 +
@media only screen and (max-width: 1199.98px) {}
 +
   
 +
</style>
 +
 
 +
 
 +
 
 +
<div class="pictureTitle container-fluid text-center mb-0 align-items-center text-light">
 +
 
 +
    <div class="display-2 mb-0">
 +
    Notebook
 +
    </div>
 +
    <h4></h4>
  
 
</div>
 
</div>
−
<div class="showCase container-fluid jumbotron jumbotron-fluid text-center bg-white align-items-center text-light mb-0">
 
−
        <div class="row" style="">
 
−
            <div class="col-12 col-md-6">
 
−
               
 
−
            </div>
 
−
            <div class="col-12 col-md-6 p-5">
 
−
               
 
−
                <span class="d-block mt-5">
 
−
               
 
−
             
 
−
               
 
−
            </div>
 
−
        </div>
 
  
−
        <div class="row mt-4" style="">
+
<!--<p class="codyhouse">link to the site of Codyhouse: <a href="https://codyhouse.co/gem/schedule-template/">https://codyhouse.co/gem/schedule-template/</a></p>-->
−
         
+
   
−
        </div>
+
<div class="container-fluid text-center my-0 align-items-center text-light bg-phactory2">
  
−
     </div>
+
     <div class="display-4 py-2">
−
<div class="showCase container-fluid jumbotron jumbotron-fluid text-center bg-white align-items-center text-light mb-0">
+
    Cell Extract Optimization
−
        <div class="row" style="">
+
    </div>
−
            <div class="col-12 col-md-6">
+
−
               
+
−
            </div>
+
−
            <div class="col-12 col-md-6 p-5">
+
−
               
+
−
                <span class="d-block mt-5">
+
−
               
+
−
             
+
−
               
+
−
            </div>
+
−
        </div>
+
  
−
         <div class="row mt-4" style="">
+
</div>
−
         
+
<div class="cd-schedule loading">
−
        </div>
+
<div class="timeline">
 +
<ul>
 +
<li><span style="display: none;">09:00</span><span>April</span></li>
 +
<li><span style="display: none;">09:30</span><span>April</span></li>
 +
<li><span style="display: none;">10:00</span><span>May</span></li>
 +
<li><span style="display: none;">10:30</span><span>May</span></li>
 +
<li><span style="display: none;">11:00</span><span>June</span></li>
 +
<li><span style="display: none;">11:30</span><span>June</span></li>
 +
<li><span style="display: none;">12:00</span><span>July</span></li>
 +
<li><span style="display: none;">12:30</span><span>July</span></li>
 +
<li><span style="display: none;">13:00</span><span>August</span></li>
 +
<li><span style="display: none;">13:30</span><span>August</span></li>
 +
<li><span style="display: none;">14:00</span><span>September</span></li>
 +
<li><span style="display: none;">14:30</span><span>September</span></li>
 +
<li><span style="display: none;">15:00</span><span>October</span></li>
 +
<li><span style="display: none;">15:30</span><span>October</span></li>
 +
         </ul>
 +
</div> <!-- .timeline -->
 +
 
 +
<div class="events">
 +
<ul>
 +
<li class="events-group">
 +
<div class="top-info"><span></span></div>
 +
 
 +
<ul>
 +
<li class="single-event" data-start="11:30" data-end="13:00"  data-content="paramscreening" data-event="event-2" data-weekstart="week 6" data-weekend="week 7">
 +
<a href="#0">
 +
<em class="event-name"></em>
 +
</a>
 +
</li>   
 +
<li class="single-event" data-start="13:00" data-end="13:30" data-content="rosettagrowth" data-event="event-2" data-weekstart="week 1" data-weekend="week 2">
 +
<a href="#0">
 +
<em class="event-name"></em>
 +
</a>
 +
</li>
 +
<li class="single-event" data-start="13:30" data-end="14:00" data-content="screeningods" data-event="event-2" data-weekstart="week 1" data-weekend="week 2">
 +
<a href="#0">
 +
<em class="event-name"></em>
 +
</a>
 +
</li>
 +
<li class="single-event" data-start="14:00" data-end="14:30" data-content="screeningstrains" data-event="event-2" data-weekstart="week 1" data-weekend="week 2">
 +
<a href="#0">
 +
<em class="event-name"></em>
 +
</a>
 +
</li>
 +
   
 +
</ul>
 +
</li>
 +
           
 +
<li class="events-group">
 +
<div class="top-info"><span></span></div>
 +
 
 +
<ul>
 +
<li class="single-event" data-start="10:30" data-end="11:00" data-content="lysisopt" data-event="event-2" data-weekstart="week 1" data-weekend="week 2">
 +
<a href="#0">
 +
<em class="event-name"></em>
 +
</a>
 +
</li>
 +
<li class="single-event" data-start="11:00" data-end="11:30"  data-content="fluoscreen" data-event="event-2" data-weekstart="week 6" data-weekend="week 7">
 +
<a href="#0">
 +
<em class="event-name"></em>
 +
</a>
 +
</li>
 +
<li class="single-event" data-start="11:30" data-end="13:00" data-content="energyscreening" data-event="event-2" data-weekstart="week 3" data-weekend="week 5">
 +
<a href="#0">
 +
<em class="event-name"></em>
 +
</a>
 +
</li>
 +
<li class="single-event" data-start="14:00" data-end="14:30" data-content="bestsettings" data-event="event-2" data-weekstart="week 1" data-weekend="week 2">
 +
<a href="#0">
 +
<em class="event-name"></em>
 +
</a>
 +
</li>
 +
<li class="single-event" data-start="15:00" data-end="15:30" data-content="biotriplicate" data-event="event-2" data-weekstart="week 1" data-weekend="week 2">
 +
<a href="#0">
 +
<em class="event-name"></em>
 +
</a>
 +
</li>
 +
<!---
 +
<li class="single-event" data-start="13:00" data-end="13:30"  data-content="dnascreening" data-event="event-2" data-weekstart="week 6" data-weekend="week 7">
 +
<a href="#0">
 +
<em class="event-name">Screening DNA Concentration in Cell Extract?</em>
 +
</a>
 +
</li>
 +
--->   
 +
</ul>
 +
</li>
 +
           
 +
<li class="events-group">
 +
<div class="top-info"><span></span></div>
 +
 
 +
<ul>
 +
<li class="single-event" data-start="12:00" data-end="12:30"  data-content="upscaling" data-event="event-2" data-weekstart="week 6" data-weekend="week 7">
 +
<a href="#0">
 +
<em class="event-name"></em>
 +
</a>
 +
</li>   
 +
                    <li class="single-event" data-start="14:00" data-end="14:30" data-content="lyophilisation" data-event="event-2" data-weekstart="week 1" data-weekend="week 2">
 +
<a href="#0">
 +
<em class="event-name"></em>
 +
</a>
 +
</li>
 +
</ul>
 +
</li>
 +
 
 +
 
 +
<li class="events-group">
 +
<div class="top-info"><span></span></div>
 +
 
 +
<ul>
 +
<li class="single-event" data-start="10:00" data-end="10:30"  data-content="collabmaxico" data-event="event-2">
 +
<a href="#0">
 +
<em class="event-name"></em>
 +
</a>
 +
</li>
 +
<li class="single-event" data-start="11:00" data-end="11:30"  data-content="cloningqc" data-event="event-2">
 +
<a href="#0">
 +
<em class="event-name"></em>
 +
</a>
 +
</li>
 +
 
 +
 
 +
</ul>
 +
</li>
 +
</ul>
 +
</div>
 +
<div class="event-modal">
 +
<header class="header">
 +
<div class="content">
 +
<span class="event-date"></span>
 +
<h3 class="event-name"></h3>
 +
</div>
 +
 
 +
<div class="header-bg"></div>
 +
</header>
 +
 
 +
<div class="body">
 +
<div class="event-info"></div>
 +
<div class="body-bg"></div>
 +
</div>
 +
 
 +
<a href="#0" class="close">Close</a>
 +
</div>
 +
 
 +
<div class="cover-layer"></div>
 +
</div> <!-- .cd-schedule -->
 +
 
 +
 
 +
 
 +
<div class="row">
 +
    <div class="col-12 text-center">
 +
<div class="mt-2"><a class="PDFlinks text-center" target="_blank" href="">Primer List</a></div>
 +
</div>
 +
</div>
 +
 
 +
<script>
 +
 
 +
</script>
  
−
    </div>
 
 
</html>
 
</html>
 +
 
{{CAU_China/CSS/Footer}}
 
{{CAU_China/CSS/Footer}}

Revision as of 07:41, 18 June 2019










Phactory

Notebook

Cell Extract Optimization
  • 09:00April
  • 09:30April
  • 10:00May
  • 10:30May
  • 11:00June
  • 11:30June
  • 12:00July
  • 12:30July
  • 13:00August
  • 13:30August
  • 14:00September
  • 14:30September
  • 15:00October
  • 15:30October

Close
Primer List


&copy 2019 CAU_ESPA. All rights reserved
Website Design by Leland