Team:Penn

From 2013.igem.org

(Difference between revisions)
m
 
(399 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});
+
-
+
-
/*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: 1;}
+
-
#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: 1;}
+
-
#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: 9999999;
+
-
    -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>
-
#tabs li {
 
-
    padding: 10px 100px 40px 0px;
 
-
    text-align: center;
 
-
    text-align: right;
 
-
    margin-left: 20px;
 
-
    background-color: gray;
 
-
    height:  30px;
 
-
    width: 250px;
 
-
    margin: 5px;
 
-
    -moz-border-radius: 6%;
 
-
    -ms-border-radius: 6%;
 
-
    -webkit-border-radius: 6%;
 
-
    -o-border-radius: 6%;
 
-
    border-radius: 6%; 
 
-
    -webkit-transition: width 0.4s ease;
 
-
    -moz-transition: width 0.4s ease;
 
-
    -o-transition: width 0.4s ease;
 
-
    transition: width 0.4s ease;
 
-
}
 
-
/*Members*/
+
</TABLE></center>
-
.member {
+
</div>
-
    display: inline-block;
+
-
    float: left;
+
-
    margin: 20px;
+
-
    height: 200px;
+
-
    width: 400px;
+
-
    background-color: white;
+
-
    padding: 10px;
+
-
    position: relative;
+
-
    top: 100px;
+
-
}
+
-
 
+
-
.member p{
+
-
display: inline;
+
-
}
+
-
 
+
-
.member h2 {
+
-
    text-align: left;
+
-
    display: block;
+
-
    width: 100%;
+
-
}
+
-
.member img {
+
-
    height: 125px;
+
-
    width: 100px;
+
-
    float: left;
+
-
    display: inline;
+
-
    margin: 5px;
+
-
 
+
-
}
+
-
 
+
-
.team {
+
-
float: center;
+
-
margin-left: 200px;
+
-
}
+
-
 
+
-
.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 class="outer">
+
-
 
+
-
<!--<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>
+
-
   
+
-
   
+
-
   
+
</div>
</div>
-
<!--Circles on the side that scroll you to sections of the page-->
+
<div id ="pagefooter">
-
<ul id="navigation">
+
<br>
-
<li id="one"></li>
+
<br>
-
<li id="two"></li>
+
<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>
-
<li id="three"></li>
+
</center>  
-
</ul>
+
<br>
-
 
+
Penn iGem &copy; 2013
-
<!--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><img src="https://googledrive.com/host/0B4ZBZOYYKBzEUDUwMm1ScllCRWs/" />
+
-
     
+
-
        </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>
+
-
   
+
-
    <!--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-->
+
</body>
-
<div class="two">
+
-
   
+
-
    <div class="left">
+
-
        <h2>Project Overview</h2>
+
-
    </div>
+
-
</div>
+
-
<!--Third section: introducing the team-->
+
</html>
-
<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>
+

Latest revision as of 16:42, 15 January 2014

Penn iGEM