Team:Penn

From 2013.igem.org

(Difference between revisions)
 
(290 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<html lang="en">
-
  <head>
+
<head>
-
    <title>Home</title>
+
-
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
-
    <!-- Bootstrap -->
+
-
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEeUFaR1lNWFZWMnc" rel="stylesheet" media="screen">
+
-
        <link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
+
-
        <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
+
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
+
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEOFVQV0ZLWEZqN2M"></script>
+
-
   
+
     <title>Penn iGEM</title>
-
     <style>
+
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEVHRaZEdUVGo5cjA" type="text/css" rel="stylesheet"/> <!--css-->
-
        /*fonts/headings*/
+
-
        h4 {
+
-
            text-align: left;
+
-
        }
+
-
h1 {
+
<script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script> <!--jquery-->
-
text-align: center;
+
-
}
+
-
 
+
-
  /* CUSTOMIZE THE CAROUSEL
+
-
    -------------------------------------------------- */
+
-
 
+
-
 
+
-
 
+
-
    .carousel-control {
+
-
      height: 80px;
+
-
      margin-top: 0;
+
-
      font-size: 75px;
+
-
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
+
-
      background-color: transparent;
+
-
      border: 0;
+
-
      z-index: 10;
+
-
color: rgb(200,200,200);
+
-
    }
+
-
/*
+
      
      
-
.carousel img {
+
<script>
-
  min-width: 100%;
+
        $(document).ready(function($) {
-
}
+
-
 
+
-
 
+
-
    .carousel-caption {
+
-
      background-color: rgba(0,0,0,.3);
+
-
    }
+
-
   
+
-
    .carousel-caption h1,
+
-
    .carousel-caption .lead {
+
-
      margin: 0;
+
-
      line-height: 1.25;
+
-
      color: #fff;
+
-
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
+
-
    }*/
+
-
   
+
-
    #main_area{
+
-
      margin: 100px 150px 10px 150px;
+
-
     
+
-
    }
+
-
#myCarousel {
+
$('.nav_wrap').load('https://googledrive.com/host/0B4ZBZOYYKBzEclFHMmpZcVlydmc');
-
  width: 80%;
+
  });
-
}
+
     </script>
-
      
+
</head>
-
.item {
+
<body>
-
  height: 300px;
+
<div id = "banner_wrap">
-
  overflow: hidden;
+
<div class = "banner"></div>
-
}
+
</div>
 +
<div id = "nav_holder">
 +
<div class = "nav_wrap"></div>
 +
</div>
 +
<div id="text">
 +
<div class="textwrap">
 +
<br>
 +
<br><center><a href = 'https://docs.google.com/forms/d/188iefj_j6gBvrHC0IS3rG2zBelaVuy-JddYNN7QF8_Y/viewform'>Interested in joining the team? Submit your application for Penn iGEM 2014 here. </a></center>
 +
<br>
 +
<br>
 +
<center><object width="900" height="506"><param name="movie" value="//www.youtube.com/v/YJQniNpnU9Q?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/YJQniNpnU9Q?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="800" height="506" allowscriptaccess="always" allowfullscreen="true"></embed></object></center>
-
.span2 {
+
<center><TABLE  CELLSPACING="10" CELLPADDING="1">
-
  overflow: hidden;
+
-
  height: 80px;
+
-
}
+
-
.thumbnail {
+
<TR>
-
overflow: hidden;
+
-
}
+
-
/*Position/size hero unit*/
+
<TD ALIGN = "center" width='240'> <TABLE
-
.hero-unit {
+
style="border:10px inset #CF8035;">
-
    width: 375px;
+
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/MaGellinToolbox'><IMG SRC="http://farm6.staticflickr.com/5523/10529365546_355d2fe7fc.jpg" width="240" height="auto"></a></TD></TR>
-
margin-left: 20px;
+
</TABLE><br><a href='https://2013.igem.org/Team:Penn/MaGellinToolbox'>Constructed a toolbox for developing site-specific DNA methylases</a></TD>
-
margin-top: 10px;
+
-
padding-left: 75px;
+
-
padding:right: 100px;
+
-
padding-bottom: 20px;
+
-
text-align: left;
+
-
}
+
-
/*center align text*/
+
<TD ALIGN = "center" width='240'> <TABLE
-
.text {
+
style="border:10px inset #099240;">
-
  text-align: center;
+
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/AssayOverview'><IMG SRC="http://farm3.staticflickr.com/2836/10529350575_dfb38e3538.jpg" width="240" height="auto"></a></TD></TR>
-
  margin-top: 50px;
+
</TABLE><br><a href='https://2013.igem.org/Team:Penn/AssayOverview'>Created a standardized assay for site-specific methylases</a></TD>
-
}
+
 +
<TD ALIGN = "center" width='240'> <TABLE
 +
style="border:10px inset #2D68B6;">
 +
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/Software'><IMG SRC="http://farm4.staticflickr.com/3742/10529401844_cc5f713a48.jpg" width="240" height="auto"></a></TD></TR>
 +
</TABLE><br><a href='https://2013.igem.org/Team:Penn/Software'>Developed software to automate analysis of our assay</a></TD>
 +
</TR>
 +
<TR>
-
#logo {
+
<TD ALIGN = "center" width='240'> <TABLE
-
  height: 45px;
+
style="border:10px inset #1F135B;">
-
  float: right;
+
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/MethylaseOverview'><IMG SRC="http://farm6.staticflickr.com/5478/10529350195_2c54c496e5.jpg" width="240" height="auto"></a></TD></TR>
-
  margin-right: -450px;
+
</TABLE><br><a href='https://2013.igem.org/Team:Penn/MethylaseOverview'>Designed and characterized a novel TALE-methylase fusion protein</a> <br></TD>
-
margin-top:-10px;
+
-
}
+
<TD ALIGN = "center" width='240'> <TABLE
 +
style="border:10px inset #F61F27;">
 +
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/hpoverview'><IMG SRC="http://farm4.staticflickr.com/3670/10529586493_833c6216ee.jpg" width="240" height="auto"></a></TD></TR>
 +
</TABLE><br><a href='https://2013.igem.org/Team:Penn/hpoverview'>Introduced synthetic biology to the community</a></TD>
-
.footer {
+
<TD ALIGN = "center" width='240'> <TABLE
-
width: 100%;
+
style="border:10px inset #ED115B;">
-
height: 15px;
+
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/Too_Soon_To_Treat'><IMG SRC="http://farm4.staticflickr.com/3815/10529365086_82d164e2b1.jpg" width="240" height="auto"></a></TD></TR>
-
padding: 5px;
+
</TABLE><br><a href='https://2013.igem.org/Team:Penn/Too_Soon_To_Treat'>Published an article on the ethics of epigenetic engineering</a></TD>
-
margin-top: 100px;
+
-
text-align: left;
+
-
background-color: black;
+
-
color: #FFFFFF;
+
-
}
+
 +
</TR>
-
    </style>
+
<TR>
-
  </head>
+
-
  <body>
+
-
    <div class="wrapper">
+
-
   
+
-
  <div class="navbar-wrapper">
+
-
      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
+
-
      <div class="container">
+
-
        <div class="navbar navbar-inverse navbar-fixed-top">
+
<TD ALIGN = "center" width='240'> <TABLE
-
          <div class="navbar-inner">
+
style="border:10px inset #099240;">
-
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
+
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/Team'><IMG SRC="http://farm6.staticflickr.com/5533/10529401504_677c4f296a.jpg" width="240" height="auto"></a></TD></TR>
-
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+
</TABLE><br><a href='https://2013.igem.org/Team:Penn/Team'>Our team</a> <br> <br> <br></TD>
-
              <span class="icon-bar"></span>
+
-
              <span class="icon-bar"></span>
+
-
              <span class="icon-bar"></span>
+
-
            </button>
+
-
          <!-- <a class="brand" style="color: white; padding-left: 11%;" href="https://2013.igem.org/Team:Penn">Penn iGEM</a>-->
+
-
            <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
+
-
            <div class="nav-collapse collapse">
+
-
              <ul class="nav">
+
-
             
+
-
                <li class="active"><a href="https://2013.igem.org/Team:Penn">Penn iGEM</a></li>
+
-
                <li class="dropdown">
+
-
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project <b class="caret"></b></a>
+
-
                  <ul class="dropdown-menu">
+
-
                 
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Project">Project</a></li>
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Parts">Parts</a></li>
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Modeling">Modeling</a></li>
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Safety">Safety</a></li>
+
-
                  </ul>
+
-
                </li>
+
-
                <li class="dropdown">
+
-
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
+
-
                  <ul class="dropdown-menu">
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Team">Team</a></li>
+
-
                    <li><a href="https://2013.igem.org/Team:Penn/Sponsors">Sponsors</a></li>
+
-
                    <li><a href="https://igem.org/Team.cgi?id=1128">Official Team Profile</a></li>
+
-
                    <!--<li class="divider"></li>
+
-
                    <li class="nav-header">Nav header</li>
+
-
                    <li><a href="#">Separated link</a></li>
+
-
                    <li><a href="#">One more separated link</a></li>-->
+
-
                  </ul>
+
-
                </li>
+
-
                <li><a href="https://2013.igem.org/Team:Penn/HumanPractices">Human Practices</a></li>
+
-
<li><a href="https://2013.igem.org/Team:Penn/Notebook">Notebook</a></li>
+
-
              </ul>
+
-
            </div><!--/.nav-collapse -->
+
-
          </div><!-- /.navbar-inner -->
+
-
        </div><!-- /.navbar -->
+
-
      </div> <!-- /.container -->
+
<TD ALIGN = "center" width='240'> <TABLE
-
    </div><!-- /.navbar-wrapper -->
+
style="border:10px inset #2D68B6;">
 +
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/Achievements'><IMG SRC="http://farm4.staticflickr.com/3739/10529350025_2db22731e9.jpg" width="240" height="auto"></a></TD></TR>
 +
</TABLE><br><a href='https://2013.igem.org/Team:Penn/Achievements'>Grand Prize Winner, North America<br>Best Experimental Measurement Approach, North America</a></TD>
-
 
 
-
<a href="2013.igem.org"><img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/eOFjfgJ2OQ/Logos/IGEM_basic_Logo_stylized.png?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" style="width: 100px; margin: 5px; display: inline-block;"/></a>
 
-
      <h1>Penn's iGEM Page is currently under construction</h1>
 
 +
<TD ALIGN = "center" width='240'> <TABLE
 +
style="border:10px inset #CF8035;">
 +
<TR><TD ALIGN="center"><a href='http://articles.philly.com/2013-11-27/news/44490110_1_synthetic-biology-research-project-international-genetically-engineered-machine'><IMG SRC="http://farm8.staticflickr.com/7397/10529350205_c12e2cd367.jpg" width="240" height="auto"></a></TD></TR>
 +
</TABLE><br><a href='http://articles.philly.com/2013-11-27/news/44490110_1_synthetic-biology-research-project-international-genetically-engineered-machine'>Featured in a Philadelphia Inquirer article</a> <br> <br> <br></TD>
 +
</TR>
-
<!--CAROUSEL-->
+
</TABLE></center>
-
 
+
</div>
-
    <!-- Main Area -->
+
-
                <div id="main_area">
+
-
                        <!-- Slider -->
+
-
                        <div class="row">
+
-
                                <div class="span12" id="slider">
+
-
                                        <!-- Top part of the slider -->
+
-
                                        <div class="row">
+
-
                                                <div class="span8" id="carousel-bounding-box">
+
-
                                                        <div id="myCarousel" class="carousel slide">
+
-
                                                                <!-- Carousel items -->
+
-
                                                                <div class="carousel-inner">
+
-
                                                                        <div class="active item" data-slide-number="0"><img src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/" /></div>
+
-
                                                                        <div class="item" data-slide-number="1"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEWHBpYXpOcFRBcGc/" /></div>
+
-
                                                                        <div class="item" data-slide-number="2"><img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/_mMloYB8xM/Discovery%20Day%20Clark%20Park/IMG_2061.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" /></div>
+
-
                                                                        <div class="item" data-slide-number="3"><img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/WTlON78GgW/IMG_0264.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" /></div>
+
-
                                                                        <div class="item" data-slide-number="4"><img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/jtmF8YkJ_P/device%20photo.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" /></div>
+
-
                                                                        <div class="item" data-slide-number="5"><img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/uN-wv6h07i/Unified%20Artwork%20Styles%20Here/science%21%21%21/20130513135201-0.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" /></div>
+
-
                                                                </div>
+
-
                                                                <!-- Carousel nav -->
+
-
                                                                <a class="carousel-control left" href="#myCarousel" data-slide="prev" font-size: 20px; style="font-family: serif"> < </a>
+
-
                                                                <a class="carousel-control right" href="#myCarousel" data-slide="next"font-size: 18px; style="font-family: serif"> > </a>
+
-
                                                        </div>
+
-
                                                </div>
+
-
                                                <div class="span4" id="carousel-text"></div>
+
-
+
-
                                                <div style="display: none;" id="slide-content">
+
-
                                                        <div id="slide-content-0">
+
-
                                                                <h1>Hello and Welcome!</h1>
+
-
                                                      <p>Welcome to Penn's iGEM team wiki!  This wiki is currently under construction, but check
+
-
                                                    back with us soon to learn more about what we're up to!</p> <a id="team" class="btn" href="https://2013.igem.org/Team:Penn/Team">Meet the Team &raquo;</a>
+
-
                                                        </div>
+
-
                                                        <div id="slide-content-1">
+
-
                                                                <h1>Project</h1>
+
-
              <p>This wiki is currently under construction, but check
+
-
              back with us soon to learn more about what we're up to!  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+
-
              <a class="btn" href="https://2013.igem.org/Team:Penn/Project">Our Project &raquo;</a>
+
-
                                                        </div>
+
-
                                                        <div id="slide-content-2">
+
-
                                                                <h1>Outreach</h1>
+
-
              <p>Learn more about what Penn's iGEM team is doing in the community.  This wiki is currently under construction, but check
+
-
              back with us soon to learn more about what we're up to! Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
+
-
              <a class="btn" href="https://2013.igem.org/Team:Penn/HumanPractices">More Outreach &raquo;</a>
+
-
                                                        </div>
+
-
                                                        <div id="slide-content-3">
+
-
                                                                <h2>Slider Four</h2>
+
-
                                                                <p>Lorem Ipsum Dolor</p>
+
-
                                                                <a class="btn" href="https://2013.igem.org/Team:Penn/HumanPractices">More &raquo;</a>
+
-
                                                        </div>
+
-
                                                        <div id="slide-content-4">
+
-
                                                                <h2>Slider Five</h2>
+
-
                                                                <p>Lorem Ipsum Dolor</p>
+
-
                                                            <a class="btn" href="https://2013.igem.org/Team:Penn/Project">More &raquo;</a>
+
-
                                                        </div>
+
-
                                                        <div id="slide-content-5">
+
-
                                                                <h2>Slider Six</h2>
+
-
                                                                <p>Lorem Ipsum Dolor</p>
+
-
                                                                  <a class="btn" href="https://2013.igem.org/Team:Penn/">More &raquo;</a>
+
-
                                                        </div>
+
-
                                                </div>
+
-
                                        </div>
+
-
+
-
                                </div>
+
-
                        </div> <!--/Slider-->
+
-
+
-
                        <div class="row hidden-phone" id="slider-thumbs">
+
-
                                <div class="span12">
+
-
                                        <!-- Bottom switcher of slider -->
+
-
                                        <ul class="thumbnails">
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-0">
+
-
                                                                <img src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-1">
+
-
                                                                <img src="https://googledrive.com/host/0B4ZBZOYYKBzEWHBpYXpOcFRBcGc/" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-2">
+
-
                                                                <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/_mMloYB8xM/Discovery%20Day%20Clark%20Park/IMG_2061.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-3">
+
-
                                                                <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/WTlON78GgW/IMG_0264.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-4">
+
-
                                                                <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/jtmF8YkJ_P/device%20photo.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-5">
+
-
                                                                <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/uN-wv6h07i/Unified%20Artwork%20Styles%20Here/science%21%21%21/20130513135201-0.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                        </ul>
+
-
                                </div>
+
-
                        </div>
+
</div>
</div>
-
 
+
<div id ="pagefooter">
-
<!--FOOTER-->
+
<br>
-
<div class="footer">
+
<br>
-
<p>Photos: ?? | Website: Stefanie Alfonso</p>
+
<center><a href = "https://2013.igem.org/Team:Penn"> Home  </a> <a href = "https://static.igem.org/mediawiki/2013/e/e5/Spec_Sheet.pdf" >Spec Sheet</a> <a href = "https://2013.igem.org/Team:Penn/sitemap" >Sitemap</a>
 +
</center>
 +
<br>
 +
Penn iGem &copy; 2013
</div>
</div>
-
</div> <!--wrapper-->
+
</body>
-
<script>
+
-
  jQuery(document).ready(function($) {
+
-
+
-
        $('#myCarousel').carousel({
+
-
                interval: 5000
+
-
        });
+
-
+
-
        $('#carousel-text').html($('#slide-content-0').html());
+
-
+
-
        //Handles the carousel thumbnails
+
-
        $('[id^=carousel-selector-]').click( function(){
+
-
                var id_selector = $(this).attr("id");
+
-
                var id = id_selector.substr(id_selector.length -1);
+
-
                var id = parseInt(id);
+
-
                $('#myCarousel').carousel(id);
+
-
        });
+
-
+
-
+
-
        // When the carousel slides, auto update the text
+
-
        $('#myCarousel').on('slid', function (e) {
+
-
                var id = $('.item.active').data('slide-number');
+
-
                $('#carousel-text').html($('#slide-content-'+id).html());
+
-
        });
+
-
+
-
+
-
});
+
-
</script>
+
-
 
+
-
   
+
-
   
+
-
   
+
-
  </body>
 
</html>
</html>

Latest revision as of 16:42, 15 January 2014

Penn iGEM



Interested in joining the team? Submit your application for Penn iGEM 2014 here.



Constructed a toolbox for developing site-specific DNA methylases

Created a standardized assay for site-specific methylases

Developed software to automate analysis of our assay

Designed and characterized a novel TALE-methylase fusion protein

Introduced synthetic biology to the community

Published an article on the ethics of epigenetic engineering

Our team



Grand Prize Winner, North America
Best Experimental Measurement Approach, North America

Featured in a Philadelphia Inquirer article


Retrieved from "http://2013.igem.org/Team:Penn"