Team:Penn

From 2013.igem.org

(Difference between revisions)
 
(369 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<html lang="en">
-
  <head>
+
<head>
-
    <title>Home</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;
+
      
      
-
        }
+
<script>
-
          
+
         $(document).ready(function($) {
-
        .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;
+
-
}
+
 +
$('.nav_wrap').load('https://googledrive.com/host/0B4ZBZOYYKBzEclFHMmpZcVlydmc');
 +
  });
 +
    </script>
 +
</head>
 +
<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>
-
  /* CUSTOMIZE THE CAROUSEL
+
<center><TABLE  CELLSPACING="10" CELLPADDING="1">
-
    -------------------------------------------------- */
+
 +
<TR>
 +
<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>
-
    .carousel-control {
+
<TD ALIGN = "center" width='240'> <TABLE
-
      height: 80px;
+
style="border:10px inset #099240;">
-
      margin-top: 0;
+
<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>
-
      font-size: 120px;
+
</TABLE><br><a href='https://2013.igem.org/Team:Penn/AssayOverview'>Created a standardized assay for site-specific methylases</a></TD>
-
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
+
-
      background-color: transparent;
+
-
      border: 0;
+
-
      z-index: 10;
+
-
    }
+
-
   
+
-
.carousel img {
+
-
  min-width: 100%;
+
-
}
+
-
 
+
-
   
+
-
 
+
-
    .carousel-caption {
+
<TD ALIGN = "center" width='240'> <TABLE
-
      background-color: rgba(0,0,0,.3);
+
style="border:10px inset #2D68B6;">
-
    }
+
<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>
-
   
+
</TABLE><br><a href='https://2013.igem.org/Team:Penn/Software'>Developed software to automate analysis of our assay</a></TD>
-
    .carousel-caption h1,
+
-
    .carousel-caption .lead {
+
-
      margin: 0;
+
-
      line-height: 1.25;
+
-
      color: #fff;
+
-
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
+
-
    }
+
-
   
+
-
#myCarousel {
+
-
width: 600px;
+
-
height: 400px;
+
-
float: right;
+
-
margin: 90px 50px 10px 30px;
+
-
}
+
 +
</TR>
 +
<TR>
 +
<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>
-
/*Position/size hero unit*/
+
<TD ALIGN = "center" width='240'> <TABLE
-
.hero-unit {
+
style="border:10px inset #ED115B;">
-
    width: 350px;
+
<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>
-
height: 300px;
+
</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>
-
margin-top: 45px;
+
-
    float: left;
+
-
    margin-left: 50px;
+
-
display: inline-block;
+
-
}
+
-
.hero-unit p {
+
</TR>
-
  font-size: 13px;
+
-
}
+
-
#logo {
+
<TR>
-
  height: 45px;
+
-
  float: right;
+
-
  margin-right: -220px;
+
-
}
+
-
    </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">
+
<TD ALIGN = "center" width='240'> <TABLE
-
          <div class="navbar-inner">
+
style="border:10px inset #099240;">
-
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
+
<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>
-
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+
</TABLE><br><a href='https://2013.igem.org/Team:Penn/Team'>Our team</a> <br> <br> <br></TD>
-
              <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 href="https://2013.igem.org/Team:Penn/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>
+
-
                <li><a href="https://2013.igem.org"><img id = "logo" src="https://static.igem.org/mediawiki/igem.org/1/17/IGEM_basic_Logo_white_stylized.png"></li></a>
+
-
              </ul>
+
-
            </div><!--/.nav-collapse -->
+
-
          </div><!-- /.navbar-inner -->
+
-
        </div><!-- /.navbar -->
+
-
      </div> <!-- /.container -->
+
<TD ALIGN = "center" width='240'> <TABLE
-
    </div><!-- /.navbar-wrapper -->
+
style="border:10px inset #2D68B6;">
 +
<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>
-
   
+
 
-
    <div id="myCarousel" class="carousel slide">
+
<TD ALIGN = "center" width='240'> <TABLE
-
      <div class="carousel-inner">
+
style="border:10px inset #CF8035;">
-
        <div class="item active">
+
<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>
-
          <img src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/" alt="" style="top:0px;">
+
</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>
-
          <div class="container">
+
 
-
            <div class="carousel-caption">
+
</TR>
-
              <h1>Hello and Welcome!</h1>
+
 
-
              <p class="lead">Welcome to Penn's iGEM team wiki!  This wiki is currently under construction, but check
+
 
-
              back with us soon to learn more about what we're up to!</p>
+
</TABLE></center>
-
              <a id="team" class="btn btn-large btn-primary" href="https://2013.igem.org/Team:Penn/Team">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">This wiki is currently under construction, but check
+
-
              back with us soon to learn more about what we're up to!  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="https://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.  This wiki is currently under construction, but check
+
-
              back with us soon to learn more about what we're up to! 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="https://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="four">
+
-
        <div class="hero-unit">
+
-
  <h1>Accomplishments</h1>
+
-
  <br/>
+
-
  <p><a href="">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</a></p>
+
-
  <p><a href="">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</a></p>
+
-
  <p><a href="">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</a></p>
+
-
  <p><a href="">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</a></p>
+
</div>
</div>
</div>
</div>
-
   
 
-
   
+
<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
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
+
</div>
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
+
 
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEOFVQV0ZLWEZqN2M"></script></script>
+
</body>
-
   
+
-
    <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;
+
-
            }
+
-
            });
+
-
          */
+
-
         
+
-
         
 
-
      }(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