Team:Penn

From 2013.igem.org

(Difference between revisions)
(Created page with "<!-- *** What falls between these lines is the Alert Box! You can remove it from your pages once you have read and understood the alert *** --> <html> <div id="box" style="widt...")
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
 
-
 
<html>
<html>
-
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #fe2b33;">
+
<head>
-
<div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;">
+
<link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
-
This is a template page. READ THESE INSTRUCTIONS.
+
<script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
-
</div>
+
<!--<script type="text/javascript" src="/path/to/jquery-1.9.1.min.js"></script>-->
-
<div id="instructions" style="text-align: center; font-weight: normal; font-size: small; color: #f6f6f6; padding: 5px;">
+
<script type="text/javascript" src="http://baijs.nl/tinycarousel/js/jquery.tinycarousel.min.js"></script>
-
You are provided with this team page template with which to start the iGEM season.  You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki.  You can find some examples <a href="https://2009.igem.org/Help:Template/Examples">HERE</a>.
+
-
</div>
+
-
<div id="warning" style="text-align: center; font-weight: bold; font-size: small; color: #f6f6f6; padding: 5px;">
+
-
You <strong>MUST</strong> have all of the pages listed in the menu below with the names specified. PLEASE keep all of your pages within your teams namespace. 
+
-
</div>
+
-
</div>
+
-
</html>
+
-
<!-- *** End of the alert box *** -->
+
<script type="text/javascript">
 +
$(document).ready(function(){
 +
 
 +
//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>
-
{|align="justify"
 
-
|You can write a background of your team here.  Give us a background of your team, the members, etc.  Or tell us more about something of your choosing.
 
-
|[[Image:Penn_logo.png|200px|right|frame]]
 
-
|-
 
-
|
 
-
''Tell us more about your project.  Give us background.  Use this as the abstract of your project.  Be descriptive but concise (1-2 paragraphs)''
 
-
|[[Image:Penn_team.png|right|frame|Your team picture]]
 
-
|-
 
-
|
 
-
|align="center"|[[Team:Penn | Team Penn]]
 
-
|}
 
-
<!--- The Mission, Experiments --->
+
<style>
 +
   
 +
/*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; }
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
+
.overview li img {
-
!align="center"|[[Team:Penn|Home]]
+
    height: 300px;
-
!align="center"|[[Team:Penn/Team|Team]]
+
    width: auto;
-
!align="center"|[https://igem.org/Team.cgi?year=2013&team_name=Penn Official Team Profile]
+
}
-
!align="center"|[[Team:Penn/Project|Project]]
+
 
-
!align="center"|[[Team:Penn/Parts|Parts Submitted to the Registry]]
+
/*sections of page*/
-
!align="center"|[[Team:Penn/Modeling|Modeling]]
+
 
-
!align="center"|[[Team:Penn/Notebook|Notebook]]
+
 
-
!align="center"|[[Team:Penn/Safety|Safety]]
+
.space {
-
!align="center"|[[Team:Penn/Attributions|Attributions]]
+
height: 20px;
-
|}
+
background-color: gray;
 +
}
 +
 
 +
.one {
 +
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 {
 +
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 {
 +
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/8XND1QonMj/Profile%20Photos/coolbluestuff.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
 +
position: relative;
 +
text-align: center;
 +
height:800px;
 +
width: 100%;
 +
background-color: rgb(200,200,200);
 +
padding-top: 50px;}
 +
 
 +
.right {
 +
    float:right;
 +
    text-align: left;
 +
    margin-right: 100px;
 +
    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{
 +
    float:left;
 +
    text-align: left;
 +
    margin-left: 75px;
 +
    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;
 +
 
 +
}
 +
 
 +
#navigation li:hover{
 +
    -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 {
 +
z-index:9999;
 +
height: 20px;
 +
margin: 30px;
 +
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 {
 +
    position: absolute;
 +
    list-style-type: none;
 +
    z-index: 99;
 +
    left: -330px;
 +
    top: 100px;
 +
}
 +
 
 +
ul {
 +
    list-style-type: none;
 +
}
 +
 
 +
#tabs li strong {
 +
    margin-left: 50px;
 +
}
 +
 
 +
 
 +
#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*/
 +
.member {
 +
    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: 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%;
 +
         
 +
           
 +
        }
 +
 
 +
 
 +
 
 +
</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>
 +
 
 +
<!--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-->       
 +
<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 src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/sxkYnjpujC/Lynch%20Labs%20PGFI/BE_LynchLabGroup_DSC2796.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" /></li>
 +
            <li><img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/R6cA3L1riv/Lynch%20Labs%20PGFI/BE_LynchLabGroup_DSC2806.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" /></li>
 +
            <li><img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/APrj2Se2i-/Lynch%20Labs%20PGFI/BE_LynchLabGroup_DSC2811.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" /></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>
 +
   
 +
    <!--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>
 +
 
 +
<!--Second section: project overview-->
 +
<div class="two">
 +
   
 +
    <div class="left">
 +
        <h2>Project Overview</h2>
 +
    </div>
 +
</div>
 +
 
 +
<!--Third section: introducing the team-->
 +
<div class="three">
 +
<h2>Team</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>
 +
</body>
 +
</html>

Revision as of 00:51, 4 July 2013

Hello

Welcome to Penn's iGEM team wiki!

This page is under construction at the moment, but check back with us soon to see what we're up to!

Project Overview

Team

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