Team:UPenn

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
<head>
<head>
 +
<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/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
<!--<script type="text/javascript" src="/path/to/jquery-1.9.1.min.js"></script>-->
<!--<script type="text/javascript" src="/path/to/jquery-1.9.1.min.js"></script>-->
Line 7: Line 8:
<script type="text/javascript">
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function(){
-
           
+
 
 +
//starts the carousel         
  $('#slider-code').tinycarousel({pager: true, interval:true});
  $('#slider-code').tinycarousel({pager: true, interval:true});
   
   
-
  $("#tabs li").mouseenter(function(){
+
  /*Code for the sliding tabs
 +
  *$("#tabs li").mouseenter(function(){
   
   
     $(this).css("width","400px");
     $(this).css("width","400px");
Line 16: Line 19:
   
   
  $("#tabs li").mouseleave(function(){
  $("#tabs li").mouseleave(function(){
-
   $(this).css("width","250px"); });
+
   $(this).css("width","250px"); }); */
-
   
+
  //Scroll to sections of page (button #one scrolls to section .one)
     $("#one").click(function() {
     $("#one").click(function() {
         $('html, body').animate({
         $('html, body').animate({
Line 36: Line 39:
  });
  });
            
            
-
//check which element is in view and highlight corresponding circle
+
//check which element is in view and highlight corresponding circle -- still needs to be added
-
+
 
-
/* var inview = function() {
+
-
    var winTop = $(window).scrollTop();
+
-
    var halfVP = $(window).height() * 0.5;
+
-
   
+
-
if (winTop >= 1000 && winTop < 0 + 1000) {
+
-
    $(this).css('background-color', '#528B8B')
+
-
} else {
+
-
    $(this).css('background-color', 'white');
+
-
}
+
-
+
-
}
+
-
+
-
$(window).scroll(function() {
+
-
    inview();
+
-
    });
+
-
    */
+
});
});
      
      
Line 62: Line 49:
<style>
<style>
-
  /*image carousel styling (taken mostly from plugin)*/
+
   
 +
  /*image carousel styling (taken mostly from plugin site)*/
#slider-code { height: 300px; overflow:hidden; display: inline; }
#slider-code { height: 300px; overflow:hidden; display: inline; }
#slider-code .viewport { float: left; width: 400px; height: 300px;
#slider-code .viewport { float: left; width: 400px; height: 300px;
Line 84: Line 72:
     width: auto;
     width: auto;
}
}
-
/*fonts and headings*/
 
-
 
-
a {
 
-
    color:black;
 
-
    text-decoration: none;
 
-
}
 
-
 
-
a:hover {
 
-
    color: gray;
 
-
    text-decoration: none;
 
-
}
 
-
h2 {
 
-
    font-family: verdana, sans-serif;
 
-
    font-size: 20px;
 
-
}
 
-
h4 {
 
-
    font-size: 16px;
 
-
    font-family: helvetica, verdana, sans-serif;
 
-
}
 
-
 
-
p {
 
-
    font-size: 14px;
 
-
    font-family: helvetica, verdana, sans-serif;
 
-
}
 
-
 
-
/*get rid of wiki defaults*/
 
-
.outer {
 
-
width: 100%;
 
-
text-align: center;
 
-
float: center;
 
-
height: 100%;
 
-
background-color: black;
 
-
}
 
-
 
-
#p-logo {
 
-
    position: absolute;
 
-
    display: none;
 
-
}
 
-
 
-
#content {
 
-
width: 100%;
 
-
background-color: black;
 
-
}
 
-
 
-
#top-section {
 
-
    position: absolute;
 
-
}
 
-
 
-
 
-
.firstHeading {
 
-
    position: absolute;
 
-
    display: none;
 
-
}
 
-
 
-
.thumb {
 
-
    display: none;
 
-
    position: absolute;
 
-
}
 
-
 
-
/*#menubar {
 
-
    display: none;
 
-
    position: absolute;
 
-
}*/
 
-
 
-
/*.noprint {
 
-
    display: none;
 
-
    position: absolute;
 
-
}*/
 
-
 
-
#search-controls {
 
-
display: none;
 
-
position: absolute;
 
-
}
 
-
 
-
 
-
#footer {
 
-
    display: none;
 
-
    position: absolute;
 
-
}
 
-
 
/*sections of page*/
/*sections of page*/
-
/*#banner {
 
-
width: 100%;
 
-
background-color: #B4EEFF;
 
-
height: 300px;
 
-
}*/
 
.space {
.space {
Line 188: Line 91:
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: 90%;
background-size: 90%;
-
}
 
-
 
-
.circle {
 
-
    height: 20px;
 
-
    width: 20px;
 
-
    background-color: black;
 
-
    -moz-border-radius: 100%;
 
-
    -ms-border-radius: 100%;
 
-
    -webkit-border-radius: 100%;
 
-
    -o-border-radius: 100%;
 
-
    border-radius: 100%;
 
}
}
Line 251: Line 143:
   opacity: 0.7;  
   opacity: 0.7;  
}
}
-
 
+
-
.wrapper {
+
-
  background-color: rgb(230,230,230);
+
-
  opacity: 1;
+
-
  height: 500px;
+
-
  width: 90%;
+
-
  float: center;
+
-
  margin: 50px;
+
-
}
+
-
 
+
/*links and navigation*/
/*links and navigation*/
#navigation {
#navigation {
Line 306: Line 189:
}
}
-
.nav {
 
-
    padding: 0px;
 
-
    width: 100%;
 
-
    background-color: white;
 
-
    position: fixed;
 
-
    margin: auto;
 
-
    z-index: 999;
 
-
}
 
-
 
-
.nav li {
 
-
    display: inline;
 
-
    margin: 0px 30px 30px 0px;
 
-
    font-family: Verdana, sans-serif;
 
-
}
 
#tabs li {
#tabs li {
Line 391: Line 260:
</ul>-->
</ul>-->
-
 
+
<!--Navigation bar at the top-->
     <ul class="nav">
     <ul class="nav">
         <li><a href="https://2013.igem.org/Team:UPenn">Home</a></li>
         <li><a href="https://2013.igem.org/Team:UPenn">Home</a></li>
Line 408: Line 277:
</div>
</div>
 +
<!--Circles on the side that scroll you to sections of the page-->
<ul id="navigation">
<ul id="navigation">
<li id="one"></li>
<li id="one"></li>
Line 414: Line 284:
</ul>
</ul>
 +
<!--First section: brief overview-->
<div class="one">
<div class="one">
-
   
+
 
-
   
+
<!--Image carousel. This is taken pretty much from the plugin site-->      
-
  <!--  <div class="wrapper">-->
+
-
       
+
<div id="slider-code">
<div id="slider-code">
     <a class="buttons prev" href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/e/ef/Aiga_leftarrow_inv.gif" height="30px" width="30px"></a>
     <a class="buttons prev" href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/e/ef/Aiga_leftarrow_inv.gif" height="30px" width="30px"></a>
     <div class="viewport">
     <div class="viewport">
         <ul class="overview">
         <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/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/R6cA3L1riv/Lynch%20Labs%20PGFI/BE_LynchLabGroup_DSC2806.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" /></li>
Line 432: Line 302:
     <a class="buttons next"  href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/7/7d/Aiga_rightarrow_inv.gif" height="30px" width="30px"/></a>
     <a class="buttons next"  href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/7/7d/Aiga_rightarrow_inv.gif" height="30px" width="30px"/></a>
     <ul class="pager">
     <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="0" class="pagenum" href="#"></a></li>
         <li><a rel="1" class="pagenum" href="#"></a></li>
         <li><a rel="1" class="pagenum" href="#"></a></li>
Line 439: Line 310:
</div>
</div>
      
      
-
      
+
     <!--Description to the right of the carousel that briefly introduces the team/project-->
     <div class="right">
     <div class="right">
         <h2>Hello</h2>
         <h2>Hello</h2>
Line 447: Line 318:
</div>
</div>
-
<!--<div class="space"> </div>-->
+
<!--Second section: project overview-->
-
 
+
<div class="two">
<div class="two">
      
      
Line 456: Line 326:
</div>
</div>
-
<!--<div class="space"></div>-->
+
<!--Third section: introducing the team-->
-
 
+
<div class="three">
<div class="three">
     <div class="member">
     <div class="member">

Revision as of 12:55, 27 June 2013

Hello

Welcome to Penn's iGEM team wiki!

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

Project Overview

Member Name

Description of the member

Member Name

Description of the member

Member Name

Description of the member

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