Difference between revisions of "Team:UChicago"

Line 183: Line 183:
  
 
</style>
 
</style>
 +
 +
<style>
 +
* {
 +
    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 all 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>
 +
</head>
 +
<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>
  
  

Revision as of 07:43, 31 October 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
Results
Improve
Attributions
PARTS
SAFETY
PUBLIC ENGAGEMENT

Genehackers is a recognized undergraduate student association with the University of Chicago. Founded in 2013, our organization aims to raise awareness about synthetic biology through community and research. We have competed in the iGem competition since the founding of our group. Our team has created innovative projects that bring synthetic biology to the center of the laboratory experience.
This year, UChicago Genehackers has set out to design the first yeast centromeric plasmid for Pichia pastors.
Our team has already made significant strides towards creating the proposed centromeric plasmid vector. We have grown psB1C3mut in LB+CAM (chloramphenicol), psD000 in LB+CAM and drop-out arginine plates and psD001 in LB+CAM. Additionally, we have amplified five potential centromeric regions in total from the chromosomal DNA of Pichia pastors.
Although GeneHackers has made significant progress in our experiment, we still have some parts of our experiment that have not been achieved yet. We need to Gibson assembly various chromosomal sequences into psD001and perform assays of this plasmid in Pichia pastoris. Furthermore, if we are successful in creating the centromeric plasmid, we hope to incorporate the plasmid within the bioengineering and the industrial fields. Here, we want to test the efficiency and practicality of our plasmid within human environments. After these rounds of experimentation, we want to come back to the laboratory and improve our research with this plasmid. Hopefully, we will be able to work toward a final centromeric plasmid that will improve the course of scientific research.

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.