Team:Penn

From 2013.igem.org

(Difference between revisions)
 
(303 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<html lang="en">
-
  <head>
+
<head>
-
    <title>Team</title>
+
-
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
-
    <!-- Bootstrap -->
+
-
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEeUFaR1lNWFZWMnc" rel="stylesheet" media="screen">
+
-
        <link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
+
-
   
+
     <title>Penn iGEM</title>
-
     <style>
+
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEVHRaZEdUVGo5cjA" type="text/css" rel="stylesheet"/> <!--css-->
-
        /*fonts/headings*/
+
-
        h4 {
+
-
            text-align: left;
+
-
        }
+
-
       
+
-
       
+
-
       
+
-
/*Brady Bunch Table*/
+
-
.team {
+
-
      float: center;
+
-
      margin: auto;
+
-
   
+
-
}
+
-
.team td {
+
<script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script> <!--jquery-->
-
    overflow: hidden;
+
-
            height:175px;
+
-
            width:220px;
+
-
            display: inline-block;
+
-
            padding:5px;
+
-
            margin: 3px;
+
-
            background-color: #721a35;
+
-
            margin: 2px;
+
      
      
-
        }
+
<script>
-
          
+
         $(document).ready(function($) {
-
        .hidden { /*change this class when hovered*/
+
-
            display: none;
+
-
        }
+
-
        .team img {
+
-
          max-width:100%;
+
-
    max-height:100%;
+
-
    background-color: #721a35;
+
-
        }
+
-
       
+
-
.name {
+
-
    margin-top:-5px;
+
-
    margin-left: -5px;
+
-
    padding:5px;
+
-
    width: 220px;
+
-
    height: 175px;
+
-
    display: none;
+
-
    background-color: #721a35;
+
-
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
+
-
  filter: alpha(opacity=80);
+
-
-moz-opacity: 0.8;
+
-
-khtml-opacity: 0.8;
+
-
  opacity: 0.8;
+
-
}
+
-
#center:hover {
+
$('.nav_wrap').load('https://googledrive.com/host/0B4ZBZOYYKBzEclFHMmpZcVlydmc');
-
    cursor: auto;
+
  });
-
    -moz-box-shadow: none;
+
     </script>
-
-webkit-box-shadow: none;
+
</head>
-
box-shadow: none;
+
-
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=0, Color='#444444')";
+
-
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=0, Color='#444444');
+
-
   
+
-
}
+
-
h4 {
+
-
    text-align: center;
+
-
     font-size: 16px;
+
-
    color: black;
+
-
}
+
 +
<body>
 +
<div id = "banner_wrap">
 +
<div class = "banner"></div>
 +
</div>
 +
<div id = "nav_holder">
 +
<div class = "nav_wrap"></div>
 +
</div>
 +
<div id="text">
 +
<div class="textwrap">
 +
<br>
 +
<br><center><a href = 'https://docs.google.com/forms/d/188iefj_j6gBvrHC0IS3rG2zBelaVuy-JddYNN7QF8_Y/viewform'>Interested in joining the team? Submit your application for Penn iGEM 2014 here. </a></center>
 +
<br>
 +
<br>
 +
<center><object width="900" height="506"><param name="movie" value="//www.youtube.com/v/YJQniNpnU9Q?version=3&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/YJQniNpnU9Q?version=3&amp;hl=en_US" type="application/x-shockwave-flash" width="800" height="506" allowscriptaccess="always" allowfullscreen="true"></embed></object></center>
-
/*change the cursor to pointer (like when hovering a link) and add a box shadow*/
+
<center><TABLE CELLSPACING="10" CELLPADDING="1">
-
td:hover {
+
-
  cursor:pointer;
+
-
-moz-box-shadow: 4px 4px 4px #444;
+
-
-webkit-box-shadow: 4px 4px 4px #444;
+
-
box-shadow: 4px 4px 4px #444;
+
-
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444')";
+
-
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#444444');
+
-
}
+
-
/*Change color of big banner at the top*/
+
<TR>
-
.jumbotron {
+
-
  position: relative;
+
-
  padding: 40px 0;
+
-
  color: #fff;
+
-
  text-align: center;
+
-
  text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
+
-
  background: #721a35; /* Old browsers */
+
-
  background: -moz-linear-gradient(45deg,  #721a35 0%, #65003a 100%); /* FF3.6+ */
+
-
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#721a35), color-stop(100%,#65003a)); /* Chrome,Safari4+ */
+
-
  background: -webkit-linear-gradient(45deg, #721a35 0%,#65003a 100%); /* Chrome10+,Safari5.1+ */
+
-
  background: -o-linear-gradient(45deg, #721a35 0%,#65003a 100%); /* Opera 11.10+ */
+
-
  background: -ms-linear-gradient(45deg,  #721a35 0%,#65003a 100%); /* IE10+ */
+
-
  background: linear-gradient(45deg, #721a35 0%,#65003a 100%); /* W3C */
+
-
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#721a35', endColorstr='#65003a3',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
+
-
  -webkit-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
+
-
    -moz-box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
+
-
          box-shadow: inset 0 3px 7px rgba(0,0,0,.2), inset 0 -3px 7px rgba(0,0,0,.2);
+
-
}
+
-
/*add some height to jumbotron banner thing*/
+
<TD ALIGN = "center" width='240'> <TABLE
 +
style="border:10px inset #CF8035;">
 +
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/MaGellinToolbox'><IMG SRC="http://farm6.staticflickr.com/5523/10529365546_355d2fe7fc.jpg" width="240" height="auto"></a></TD></TR>
 +
</TABLE><br><a href='https://2013.igem.org/Team:Penn/MaGellinToolbox'>Constructed a toolbox for developing site-specific DNA methylases</a></TD>
-
.container {
+
<TD ALIGN = "center" width='240'> <TABLE
-
min-height: 600px;
+
style="border:10px inset #099240;">
-
}
+
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/AssayOverview'><IMG SRC="http://farm3.staticflickr.com/2836/10529350575_dfb38e3538.jpg" width="240" height="auto"></a></TD></TR>
 +
</TABLE><br><a href='https://2013.igem.org/Team:Penn/AssayOverview'>Created a standardized assay for site-specific methylases</a></TD>
-
 
+
<TD ALIGN = "center" width='240'> <TABLE
-
    </style>
+
style="border:10px inset #2D68B6;">
-
  </head>
+
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/Software'><IMG SRC="http://farm4.staticflickr.com/3742/10529401844_cc5f713a48.jpg" width="240" height="auto"></a></TD></TR>
-
  <body>
+
</TABLE><br><a href='https://2013.igem.org/Team:Penn/Software'>Developed software to automate analysis of our assay</a></TD>
-
   
+
-
   
+
-
    <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 navbar-fixed-top">
+
</TR>
-
          <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 -->
+
<TR>
-
    </div><!-- /.navbar-wrapper -->
+
 +
<TD ALIGN = "center" width='240'> <TABLE
 +
style="border:10px inset #1F135B;">
 +
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/MethylaseOverview'><IMG SRC="http://farm6.staticflickr.com/5478/10529350195_2c54c496e5.jpg" width="240" height="auto"></a></TD></TR>
 +
</TABLE><br><a href='https://2013.igem.org/Team:Penn/MethylaseOverview'>Designed and characterized a novel TALE-methylase fusion protein</a> <br></TD>
 +
<TD ALIGN = "center" width='240'> <TABLE
 +
style="border:10px inset #F61F27;">
 +
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/hpoverview'><IMG SRC="http://farm4.staticflickr.com/3670/10529586493_833c6216ee.jpg" width="240" height="auto"></a></TD></TR>
 +
</TABLE><br><a href='https://2013.igem.org/Team:Penn/hpoverview'>Introduced synthetic biology to the community</a></TD>
-
    <!--Giant Image At the Top-->
+
<TD ALIGN = "center" width='240'> <TABLE
-
    <div class="jumbotron masthead">
+
style="border:10px inset #ED115B;">
-
  <div class="container">
+
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/Too_Soon_To_Treat'><IMG SRC="http://farm4.staticflickr.com/3815/10529365086_82d164e2b1.jpg" width="240" height="auto"></a></TD></TR>
-
    <h1>Meet the Team</h1>
+
</TABLE><br><a href='https://2013.igem.org/Team:Penn/Too_Soon_To_Treat'>Published an article on the ethics of epigenetic engineering</a></TD>
-
    <p>Lorem ipsum dolor sit amet.</p>
+
-
  </div>
+
-
</div>
+
 +
</TR>
-
    <!--Team stuff-->
+
<TR>
-
<h2 style="text-align: center; margin-top: 200px;">Meet the Bunch</h2>
+
-
<table class="team" cellpadding="5">
+
-
    <tr>
+
-
        <td>
+
-
            <img id="flipbox" src="https://googledrive.com/host/0B4ZBZOYYKBzETDEzdFdSOC1ZVW8"/>
+
-
            <div class="name"><h4>Name/Major</h4></div></td>
+
-
       
+
-
        <td>
+
-
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzETldtZHBxMTM3Ujg"/>
+
-
            <div class="name"><h4>Josh Tycko<br/>Major:</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 Cabrera<br/> Major:</h4></div></td>
+
-
     
+
-
        <td id="center"><h4><!--Center--></h4></td>
+
-
        <td>
+
-
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzELXJ5NlFKUkJXRnc"/>
+
-
            <div class="name"><h4>Mahamad Charawi<br/>Major:</h4></div></td>
+
-
    </tr>
+
-
    <tr>
+
-
        <td>
+
-
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzERmpYczlyYU5TTUE"/>
+
-
            <div class="name"><h4>Name/Major</h4></div>
+
-
       
+
-
          <td>
+
-
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzEZ0tlUUViY2Z6Ymc"/>
+
-
            <div class="name"><h4>Name/Major</h4></div></td>
+
-
       
+
-
        <td>
+
-
            <img src="https://googledrive.com/host/0B4ZBZOYYKBzET2NBWmlOLVMtaVE">
+
-
                <div class="name"><h4>Spencer</h4></div></td>
+
-
    </tr>
+
-
  </table>
+
-
<h4 style="text-align: center">Photos by Erica Sachse</h4>
+
-
   
+
<TD ALIGN = "center" width='240'> <TABLE
-
    </div>
+
style="border:10px inset #099240;">
-
   
+
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/Team'><IMG SRC="http://farm6.staticflickr.com/5533/10529401504_677c4f296a.jpg" width="240" height="auto"></a></TD></TR>
-
   
+
</TABLE><br><a href='https://2013.igem.org/Team:Penn/Team'>Our team</a> <br> <br> <br></TD>
-
   
+
-
   
+
-
   
+
-
    <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();
+
-
         
+
-
            });*/
+
-
   
+
<TD ALIGN = "center" width='240'> <TABLE
-
   
+
style="border:10px inset #2D68B6;">
-
          $("td").click(function(){
+
<TR><TD ALIGN="center"><a href='https://2013.igem.org/Team:Penn/Achievements'><IMG SRC="http://farm4.staticflickr.com/3739/10529350025_2db22731e9.jpg" width="240" height="auto"></a></TD></TR>
-
   
+
</TABLE><br><a href='https://2013.igem.org/Team:Penn/Achievements'>Grand Prize Winner, North America<br>Best Experimental Measurement Approach, North America</a></TD>
-
    if ($(this).children("img").is(":visible")) {
+
 
-
   
+
 
-
            $(this).flip({direction: 'tb', content: $(this), color: '#721a35'
+
<TD ALIGN = "center" width='240'> <TABLE
-
            });
+
style="border:10px inset #CF8035;">
-
            $(this).children("img").hide();
+
<TR><TD ALIGN="center"><a href='http://articles.philly.com/2013-11-27/news/44490110_1_synthetic-biology-research-project-international-genetically-engineered-machine'><IMG SRC="http://farm8.staticflickr.com/7397/10529350205_c12e2cd367.jpg" width="240" height="auto"></a></TD></TR>
-
                $(this).children(".name").show();
+
</TABLE><br><a href='http://articles.philly.com/2013-11-27/news/44490110_1_synthetic-biology-research-project-international-genetically-engineered-machine'>Featured in a Philadelphia Inquirer article</a> <br> <br> <br></TD>
-
             
+
 
-
    }
+
</TR>
-
   
+
 
-
       
+
 
-
          else {
+
</TABLE></center>
-
          $(this).flip({direction: 'tb', content: $(this), color: '#721a35' });
+
</div>
-
                        $(this).children(".name").hide();
+
</div>
-
                $(this).children("img").show();
+
 
-
     
+
<div id ="pagefooter">
-
           
+
<br>
-
           
+
<br>
-
          }
+
<center><a href = "https://2013.igem.org/Team:Penn"> Home  </a> <a href = "https://static.igem.org/mediawiki/2013/e/e5/Spec_Sheet.pdf" >Spec Sheet</a> <a href = "https://2013.igem.org/Team:Penn/sitemap" >Sitemap</a>
-
            });
+
</center>
-
         
+
<br>
-
           
+
Penn iGem &copy; 2013
-
       
+
</div>
-
         
+
 
-
         
+
</body>
-
         
 
-
      }(window.jQuery)
 
-
    </script>
 
-
    <script src="../assets/js/holder/holder.js"></script>
 
-
  </body>
 
</html>
</html>

Latest revision as of 16:42, 15 January 2014

Penn iGEM