Difference between revisions of "Team:Penn"

 
(272 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{Penn}}
+
{{Team:Penn/CSS}}
−
 
+
 
<html>
 
<html>
−
<head>
+
<head>
−
<title>Optimal | Pages | Basic Grid</title>
+
<!--<link rel="stylesheet" type="text/css" media="screen, projection" href="https://98c43ce680a0761e7c3ad3c1d7ae34f6de6db886.googledrive.com/host/0B9QyOqpKYA2gdGV2aGFRMWh4aXM/style.css" />-->
−
<meta charset="utf-8">
+
<title>University of Pennsylvania iGEM</title>
−
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
−
<link href="../layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
+
</div>
 +
</head>
 +
 
 
<style type="text/css">
 
<style type="text/css">
−
/* DEMO ONLY */
+
@import url(http://fonts.googleapis.com/css?family=Oswald:300,400,700);
−
.container .demo{text-align:center;}
+
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,200italic,300italic,400italic,600italic,700italic,900italic);
−
.container .demo div{padding:8px 0;}
+
 
−
.container .demo div:nth-child(odd){color:#FFFFFF; background:#CCCCCC;}
+
/* Override UGG site */
−
.container .demo div:nth-child(even){color:#FFFFFF; background:#979797;}
+
#main {width: 100%; padding:0;}
−
@media screen and (min-width:180px) and (max-width:900px){.container .demo div{margin-bottom:0;}}
+
.content-asset p {margin:0 auto;}
−
/* DEMO ONLY */
+
.breadcrumb {display:none;}
 +
 
 +
/* Helpers */
 +
/**************************/
 +
.margin-top-10 {padding-top:10px;}
 +
.margin-bot-10 {padding-bottom:10px;}
 +
 
 +
/* 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;}
 +
.ny {color: #3d3c3a;}
 +
.atw {color: #c48660;}
 +
 
 +
/* Section - Title */
 +
/**************************/
 +
#parallax-world-of-ugg .title {background: white; padding: 20px; margin:0 auto; text-align:center;}
 +
#parallax-world-of-ugg .title h1 {font-size:35px; letter-spacing:8px;}
 +
 
 +
/* Section - Block */
 +
/**************************/
 +
#parallax-world-of-ugg .block {background: white; padding: 60px; width:1200px; 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 - Block2 */
 +
/**************************/
 +
#parallax-world-of-ugg .block2 {background: white; padding: 60px; width:800px; margin:0 auto; text-align:justify;}
 +
#parallax-world-of-ugg .block2-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;}
 +
}
 +
@media screen and (max-width: 767px) {
 +
  #parallax-world-of-ugg .block {padding: 30px; width:420px;}
 +
  #parallax-world-of-ugg h2 {font-size:30px;}
 +
  #parallax-world-of-ugg .block {padding: 30px;}
 +
  #parallax-world-of-ugg .parallax-one, #parallax-world-of-ugg .parallax-two, #parallax-world-of-ugg .parallax-three {padding-top:100px; padding-bottom:100px;}
 +
}
 +
@media screen and (max-width: 479px) {
 +
  #parallax-world-of-ugg .block {padding: 30px 15px; width:290px;}
 +
}
 
</style>
 
</style>
−
</head>
+
 
−
<body id="top">
+
<div id="parallax-world-of-ugg">
−
<!-- ################################################################################################ -->
+
<div class="boxed">
−
<!-- ################################################################################################ -->
+
 
−
<!-- ################################################################################################ -->
+
<div><img src="https://static.igem.org/mediawiki/2015/d/d4/Pennigem_mainbanner_15_%281%29.png" width="100%" alt></div>
−
<!-- Top Background Image Wrapper -->
+
 
−
<div class="row100 bgded" style="background-image:url('../images/demo/backgrounds/01.png');">
+
<section>  
−
  <!-- ################################################################################################ -->
+
<div class="title">
−
  <!-- ################################################################################################ -->
+
<h1>OUR PROJECT</h1>
−
  <!-- ################################################################################################ -->
+
−
  <div class="wrapper row0">
+
−
    <div id="topbar" class="clear">
+
−
      <!-- ################################################################################################ -->
+
−
      <div class="fl_left">
+
−
        <ul class="nospace inline">
+
−
          <li><i class="fa fa-phone"></i> +00 (123) 456 7890</li>
+
−
          <li><i class="fa fa-envelope-o"></i> info@domain.com</li>
+
−
        </ul>
+
−
      </div>
+
−
      <div class="fl_right">
+
−
        <ul class="faico clear">
+
−
          <li><a class="faicon-facebook" href="#"><i class="fa fa-facebook"></i></a></li>
+
−
          <li><a class="faicon-pinterest" href="#"><i class="fa fa-pinterest"></i></a></li>
+
−
          <li><a class="faicon-twitter" href="#"><i class="fa fa-twitter"></i></a></li>
+
−
          <li><a class="faicon-dribble" href="#"><i class="fa fa-dribbble"></i></a></li>
+
−
          <li><a class="faicon-linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
+
−
          <li><a class="faicon-google-plus" href="#"><i class="fa fa-google-plus"></i></a></li>
+
−
          <li><a class="faicon-rss" href="#"><i class="fa fa-rss"></i></a></li>
+
−
        </ul>
+
−
      </div>
+
−
      <!-- ################################################################################################ -->
+
−
    </div>
+
−
  </div>
+
−
  <!-- ################################################################################################ -->
+
−
  <!-- ################################################################################################ -->
+
−
  <!-- ################################################################################################ -->
+
−
  <div class="wrapper row1">
+
−
    <header id="header" class="clear">
+
−
      <!-- ################################################################################################ -->
+
−
      <div id="logo" class="fl_left">
+
−
        <h1><a href="../index.html">Optimal</a></h1>
+
−
      </div>
+
−
      <nav id="mainav" class="fl_right">
+
−
        <ul class="clear">
+
−
          <li><a href="../index.html">Home</a></li>
+
−
          <li class="active"><a class="drop" href="#">Pages</a>
+
−
            <ul>
+
−
              <li><a href="gallery.html">Gallery</a></li>
+
−
              <li><a href="full-width.html">Full Width</a></li>
+
−
              <li><a href="sidebar-left.html">Sidebar Left</a></li>
+
−
              <li><a href="sidebar-right.html">Sidebar Right</a></li>
+
−
              <li class="active"><a href="basic-grid.html">Basic Grid</a></li>
+
−
            </ul>
+
−
          </li>
+
−
          <li><a class="drop" href="#">Dropdown</a>
+
−
            <ul>
+
−
              <li><a href="#">Level 2</a></li>
+
−
              <li><a class="drop" href="#">Level 2 + Drop</a>
+
−
                <ul>
+
−
                  <li><a href="#">Level 3</a></li>
+
−
                  <li><a href="#">Level 3</a></li>
+
−
                </ul>
+
−
              </li>
+
−
            </ul>
+
−
          </li>
+
−
          <li><a href="#">Link Text</a></li>
+
−
          <li><a href="#">Link Text</a></li>
+
−
        </ul>
+
−
      </nav>
+
−
      <!-- ################################################################################################ -->
+
−
    </header>
+
−
  </div>
+
−
  <!-- ################################################################################################ -->
+
−
  <!-- ################################################################################################ -->
+
−
  <!-- ################################################################################################ -->
+
 
</div>
 
</div>
−
<!-- End Top Background Image Wrapper -->
+
</section>
−
<!-- ################################################################################################ -->
+
 
−
<!-- ################################################################################################ -->
+
<table align="center">
−
<!-- ################################################################################################ -->
+
 
−
<div class="wrapper row2">
+
<tr>
−
  <div id="breadcrumb" class="clear">
+
<td>
−
    <!-- ################################################################################################ -->
+
<img src="https://static.igem.org/mediawiki/2015/9/9d/Photocoupler2015Penn.png" alt />
−
    <ul>
+
</td>
−
      <li><a href="#">Home</a></li>
+
 
−
      <li><a href="#">Lorem</a></li>
+
<td>
−
       <li><a href="#">Ipsum</a></li>
+
<div class="block2">
−
      <li><a href="#">Dolor</a></li>
+
       <p> Communication between cells is instrumental in coordinating population-level activity. In a process known as "quorum sensing," bacteria both secrete and sense autoinducer signaling molecules to enable synchronization of group gene expression paradigms. The synthetic biology community has rapidly adopted these quorum signaling pathways for use in programmed circuitry. However, chemical signals must diffuse between sender and receiver cells, limiting such communication to a common environment. In electronics, when electrical signals must be transferred between two circuits operating at incompatible voltages, electrical engineers use optocouplers, components that transfer information between isolated circuits via light. The 2015 Penn iGEM team presents a biological analog of the optocoupler, a cell-to-cell communication system in which a "sender" cell generates light via bioluminesence and a "receiver" cell expresses photoreceptors to enable light-dependent physiological responses. We show that light elicits a response in light-sensitive receivers and illuminated potential applications for this alternative form of cell communication.</p>
−
    </ul>
+
−
    <!-- ################################################################################################ -->
+
−
  </div>
+
 
</div>
 
</div>
−
<!-- ################################################################################################ -->
+
</td>
−
<!-- ################################################################################################ -->
+
</tr>
−
<!-- ################################################################################################ -->
+
 
−
<div class="wrapper row3">
+
</table>
−
  <main class="container clear">
+
 
−
    <!-- main body -->
+
 
−
    <!-- ################################################################################################ -->
+
 
−
    <div class="content">
+
 
−
      <!-- ################################################################################################ -->
+
 
−
      <h2>Half</h2>
+
<section>  
−
      <!-- ################################################################################################ -->
+
<div class="title">
−
      <div class="group btmspace-50 demo">
+
<h1>BREAKDOWN</h1>
−
        <div class="one_half first">1/2</div>
+
−
        <div class="one_half">1/2</div>
+
−
      </div>
+
−
      <!-- ################################################################################################ -->
+
−
      <h2>Quarter</h2>
+
−
      <!-- ################################################################################################ -->
+
−
      <div class="group btmspace-50 demo">
+
−
        <div class="one_quarter first">1/4</div>
+
−
        <div class="one_quarter">1/4</div>
+
−
        <div class="one_quarter">1/4</div>
+
−
        <div class="one_quarter">1/4</div>
+
−
      </div>
+
−
      <div class="group btmspace-50 demo">
+
−
        <div class="one_quarter first">1/4</div>
+
−
        <div class="one_quarter">1/4</div>
+
−
        <div class="two_quarter">2/4 or 1/2</div>
+
−
      </div>
+
−
      <div class="group btmspace-50 demo">
+
−
        <div class="one_quarter first">1/4</div>
+
−
        <div class="three_quarter">3/4</div>
+
−
      </div>
+
−
      <!-- ################################################################################################ -->
+
−
      <h2>Third</h2>
+
−
      <!-- ################################################################################################ -->
+
−
      <div class="group btmspace-50 demo">
+
−
        <div class="one_third first">1/3</div>
+
−
        <div class="one_third">1/3</div>
+
−
        <div class="one_third">1/3</div>
+
−
      </div>
+
−
      <div class="group demo">
+
−
        <div class="one_third first">1/3</div>
+
−
        <div class="two_third">2/3</div>
+
−
      </div>
+
−
      <!-- ################################################################################################ -->
+
−
    </div>
+
−
    <!-- ################################################################################################ -->
+
−
    <!-- / main body -->
+
−
    <div class="clear"></div>
+
−
  </main>
+
 
</div>
 
</div>
−
<!-- ################################################################################################ -->
+
</section>
−
<!-- ################################################################################################ -->
+
 
−
<!-- ################################################################################################ -->
+
<table align = "center">
−
<div class="wrapper row100 bgded" style="background-image:url('../images/demo/backgrounds/01.png');">
+
<tr>
−
  <div class="overlay">
+
<td width="33.33%"><a href="https://2015.igem.org/Team:Penn/Sender"><img id = "daicon" src="https://static.igem.org/mediawiki/2015/4/4b/Pennigem_sender_15.png" height="85%" width="85%"></a></td>
−
    <div id="newsletter" class="clear center">  
+
<td width="33.33%"><a href="https://2015.igem.org/Team:Penn/Receiver"><img id = "daicon" src="https://static.igem.org/mediawiki/2015/c/c0/Pennigem_receiver_15.png" height="85%" width="85%"></a></td>
−
      <!-- ################################################################################################ -->
+
<td width="33.33%"><a href="https://2015.igem.org/Team:Penn/Communication"><img id = "daicon" src="https://static.igem.org/mediawiki/2015/f/fc/Pennigem_comm_15.png" height="85%" width="85%"></a></td>
−
      <h2 class="uppercase font-x3 btmspace-50">Subscribe to our newsletter</h2>
+
</tr>
−
      <form class="inline clear" method="post" action="#">
+
</table>
−
        <input type="text" value="" placeholder="Email Here">
+
<br><br>
−
        <button class="btn" type="submit" title="Submit">Submit</button>
+
 
−
      </form>
+
 
−
      <!-- ################################################################################################ -->
+
 
−
    </div>
+
 
−
  </div>
+
 
 +
 
 +
<section>
 +
<div class="title">
 +
<h1>HUMAN PRACTICES</h1>
 
</div>
 
</div>
−
<!-- ################################################################################################ -->
+
</section>
−
<!-- ################################################################################################ -->
+
 
−
<!-- ################################################################################################ -->
+
<table align="center">
−
<div class="wrapper row4">
+
<tr>
−
  <footer id="footer" class="clear">  
+
<td>
−
    <!-- ################################################################################################ -->
+
<a href="https://2015.igem.org/Team:Penn/Educational_Toolbox"><img src="https://static.igem.org/mediawiki/2015/c/c3/Whatwillstandasatransferfunctionfornow3.png"></a></td>
−
    <div class="one_quarter first">
+
<td>
−
      <h6 class="title">Company Details</h6>
+
<div class="block2">
−
      <address class="btmspace-15">
+
      <p> Analagous to  our project goals, the Penn iGEM 2015 team has worked to further illuminate the parallels between genetic circuits and electrical circuits with the addition of the PennTunes Toolbox. Just as there is a distinct change in response when replacing an electric circuit component, the various genetic parts included in this toolbox clearly demonstrate the divergence in expression level due to a change in genetic part (promoter, RBS, etc). As an example, we have characterized one of the inverter strains in the toolbox that exhibits the relationship in the figure to the right.
−
      Company Name<br>
+
</p>
−
      Street Name &amp; Number<br>
+
 
−
      Town<br>
+
<p>Our aim is to increase the reach of synthetic biology by providing the tools and infrastructure that will make biotechnology more accessible in educational settings. Find out more about our vision of the future for synthetic biology and biotechnology tools by clicking on the graph! </p>
−
      Postcode/Zip
+
</div>
−
      </address>
+
</td>
−
      <ul class="nospace">
+
</tr>
−
        <li class="btmspace-10"><span class="fa fa-phone"></span> +00 (123) 456 7890</li>
+
</table>
−
        <li><span class="fa fa-envelope-o"></span> info@domain.com</li>
+
 
−
      </ul>
+
 
−
    </div>
+
 
−
    <div class="one_quarter">
+
 
−
      <h6 class="title">From The Blog</h6>
+
 
−
      <article>
+
 
−
        <h2 class="nospace font-x1"><a href="#">Maecenas pretium</a></h2>
+
<style type="text/css">
−
        <time class="smallfont" datetime="2045-04-06">Friday, 6<sup>th</sup> April 2045</time>
+
body { margin: 0;}
−
        <p>Vestibulumaccumsan egestibulum eu justo convallis augue estas aenean elit intesque sed.</p>
+
header {
−
      </article>
+
  padding: .5vw;
−
    </div>
+
  font-size: 0;
−
    <div class="one_quarter">
+
  display: -ms-flexbox;
−
      <h6 class="title">Sed consectetur enim</h6>
+
  -ms-flex-wrap: wrap;
−
      <ul class="nospace linklist">
+
  -ms-flex-direction: column;
−
        <li><a href="#">Nullam id est condimen</a></li>
+
  -webkit-flex-flow: row wrap;
−
        <li><a href="#">Praesent eget purus ut</a></li>
+
  flex-flow: row wrap;
−
        <li><a href="#">Ut quis augue quis neque</a></li>
+
  display: -webkit-box;
−
        <li><a href="#">Quisque varius erat sed</a></li>
+
  display: flex;
−
        <li><a href="#">Fusce quis dolor et</a></li>
+
}
−
      </ul>
+
header div {
−
    </div>
+
  -webkit-box-flex: auto;
−
    <div class="one_quarter">
+
  -ms-flex: auto;
−
      <h6 class="title">Proin et magna eget</h6>
+
  flex: auto;
−
      <ul class="nospace linklist">
+
  width: 200px;
−
        <li><a href="#">Vivamus semper lorem</a></li>
+
  margin: .5vw;
−
        <li><a href="#">Morbi facilisis dui</a></li>
+
}
−
        <li><a href="#">Maecenas eu massa</a></li>
+
header div img {
−
        <li><a href="#">Praesent iaculis</a></li>
+
  width: 100%;
−
        <li><a href="#">Praesent molestie</a></li>
+
  height: auto;
−
      </ul>
+
}
−
    </div>
+
@media screen and (max-width: 400px) {
−
    <!-- ################################################################################################ -->
+
  header div { margin: 0; }
−
  </footer>
+
  header { padding: 0; }
 +
}
 +
</style>
 +
 
 +
<section>  
 +
<div class="title">
 +
<h1>Our Team</h1>
 +
</div>
 +
</section>
 +
 
 +
<header>
 +
<div><img src="https://static.igem.org/mediawiki/2015/4/48/NikitaFrontPage.png" alt></div>
 +
<div><img src="https://static.igem.org/mediawiki/2015/8/86/HannahFrontPage.png" alt></div>
 +
<div><img src="https://static.igem.org/mediawiki/2015/a/a7/JaneFrontPage.png" alt></div>
 +
<div><img src="https://static.igem.org/mediawiki/2015/1/16/ShriramFrontPage.png" alt></div>
 +
<div><img src="https://static.igem.org/mediawiki/2015/e/e5/KarolFrontPage.png" alt></div>
 +
  <!-- images placed inside block elements to deal with a Firefox rendering bug affecting  scaled flexbox images -->
 +
</header>
 +
 
 +
 
 
</div>
 
</div>
−
<!-- ################################################################################################ -->
 
−
<!-- ################################################################################################ -->
 
−
<!-- ################################################################################################ -->
 
−
<div class="wrapper row5">
 
−
  <div id="copyright" class="clear">
 
−
    <!-- ################################################################################################ -->
 
−
    <p class="fl_left">Copyright &copy; 2015 - All Rights Reserved - <a href="#">Domain Name</a></p>
 
−
    <p class="fl_right">Template by <a target="_blank" href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
 
−
    <!-- ################################################################################################ -->
 
−
  </div>
 
 
</div>
 
</div>
−
<!-- ################################################################################################ -->
 
−
<!-- ################################################################################################ -->
 
−
<!-- ################################################################################################ -->
 
−
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
 
  
−
</body>
+
<div style = "background: url('https://static.igem.org/mediawiki/2015/e/e0/Footer.png'); position:inherit; height:250px; background-size: 100%; background-repeat: no-repeat; background-position:center top;">
 
</html>
 
</html>

Latest revision as of 19:40, 16 September 2015

University of Pennsylvania iGEM

OUR PROJECT

Communication between cells is instrumental in coordinating population-level activity. In a process known as "quorum sensing," bacteria both secrete and sense autoinducer signaling molecules to enable synchronization of group gene expression paradigms. The synthetic biology community has rapidly adopted these quorum signaling pathways for use in programmed circuitry. However, chemical signals must diffuse between sender and receiver cells, limiting such communication to a common environment. In electronics, when electrical signals must be transferred between two circuits operating at incompatible voltages, electrical engineers use optocouplers, components that transfer information between isolated circuits via light. The 2015 Penn iGEM team presents a biological analog of the optocoupler, a cell-to-cell communication system in which a "sender" cell generates light via bioluminesence and a "receiver" cell expresses photoreceptors to enable light-dependent physiological responses. We show that light elicits a response in light-sensitive receivers and illuminated potential applications for this alternative form of cell communication.

BREAKDOWN



HUMAN PRACTICES

Analagous to our project goals, the Penn iGEM 2015 team has worked to further illuminate the parallels between genetic circuits and electrical circuits with the addition of the PennTunes Toolbox. Just as there is a distinct change in response when replacing an electric circuit component, the various genetic parts included in this toolbox clearly demonstrate the divergence in expression level due to a change in genetic part (promoter, RBS, etc). As an example, we have characterized one of the inverter strains in the toolbox that exhibits the relationship in the figure to the right.

Our aim is to increase the reach of synthetic biology by providing the tools and infrastructure that will make biotechnology more accessible in educational settings. Find out more about our vision of the future for synthetic biology and biotechnology tools by clicking on the graph!

Our Team