Team:Penn/Team

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;">
+
    <title>Homepage</title>
-
This is a template page. READ THESE INSTRUCTIONS.
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
</div>
+
    <!-- Bootstrap -->
-
<div id="instructions" style="text-align: center; font-weight: normal; font-size: small; color: #f6f6f6; padding: 5px;">
+
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEeUFaR1lNWFZWMnc" rel="stylesheet" media="screen">
-
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://2008.igem.org/Help:Template/Examples">HERE</a>.
+
        <link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
-
</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 *** -->
+
   
 +
    <style>
 +
        /*fonts/headings*/
 +
        h4 {
 +
            text-align: center;
 +
        }
 +
       
 +
       
 +
       
 +
       
 +
/*Brady Bunch Table*/
 +
.team {
 +
      float: center;
 +
      margin: auto;
 +
}
 +
.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%; 
 +
        }
 +
       
 +
.name {
 +
    position: absolute;
 +
    margin-bottom: 30px;
 +
    width: 220px;
 +
    height: 0px;
 +
    display: none;
 +
    background-color: white;
 +
    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;
 +
}
-
{|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]]
 
-
|-
 
-
|
 
-
|[[Image:Penn_team.png|right|frame|Your team picture]]
 
-
|-
 
-
|
 
-
|align="center"|[[Team:Penn | Team Penn]]
 
-
|}
 
-
<!--- The Mission, Experiments --->
+
  /* CUSTOMIZE THE CAROUSEL
 +
    -------------------------------------------------- */
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
+
    /* Carousel base class */
-
!align="center"|[[Team:Penn|Home]]
+
    .carousel .container {
-
!align="center"|[[Team:Penn/Team|Team]]
+
      position: relative;
-
!align="center"|[https://igem.org/Team.cgi?year=2013&team_name=Penn Official Team Profile]
+
      z-index: 9;
-
!align="center"|[[Team:Penn/Project|Project]]
+
    }
-
!align="center"|[[Team:Penn/Parts|Parts Submitted to the Registry]]
+
-
!align="center"|[[Team:Penn/Modeling|Modeling]]
+
-
!align="center"|[[Team:Penn/Notebook|Notebook]]
+
-
!align="center"|[[Team:Penn/Safety|Safety]]
+
-
!align="center"|[[Team:Penn/Attributions|Attributions]]
+
-
|}
+
 +
    .carousel-control {
 +
      height: 80px;
 +
      margin-top: 0;
 +
      font-size: 120px;
 +
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
 +
      background-color: transparent;
 +
      border: 0;
 +
      z-index: 10;
 +
    }
 +
  .carousel .item {
 +
        height: 500px;
 +
    }
 +
   
 +
    .carousel img {
 +
      position: absolute;
 +
      top: -100px;
 +
      left: 0;
 +
      min-width: 100%;
 +
 
 +
    }
-
== '''Who we are''' ==
+
    .carousel-caption {
-
{|border = "0"
+
      background-color: rgba(0,0,0,.4);
-
|-
+
    position: static;
-
|rowspan="3"|
+
      max-width: 500px;
 +
      padding: 5 20px;
 +
      margin-top: 300px;
 +
    }
 +
   
 +
    .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;
 +
    }
 +
 +
 
 +
    </style>
 +
  </head>
 +
  <body>
 +
   
 +
   
 +
    <div class="navbar-wrapper">
 +
      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
 +
      <div class="container">
 +
        <div class="navbar navbar-inverse">
 +
          <div class="navbar-inner">
 +
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
 +
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 +
              <span class="icon-bar"></span>
 +
              <span class="icon-bar"></span>
 +
              <span class="icon-bar"></span>
 +
            </button>
 +
            <a class="brand" href="https://2013.igem.org/Team:Penn">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">
 +
             
 +
                <!-- 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?id=1128">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="https://2013.igem.org/Team:Penn/HumanPractices">Human Practices</a></li>
 +
<li><a href="https://2013.igem.org/Team:Penn/Notebook">Notebook</a></li>
 +
                <li class="dropdown">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Project <b class="caret"></b></a>
 +
                  <ul class="dropdown-menu">
 +
                 
 +
                    <li><a href="https://2013.igem.org/Team:Penn/Project">Project</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 -->
 +
   
 +
   
 +
    <!--Overview-->
 +
    <div class="four">
 +
        <div class="hero-unit" style="text-align:left;">
 +
  <h1>Team</h1>
 +
  <p>About us</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>
 +
   
 +
    <!--Team stuff-->
 +
<h2 style="text-align: center;">Meet the Bunch</h2>
 +
<table class="team" cellpadding="5">
 +
    <tr>
 +
        <td>
 +
            <img id="flipbox" src="https://googledrive.com/host/0B4ZBZOYYKBzETDEzdFdSOC1ZVW8"/>
 +
            <div class="name"><h4></h4></div></td>
 +
       
 +
        <td>
 +
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzETldtZHBxMTM3Ujg"/>
 +
            <div class="name"><h4>Josh</h4></div></td>
 +
       
 +
     
 +
       
 +
        <td>
 +
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzEU3VZUnNOdWFqYVE"/>
 +
            <div class="name"><h4>Danielle</h4></div></td>
 +
    </tr>
 +
    <tr>
 +
       
 +
        <td>
 +
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzEZXRRMlRtODR2OVk/">
 +
                <div class="name"><h4>Daniel</h4></div></td>
 +
     
 +
        <td><h4><!--Center--></h4></td>
 +
        <td>
 +
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzELXJ5NlFKUkJXRnc"/>
 +
            <div class="name"><h4>Mahamad</h4></div></td>
 +
    </tr>
 +
    <tr>
 +
        <td>
 +
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzERmpYczlyYU5TTUE"/>
 +
            <div class="name"><h4></h4></div>
 +
       
 +
          <td>
 +
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzEZ0tlUUViY2Z6Ymc"/>
 +
            <div class="name"><h4></h4></div></td>
 +
       
 +
        <td>
 +
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzET2NBWmlOLVMtaVE">
 +
                <div class="name"><h4>Spencer</h4></div></td>
 +
    </tr>
 +
  </table>
 +
<h4>Photos by Erica Sachse</h4>
-
'''Advisors:'''
+
   
 +
    </div>
 +
   
 +
   
 +
   
 +
   
 +
   
 +
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
 +
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
 +
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEOFVQV0ZLWEZqN2M"></script></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();
 +
         
 +
            });*/
 +
       
 +
        /*Temporary toggle that doesn't really work*/
 +
        var t = 2;
 +
          $("td").click(function(){
 +
            if (t==2) { 
 +
            $(this).flip({direction: 'tb',
 +
                        content: 'Name/description'});
 +
            t=t-1;
 +
            }
 +
            else {
 +
            $(this).revertFlip();
 +
            t=t+1;
 +
            }
 +
            });
 +
         
 +
         
-
*''' Advisor 1''':    Mentor for all
+
         
-
*'''Advisor 2''':      Our favorite
+
      }(window.jQuery)
-
*'''Grad Student 1''':    Our leader 
+
    </script>
-
 
+
    <script src="../assets/js/holder/holder.js"></script>
-
 
+
  </body>
-
'''Undergrads:'''
+
</html>
-
 
+
-
*'''Student 1''':    Sleepyhead
+
-
*'''Student 2''':    Math nerd
+
-
*'''Student 3''':    Is going to save the world
+
-
*'''Student 4''':    Loves iGEM
+
-
*'''Student 5''':  A normal student... or(r) am I?
+
-
*'''Student 6''':  Table football fan
+
-
*'''Student 7''':
+
-
 
+
-
 
+
-
|
+
-
<gallery>
+
-
Image:Example2_Team_member_1.png|Team member 1
+
-
Image:Example2_Team_member_2.png|Team member 2
+
-
Image:Example2_Team_member_3.png|Team member 3
+
-
Image:Example2_Team_member_4.png|Team member 4
+
-
Image:Example2_Team_member_5.png|Team member 5
+
-
Image:Example2_Team_member_6.png|Team member 6
+
-
Image:Example2_Team_member_7.png|Team member 7
+
-
</gallery>
+
-
|}
+
-
 
+
-
== '''What we did''' ==
+
-
 
+
-
(Provide proper attribution for all work)
+
-
 
+
-
 
+
-
== '''Where we're from''' ==
+

Revision as of 19:23, 12 July 2013

Homepage

Penn's iGEM Team

Team

About us

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

Josh

Danielle

Daniel

Mahamad

Spencer

Photos by Erica Sachse

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