Difference between revisions of "Team:UChicago"

Line 183: Line 183:
  
 
</style>
 
</style>
 +
 +
<ul class='timeline'>
 +
  <li class="year first">2013</li>
 +
  <li class='event offset-first'>
 +
    Something amazing happened today, but it's a secret
 +
  </li>
 +
  <li class='event' href="#">
 +
    Timeline.css is <b>dynamic</b>, <b>responsive</b> and optimized to <b>demonstrate events</b> in your life in a <b>simple and clear</b> way
 +
  </li>
 +
  <li class="event">
 +
    <a href="http://christian-fei.com" title="christian fei">
 +
    made with &lt;3 by <img src="https://s3-eu-west-1.amazonaws.com/cf.img/var/face.svg" alt="christian fei"/>
 +
    </a>
 +
  </li>
 +
  <li class="event">
 +
  <a href="https://codepen.io/christian-fei/pen/BJily">
 +
    Open source project on codepen.io
 +
    <img src="http://davidwalsh.name/demo/codepenLogo.png" alt=""/>
 +
  </a>
 +
  </li>
 +
  <li class='event'>
 +
    Look, a sleepy kitten: <br/>
 +
    <img src="http://ih2.redbubble.net/image.10311838.0354/flat,550x550,075,f.jpg"/>
 +
    <a href='http://ih2.redbubble.net/image.10311838.0354/flat,550x550,075,f.jpg'>&copy;</a>
 +
  </li>
 +
  <li class="year">2012</li>
 +
<li class="event offset-first">
 +
<p>To infinity  ... </p>
 +
    <img class='centered' src="http://upload.wikimedia.org/wikipedia/en/7/75/Buzz-lightyear-toy-story-3-wallpaper.jpg" alt=""/>
 +
<a href='http://upload.wikimedia.org/wikipedia/en/7/75/Buzz-lightyear-toy-story-3-wallpaper.jpg'>&copy;</a>
 +
</li>
 +
<li class="event">
 +
<p>... and beyond!</p>
 +
    <img class='centered' src="https://brandstyle.com.br/wp-content/uploads/2012/05/Woody-7.jpg" alt=""/>
 +
<a href='https://brandstyle.com.br/wp-content/uploads/2012/05/Woody-7.jpg'>&copy;</a>
 +
</li>
 +
</ul>
  
 
<style>
 
<style>
 +
@import "compass/css3";
 +
 +
/* v2.0 */
 +
/* v2.0 */
 +
/* v2.0 */
 +
/* v2.0 */
 +
/* v2.0 */
 +
$text-color: rgb(77, 77, 77);
 +
$bg-entry: rgb(80,80,80);
 +
 +
*,*:after,*:before{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
  
−
body {
 
−
    background-color: #474e5d;
 
−
    font-family: Helvetica, sans-serif;
 
−
}
 
  
−
/* The actual timeline (the vertical ruler) */
 
 
.timeline {
 
.timeline {
−
    position: relative;
+
  margin: 0px auto;
−
    max-width: 1200px;
+
  max-width: 40em;
−
    margin: 0 auto;
+
  overflow:hidden;
−
}
+
  height: auto;
 +
  position: relative;
 +
  padding:0px;
 +
  list-style-type:none;
 +
 
 +
  /*thanks to
 +
    https://twitter.com/JacoKoster
 +
  */
 +
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEElEQVQIW2NMTEz8z8gABAAPKwIlXWq1kgAAAABJRU5ErkJggg==);
 +
  background-repeat:repeat-y;
 +
  background-position:50% 0;
 +
 
 +
 
  
−
/* The actual timeline (the vertical ruler) */
+
    .year {
−
.timeline::after {
+
    background: $bg-entry;
−
     content: '';
+
    font-size: 3em;
−
     position: absolute;
+
    max-width: 4em;
−
     width: 6px;
+
    clear: both;
−
     background-color: white;
+
    margin: 1em auto 2em;
−
     top: 0;
+
    color: white;
−
     bottom: 0;
+
    border-radius: 30% / 100%;
−
     left: 50%;
+
    text-align: center;
−
     margin-left: -3px;
+
    margin-top: 2em;
−
}
+
   
 +
    &:first-of-type {
 +
      margin-top: 0 !important;
 +
    }
 +
  }
 +
 
 +
  /*  
 +
    elements 1,(2),3,(4), etc.
 +
    elements in brackets inherit these properties, some are overridden below (2n)
 +
    beginning at 0
 +
  */
 +
  .event {
 +
    position:relative;
 +
    text-align:center;
 +
     float: right;
 +
     clear: right;  
 +
     width: 45%;
 +
     margin: 1em 2.5%;
 +
   
 +
    border-radius: 5px;
 +
     list-style-type: none;
 +
     display: block;
 +
     padding: .4em;
 +
     background: white;
 +
    z-index: 15;
 +
   
 +
    color: $text-color;
 +
    border: 1px solid lighten($bg-entry,30%);
 +
    text-decoration: none;
  
−
/* Container around content */
+
    -webkit-transition: background .15s linear;
−
.container {
+
    -moz-transition: background .15s linear;
−
     padding: 10px 40px;
+
     -ms-transition: background .15s linear;
−
     position: relative;
+
     -o-transition: background .15s linear;
−
     background-color: inherit;
+
     transition: background .15s linear;
−
     width: 50%;
+
   
−
}
+
    &.featured {
 +
      width: 95% !important;
 +
      background: lighten(#ccc,11%);
 +
     
 +
      &:after, &:before {
 +
        display: none;
 +
      }
 +
    }
 +
   
 +
    @media all and (max-width: 600px) {
 +
      width: 85%;
 +
     }   
 +
   
 +
    &.offset-first {
 +
      margin-top: -1.5em!important;
 +
    }
 +
   
 +
    img {
 +
      margin-top: 10px;
 +
      max-width: 100%;
 +
    }
  
−
/* The circles on the timeline */
+
    &:hover {
−
.container::after {
+
      background: lighten($bg-entry,60%);
−
    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 */
+
      &:after {
−
.left {
+
        background: $bg-entry;
−
     left: 0;
+
      }
 +
    }
 +
   
 +
    &:nth-of-type(2n) {
 +
      float: left;
 +
      clear: left;
 +
        @media all and(min-width:600px){
 +
          margin-top:2em;
 +
        }
 +
     }
 +
     
 +
    &:after {     
 +
      @media all and (min-width: 650px) {
 +
        display: block;
 +
        content: ' ';
 +
        height: 9px; width: 9px;
 +
        background: lighten($bg-entry,30%);
 +
        border-radius: 50%;
 +
        position:absolute;
 +
        left: -5%;
 +
        top: 1.5em;
 +
        border: 2px solid white;
 +
      }
 +
    }
 +
     
 +
    &:nth-child(2n):after {
 +
      right: -5%;
 +
      /* reset the standard declaration I defined before*/
 +
      left: auto;
 +
    }
 +
  }
 
}
 
}
  
−
/* 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;
+
.padd {
−
   }
+
  display:block;padding: 10px;
−
 
+
   &.center {
−
  /* Make all right containers behave like the left ones */
+
     text-align:center;
−
  .right {
+
−
     left: 0%;
+
 
   }
 
   }
 
}
 
}
−
</style>
 
−
</head>
 
−
<body>
 
  
−
<div class="timeline">
+
.ad {
−
  <div class="container left">
+
   display: block;
−
    <div class="content">
+
   background: rgba(50,50,50,0.5);
−
      <h2>2017</h2>
+
   color: white;
−
      <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>
+
   text-decoration: none;
−
    </div>
+
   text-align:center;
−
  </div>
+
   padding: 15px;
−
  <div class="container right">
+
   font-weight: 800;
−
    <div class="content">
+
   border-bottom: 2px solid black;
−
      <h2>2016</h2>
+
   border-top: 2px solid black;
−
      <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>
+
  
 +
a{
 +
text-decoration:none;
 +
color:black;
 +
}
 +
</style>
  
  

Revision as of 07:47, 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.