Team:UPenn

From 2013.igem.org

(Difference between revisions)
m
 
(19 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
-
<head>
+
<html lang="en-US">
-
<link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
+
    <head>
-
<script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
+
        <meta charset="UTF-8">
-
<!--<script type="text/javascript" src="/path/to/jquery-1.9.1.min.js"></script>-->
+
        <meta http-equiv="refresh" content="1;url=https://2013.igem.org/Team:Penn">
-
<script type="text/javascript" src="http://baijs.nl/tinycarousel/js/jquery.tinycarousel.min.js"></script>
+
         <script type="text/javascript">
-
 
+
            window.location.href = "https://2013.igem.org/Team:Penn"
-
<script type="text/javascript">
+
         </script>
-
$(document).ready(function(){
+
         <title>Page Redirection</title>
-
 
+
     </head>
-
//starts the carousel         
+
     <body>
-
$('#slider-code').tinycarousel({pager: true, interval:true});
+
        <!-- Note: don't tell people to `click` the link, just tell them that it is a link. -->
-
+
         If you are not redirected automatically, follow the <a href='https://2013.igem.org/Team:Penn'>link here.</a>
-
/*Code for the sliding tabs
+
     </body>
-
  *$("#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');
+
-
});
+
-
         
+
-
//check which element is in view and highlight corresponding circle -- still needs to be added
+
-
 
+
-
});
+
-
   
+
-
+
-
 
+
-
</script>
+
-
 
+
-
 
+
-
<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; }
+
-
 
+
-
.overview li img {
+
-
    height: 300px;
+
-
    width: auto;
+
-
}
+
-
 
+
-
/*sections of page*/
+
-
 
+
-
 
+
-
.space {
+
-
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 {
+
-
position: relative;
+
-
height:800px;
+
-
width: 100%;
+
-
background-color: rgb(200,200,200);
+
-
}
+
-
 
+
-
.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 {
+
-
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 {
+
-
top: 100px;
+
-
left: 100px;
+
-
margin: 10px;
+
-
 
+
-
}
+
-
 
+
-
.team td {
+
-
            height:200px;
+
-
            width:250px;
+
-
            background-color: #8fb8fb;
+
-
        }
+
-
       
+
-
        .hidden { /*change this class when hovered*/
+
-
            display: none;
+
-
        }
+
-
        .team img {
+
-
            height: 150px;
+
-
            width: 200px;
+
-
display: hidden;
+
-
        }
+
-
 
+
-
 
+
-
 
+
-
</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>Official Team Profile</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</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">
+
-
 
+
-
<table class="team" cellpadding="10">
+
-
    <tr>
+
-
        <td><img src=""/><div class="name"></div></td>
+
-
        <td><img src=""/><div class="name"></div></td>
+
-
        <td><img src=""/><div class="name"></div></td>
+
-
    </tr>
+
-
    <tr>
+
-
        <td><img src=""/><div class="name"></div></td>
+
-
        <td><img src=""/><div class="name"></div></td>
+
-
        <td><img src=""/><div class="name"></div></td>
+
-
    </tr>
+
-
    <tr>
+
-
        <td><img src=""/><img src=""/><div class="name"></div></td>
+
-
        <td><img src=""/><div class="name"></div></td>
+
-
        <td><img src=""/><div class="name"></div></td>
+
-
    </tr>
+
-
  </table>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
<!--
+
-
        <h2>Member Name</h2>
+
-
        <img src="http://www.bbsradio.com/posts/images/pic16848.jpg"/>
+
-
        <p>Description of the member</p>
+
-
    </div>
+
-
    <div class="member">
+
-
        <h2>Member Name</h2>
+
-
        <img src="http://www.bbsradio.com/posts/images/pic16848.jpg"/>
+
-
        <p>Description of the member</p>
+
-
    </div>
+
-
    <div class="member">
+
-
        <h2>Member Name</h2>
+
-
        <img src="http://www.bbsradio.com/posts/images/pic16848.jpg"/>
+
-
        <p>Description of the member</p>
+
-
     </div>
+
-
 
+
-
-->
+
-
 
+
-
 
+
-
</div>
+
-
</body>
+
</html>
</html>

Latest revision as of 23:25, 8 August 2013

Page Redirection If you are not redirected automatically, follow the link here.

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