Team:Penn

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
<html lang="en">
-
  <head>
+
<head>
-
     <title>Home</title>
+
     <title>Project</title>
-
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEVHRaZEdUVGo5cjA" type="text/css" rel="stylesheet"/>
-
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
+
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
-
     <link href="https://googledrive.com/host/0B4ZBZOYYKBzEeUFaR1lNWFZWMnc" rel="stylesheet" media="screen">
+
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
-
        <link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
+
    <script src="https://raw.github.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.min.js"></script>
 +
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEeXlaR0U2ZnFETFU" type="text/javascript"></script>
 +
 
 +
    <style>
          
          
 +
/*Page specific*/
 +
   
 +
    .left_wrap {
 +
        min-height: 700px;
 +
    }
 +
   
 +
    #carousel a img {
 +
        display: none !important;
 +
    }
 +
   
 +
    .text a img {
 +
        display: none !important;
 +
    }
 +
   
 +
    .text p {
 +
        font-family: arial, sans-serif;
 +
        color: black
 +
    }
      
      
-
     <style>
+
   
-
         /*fonts/headings*/
+
      h2 {
-
         h4 {
+
            text-align: center;
-
             text-align: left;
+
            font-family: arial, sans-serif;
 +
            font-size: 18px;
 +
            color: black;
 +
        }
 +
       
 +
        .min-margin {
 +
            width: 200px;
 +
            height: 2000px;
 +
        }
 +
       
 +
        .section-title {
 +
            font-family: arial, sans-serif;
 +
            font-size: 25px;
 +
            -webkit-transform: rotate(-90deg);
 +
     -moz-transform: rotate(-90deg);
 +
    -o-transform: rotate(-90deg);
 +
    -ms-transform: rotate(-90deg);
 +
    transform: rotate(-90deg);
 +
         }
 +
          
 +
        .captions {
 +
             font-family: arial, sans-serif;
 +
            display: none;
         }
         }
-
 
-
h1 {
 
-
text-align: center;
 
-
}
 
-
 
-
  /* CUSTOMIZE THE CAROUSEL
 
-
    -------------------------------------------------- */
 
-
 
-
 
-
 
-
    .carousel-control {
 
-
      height: 80px;
 
-
      margin-top: 0;
 
-
      font-size: 75px;
 
-
      text-shadow: 0 1px 1px rgba(0,0,0,.4);
 
-
      background-color: transparent;
 
-
      border: 0;
 
-
      z-index: 10;
 
-
color: rgb(200,200,200);
 
-
    }
 
-
 
      
      
-
     #main_area{
+
     #carousel ul {
-
  width: 80%;
+
list-style: none;
-
  margin: auto !important;
+
width:1600px;
-
float: center;
+
margin: 0;
-
 
+
padding: 0;
-
     
+
position:relative;
-
    }
+
-
 
+
-
/*#myCarousel {
+
-
  width: 80%;
+
-
 
+
-
+
-
}*/
+
-
   
+
-
 
+
-
.item {
+
-
  overflow: hidden;
+
-
+
-
 
+
}
}
-
 
+
#carousel li {
-
.span2 {
+
display:inline;
-
  overflow: hidden;
+
float:left;
-
  height: 80px;
+
-
 
+
-
 
+
}
}
-
.thumbnails {
+
.textholder {
-
overflow: hidden
+
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
-
position: relative;
+
  /* IE 5-7 */
-
float: center;
+
  filter: alpha(opacity=80) !important;
 +
  /* Netscape */
 +
  -moz-opacity: 0.8 !important;
 +
  /* Safari 1.x */
 +
  -khtml-opacity: 0.8 !important;
 +
  /* Good browsers */
 +
  opacity: 0.8 !important;
}
}
-
 
+
             
-
.span4 {
+
       
-
  float: right;
+
   
-
  text-align: right;
+
       
-
}
+
-
 
+
-
 
+
-
.footer {
+
-
width: 100%;
+
-
height: 15px;
+
-
padding: 5px;
+
-
margin-top: 100px;
+
-
text-align: left;
+
-
background-color: black;
+
-
color: #FFFFFF;
+
-
}
+
-
 
+
-
 
+
     </style>
     </style>
-
  </head>
+
</head>
-
  <body>
+
<body>
-
    <div class="wrapper">
+
<img src="http://upload.wikimedia.org/wikipedia/en/d/d6/IGEM_official_logo.png" id="igem"/><!--igem logo-->
 +
  <div class="left_wrap">
      
      
-
  <div class="navbar-wrapper">
+
 
-
      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
+
  <!-- <div class="logo-wrap"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEUlI3ZDU2OGRrc1E" id="penn"/></div><!--penn logo-->
-
      <div class="container">
+
   
-
 
+
    <ul class="navbar">
-
        <div class="navbar navbar-inverse navbar-fixed-top">
+
        <a href="https://2013.igem.org/Team:Penn"><li>HOME</li></a>
-
          <div class="navbar-inner">
+
                 <li class="dropdown" id="project">
-
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
+
                   <a href="#" class="active" data-toggle="dropdown">PROJECT<div class="arrow">></div> <b class="caret"></b></a>
-
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+
                   <ul class="dropdown-menu" id="drop-menu1">
-
              <span class="icon-bar"></span>
+
-
              <span class="icon-bar"></span>
+
-
              <span class="icon-bar"></span>
+
-
            </button>
+
-
          <!-- <a class="brand" style="color: white; padding-left: 11%;" href="https://2013.igem.org/Team:Penn">Penn iGEM</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">Penn iGEM</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>
+
                    <a href="https://2013.igem.org/Team:Penn/Project"><li class="active" style="background-color: rgb(200,200,215);">project</li></a>
-
                     <li><a href="https://2013.igem.org/Team:Penn/Parts">Parts</a></li>
+
                     <a href="https://2013.igem.org/Team:Penn/Parts"><li>parts</li></a>
-
                     <li><a href="https://2013.igem.org/Team:Penn/Modeling">Modeling</a></li>
+
                     <a href="https://2013.igem.org/Team:Penn/Modeling"><li>modeling</li></a>
-
                    <li><a href="https://2013.igem.org/Team:Penn/Safety">Safety</a></li>
+
                    <a href="https://2013.igem.org/Team:Penn/Safety"><li>safety</li></a>
                   </ul>
                   </ul>
                 </li>
                 </li>
-
                 <li class="dropdown">
+
                 <li class="dropdown" id="about">
-
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a>
+
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">ABOUT<div class="arrow">></div>  <b class="caret"></b></a>
-
                   <ul class="dropdown-menu">
+
                   <ul class="dropdown-menu" id="drop-menu2">
-
                    <li><a href="https://2013.igem.org/Team:Penn/Team">Team</a></li>
+
                  <a href="https://2013.igem.org/Team:Penn/Team"> <li>team</li></a>
-
                    <li><a href="https://2013.igem.org/Team:Penn/Sponsors">Sponsors</a></li>
+
                  <a href="https://2013.igem.org/Team:Penn/Sponsors"> <li>sponsors</li></a>
-
                    <li><a href="https://igem.org/Team.cgi?id=1128">Official Team Profile</a></li>
+
                    <a href="https://igem.org/Team.cgi?id=1128"><li>official team profile</li></a>
-
                    <!--<li class="divider"></li>
+
                </li></ul>
-
                    <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>
+
-
              </ul>
+
-
            </div><!--/.nav-collapse -->
+
-
          </div><!-- /.navbar-inner -->
+
-
        </div><!-- /.navbar -->
+
-
 
+
-
      </div> <!-- /.container -->
+
-
    </div><!-- /.navbar-wrapper -->
+
-
 
+
-
 
+
-
<!--required igem logo--><a href="https://2013.igem.org"><img src="http://upload.wikimedia.org/wikipedia/en/d/d6/IGEM_official_logo.png" style="width: 100px; margin: 5px; display: inline-block;"/></a>
+
-
      <h1>Penn's iGEM Page is currently under construction</h1>
+
-
<h1 style="font-size: 18px; margin-top: -10px;">See Our <a href="https://2013.igem.org/Team:Penn/Project">Project Description</a></h1>
+
-
 
+
-
 
+
-
 
+
-
 
+
-
<!--CAROUSEL-->
+
-
 
+
-
    <!-- Main Area -->
+
-
                <div id="main_area">
+
-
                        <!-- Slider -->
+
-
                        <div class="row">
+
-
                                <div class="span12" id="slider">
+
-
                                        <!-- Top part of the slider -->
+
-
                                        <div class="row">
+
-
                                                <div class="span8" id="carousel-bounding-box">
+
-
                                                        <div id="myCarousel" class="carousel slide">
+
-
                                                                <!-- Carousel items -->
+
-
                                                                <div class="carousel-inner">
+
-
                                                                        <div class="active item" data-slide-number="0"><img src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/" /></div>
+
-
                                                                        <div class="item" data-slide-number="1"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEWHBpYXpOcFRBcGc/" /></div>
+
-
                                                                        <div class="item" data-slide-number="2"><img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/IJzMo_qodJ/Profile%20Photos/IMG_8336.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" /></div>
+
-
                                                                        <div class="item" data-slide-number="3"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEZEMzN3hPQUdPb1k" /></div>
+
-
                                                                        <!--<div class="item" data-slide-number="4"><img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/jtmF8YkJ_P/device%20photo.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" /></div>
+
-
                                                                        <div class="item" data-slide-number="5"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEZEMzN3hPQUdPb1k" /></div>
+
-
                                                                --></div>
+
-
                                                                <!-- Carousel nav -->
+
-
                                                                <a class="carousel-control left" href="#myCarousel" data-slide="prev" font-size: 20px; style="font-family: serif"> &#9001; </a>
+
-
                                                                <a class="carousel-control right" href="#myCarousel" data-slide="next"font-size: 18px; style="font-family: serif"> &#9002;</a>
+
-
                                                        </div>
+
-
                                                </div>
+
-
                                                <div class="span4" id="carousel-text"></div>
+
   
   
-
                                                <div style="display: none;" id="slide-content">
+
                  <a href="https://2013.igem.org/Team:Penn/HumanPractices"><li>HUMAN PRACTICES</li></a>
-
                                                        <div id="slide-content-0">
+
<a href="https://2013.igem.org/Team:Penn/Notebook"><li>NOTEBOOK</li></a>
-
                                                                <h1>Hello and Welcome!</h1>
+
        </ul>
-
                                                      <p>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> <a id="team" class="btn" href="https://2013.igem.org/Team:Penn/Team">Meet the Team &raquo;</a>
+
   
-
                                                        </div>
+
    <div class="section-title" style=" margin-top: 150px; position: relative;">welcome</div>
-
                                                        <div id="slide-content-1">
+
   
-
                                                                <h1>Project</h1>
+
   
-
              <p>The code of life is much more than a sequence of A's, G's, C's and T's; a suite of epigenetic mechanisms, ranging from chromatin remodeling to non-coding RNAs, affect gene expression and cellular function.  In particular, DNA methylation has been shown to alter transcriptional activity in a powerful, heritable manner... </p>
+
   
-
              <a class="btn" href="https://2013.igem.org/Team:Penn/Project">Read More &raquo;</a>
+
    </div>
-
                                                        </div>
+
    <div class="section1">
-
                                                        <div id="slide-content-2">
+
        <div class="text">
-
                                                                <h1>Notebook</h1>
+
            <div id="carousel" style="width: 700px; height: 500px; overflow: hidden; font-family: arial, sans-serif; color: black;">
-
              <p>Keep up with our daily tasks and progress in our Notebook page.</p>
+
<ul>
-
              <a class="btn" href="https://2013.igem.org/Team:Penn/Notebook">Notebook &raquo;</a>
+
<li><img alt="" src="https://googledrive.com/host/0B4ZBZOYYKBzEWHBpYXpOcFRBcGc/" width="700" height="auto" /><p><em>Project</em><br/>The code of life is much more than a sequence of A's, G's, C's and T's; a suite of epigenetic mechanisms, ranging from chromatin remodeling to non-coding RNAs,
-
                                                        </div>
+
        affect gene expression and cellular function.  In particular, DNA methylation has been shown to alter transcriptional activity in a powerful, heritable manner...
-
                                                        <div id="slide-content-3">
+
            <br/> <a class="btn" href="https://2013.igem.org/Team:Penn/Project" style="color: black  !important;">Read More &raquo;</a></p></li>
-
                                                                <h1>Sponsors</h1>
+
<li><img alt="" src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/" width="700" height="auto" /><p>
-
                                                                <p>Nothing we're doing would be possible without our sponsors.</p>
+
            <em>Hello and Welcome!<br/></em>Welcome to Penn's iGEM team wiki!  This wiki is currently under construction, but check
-
                                                                <a class="btn" href="https://2013.igem.org/Team:Penn/HumanPractices">Sponsors &raquo;</a>
+
            back with us soon to learn more about what we're up to!
-
                                                        </div>
+
            <a id="team" href="https://2013.igem.org/Team:Penn/Team">
-
                                                      <!--<div id="slide-content-4">
+
                Meet the Team &raquo;</a></p>
-
                                                                <h2>Slider Five</h2>
+
        </p></li>
-
                                                                <p>Lorem Ipsum Dolor</p>
+
-
                                                            <a class="btn" href="https://2013.igem.org/Team:Penn/Project">More &raquo;</a>
+
-
                                                        </div>
+
-
                                                        <div id="slide-content-5">
+
-
                                                                <h2>Slider Six</h2>
+
-
                                                                <p>Lorem Ipsum Dolor</p>
+
-
                                                                  <a class="btn" href="https://2013.igem.org/Team:Penn/">More &raquo;</a>
+
-
                                                        </div>-->
+
-
                                                </div>
+
-
                                        </div>
+
-
+
-
                                </div>
+
-
                        </div> <!--/Slider-->
+
-
  <div class="row hidden-phone" id="slider-thumbs">
+
-
                                <div class="span12">
+
-
                                        <!-- Bottom switcher of slider -->
+
-
                                        <ul class="thumbnails">
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-0">
+
-
                                                                <img src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-1">
+
-
                                                                <img src="https://googledrive.com/host/0B4ZBZOYYKBzEWHBpYXpOcFRBcGc/" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-2">
+
-
                                                                <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/IJzMo_qodJ/Profile%20Photos/IMG_8336.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-3">
+
-
                                                                <img src="https://googledrive.com/host/0B4ZBZOYYKBzEZEMzN3hPQUdPb1k" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                                <!--<li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-4">
+
-
                                                                <img src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/jtmF8YkJ_P/device%20photo.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" />
+
-
                                                        </a>
+
-
                                                </li>
+
-
                                                <li class="span2">
+
-
                                                        <a class="thumbnail" id="carousel-selector-5">
+
-
                                                                <img src="https://googledrive.com/host/0B4ZBZOYYKBzEZEMzN3hPQUdPb1k" />
+
-
                                                        </a>
+
-
                                                </li>-->
+
-
                                        </ul>
+
-
                                </div>
+
-
                     
+
-
                        </div>
+
-
</div>
+
-
 
+
<li><img alt="" src="https://googledrive.com/host/0B4ZBZOYYKBzEZEMzN3hPQUdPb1k" width="700" height="auto" /><p><em>Sponsors</em><br/>Nothing we're doing would be possible without our sponsors.
-
<!--FOOTER-->
+
                                                                <br/> <a class="btn" style="color: black !important;" href="https://2013.igem.org/Team:Penn/HumanPractices">Sponsors &raquo;</a></p></li>
-
<div class="footer">
+
<li><img alt="" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/IJzMo_qodJ/Profile%20Photos/IMG_8336.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" width="700" height="auto" />
-
<p>Photos: ?? | Website: Stefanie Alfonso</p>
+
            <p><em>Notebook</em><br/>Keep up with our daily tasks and progress in our Notebook page.
 +
              <br/><a class="btn" href="https://2013.igem.org/Team:Penn/Notebook" style="color: black !important;">Notebook &raquo;</a></p></li>
 +
</ul>
</div>
</div>
-
 
+
           
-
</div> <!--wrapper-->
+
                <ul class="captions">
 +
                    <li>Hello and Welcome!</li>
 +
                    <li>Slide 2</li>
 +
                    <li>Slide 3</li>
 +
                </ul>
 +
               
 +
        </div>
 +
 
</body>
</body>
-
<script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
 
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
 
<script>
<script>
-
  jQuery(document).ready(function($) {
+
        jQuery(document).ready(function($) {
   
   
-
   
+
  $('#carousel').infiniteCarousel({
 +
transitionSpeed : 2000,
 +
displayTime : 5000,
 +
textholderHeight : .25,
 +
displayProgressBar : 0
 +
});
 +
 
 +
$(window).scroll($.debounce( 300, true, function(){
 +
    $(".navbar").hide();
 +
    $(".left_wrap").animate({
 +
    width: "65px"
 +
  }, 250, function() {
 +
  });
 +
}));
 +
$(window).scroll($.debounce(300, function(){
 +
   
 +
  $(".navbar").show();
 +
    $(".left_wrap").animate({
 +
    width: "200px"
 +
  }, 250, function() {
 +
 
 +
  });
 +
}));
   
   
-
        $('#carousel-text').html($('#slide-content-0').html());
+
  $(".dropdown").mouseenter(function(){
-
+
    $(".dropdown-menu").hide();
-
        //Handles the carousel thumbnails
+
            $(this).find(".dropdown-menu").show();
-
        $('[id^=carousel-selector-]').click( function(){
+
            });
-
                var id_selector = $(this).attr("id");
+
 
-
                var id = id_selector.substr(id_selector.length -1);
+
  $(".dropdown").mouseleave(function(){
-
                var id = parseInt(id);
+
        $(this).find(".dropdown-menu").hide();
-
                $('#myCarousel').carousel(id);
+
    });
 +
     
 +
      $(".dropdown li").mouseenter(function(){
 +
        $(this).addClass("active");
 +
      });
 +
     
 +
          $(".dropdown li").mouseleave(function(){
 +
        $(this).removeClass("active");
 +
       
         });
         });
-
 
-
 
-
        // When the carousel slides, auto update the text
 
-
        $('#myCarousel').on('slid', function (e) {
 
-
                var id = $('.item.active').data('slide-number');
 
-
                $('#carousel-text').html($('#slide-content-'+id).html());
 
         });
         });
-
+
    </script>
-
+
-
});
+
-
</script>
+
-
 
+
-
   
+
-
   
+
-
   
+
-
 
+
-
  </body>
+
</html>
</html>

Revision as of 15:37, 21 August 2013

Project

welcome
  • Hello and Welcome!
  • Slide 2
  • Slide 3

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