|
|
(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&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&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 © 2013 |
- |
| + | </div> |
- |
| + | |
- |
| + | </body> |
| | | |
- |
| |
- | }(window.jQuery)
| |
- | </script>
| |
- | <script src="../assets/js/holder/holder.js"></script>
| |
- | </body>
| |
| </html> | | </html> |