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"/>
+
    <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">
 +
        <link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
-
<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").mouseleave(function(){
+
-
             $(this).children(":nth-child(2)").toggleClass("hidden");
+
-
          $(this).children(":first").toggleClass("hidden");
+
-
         
+
-
            });
+
-
         
+
          
          
-
         
+
       
-
         
+
       
-
         
+
       
-
         
+
/*Brady Bunch Table*/
-
//check which element is in view and highlight corresponding circle -- still needs to be added
+
.team {
 +
      float: center;
 +
      margin: auto;
 +
}
-
});
+
.team td {
 +
    overflow: hidden;
 +
            height:175px;
 +
            width:220px;
 +
            display: inline-block;
 +
            padding:5px;
      
      
-
+
        }
-
 
+
       
-
</script>
+
        .hidden { /*change this class when hovered*/
-
 
+
            display: none;
-
 
+
        }
-
<style>
+
        .team img {
-
   
+
          max-width:100%;
-
/*image carousel styling (taken mostly from plugin site)*/
+
    max-height:100%;   
-
#slider-code { height: 300px;  display: inline; overflow: hidden;}
+
        }
-
#slider-code .viewport { float: left; width: 400px; height: 300px;
+
       
-
margin-right: -35px; border: background-color: gray;
+
.name {
-
overflow: hidden; position:relative; margin-top: 100px; margin-left: 75px;  z-index: -2;}
+
    position: absolute;
-
#slider-code .buttons { display: block; margin: 30px -100px 0 0px; float: left; margin-top:225px; z-index: 1;}
+
    margin-bottom: 30px;
-
#slider-code .next { margin: 20px 0 0 10px; margin-top: 225px; z-index: 1;}
+
    width: 220px;
-
#slider-code .disable { visibility: hidden; }
+
    height: 0px;
-
#slider-code .overview { list-style: none; position: absolute;
+
    display: none;
-
padding: 0; margin: 0; left: 0; top: 0; }
+
    background-color: white;
-
#slider-code .overview li{ float: left; margin: 0 20px 0 0;
+
     margin-top: -50px;
-
padding: 1px; height: 296px; width: 396px;}
+
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-
#slider-code .prev { padding-left: 100px; z-index: 1;}
+
  filter: alpha(opacity=70);
-
#slider-code .pager { overflow:hidden; list-style: none; clear: both; margin: 0 0 0 100px; }
+
-moz-opacity: 0.7;
-
#slider-code .pager li { float: left; height:10px; width:10px; margin: 5px 15px 15px 0px; z-index: 99; }
+
-khtml-opacity: 0.7;
-
#slider-code .pagenum { background-color: #fff; text-decoration: none; text-align: center; padding: 10px; color: #555555; font-size: 14px; font-weight: bold; display: block; }
+
  opacity: 0.7;
-
#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;
+
}
}
 +
/*Sections of page*/
.two {
.two {
 +
margin-top: -20px;
height:800px;
height:800px;
position: relative;
position: relative;
Line 121: Line 67:
background-repeat: no-repeat;
background-repeat: no-repeat;
background-size: 80%;
background-size: 80%;
 +
background-attachment: fixed;
 +
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 +
  filter: alpha(opacity=70);
 +
-moz-opacity: 0.7;
 +
-khtml-opacity: 0.7;
 +
  opacity: 0.7;
}
}
-
 
+
       
-
.three {
+
    .three {
-
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/8XND1QonMj/Profile%20Photos/coolbluestuff.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
+
/*
 +
no background image for now
 +
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/8XND1QonMj/Profile%20Photos/coolbluestuff.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");*/
position: relative;
position: relative;
text-align: center;
text-align: center;
height:800px;
height:800px;
width: 100%;
width: 100%;
-
background-color: rgb(200,200,200);
+
padding-top: 50px;
-
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{
+
  /* CUSTOMIZE THE CAROUSEL
-
     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;
+
-
}
+
    /* Carousel base class */
 +
    .carousel .container {
 +
      position: relative;
 +
      z-index: 9;
 +
    }
-
#navigation li:hover{
+
    .carousel-control {
-
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+
      height: 80px;
-
  filter: alpha(opacity=60);
+
      margin-top: 0;
-
-moz-opacity: 0.6;
+
      font-size: 120px;
-
-khtml-opacity: 0.6;
+
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
-
  opacity: 0.6;
+
      background-color: transparent;
-
}
+
      border: 0;
 +
      z-index: 10;
 +
    }
-
#navigation li {
+
    .carousel .item {
-
z-index:9999;
+
        height: 500px;
-
height: 20px;
+
    }
-
margin: 30px;
+
    .carousel img {
-
width: 20px;
+
      position: absolute;
-
background-color: white;
+
      top: 0;
-
-moz-border-radius: 100%;
+
      left: 0;
-
-ms-border-radius: 100%;
+
      min-width: 100%;
-
-webkit-border-radius: 100%;
+
    }
-
-o-border-radius: 100%;
+
-
border-radius: 100%;
+
-
opacity: 1;
+
-
}
+
-
#tabs {
+
    .carousel-caption {
-
    position: absolute;
+
      background-color: transparent;
-
    list-style-type: none;
+
      position: static;
-
     z-index: 99;
+
      max-width: 550px;
-
    left: -330px;
+
      padding: 0 20px;
-
     top: 100px;
+
      margin-top: 200px;
-
}
+
     }
 +
    .carousel-caption h1,
 +
    .carousel-caption .lead {
 +
      margin: 0;
 +
      line-height: 1.25;
 +
      color: #fff;
 +
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
 +
     }
 +
    .carousel-caption .btn {
 +
      margin-top: 10px;
 +
    }
-
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*/
+
/*Position/size hero unit*/
-
.member {
+
.hero-unit {
-
     display: inline-block;
+
     width: 300px;
     float: left;
     float: left;
-
     margin: 20px;
+
     margin-left: 50px;
-
    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;
 
-
 
-
}
 
-
 
-
.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;
+
             /* CUSTOMIZE THE NAVBAR
-
            height: 5px;
+
    -------------------------------------------------- */
-
            bottom: 0px;
+
-
            width: 100%;
+
-
            background-color: white;
+
-
            position: absolute;
+
-
        }
+
 +
    /* 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>
+
    /* Remove border and change up box shadow for more contrast */
-
</head>
+
    .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);
 +
    }
 +
    /* Downsize the brand/project name a bit */
 +
    .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);
 +
    }
-
<body bgcolor="black">
+
    /* Navbar links: increase padding for taller navbar */
-
<div class="outer">
+
    .navbar .nav > li > a {
 +
      padding: 15px 20px;
 +
    }
-
<!--<div id="banner">
+
    /* Offset the responsive button for proper vertical alignment */
-
Banner
+
    .navbar .btn-navbar {
-
</div>-->
+
      margin-top: 10px;
 +
    }
 +
    </style>
 +
  </head>
 +
  <body>
 +
   
 +
   
 +
    <div class="navbar-wrapper">
 +
      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
 +
      <div class="container">
-
<!--no side links
+
        <div class="navbar navbar-inverse">
-
<ul id="tabs">
+
          <div class="navbar-inner">
-
    <li><h2>Link</h2></li>
+
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
-
    <li><div class="link"><h2>Link</h2></div></li>
+
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
-
</ul>-->
+
              <span class="icon-bar"></span>
 +
              <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="https://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="https://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="https://2013.igem.org/Team:Penn/HumanPractices">Human Practices</a></li>
 +
                <li><a href="https://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="https://2013.igem.org/Team:Penn/Notebook">Notebook</a></li>
 +
                    <li><a href="https://2013.igem.org/Team:Penn/Parts">Parts</a></li>
 +
                    <li><a href="https://2013.igem.org/Team:Penn/Modeling">Modeling</a></li>
 +
                    <li><a href="https://2013.igem.org/Team:Penn/Safety">Safety</a></li>
 +
                  </ul>
 +
                </li>
 +
              </ul>
 +
            </div><!--/.nav-collapse -->
 +
          </div><!-- /.navbar-inner -->
 +
        </div><!-- /.navbar -->
 +
 
 +
      </div> <!-- /.container -->
 +
    </div><!-- /.navbar-wrapper -->
-
<!--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 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>
-
 
-
<!--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 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>
      
      
-
     <!--Description to the right of the carousel that briefly introduces the team/project-->
+
     <!--Team stuff-->
-
     <div class="right">
+
     <div class="three">
-
        <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>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/"><div class="name"></div></td>
+
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzETDEzdFdSOC1ZVW8"/>
 +
            <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"/><div class="name"></div></td>
+
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzEZ0tlUUViY2Z6Ymc"/>
 +
            <div class="name"><h4></h4></div></td>
          
          
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEU25rV1dHYm1Falk"/>
         <td><img src="https://googledrive.com/host/0B4ZBZOYYKBzEU25rV1dHYm1Falk"/>
-
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzEU3VZUnNOdWFqYVE"/><div class="name"></div></td>
+
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzEU3VZUnNOdWFqYVE"/>
 +
            <div class="name"><h4></h4></div></td>
     </tr>
     </tr>
     <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/0B4ZBZOYYKBzEYUtVa3BNSHQ4dTg"/>
 +
             <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"/><div class="name"></div></td>
+
             <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"/><div class="name"></div></td>
+
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzELXJ5NlFKUkJXRnc"/>
 +
            <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"/><div class="name"></div></td>
+
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzETldtZHBxMTM3Ujg"/>
 +
            <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"/><div class="name"></div>
+
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzERmpYczlyYU5TTUE"/>
 +
            <div class="name"><h4></h4></div>
         <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"><div class="name"></div></td>
+
             <img class="hidden" src="https://googledrive.com/host/0B4ZBZOYYKBzET2NBWmlOLVMtaVE">
 +
                <div class="name"><h4>Spencer</h4></div></td>
     </tr>
     </tr>
   </table>
   </table>
  <h4>Photos by Erica Sachse</h4>
  <h4>Photos by Erica Sachse</h4>
-
</body>
+
 
 +
   
 +
   
 +
   
 +
   
 +
   
 +
   
 +
   
 +
    <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>
</html>

Revision as of 21:36, 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:UPenn"