Team:Penn/Project

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
<html lang="en">
-
  <head>
+
<head>
-
     <title></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"/>
-
    <!-- Bootstrap and mainstyle css -->
+
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
-
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEeUFaR1lNWFZWMnc" rel="stylesheet" media="screen">
+
-
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
+
-
  <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
+
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
-
 
+
     <script src="https://raw.github.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.min.js"></script>
-
   
+
    <style>
-
     <script>
+
-
        jQuery(document).ready(function($) {
+
          
          
-
         $('body').scrollspy({ target: '#nav-circles' });
+
/*Page specific*/
 +
         .figure {
 +
    display: inline-block;
 +
height: 50px;
 +
margin: auto;
 +
margin-left: 0px;
 +
margin-right:20px;
 +
margin-bottom: 10px;
          
          
-
        $("#one").click(function() {
+
     }
-
        $('html, body').animate({
+
   
-
        scrollTop: $("#top").offset().top,
+
-
     }, '2400');
+
-
});
+
      
      
-
      $("#two").click(function() {
+
      
-
        $('html, body').animate({
+
      h2 {
-
        scrollTop: $("#first-section").offset().top,
+
            text-align: center;
-
     }, '2400');
+
             font-family: arial, sans-serif;
-
});
+
            font-size: 18px;
-
     
+
            color: black;
-
          $("#three, #team").click(function() {
+
-
        $('html, body').animate({
+
-
        scrollTop: $("#second-section").offset().top,
+
-
    }, '2400');
+
-
});
+
-
 
+
-
      $("#four").click(function() {
+
-
        $('html, body').animate({
+
-
        scrollTop: $("#third-section").offset().top,
+
-
    }, '2400');
+
-
});
+
-
       
+
-
        });
+
-
    </script>
+
-
    <style>
+
-
        /*hero unit positioning*/
+
-
        #text {
+
-
                      align: center;
+
-
float: center;
+
-
             padding: 20px 100px 20px 100px;
+
-
margin-left: auto;
+
-
margin-right: auto;
+
-
margin-top: 40px;
+
-
width: 400px;
+
-
overflow: hidden;
+
-
           
+
         }
         }
          
          
-
         /*navigation circles*/
+
         .min-margin {
-
        #nav-circles {
+
             width: 200px;
-
             position: fixed;
+
             height: 2000px;
-
             top: 100px;
+
-
            right: 20px;
+
-
            z-index: 9999;
+
         }
         }
-
   
 
          
          
-
         #nav-circles li, #icon  {
+
         .section-title {
-
             overflow: hidden;
+
             font-family: arial, sans-serif;
-
             display: block;
+
             font-size: 25px;
-
             height: 30px;
+
             -webkit-transform: rotate(-90deg);
-
            width: 30px;
+
    -moz-transform: rotate(-90deg);
-
            border-radius: 100%;
+
    -o-transform: rotate(-90deg);
-
            margin:10px;
+
    -ms-transform: rotate(-90deg);
-
            padding:3px;
+
    transform: rotate(-90deg);
-
            top: 100px;
+
-
            right: 100px;
+
-
            background-color: gray;  
+
         }
         }
          
          
-
        /*Sections*/
+
             
-
        .section {
+
-
            min-height: 700px;
+
-
            min-width: 500px;
+
-
        }
+
          
          
-
        /*rows with images*/
+
   
-
        .row{
+
-
            width: 100%;
+
-
            margin-top: 100px;
+
-
        }
+
          
          
-
      .span4 {
 
-
            height: 150px;
 
-
            width: 150px;
 
-
            position: static;
 
-
              -moz-border-radius: 100%;
 
-
    -webkit-border-radius: 100%;
 
-
    -khtml-border-radius: 100%;
 
-
            border-radius: 100%;
 
-
            overflow: hidden;
 
-
            background-size: 300px;
 
-
            background-position: -70px -20px;
 
-
           
 
-
            display: inline-block;
 
-
           
 
-
        }
 
-
 
-
       
 
-
        .span4 img {
 
-
            height: 150px;
 
-
         
 
-
            position: relative;
 
-
        }
 
-
       
 
-
                .span4:hover {
 
-
            opacity: 1;
 
-
        }
 
-
                        .span_smaller:hover {
 
-
            opacity: 1;
 
-
        }
 
-
       
 
-
        .span_smaller img {
 
-
            height: 100px;
 
-
         
 
-
            position: relative;
 
-
        }
 
-
       
 
-
                .span4:hover {
 
-
            opacity: 1;
 
-
        }
 
-
       
 
-
 
-
a li {
 
-
          -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 
-
  filter: alpha(opacity=80);
 
-
-moz-opacity: 0.8;
 
-
-khtml-opacity: 0.8;
 
-
  opacity: 0.8;
 
-
}
 
-
 
-
a li:hover {
 
-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 
-
  filter: alpha(opacity=100);
 
-
-moz-opacity: 1;
 
-
-khtml-opacity: 1;
 
-
  opacity: 1;
 
-
    text-decoration: none;
 
-
}
 
-
 
-
    .figure {
 
-
        float: left;
 
-
        margin: 7px;
 
-
    display: inline;
 
-
    max-height: 400px;
 
-
    max-width: 400px;
 
-
       
 
-
    }
 
-
    .clear { clear:both;} /*add a clear div if formatting gets weird because of float*/
 
-
         
 
-
      .caption {
 
-
        font-size: 10px;
 
-
        font-family: arial;
 
-
      margin-bottom: 15px;
 
-
        line-height: 10px;
 
-
text-align: center;
 
-
 
-
      }
 
-
     
 
-
      .caption2 {
 
-
        font-size: 10px;
 
-
        font-family: arial;
 
-
        position: relative;
 
-
        left: -150px;
 
-
        top:-10px;
 
-
 
-
        line-height: 10px;
 
-
text-align: left;
 
-
float: left;
 
-
      }
 
-
     
 
-
      #second-section {
 
-
        display: none;
 
-
        position: absolute;
 
-
      }
 
-
     
 
-
      #third-section {
 
-
        display: none;
 
-
        position: absolute;
 
-
      }
 
-
     
 
-
      #nav-circles {
 
-
        display: none;
 
-
      }
 
-
     
 
     </style>
     </style>
-
  </head>
+
</head>
-
 
+
<body>
-
    <body>
+
<img src="http://upload.wikimedia.org/wikipedia/en/d/d6/IGEM_official_logo.png" id="igem"/><!--igem logo-->
-
        <div class="navbar-wrapper">
+
  <div class="left_wrap">
-
      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
+
   
-
      <div class="container">
+
 
-
 
+
  <!-- <div class="logo-wrap"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEUlI3ZDU2OGRrc1E" id="penn"/></div><!--penn logo-->
-
        <div class="navbar navbar-inverse navbar-fixed-top">
+
   
-
          <div class="navbar-inner">
+
    <ul class="navbar">
-
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
+
        <a href="https://2013.igem.org/Team:Penn"><li>HOME</li></a>
-
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+
                 <li class="dropdown" id="project">
-
              <span class="icon-bar"></span>
+
                   <a href="#" class="active" data-toggle="dropdown">PROJECT<div class="arrow">></div> <b class="caret"></b></a>
-
              <span class="icon-bar"></span>
+
                   <ul class="dropdown-menu" id="drop-menu1">
-
              <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><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 class="active"><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>
+
                  <a href="https://2013.igem.org/Team:Penn/HumanPractices"><li>HUMAN PRACTICES</li></a>
-
                    <li><a href="#">One more separated link</a></li>-->
+
<a href="https://2013.igem.org/Team:Penn/Notebook"><li>NOTEBOOK</li></a>
-
                  </ul>
+
        </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 -->
+
-
   
+
-
    <!--link circles-->
+
-
<div id="nav-circles">
+
-
<ul class="nav">
+
-
<a href="#top"><li id="one"></li></a>
+
-
<a id="two" href="#first-section"><li><img src="http://images.wikia.com/arresteddevelopment/images/7/77/Icon-summary.png"/></li></a>
+
-
<a id="three" href="#second-section"><li><img src="http://clipartist.info/www/TATARTIST.NET/L/lab_icon_test_tube_2_black_white_line_art_tatoo_tattoo-555px.png"/></li></a>
+
-
<a id="four" href="#third-section"><li><img src="http://c.dryicons.com/images/icon_sets/symbolize_icons_set/png/128x128/chart.png"/></li></a>
+
-
</ul>
+
-
    </div>     
+
-
 
+
      
      
-
 
+
   
-
 
+
     <div class="section-title" style=" margin-top: 150px; position: relative;">abstract</div>
-
 
+
    <div class="section-title" style=" margin-top: 400px; position: relative;">methods</div>
-
     <!--first hero unit-->
+
      <div class="section-title" style=" margin-top: 750px; position: relative;">results</div>
-
    <div class="hero-unit" id="text">
+
   
-
      <!--<div id="icon"<img src="http://images.wikia.com/arresteddevelopment/images/7/77/Icon-summary.png"/></div>--> <h4>Abstract</h4>
+
   
-
        <p>The code of life is much more than a sequence of A's, G's, C's and T's;
+
    </div>  
 +
    <div class="section1">
 +
        <div class="text">
 +
                <h2>ABSTRACT</h2>
 +
                <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,
         a suite of epigenetic mechanisms, ranging from chromatin remodeling to non-coding RNAs,
-
         affect gene expression and cellular function. <img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEeG5XLTdURjc0aTA" style="width: 200px;"/>
+
         affect gene expression and cellular function. <div class="figure-wrap" style="margin-left: 200px;"><img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEeG5XLTdURjc0aTA" "/>
-
         <img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEeG05enR0ZFFXeEE" style="width: 200px"/>
+
         <img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEeG05enR0ZFFXeEE" />
-
         <img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEXzVMY3EtX284cTA" style="width: 200px"/>
+
         <img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEXzVMY3EtX284cTA" /></div>
-
        In particular, DNA methylation has been
+
        <p> In particular, DNA methylation has been
         shown to alter transcriptional activity in a powerful, heritable manner.  Abnormal methylation
         shown to alter transcriptional activity in a powerful, heritable manner.  Abnormal methylation
         patterns are associated with diseases including immunodeficiency syndromes, neurodevelopmental
         patterns are associated with diseases including immunodeficiency syndromes, neurodevelopmental
Line 278: Line 105:
         but the tools don’t exist to easily manipulate epigenetic patterns.  We are developing a novel
         but the tools don’t exist to easily manipulate epigenetic patterns.  We are developing a novel
         fusion protein that enables site-specific methylation, which can repress promoter activity with
         fusion protein that enables site-specific methylation, which can repress promoter activity with
-
         high precision.  <img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEdmZMalozd0pkSjg" style="width: 200px; float: right;"/>
+
         high precision.  <div class="figure-wrap" style="float: center;"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEdmZMalozd0pkSjg" style="height: 75px; margin: 5px; float: left;"/>
-
         <img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEdlExOEgtVlZYYUU" style="width: 200px; float: right;"/>In coming years, this fusion protein could become a powerful tool for epigenetics
+
         <img src="https://googledrive.com/host/0B4ZBZOYYKBzEdlExOEgtVlZYYUU" style="height: 75px; float: left; margin: 5px;"/></div><p>In coming years, this fusion protein could become a powerful tool for epigenetics
         researchers looking to perform on/off studies in the vein of classical genetics, as well as an
         researchers looking to perform on/off studies in the vein of classical genetics, as well as an
         orthogonal mode of repressing constitutive promoters for bacterial synthetic biologists.
         orthogonal mode of repressing constitutive promoters for bacterial synthetic biologists.
         Eventually, it could even give clinical researchers the means to restore healthy methylation
         Eventually, it could even give clinical researchers the means to restore healthy methylation
         levels in many insofar-untreatable epigenetic diseases.</p>
         levels in many insofar-untreatable epigenetic diseases.</p>
-
         <img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEMzM5dWpRQWNvb1k" style="width: 400px; float: left;"/>
+
         <img src="https://googledrive.com/host/0B4ZBZOYYKBzEMzM5dWpRQWNvb1k" style="height: 75px; display: inline; float: right; margin: 5px;"/>
-
         <img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEek95VVUyMkltSHc" style="width: 400px; float: left;"/>
+
         <img src="https://googledrive.com/host/0B4ZBZOYYKBzEek95VVUyMkltSHc" style="height: 75px; float: right; margin: 5px; "/>
-
                                                               
+
        </div>
 +
       
     </div>
     </div>
-
</div>
 
-
 
      
      
-
       
 
-
 
 
      
      
-
     </div> <!--endsection-->
+
     <div class="section2">
 +
        <div class="text" id="methods">
 +
        </div>
 +
          <div class="text" id="methods">
 +
        </div>
 +
          <div class="text" id="methods">
 +
        </div>
 +
            <div class="text" id="methods">
 +
        </div>
 +
            <div class="text" id="methods">
 +
        </div>
 +
    </div>
 +
   
 +
    <div class="section3">
 +
   
 +
           
 +
      <div class="text-wrap">
          
          
-
    </body>
+
 
-
 
+
        <div class="text" style="display: inline-block; width: 320px; margin: auto;float: left;">
-
 
+
        </div>
 +
       
 +
        <div class="text" style="display:inline-block; width: 250px; margin: auto; float: right; ">
 +
        </div>
 +
          </div>
 +
        </div>
    
    
 +
</body>
 +
<script>
 +
        jQuery(document).ready(function($) {
 +
 +
 
 +
$(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() {
 +
 +
  });
 +
}));
 +
  /*navbar disappears when not hovered   
 +
$(".left_wrap, .navbar, .section-title, .drop-menu").mouseleave(function()
 +
{
 +
    $(".navbar").hide();
 +
    $(".left_wrap").animate({
 +
    width: "65px"
 +
  }, 500, function() {
 +
  });
 +
    }); 
 +
});*/
 +
 +
  $(".dropdown").mouseenter(function(){
 +
    $(".dropdown-menu").hide();
 +
            $(this).find(".dropdown-menu").show();
 +
            });
 +
 +
  $(".dropdown").mouseleave(function(){
 +
        $(this).find(".dropdown-menu").hide();
 +
    });
 +
     
 +
      $(".dropdown li").mouseenter(function(){
 +
        $(this).addClass("active");
 +
      });
 +
     
 +
          $(".dropdown li").mouseleave(function(){
 +
        $(this).removeClass("active");
 +
       
 +
        });
 +
              });
 +
    </script>
</html>
</html>

Revision as of 15:39, 21 August 2013

Project

abstract
methods
results

ABSTRACT

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. Abnormal methylation patterns are associated with diseases including immunodeficiency syndromes, neurodevelopmental disorders, and many types of cancer. Comprehensive understanding and control of DNA methylation could be invaluable to researchers studying these diseases.

Synthetic biologists and geneticists are accustomed to turning genes on and off at will, but the tools don’t exist to easily manipulate epigenetic patterns. We are developing a novel fusion protein that enables site-specific methylation, which can repress promoter activity with high precision.

In coming years, this fusion protein could become a powerful tool for epigenetics researchers looking to perform on/off studies in the vein of classical genetics, as well as an orthogonal mode of repressing constitutive promoters for bacterial synthetic biologists. Eventually, it could even give clinical researchers the means to restore healthy methylation levels in many insofar-untreatable epigenetic diseases.

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