Team:Penn

From 2013.igem.org

(Difference between revisions)
m
 
(404 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<html lang="en">
<head>
<head>
-
<link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
 
-
<script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
 
-
<!--<script type="text/javascript" src="/path/to/jquery-1.9.1.min.js"></script>-->
 
-
<script type="text/javascript" src="http://baijs.nl/tinycarousel/js/jquery.tinycarousel.min.js"></script>
 
-
<script type="text/javascript">
+
    <title>Penn iGEM</title>
-
$(document).ready(function(){
+
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEVHRaZEdUVGo5cjA" type="text/css" rel="stylesheet"/> <!--css-->
-
 
+
-
//starts the carousel         
+
-
$('#slider-code').tinycarousel({pager: true, interval:true, intervaltime: 5000});
+
-
+
-
/*Code for the sliding tabs
+
-
  *$("#tabs li").mouseenter(function(){
+
-
+
-
    $(this).css("width","400px");
+
-
});
+
-
+
-
$("#tabs li").mouseleave(function(){
+
-
  $(this).css("width","250px"); }); */
+
-
//Scroll to sections of page (button #one scrolls to section .one)
+
-
    $("#one").click(function() {
+
-
        $('html, body').animate({
+
-
        scrollTop: $(".one").offset().top,
+
-
    }, '2400');
+
-
});
+
-
   
+
-
      $("#two").click(function() {
+
-
        $('html, body').animate({
+
-
        scrollTop: $(".two").offset().top,
+
-
    }, '2400');
+
-
});
+
-
     
+
-
          $("#three, #team").click(function() {
+
-
        $('html, body').animate({
+
-
        scrollTop: $(".three").offset().top,
+
-
    }, '2400');
+
-
});
+
-
         
+
-
          $(".team tr td").mouseenter(function(){
+
-
          $(this).children(":first").toggleClass("hidden");
+
-
          $(this).children(":nth-child(2)").toggleClass("hidden");
+
-
         
+
-
          });
+
-
         
+
-
          $(".team tr td").mouseleave(function(){
+
-
            $(this).children(":nth-child(2)").toggleClass("hidden");
+
-
          $(this).children(":first").toggleClass("hidden");
+
-
         
+
-
            });
+
-
         
+
-
       
+
-
         
+
-
         
+
-
         
+
-
         
+
-
//check which element is in view and highlight corresponding circle -- still needs to be added
+
-
});
+
<script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script> <!--jquery-->
      
      
-
+
<script>
 +
        $(document).ready(function($) {
-
</script>
+
$('.nav_wrap').load('https://googledrive.com/host/0B4ZBZOYYKBzEclFHMmpZcVlydmc');
 +
  });
 +
    </script>
 +
</head>
 +
<body>
 +
<div id = "banner_wrap">
 +
<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>
-
<style>
+
<center><TABLE CELLSPACING="10" CELLPADDING="1">
-
   
+
-
  /*image carousel styling (taken mostly from plugin site)*/
+
-
#slider-code { height: 300px;  display: inline; overflow: hidden;}
+
-
#slider-code .viewport { float: left; width: 400px; height: 300px;
+
-
margin-right: -35px; border: background-color: gray;
+
-
overflow: hidden; position:relative; margin-top: 100px; margin-left: 75px;  z-index: -2;}
+
-
#slider-code .buttons { display: block; margin: 30px -100px 0 0px; float: left; margin-top:225px; z-index: 1;}
+
-
#slider-code .next { margin: 20px 0 0 10px; margin-top: 225px; z-index: 100;}
+
-
#slider-code .disable { visibility: hidden; }
+
-
#slider-code .overview { list-style: none; position: absolute;
+
-
padding: 0; margin: 0; left: 0; top: 0; }
+
-
#slider-code .overview li{ float: left; margin: 0 20px 0 0;
+
-
padding: 1px; height: 296px; width: 396px;}
+
-
#slider-code .prev { padding-left: 100px; z-index: 100;}
+
-
#slider-code .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 100px; }
+
-
#slider-code .pager li { float: left; height:10px; width:10px; margin: 5px 15px 15px 0px; z-index: 99; }
+
-
#slider-code .pagenum { background-color: #fff; text-decoration: none; text-align: center; padding: 10px; color: #555555; font-size: 14px; font-weight: bold; display: block; }
+
-
#slider-code .active { color: #fff; background-color:  #555555; }
+
-
.overview li img {
+
<TR>
-
    height: 300px;
+
-
    width: auto;
+
-
}
+
-
/*sections of page*/
+
<TD ALIGN = "center" width='240'> <TABLE
 +
style="border:10px inset #CF8035;">
 +
<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>
 +
</TABLE><br><a href='https://2013.igem.org/Team:Penn/MaGellinToolbox'>Constructed a toolbox for developing site-specific DNA methylases</a></TD>
 +
<TD ALIGN = "center" width='240'> <TABLE
 +
style="border:10px inset #099240;">
 +
<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>
 +
</TABLE><br><a href='https://2013.igem.org/Team:Penn/AssayOverview'>Created a standardized assay for site-specific methylases</a></TD>
-
.space {
+
<TD ALIGN = "center" width='240'> <TABLE
-
height: 20px;
+
style="border:10px inset #2D68B6;">
-
background-color: gray;
+
<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>
-
.one {
+
</TR>
-
height:800px;
+
-
position: relative;
+
-
padding-top: 30px;
+
-
width: 100%;
+
-
background-color: black;
+
-
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/Yn0SK0Y0-7/snap.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
+
-
background-position: 300px 50px;
+
-
background-repeat: no-repeat;
+
-
background-size: 90%;
+
-
z-index: -99;
+
-
}
+
-
.two {
+
<TR>
-
height:800px;
+
-
position: relative;
+
-
padding-top: 30px;
+
-
width: 100%;
+
-
background-color: #50393F;
+
-
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/-ZtRJ7Gu1U/photo-8.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
+
-
background-position: 300px -100px;
+
-
background-repeat: no-repeat;
+
-
background-size: 80%;
+
-
}
+
-
.three {
+
<TD ALIGN = "center" width='240'> <TABLE
-
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/8XND1QonMj/Profile%20Photos/coolbluestuff.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
+
style="border:10px inset #1F135B;">
-
position: relative;
+
<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>
-
text-align: center;
+
</TABLE><br><a href='https://2013.igem.org/Team:Penn/MethylaseOverview'>Designed and characterized a novel TALE-methylase fusion protein</a> <br></TD>
-
height:800px;
+
-
width: 100%;
+
-
background-color: rgb(200,200,200);
+
-
padding-top: 50px;}
+
-
.right {
+
<TD ALIGN = "center" width='240'> <TABLE
-
    float:right;
+
style="border:10px inset #F61F27;">
-
    text-align: left;
+
<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>
-
    margin-right: 100px;
+
</TABLE><br><a href='https://2013.igem.org/Team:Penn/hpoverview'>Introduced synthetic biology to the community</a></TD>
-
    margin-top: -300px;
+
-
    background-color: white;
+
-
    height: 200px;
+
-
    padding:20px;
+
-
    width: 30%;
+
-
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+
-
  filter: alpha(opacity=70);
+
-
-moz-opacity: 0.7;
+
-
-khtml-opacity: 0.7;
+
-
  opacity: 0.7;
+
-
}
+
-
.left{
+
<TD ALIGN = "center" width='240'> <TABLE
-
    float:left;
+
style="border:10px inset #ED115B;">
-
    text-align: left;
+
<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>
-
    margin-left: 75px;
+
</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;
+
-
    background-color: white;
+
-
    height: 200px;
+
-
    padding:20px;
+
-
    width: 30%;
+
-
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+
-
  filter: alpha(opacity=70);
+
-
-moz-opacity: 0.7;
+
-
-khtml-opacity: 0.7;
+
-
  opacity: 0.7;
+
-
}
+
-
+
-
/*links and navigation*/
+
-
#navigation {
+
-
position: fixed;
+
-
right: 0px;
+
-
top: 20px;
+
-
list-style-type: none;
+
-
z-index: 100;
+
-
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+
-
  filter: alpha(opacity=90);
+
-
-moz-opacity: 0.9;
+
-
-khtml-opacity: 0.9;
+
-
  opacity: 0.9;
+
-
}
+
</TR>
-
#navigation li:hover{
+
<TR>
-
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+
-
  filter: alpha(opacity=60);
+
-
-moz-opacity: 0.6;
+
-
-khtml-opacity: 0.6;
+
-
  opacity: 0.6;
+
-
}
+
-
#navigation li {
+
<TD ALIGN = "center" width='240'> <TABLE
-
z-index:9999;
+
style="border:10px inset #099240;">
-
height: 20px;
+
<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>
-
margin: 30px;
+
</TABLE><br><a href='https://2013.igem.org/Team:Penn/Team'>Our team</a> <br> <br> <br></TD>
-
width: 20px;
+
-
background-color: white;
+
-
-moz-border-radius: 100%;
+
-
-ms-border-radius: 100%;
+
-
-webkit-border-radius: 100%;
+
-
-o-border-radius: 100%;
+
-
border-radius: 100%;
+
-
opacity: 1;
+
-
}
+
-
#tabs {
+
<TD ALIGN = "center" width='240'> <TABLE
-
    position: absolute;
+
style="border:10px inset #2D68B6;">
-
    list-style-type: none;
+
<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>
-
    z-index: 99;
+
</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>
-
    left: -330px;
+
-
    top: 100px;
+
-
}
+
-
ul {
 
-
    list-style-type: none;
 
-
}
 
-
#tabs li strong {
+
<TD ALIGN = "center" width='240'> <TABLE
-
    margin-left: 50px;
+
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>
-
 
+
</TABLE></center>
-
/*Team table*/
+
-
.team {
+
-
float: center;
+
-
margin-left: 250px;
+
-
 
+
-
}
+
-
 
+
-
.team td {
+
-
    overflow: hidden;
+
-
            height:175px;
+
-
            width:220px;
+
-
            display: inline-block;
+
-
            padding:5px;
+
-
   
+
-
        }
+
-
       
+
-
        .hidden { /*change this class when hovered*/
+
-
            display: none;
+
-
        }
+
-
        .team img {
+
-
          max-width:100%;
+
-
    max-height:100%;
+
-
         
+
-
           
+
-
        }
+
-
       
+
-
        #caption {
+
-
            z-index:9999;
+
-
            height: 5px;
+
-
            bottom: 0px;
+
-
            width: 100%;
+
-
            background-color: white;
+
-
            position: absolute;
+
-
        }
+
-
 
+
-
 
+
-
 
+
-
</style>
+
-
</head>
+
-
 
+
-
 
+
-
<body bgcolor="black">
+
-
 
+
-
<!--<div id="banner">
+
-
Banner
+
-
</div>-->
+
-
 
+
-
<!--no side links
+
-
<ul id="tabs">
+
-
    <li><h2>Link</h2></li>
+
-
    <li><div class="link"><h2>Link</h2></div></li>
+
-
</ul>-->
+
-
 
+
-
<!--Navigation bar at the top-->
+
-
    <ul class="nav">
+
-
        <li><a href="https://2013.igem.org/Team:UPenn">Home</a></li>
+
-
        <li id="team">Team</li>
+
-
        <li><a href="https://igem.org/Team.cgi?year=2013&team_name=Penn">Official Team Profile</a></li>
+
-
        <li><a href="https://2013.igem.org/Team:UPenn/Project">Project</a></li>
+
-
        <li><a href="https://2013.igem.org/Team:UPenn/Parts">Parts</a></li>
+
-
        <li><a href="https://2013.igem.org/Team:UPenn/Modeling">Modeling</a></li>
+
-
        <li><a href="https://2013.igem.org/Team:UPenn/Notebook">Notebook</a></li>
+
-
        <li><a href="https://2013.igem.org/Team:UPenn/Safety">Safety</a></li>
+
-
       
+
-
    </ul>
+
-
   
+
-
   
+
-
   
+
-
 
+
-
<!--Circles on the side that scroll you to sections of the page-->
+
-
<ul id="navigation">
+
-
<li id="one"></li>
+
-
<li id="two"></li>
+
-
<li id="three"></li>
+
-
</ul>
+
-
 
+
-
<!--First section: brief overview-->
+
-
<div class="one">
+
-
 
+
-
<!--Image carousel.  This is taken pretty much from the plugin site except for the captions which I added in-->       
+
-
<div id="slider-code">
+
-
    <a class="buttons prev" href="#"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEOFBJZ21vN3Rxdk0" height="30px" width="30px"></a>
+
-
    <div class="viewport">
+
-
        <ul class="overview">
+
-
            <!--Images that appear in the carousel-->
+
-
            <li> <img id="image" src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/"></li>
+
-
+
-
            <li><img src="https://googledrive.com/host/0B4ZBZOYYKBzEWHBpYXpOcFRBcGc/" ></li>
+
-
             
+
-
            <li><img src="https://googledrive.com/host/0B4ZBZOYYKBzEUDUwMm1ScllCRWs/" ></li>
+
-
        </ul>
+
-
    </div>
+
-
    <a class="buttons next"  href="#"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEYVFHc3BLcnZoQ2c" height="30px" width="30px"/></a>
+
-
    <ul class="pager">
+
-
        <!--Squares on the bottom of the carousel that show the current the page-->
+
-
        <li><a rel="0" class="pagenum" href="#"></a></li>
+
-
        <li><a rel="1" class="pagenum" href="#"></a></li>
+
-
        <li><a rel="2" class="pagenum" href="#"></a></li>
+
-
    </ul>
+
</div>
</div>
-
   
 
-
    <!--Description to the right of the carousel that briefly introduces the team/project-->
 
-
    <div class="right">
 
-
        <h2>Hello</h2>
 
-
        <h4>Welcome to Penn's iGEM team wiki!</h4>
 
-
        <p>This page is under construction at the moment, but check back with us soon to see what we're up to!</p>
 
-
    </div>
 
</div>
</div>
-
<!--Second section: project overview-->
+
<div id ="pagefooter">
-
<div class="two">
+
<br>
-
   
+
<br>
-
    <div class="left">
+
<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>
-
        <h2>Project Overview</h2>  
+
</center>  
-
    </div>
+
<br>
 +
Penn iGem &copy; 2013
</div>
</div>
-
<!--Third section: introducing the team-->
 
-
<div class="three">
 
-
<h2>Meet the Bunch</h2>
 
-
<table class="team" cellpadding="5">
 
-
    <tr>
 
-
        <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEYUtVa3BNSHQ4dTg"/>
 
-
            <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzEZXRRMlRtODR2OVk/"><div class="name"></div></td>
 
-
       
 
-
        <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEVm5ET0R1QndIRVU"/>
 
-
            <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzELXJ5NlFKUkJXRnc"/><div class="name"></div></td>
 
-
       
 
-
        <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEU25rV1dHYm1Falk"/>
 
-
            <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzEU3VZUnNOdWFqYVE"/><div class="name"></div></td>
 
-
    </tr>
 
-
    <tr>
 
-
        <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEbXRKT3lpN1VQaHc"/>
 
-
            <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzETDEzdFdSOC1ZVW8"/><div class="name"></div></td>
 
-
        <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEVDNlV0UyVWdMVlE"/>
 
-
            <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzEVDNlV0UyVWdMVlE"/><div class="name"></div></td>
 
-
        <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzESzZjdGhVVWY3TWc"/>
 
-
            <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzEZ0tlUUViY2Z6Ymc"/><div class="name"></div></td>
 
-
    </tr>
 
-
    <tr>
 
-
        <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzERzdYWHVkZWxSS2c"/>
 
-
            <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzETldtZHBxMTM3Ujg"/><div class="name"></div></td>
 
-
        <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEOHViLXJJMjVuWTg"/>
 
-
            <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzERmpYczlyYU5TTUE"/><div class="name"></div>
 
-
        <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEZ3dMcXBweFE2X1U"/>
 
-
            <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzET2NBWmlOLVMtaVE"><div class="name"></div></td>
 
-
    </tr>
 
-
  </table>
 
-
<h4>Photos by Erica Sachse</h4>
 
-
</div>
 
</body>
</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"