Difference between revisions of "Team:Penn/Overview"

 
(99 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Team:Penn/CSS}}
 
{{Team:Penn/CSS}}
 
<html>
 
<html>
 +
<head>
 +
<!--<link rel="stylesheet" type="text/css" media="screen, projection" href="https://98c43ce680a0761e7c3ad3c1d7ae34f6de6db886.googledrive.com/host/0B9QyOqpKYA2gdGV2aGFRMWh4aXM/style.css" />-->
 +
<title>University of Pennsylvania iGEM</title>
 +
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
 +
</div>
 +
</head>
 
<style type="text/css">
 
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
+
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700);
body {
+
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
    margin: 5px 20px;
+
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iNiIgaGVpZ2h0PSI2Ij4KPHJlY3Qgd2lkdGg9IjYiIGhlaWdodD0iNiIgZmlsbD0iI2VlZWVlZSI+PC9yZWN0Pgo8ZyBpZD0iYyI+CjxyZWN0IHdpZHRoPSIzIiBoZWlnaHQ9IjMiIGZpbGw9IiNlNmU2ZTYiPjwvcmVjdD4KPHJlY3QgeT0iMSIgd2lkdGg9IjMiIGhlaWdodD0iMiIgZmlsbD0iI2Q4ZDhkOCI+PC9yZWN0Pgo8L2c+Cjx1c2UgeGxpbms6aHJlZj0iI2MiIHg9IjMiIHk9IjMiPjwvdXNlPgo8L3N2Zz4=");
+
    font-family: 'Open Sans';
+
    font-weight: 300;  
+
}
+
  
h2 {
+
/* Override UGG site */
    margin-bottom: 30px;
+
#main {width: 100%; padding:0;}
    color: #4679bd;
+
.content-asset p {margin:0 auto;}
    font-weight: 400;
+
.breadcrumb {display:none;}
    text-align: center;
+
}
+
  
p.footer {
+
/* Helpers */
    margin-bottom: 20px;
+
/**************************/
    color: #999999;
+
.margin-top-10 {padding-top:10px;}
    font-size: 18px;
+
.margin-bot-10 {padding-bottom:10px;}
    text-align: center;
+
 
}
+
/* Typography */
 +
/**************************/
 +
#parallax-world-of-ugg h1 {font-family:'Oswald', sans-serif; font-size:100px; font-weight:600; text-transform: uppercase; color:black; padding:10px; margin:0;}
 +
#parallax-world-of-ugg h2 {font-family:'Oswald', sans-serif; font-size:70px; letter-spacing:10px; text-align:center; color:white; font-weight:400; text-transform:uppercase; z-index:10; opacity:.8;}
 +
#parallax-world-of-ugg h3 {font-family:'Oswald', sans-serif; font-size:14px; line-height:0; font-weight:400; letter-spacing:8px; text-transform: uppercase; color:black;}
 +
#parallax-world-of-ugg p {font-family:'Source Sans Pro', sans-serif; font-weight:400; font-size:18px; line-height:24px;}
 +
.first-character {font-weight:400; float: left; font-size: 84px; line-height: 64px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: 'Source Sans Pro', sans-serif;}
  
/* -----------------------------------------------
+
.sc {color: #3b8595;}
* Timeline
+
.ny {color: #3d3c3a;}
* --------------------------------------------- */
+
.atw {color: #c48660;}
.timeline {
+
 
    list-style: none;
+
/* Section - Title */
    padding: 10px 0;
+
/**************************/
    position: relative;
+
#parallax-world-of-ugg .title {background: white; padding: 20px; margin:0 auto; text-align:center;}
    font-weight: 300;
+
#parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;}
 +
 
 +
/* Section - Block */
 +
/**************************/
 +
#parallax-world-of-ugg .block {background: white; padding: 60px; width:1020px; margin:0 auto; text-align:justify;}
 +
#parallax-world-of-ugg .block-gray {background: #f2f2f2;padding: 60px;}
 +
#parallax-world-of-ugg .section-overlay-mask {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.70;}
 +
 
 +
/* Section - Parallax */
 +
/**************************/
 +
#parallax-world-of-ugg .parallax-one {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://static.igem.org/mediawiki/2015/0/06/Bulb-in-the-sunset-light-hd-background.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: top center;}
 +
#parallax-world-of-ugg .parallax-two {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://static.igem.org/mediawiki/2015/0/07/Light.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
 +
#parallax-world-of-ugg .parallax-three {padding-top: 200px; padding-bottom: 200px; overflow: hidden; position: relative; width: 100%; background-image: url(https://static.igem.org/mediawiki/2015/d/df/Communciation.jpg); background-attachment: fixed; background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; background-repeat: no-repeat; background-position: center center;}
 +
 
 +
/* Extras */
 +
/**************************/
 +
#parallax-world-of-ugg .line-break {border-bottom:1px solid black; width: 150px; margin:0 auto;}
 +
 
 +
/* Media Queries */
 +
/**************************/
 +
@media screen and (max-width: 959px) and (min-width: 768px) {
 +
  #parallax-world-of-ugg .block {padding: 40px; width:620px;}
 
}
 
}
.timeline:before {
+
@media screen and (max-width: 767px) {
    top: 0;
+
  #parallax-world-of-ugg .block {padding: 30px; width:420px;}
    bottom: 0;
+
  #parallax-world-of-ugg h2 {font-size:30px;}
    position: absolute;
+
  #parallax-world-of-ugg .block {padding: 30px;}
    content:" ";
+
  #parallax-world-of-ugg .parallax-one, #parallax-world-of-ugg .parallax-two, #parallax-world-of-ugg .parallax-three {padding-top:100px; padding-bottom:100px;}
    width: 2px;
+
    background: #ffffff;
+
    left: 50%;
+
    margin-left: -1.5px;
+
 
}
 
}
.timeline > li {
+
@media screen and (max-width: 479px) {
    margin-bottom: 20px;
+
  #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;}
    position: relative;
+
    width: 50%;
+
    float: left;
+
    clear: left;
+
}
+
.timeline > li:before, .timeline > li:after {
+
    content:" ";
+
    display: table;
+
}
+
.timeline > li:after {
+
    clear: both;
+
}
+
.timeline > li:before, .timeline > li:after {
+
    content:" ";
+
    display: table;
+
}
+
.timeline > li:after {
+
    clear: both;
+
}
+
.timeline > li > .timeline-panel {
+
    width: calc(100% - 25px);
+
    width: -moz-calc(100% - 25px);
+
    width: -webkit-calc(100% - 25px);
+
    float: left;
+
    border: 1px solid #dcdcdc;
+
    background: #ffffff;
+
    position: relative;
+
}
+
.timeline > li > .timeline-panel:before {
+
    position: absolute;
+
    top: 26px;
+
    right: -15px;
+
    display: inline-block;
+
    border-top: 15px solid transparent;
+
    border-left: 15px solid #dcdcdc;
+
    border-right: 0 solid #dcdcdc;
+
    border-bottom: 15px solid transparent;
+
    content:" ";
+
}
+
.timeline > li > .timeline-panel:after {
+
    position: absolute;
+
    top: 27px;
+
    right: -14px;
+
    display: inline-block;
+
    border-top: 14px solid transparent;
+
    border-left: 14px solid #ffffff;
+
    border-right: 0 solid #ffffff;
+
    border-bottom: 14px solid transparent;
+
    content:" ";
+
}
+
.timeline > li > .timeline-badge {
+
    color: #ffffff;
+
    width: 24px;
+
    height: 24px;
+
    line-height: 50px;
+
    text-align: center;
+
    position: absolute;
+
    top: 16px;
+
    right: -12px;
+
    z-index: 100;
+
}
+
.timeline > li.timeline-inverted > .timeline-panel {
+
    float: right;
+
}
+
.timeline > li.timeline-inverted > .timeline-panel:before {
+
    border-left-width: 0;
+
    border-right-width: 15px;
+
    left: -15px;
+
    right: auto;
+
}
+
.timeline > li.timeline-inverted > .timeline-panel:after {
+
    border-left-width: 0;
+
    border-right-width: 14px;
+
    left: -14px;
+
    right: auto;
+
}
+
.timeline-badge > a {
+
    color: #ffffff !important;
+
}
+
.timeline-badge a:hover {
+
    color: #dcdcdc !important;
+
}
+
.timeline-title {
+
    margin-top: 0;
+
    color: inherit;
+
}
+
.timeline-heading h4 {
+
    font-weight: 400;
+
    padding: 0 15px;
+
    color: #4679bd;
+
}
+
.timeline-body > p, .timeline-body > ul {
+
    padding: 10px 15px;
+
    margin-bottom: 0;
+
}
+
.timeline-footer {
+
    padding: 5px 15px;
+
    background-color:#f4f4f4;
+
}
+
.timeline-footer p { margin-bottom: 0; }
+
.timeline-footer > a {
+
    cursor: pointer;
+
    text-decoration: none;
+
}
+
.timeline > li.timeline-inverted {
+
    float: right;
+
    clear: right;
+
}
+
.timeline > li:nth-child(2) {
+
    margin-top: 60px;
+
}
+
.timeline > li.timeline-inverted > .timeline-badge {
+
    left: -12px;
+
}
+
.no-float {
+
    float: none !important;
+
}
+
@media (max-width: 767px) {
+
    ul.timeline:before {
+
        left: 40px;
+
    }
+
    ul.timeline > li {
+
        margin-bottom: 0px;
+
        position: relative;
+
        width:100%;
+
        float: left;
+
        clear: left;
+
    }
+
    ul.timeline > li > .timeline-panel {
+
        width: calc(100% - 65px);
+
        width: -moz-calc(100% - 65px);
+
        width: -webkit-calc(100% - 65px);
+
    }
+
    ul.timeline > li > .timeline-badge {
+
        left: 28px;
+
        margin-left: 0;
+
        top: 16px;
+
    }
+
    ul.timeline > li > .timeline-panel {
+
        float: right;
+
    }
+
    ul.timeline > li > .timeline-panel:before {
+
        border-left-width: 0;
+
        border-right-width: 15px;
+
        left: -15px;
+
        right: auto;
+
    }
+
    ul.timeline > li > .timeline-panel:after {
+
        border-left-width: 0;
+
        border-right-width: 14px;
+
        left: -14px;
+
        right: auto;
+
    }
+
    .timeline > li.timeline-inverted {
+
        float: left;
+
        clear: left;
+
        margin-top: 30px;
+
        margin-bottom: 30px;
+
    }
+
    .timeline > li.timeline-inverted > .timeline-badge {
+
        left: 28px;
+
    }
+
 
}
 
}
 
</style>
 
</style>
<h2>Super Simple Bootstrap Responsive Timeline</h2>
 
  
<ul class="timeline">
+
<div id="parallax-world-of-ugg">
    <li>
+
 
        <div class="timeline-badge">
+
<section>
          <a><i class="fa fa-circle" id=""></i></a>
+
  <div class="title">
        </div>
+
  <h1>PROJECT OVERVIEW</h1>
        <div class="timeline-panel">
+
</div>
            <div class="timeline-heading">
+
  <div class="block">
                <h4>Timeline Event</h4>
+
      <p class="margin-top-10"> The emerging field of optogenetics has driven development of truly fascinating bacterial systems. Scientists have been able to achieve optogenetic control of cell function using engineered photoreceptors, edge detection of an illuminated design, and even patterns on cells with fluorescent proteins. The field still harbors a lot of potential that has yet to be explored. (S Karig)</p>
            </div>
+
     <p class="margin-top-10">The Penn 2015 iGEM team attempted to exploit this potential by using light to drive cell communication.  Talk between bacterial populations, known as quorum sensing is reliant on diffusion of chemical autoinducers produced by the cell.  This process enables microorganisms to modify gene expression as a function of cell density. The reliance of quorum sensing on chemical diffusion restricts communication to within common environments and compatible conditions. However, the use of bioluminescent sender cells and light-sensitive receiver cells to drive talk between cells overcomes these limitations. The system is effective across boundaries, in different environments, and in populations with different growth conditions or antibiotic resistances. Additionally, future research teams can also take advantage of the orthogonality of light to chemicals and spatiotemporal control of light in any future project endeavors.</p>
            <div class="timeline-body">
+
<p class="margin-top-10">The design of our project was inspired by an electrical engineering system known as a photocoupler (pictured below.) </p>
                <p>Invitamus me testatur sed quod non dum animae tuae lacrimis ut libertatem deum rogus aegritudinis causet. Dicens hoc contra serpentibus isto.</p>
+
 
            </div>
+
 
            <div class="timeline-footer">
+
<table align = "center">
                <p class="text-right">Feb-21-2014</p>
+
<tr>
            </div>
+
<td><img id = "daicon" src="https://static.igem.org/mediawiki/2015/4/4a/Photocoupler.png"></a></td>
        </div>
+
</table>
     </li>
+
 
   
+
<p class="margin-top-10"><br>This component works by transferring electrical signals between isolated circuits by using light. Our system is a biological analog of the optocoupler, a cell-to-cell communication system in which a "sender" cell transfers a light signal to an isolated "receiver" cell, which expresses photoreceptors to enable a light-dependent response. (CITATION) Please click on the links below to learn more about the individual components of our project. </p>
    <li class="timeline-inverted">
+
  </div>
        <div class="timeline-badge">
+
            <a><i class="fa fa-circle invert" id=""></i></a>
+
        </div>
+
        <div class="timeline-panel">
+
            <div class="timeline-heading">
+
                <h4>Timeline Event</h4>
+
            </div>
+
            <div class="timeline-body">
+
                <p>Stranguillione in deinde cepit roseo commendavit patris super color est se sed. Virginis plus plorantes abscederem assignato ipsum ait regem Ardalio nos filiae Hellenicus mihi cum. Theophilo litore in lucem in modo invenit quasi nomen magni ergo est se est Apollonius, habet clementiae venit ad nomine sed dominum depressit filia navem.</p>
+
            </div>
+
            <div class="timeline-footer">
+
                <p class="text-right">Feb-23-2014</p>
+
            </div>
+
        </div>
+
    </li>
+
   
+
    <li>
+
        <div class="timeline-badge">
+
            <a><i class="fa fa-circle" id=""></i></a>
+
        </div>
+
        <div class="timeline-panel">
+
            <div class="timeline-heading">
+
                <h4>Timeline Event</h4>
+
            </div>
+
            <div class="timeline-body">
+
                <p>Advenientibus aliorum eam ad per te sed. Facere debetur aut veneris accedens.</p>
+
            </div>
+
            <div class="timeline-footer">
+
                <p class="text-right">Feb-23-2014</p>
+
            </div>
+
        </div>
+
    </li>
+
   
+
    <li class="timeline-inverted">
+
        <div class="timeline-badge">
+
            <a><i class="fa fa-circle invert" id=""></i></a>
+
        </div>
+
        <div class="timeline-panel">
+
            <div class="timeline-heading">
+
                <h4>Timeline Event</h4>
+
            </div>
+
            <div class="timeline-body">
+
                <p>Volvitur ingreditur id ait mea vero cum autem quod ait Cumque ego illum vero cum unde beata. Commendavi si non dum est in. Dionysiadem tuos ratio puella ut casus, tunc lacrimas effunditis magister cives Tharsis. Puellae addita verbaque' capellam sanctissima quid, apollinem existimas filiam rex cum autem quod tamen adnuente rediens eam est se in. Peracta licet ad nomine Maria non ait in modo compungi mulierem volutpat.</p>
+
            </div>
+
            <div class="timeline-footer">
+
                <p class="text-right">Feb-27-2014</p>
+
            </div>
+
        </div>
+
    </li>
+
   
+
    <li>
+
        <div class="timeline-badge">
+
            <a><i class="fa fa-circle" id=""></i></a>
+
        </div>
+
        <div class="timeline-panel">
+
            <div class="timeline-heading">
+
                <h4>Timeline Event</h4>
+
            </div>
+
            <div class="timeline-body">
+
                <p>Adfertur guttae sapientiae ducitur est Apollonius ut a a his domino Lycoridem in lucem. Theophile atque bona dei cenam veniebant est cum. Iusto opes mihi Tyrum in modo compungi mulierem ubi augue eiusdem ordo quos vero diam omni catervis famulorum. Bene dictis ut diem finito servis unde.</p>
+
            </div>
+
            <div class="timeline-footer">
+
                <p class="text-right">Mar-01-2014</p>
+
            </div>
+
        </div>
+
    </li>
+
   
+
    <li  class="timeline-inverted">
+
        <div class="timeline-badge">
+
            <a><i class="fa fa-circle invert" id=""></i></a>
+
        </div>
+
        <div class="timeline-panel">
+
            <div class="timeline-heading">
+
                <h4>Timeline Event</h4>
+
            </div>
+
            <div class="timeline-body">
+
                <p>Crede respiciens loco dedit beneficio ad suis alteri si puella eius in. Acceptis codicello lenonem in deinde plectrum anni ipsa quod eam est Apollonius.</p>
+
            </div>
+
            <div class="timeline-footer primary">
+
                <p class="text-right">Mar-02-2014</p>
+
            </div>
+
        </div>
+
    </li>
+
    <li class="clearfix no-float"></li>
+
</ul>
+
  
<p class="footer">Icons by <a href="http://fortawesome.github.io/Font-Awesome/">FontAwesome 4.1 Icons</a>.<br />
+
<table align = "center">
  Created by <a href="http://jenniferperrin.com">Jennifer Perrin</a>
+
<tr>
</p>
+
<td width="25%"><a href="https://2015.igem.org/Team:Penn/Sender"><img id = "daicon" src="https://static.igem.org/mediawiki/2015/8/88/2015SENDERLINK.png" height="50%" width="95%"></a></td>
 +
<td width="25%"><a href="https://2015.igem.org/Team:Penn/Receiver"><img id = "daicon" src="https://static.igem.org/mediawiki/2015/1/1f/2015RECEIVERLINK.png" height="50%" width="95%"></a></td>
 +
<td width="25%"><a href="https://2015.igem.org/Team:Penn/Communication"><img id = "daicon" src="https://static.igem.org/mediawiki/2015/8/83/COMMEDIT.png" height="50%" width="95%"></a></td>
 +
<td width="25%"><a href="https://2015.igem.org/Team:Penn/Educational_Toolbox"><img id = "daicon" src="https://static.igem.org/mediawiki/2015/6/63/COMMEDIhumanp.png" height="50%" width="95%"></a></td>
 +
</tr>
 +
</table>
 +
</section>
 
</html>
 
</html>

Latest revision as of 03:58, 19 September 2015

University of Pennsylvania iGEM

PROJECT OVERVIEW

The emerging field of optogenetics has driven development of truly fascinating bacterial systems. Scientists have been able to achieve optogenetic control of cell function using engineered photoreceptors, edge detection of an illuminated design, and even patterns on cells with fluorescent proteins. The field still harbors a lot of potential that has yet to be explored. (S Karig)

The Penn 2015 iGEM team attempted to exploit this potential by using light to drive cell communication. Talk between bacterial populations, known as quorum sensing is reliant on diffusion of chemical autoinducers produced by the cell. This process enables microorganisms to modify gene expression as a function of cell density. The reliance of quorum sensing on chemical diffusion restricts communication to within common environments and compatible conditions. However, the use of bioluminescent sender cells and light-sensitive receiver cells to drive talk between cells overcomes these limitations. The system is effective across boundaries, in different environments, and in populations with different growth conditions or antibiotic resistances. Additionally, future research teams can also take advantage of the orthogonality of light to chemicals and spatiotemporal control of light in any future project endeavors.

The design of our project was inspired by an electrical engineering system known as a photocoupler (pictured below.)


This component works by transferring electrical signals between isolated circuits by using light. Our system is a biological analog of the optocoupler, a cell-to-cell communication system in which a "sender" cell transfers a light signal to an isolated "receiver" cell, which expresses photoreceptors to enable a light-dependent response. (CITATION) Please click on the links below to learn more about the individual components of our project.