Team:Penn

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"/>
+
    <title>Homepage</title>
-
<script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<!--<script type="text/javascript" src="/path/to/jquery-1.9.1.min.js"></script>-->
+
    <!-- Bootstrap -->
-
<script type="text/javascript" src="http://baijs.nl/tinycarousel/js/jquery.tinycarousel.min.js"></script>
+
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEeUFaR1lNWFZWMnc" rel="stylesheet" media="screen">
-
<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() {
+
    <style>
-
         $('html, body').animate({
+
         /*fonts/headings*/
-
        scrollTop: $(".two").offset().top,
+
         h4 {
-
    }, '2400');
+
             text-align: center;
-
});
+
        }
-
     
+
-
          $("#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").mouseenter(function(){
+
-
            $(this).children(":nth-child(3)").show();
+
-
            $(this).children(":nth-child(3)").animate({
+
-
                height: '50px',
+
-
                display: 'inline-block'
+
-
                });
+
-
              
+
-
            });
+
-
         
+
-
         
+
-
          $(".team tr td").mouseleave(function(){
+
-
            $(this).children(":nth-child(2)").toggleClass("hidden");
+
-
          $(this).children(":first").toggleClass("hidden");
+
-
          $(this).children(":nth-child(3)").css("height","0px");
+
-
          $(this).children(":nth-child(3)").hide();
+
-
         
+
-
            });
+
-
         
+
          
          
-
         
+
       
-
         
+
       
-
         
+
       
-
         
+
  /*Brady Bunch Table*/
-
//check which element is in view and highlight corresponding circle -- still needs to be added
+
  .team {
-
 
+
      float: center;
-
});
+
        margin-left: 200px;
-
   
+
-
+
-
 
+
-
</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 {
+
-
    margin-top:-3px;
+
-
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: 100px;
+
-
    background-color: white;
+
-
    height: 250px;
+
-
    padding:25px;
+
-
    width: 37%;
+
-
    -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: 200px;
+
}
}
Line 313: Line 47:
     background-color: white;
     background-color: white;
     margin-top: -50px;
     margin-top: -50px;
 +
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 +
  filter: alpha(opacity=70);
 +
-moz-opacity: 0.7;
 +
-khtml-opacity: 0.7;
 +
  opacity: 0.7;
 +
}
 +
 +
/*Sections of page*/
 +
.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%;
 +
background-attachment: fixed;
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
         -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
   filter: alpha(opacity=70);
   filter: alpha(opacity=70);
Line 320: Line 73:
}
}
          
          
-
        #caption {
+
    .three {
-
            z-index:9999;
+
/*
-
            height: 5px;
+
no background image for now
-
            bottom: 0px;
+
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/8XND1QonMj/Profile%20Photos/coolbluestuff.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");*/
-
            width: 100%;
+
position: relative;
-
            background-color: white;
+
text-align: center;
-
            position: absolute;
+
height:800px;
-
        }
+
width: 100%;
 +
padding-top: 50px;
 +
}
 +
/*Position/size hero unit*/
 +
.hero-unit {
 +
    width: 300px;
 +
    float: left;
 +
    margin-left: 50px;
 +
}
 +
       
 +
       
 +
       
 +
            /* CUSTOMIZE THE NAVBAR
 +
    -------------------------------------------------- */
 +
    /* Special class on .container surrounding .navbar, used for positioning it into place. */
 +
    .navbar-wrapper {
 +
      position: absolute;
 +
      top: 0;
 +
      left: 0;
 +
      right: 0;
 +
      z-index: 10;
 +
      margin-top: 20px;
 +
      margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
 +
    }
 +
    .navbar-wrapper .navbar {
-
</style>
+
    }
-
</head>
+
 +
    /* Remove border and change up box shadow for more contrast */
 +
    .navbar .navbar-inner {
 +
      border: 0;
 +
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
 +
        -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
 +
              box-shadow: 0 2px 10px rgba(0,0,0,.25);
 +
    }
-
<body bgcolor="black">
+
    /* Downsize the brand/project name a bit */
-
<div class="outer">
+
    .navbar .brand {
 +
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
 +
      font-size: 16px;
 +
      font-weight: bold;
 +
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
 +
    }
-
<!--<div id="banner">
+
    /* Navbar links: increase padding for taller navbar */
-
Banner
+
    .navbar .nav > li > a {
-
</div>-->
+
      padding: 15px 20px;
 +
    }
-
<!--no side links
+
     /* Offset the responsive button for proper vertical alignment */
-
<ul id="tabs">
+
     .navbar .btn-navbar {
-
     <li><h2>Link</h2></li>
+
      margin-top: 10px;
-
     <li><div class="link"><h2>Link</h2></div></li>
+
     }
-
</ul>-->
+
    </style>
-
 
+
  </head>
-
<!--Navigation bar at the top-->
+
  <body>
-
     <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 class="navbar-wrapper">
-
</div>
+
      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
 +
      <div class="container">
-
<!--Circles on the side that scroll you to sections of the page-->
+
        <div class="navbar navbar-inverse">
-
<ul id="navigation">
+
          <div class="navbar-inner">
-
<li id="one"></li>
+
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
-
<li id="two"></li>
+
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-
<li id="three"></li>
+
              <span class="icon-bar"></span>
-
</ul>
+
              <span class="icon-bar"></span>
 +
              <span class="icon-bar"></span>
 +
            </button>
 +
            <a class="brand" href="#">Penn's iGEM Team</a>
 +
            <!-- Responsive Navbar Part 2: Place all navbar contents you want collapsed withing .navbar-collapse.collapse. -->
 +
            <div class="nav-collapse collapse">
 +
              <ul class="nav">
 +
                <li class="active"><a href="2013.igem.org/Team:Penn">Home</a></li>
 +
                <!-- Read about Bootstrap dropdowns at http://twitter.github.com/bootstrap/javascript.html#dropdowns -->
 +
                <li class="dropdown">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
 +
                  <ul class="dropdown-menu">
 +
                    <li><a id="team">Team</a></li>
 +
                    <li><a href="2013.igem.org/Team:Penn/Sponsors">Sponsors</a></li>
 +
                    <li><a href="https://igem.org/Team.cgi?year=2013">Official Team Profile</a></li>
 +
                    <!--<li class="divider"></li>
 +
                    <li class="nav-header">Nav header</li>
 +
                    <li><a href="#">Separated link</a></li>
 +
                    <li><a href="#">One more separated link</a></li>-->
 +
                  </ul>
 +
                </li>
 +
<li><a href="2013.igem.org/Team:Penn/Project">Project</a></li>
 +
                <li><a href="2013.igem.org/Team:Penn/HumanPractices">Human Practices</a></li>
 +
                <li><a href="2013.igem.org/Team:Penn/Outreach">Outreach</a></li>
 +
                <li class="dropdown">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">In the Lab <b class="caret"></b></a>
 +
                  <ul class="dropdown-menu">
 +
                 
 +
                    <li><a href="2013.igem.org/Team:Penn/Notebook">Notebook</a></li>
 +
                    <li><a href="2013.igem.org/Team:Penn/Parts">Parts</a></li>
 +
                    <li><a href="2013.igem.org/Team:Penn/Modeling">Modeling</a></li>
 +
                    <li><a href="2013.igem.org/Team:Penn/Safety">Safety</a></li>
 +
                  </ul>
 +
                </li>
 +
              </ul>
 +
            </div><!--/.nav-collapse -->
 +
          </div><!-- /.navbar-inner -->
 +
        </div><!-- /.navbar -->
-
<!--First section: brief overview-->
+
      </div> <!-- /.container -->
-
<div class="one">
+
     </div><!-- /.navbar-wrapper -->
-
   
+
-
    <!--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>
+
-
<!--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>
 
      
      
-
 
-
</div>
 
-
 
-
<!--Second section: project overview-->
 
-
<div class="two">
 
      
      
-
     <div class="left">
+
      
-
         <h2>Project Overview</h2>  
+
   
-
     </div>
+
   
 +
    <div id="myCarousel" class="carousel slide">
 +
      <div class="carousel-inner">
 +
         <div class="item active">
 +
          <img src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/" alt="">
 +
          <div class="container">
 +
            <div class="carousel-caption">
 +
              <h1>Hello and Welcome!</h1>
 +
              <p class="lead">Welcome to Penn's iGEM team wiki!  </p>
 +
              <a id="team" class="btn btn-large btn-primary" href="#three">Meet the Team</a>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="item">
 +
          <img src="https://googledrive.com/host/0B4ZBZOYYKBzEWHBpYXpOcFRBcGc/" alt="">
 +
          <div class="container">
 +
            <div class="carousel-caption">
 +
              <h1>Project</h1>
 +
              <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 +
              <a class="btn btn-large btn-primary" href="2013.igem.org/Team:Penn/Project">Our Project</a>
 +
            </div>
 +
          </div>
 +
        </div>
 +
        <div class="item">
 +
          <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/_mMloYB8xM/Discovery%20Day%20Clark%20Park/IMG_2061.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" alt="">
 +
          <div class="container">
 +
            <div class="carousel-caption">
 +
              <h1>Outreach</h1>
 +
              <p class="lead">Learn more about what Penn's iGEM team is doing in the community.  Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
 +
              <a class="btn btn-large btn-primary" href="2013.igem.org/Team:Outreach">More Outreach</a>
 +
            </div>
 +
          </div>
 +
        </div>
 +
      </div>
 +
      <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
 +
      <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
 +
     </div><!-- /.carousel -->
 +
   
 +
    <!--Overview-->
 +
    <div class="two">
 +
   
 +
        <div class="hero-unit">
 +
  <h1>The project</h1>
 +
  <p>A brief overview</p>
 +
  <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
 +
    <a class="btn btn-primary btn-large">
 +
      Learn more
 +
    </a>
 +
  </p>
</div>
</div>
-
 
+
</div>
-
<!--Third section: introducing the team-->
+
   
-
<div class="three">
+
    <!--Team stuff-->
 +
    <div class="three">
<h2>Meet the Bunch</h2>
<h2>Meet the Bunch</h2>
  <table class="team" cellpadding="5">
  <table class="team" cellpadding="5">
     <tr>
     <tr>
-
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEYUtVa3BNSHQ4dTg"/>
+
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEbXRKT3lpN1VQaHc"/>
-
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzEZXRRMlRtODR2OVk/">
+
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzETDEzdFdSOC1ZVW8"/>
-
                <div class="name"><h4></h4></div></td>
+
            <div class="name"><h4></h4></div></td>
          
          
-
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEVm5ET0R1QndIRVU"/>
+
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzESzZjdGhVVWY3TWc"/>
-
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzELXJ5NlFKUkJXRnc"/>
+
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzEZ0tlUUViY2Z6Ymc"/>
             <div class="name"><h4></h4></div></td>
             <div class="name"><h4></h4></div></td>
          
          
Line 437: Line 266:
     </tr>
     </tr>
     <tr>
     <tr>
-
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEbXRKT3lpN1VQaHc"/>
+
          
-
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzETDEzdFdSOC1ZVW8"/>
+
        <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEYUtVa3BNSHQ4dTg"/>
-
            <div class="name"><h4></h4></div></td>
+
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzEZXRRMlRtODR2OVk/">
 +
                <div class="name"><h4>Daniel</h4></div></td>
 +
     
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEVDNlV0UyVWdMVlE"/>
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEVDNlV0UyVWdMVlE"/>
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzEVDNlV0UyVWdMVlE"/>
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzEVDNlV0UyVWdMVlE"/>
-
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzESzZjdGhVVWY3TWc"/>
+
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEVm5ET0R1QndIRVU"/>
-
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzEZ0tlUUViY2Z6Ymc"/>
+
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzELXJ5NlFKUkJXRnc"/>
-
             <div class="name"><h4></h4></div></td>
+
             <div class="name"><h4>Mahamad</h4></div></td>
     </tr>
     </tr>
     <tr>
     <tr>
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzERzdYWHVkZWxSS2c"/>
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzERzdYWHVkZWxSS2c"/>
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzETldtZHBxMTM3Ujg"/>
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzETldtZHBxMTM3Ujg"/>
-
             <div class="name"><h4></h4></div></td>
+
             <div class="name"><h4>Josh</h4></div></td>
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEOHViLXJJMjVuWTg"/>
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEOHViLXJJMjVuWTg"/>
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzERmpYczlyYU5TTUE"/>
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzERmpYczlyYU5TTUE"/>
Line 455: Line 286:
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEZ3dMcXBweFE2X1U"/>
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEZ3dMcXBweFE2X1U"/>
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzET2NBWmlOLVMtaVE">
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzET2NBWmlOLVMtaVE">
-
                 <div class="name"><h4></h4></div></td>
+
                 <div class="name"><h4>Spencer</h4></div></td>
     </tr>
     </tr>
   </table>
   </table>
  <h4>Photos by Erica Sachse</h4>
  <h4>Photos by Erica Sachse</h4>
 +
 +
   
 +
   
 +
   
 +
   
 +
   
 +
   
 +
   
 +
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
 +
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
 +
   
 +
    <script src="../assets/js/jquery.js"></script>
 +
    <script src="../assets/js/bootstrap-transition.js"></script>
 +
    <script src="../assets/js/bootstrap-alert.js"></script>
 +
    <script src="../assets/js/bootstrap-modal.js"></script>
 +
    <script src="../assets/js/bootstrap-dropdown.js"></script>
 +
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
 +
    <script src="../assets/js/bootstrap-tab.js"></script>
 +
    <script src="../assets/js/bootstrap-tooltip.js"></script>
 +
    <script src="../assets/js/bootstrap-popover.js"></script>
 +
    <script src="../assets/js/bootstrap-button.js"></script>
 +
    <script src="../assets/js/bootstrap-collapse.js"></script>
 +
    <script src="../assets/js/bootstrap-carousel.js"></script>
 +
    <script src="../assets/js/bootstrap-typeahead.js"></script>
 +
    <script>
 +
      !function ($) {
 +
        $(function(){
 +
          // carousel demo
 +
          $('#myCarousel').carousel()
 +
         
 +
        $('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: $(".team").offset().top,
 +
    }, '2400');
 +
});
 +
         
 +
          $(".team tr td").mouseenter(function(){
 +
          $(this).children(":first").toggleClass("hidden");
 +
          $(this).children(":nth-child(2)").toggleClass("hidden");
 +
         
 +
         
 +
          });
 +
         
 +
          $(".team tr td").mouseenter(function(){
 +
            $(this).children(":nth-child(3)").show();
 +
            $(this).children(":nth-child(3)").animate({
 +
                height: '50px',
 +
                display: 'inline-block'
 +
                });
 +
           
 +
            });
 +
         
 +
         
 +
          $(".team tr td").mouseleave(function(){
 +
            $(this).children(":nth-child(2)").toggleClass("hidden");
 +
          $(this).children(":first").toggleClass("hidden");
 +
          $(this).children(":nth-child(3)").css("height","0px");
 +
          $(this).children(":nth-child(3)").hide();
 +
         
 +
            });
 +
      }(window.jQuery)
 +
    </script>
 +
    <script src="../assets/js/holder/holder.js"></script>
 +
  </body>
 +
</html>

Revision as of 21:18, 8 July 2013

Homepage

Penn's iGEM Team

The project

A brief overview

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit. Learn more

Meet the Bunch

Daniel

Mahamad

Josh

Spencer

Photos by Erica Sachse

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