Team:Penn

From 2013.igem.org

(Difference between revisions)
Line 2: Line 2:
<head>
<head>
     <title>Project</title>
     <title>Project</title>
-
    <link href="https://googledrive.com/host/0B4ZBZOYYKBzEVHRaZEdUVGo5cjA" type="text/css" rel="stylesheet"/>
+
      <link href="https://googledrive.com/host/0B4ZBZOYYKBzEVHRaZEdUVGo5cjA" type="text/css" rel="stylesheet"/> <!--jquery-->
-
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
+
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script><!--bootstrap (not really being used anymore)-->
-
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
+
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ" type="text/javascript"></script>
-
     <script src="https://raw.github.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.min.js"></script>
+
     <script src="https://raw.github.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.min.js" type="text/javascript"> </script>
-
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEeXlaR0U2ZnFETFU" type="text/javascript"></script>
+
-
 
+
     <style>
     <style>
          
          
-
  /*Page specific*/
+
  /*Page specific css*/
-
 
+
 +
/*.figure--> Give figures some basic formatting.
 +
  *Each picture may need to be formatted differently depending on which way it should float
 +
  *and it's dimensions so those things like float left and right can be put into the
 +
  *html for the specific image if it needs to be changed*/
 +
        .figure {
 +
    display: inline-block;
 +
height: 50px;
 +
margin: auto;
 +
margin-left: 0px;
 +
margin-right:20px;
 +
margin-bottom: 10px;
 +
       
 +
    }
      
      
 +
    /*change the left wrap to match the length of this page
 +
    (this is very innefficient and I'll try to fix it if there's time)*/
     .left_wrap {
     .left_wrap {
-
         min-height: 700px;
+
         min-height: 1975px;
-
    }
+
-
   
+
-
    #carousel a img {
+
-
        display: none !important;
+
-
    }
+
-
   
+
-
    .text a img {
+
-
        display: none !important;
+
-
    }
+
-
   
+
-
    .text p {
+
-
        font-family: arial, sans-serif;
+
-
        color: black
+
     }
     }
      
      
-
      
+
     /*style the title*/
       h2 {
       h2 {
             text-align: center;
             text-align: center;
Line 37: Line 37:
             color: black;
             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;
 
-
        }
 
-
   
 
-
    #carousel ul {
 
-
list-style: none;
 
-
width:1600px;
 
-
margin: 0;
 
-
padding: 0;
 
-
position:relative;
 
-
}
 
-
#carousel li {
 
-
display:inline;
 
-
float:left;
 
-
}
 
-
 
-
.textholder {
 
-
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
 
-
  /* IE 5-7 */
 
-
  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;
 
-
}
 
-
             
 
-
       
 
-
   
 
          
          
     </style>
     </style>
Line 89: Line 42:
<body>
<body>
  <img src="http://upload.wikimedia.org/wikipedia/en/d/d6/IGEM_official_logo.png" id="igem"/><!--igem logo-->
  <img src="http://upload.wikimedia.org/wikipedia/en/d/d6/IGEM_official_logo.png" id="igem"/><!--igem logo-->
-
<img src="http://collegediabetesnetwork.org/wp-content/uploads/2012/07/UPenn_logo1.png" id="penn"/> <!--penn logo-->
+
<img src="http://collegediabetesnetwork.org/wp-content/uploads/2012/07/UPenn_logo1.png" id="penn"/> <!--penn logo-->
   <div class="left_wrap">
   <div class="left_wrap">
      
      
Line 98: Line 51:
         <a href="https://2013.igem.org/Team:Penn"><li>HOME</li></a>
         <a href="https://2013.igem.org/Team:Penn"><li>HOME</li></a>
                 <li class="dropdown" id="project">
                 <li class="dropdown" id="project">
-
                   <a href="#" class="active" data-toggle="dropdown">PROJECT<div class="arrow">></div> <b class="caret"></b></a>
+
                   <a href="#" class="active" data-toggle="dropdown" >PROJECT<div class="arrow">></div> <b class="caret"></b></a>
                   <ul class="dropdown-menu" id="drop-menu1">
                   <ul class="dropdown-menu" id="drop-menu1">
                    
                    
Line 108: Line 61:
                 </li>
                 </li>
                 <li class="dropdown" id="about">
                 <li class="dropdown" id="about">
-
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown">ABOUT<div class="arrow">></div>  <b class="caret"></b></a>
+
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="about">ABOUT<div class="arrow">></div>  <b class="caret"></b></a>
                   <ul class="dropdown-menu" id="drop-menu2">
                   <ul class="dropdown-menu" id="drop-menu2">
                   <a href="https://2013.igem.org/Team:Penn/Team"> <li>team</li></a>
                   <a href="https://2013.igem.org/Team:Penn/Team"> <li>team</li></a>
Line 120: Line 73:
      
      
      
      
-
     <div class="section-title" style=" margin-top: 150px; position: relative;">welcome</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>
 +
      <div class="section-title" style=" margin-top: 750px; position: relative;">results</div>
      
      
      
      
Line 127: Line 81:
     <div class="section1">
     <div class="section1">
         <div class="text">
         <div class="text">
-
            <div id="carousel" style="width: 700px; height: 500px; overflow: hidden; font-family: arial, sans-serif; color: black;">
+
                <h2>ABSTRACT</h2>
-
<ul>
+
                <p>The code of life is much more than a sequence of A's, G's, C's and T's;
-
<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,
+
        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...
+
         affect gene expression and cellular function. <div class="figure-wrap" style="margin-left: 200px;"><img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEeG5XLTdURjc0aTA" "/>
-
            <br/> <a class="btn" href="https://2013.igem.org/Team:Penn/Project" style="color: black  !important;">Read More &raquo;</a></p></li>
+
        <img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEeG05enR0ZFFXeEE" />
-
<li><img alt="" src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/" width="700" height="auto" /><p>
+
        <img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEXzVMY3EtX284cTA" /></div>
-
            <em>Hello and Welcome!<br/></em>Welcome to Penn's iGEM team wiki!  This wiki is currently under construction, but check
+
        <p> In particular, DNA methylation has been
-
            back with us soon to learn more about what we're up to!
+
        shown to alter transcriptional activity in a powerful, heritable manner.  Abnormal methylation
-
            <a id="team" href="https://2013.igem.org/Team:Penn/Team">
+
        patterns are associated with diseases including immunodeficiency syndromes, neurodevelopmental
-
                Meet the Team &raquo;</a></p>
+
        disorders, and many types of cancer.  Comprehensive understanding and control of DNA methylation
-
        </p></li>
+
        could be invaluable to researchers studying these diseases.</p>
-
 
+
     
-
<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.
+
       
-
                                                                <br/> <a class="btn" style="color: black !important;" href="https://2013.igem.org/Team:Penn/HumanPractices">Sponsors &raquo;</a></p></li>
+
        <p>Synthetic biologists and geneticists are accustomed to turning genes on and off at will,
-
<li><img alt="" src="https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/IJzMo_qodJ/Profile%20Photos/IMG_8336.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg" width="700" height="auto" />
+
        but the tools don’t exist to easily manipulate epigenetic patterns.  We are developing a novel
-
            <p><em>Notebook</em><br/>Keep up with our daily tasks and progress in our Notebook page.
+
        fusion protein that enables site-specific methylation, which can repress promoter activity with
-
              <br/><a class="btn" href="https://2013.igem.org/Team:Penn/Notebook" style="color: black !important;">Notebook &raquo;</a></p></li>
+
        high precision.  <div class="figure-wrap" style="float: center;"><img src="https://googledrive.com/host/0B4ZBZOYYKBzEdmZMalozd0pkSjg" style="height: 75px; margin: 5px; float: left;"/>
-
</ul>
+
        <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
-
</div>
+
        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.</p>
 +
        <img src="https://googledrive.com/host/0B4ZBZOYYKBzEMzM5dWpRQWNvb1k" style="height: 75px; display: inline; float: right; margin: 5px;"/>
 +
        <img src="https://googledrive.com/host/0B4ZBZOYYKBzEek95VVUyMkltSHc" style="height: 75px; float: right; margin: 5px; "/>
 +
        </div>
 +
       
 +
    </div>
 +
   
 +
   
 +
    <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">
 +
   
              
              
-
                <ul class="captions">
+
      <div class="text-wrap">
-
                    <li>Hello and Welcome!</li>
+
       
-
                    <li>Slide 2</li>
+
 
-
                    <li>Slide 3</li>
+
        <div class="text" style="display: inline-block; width: 300px; margin: auto;float: left;">
-
                </ul>
+
        </div>
-
               
+
       
 +
        <div class="text" style="display:inline-block; width: 300px; margin: auto; float: right; ">
 +
        </div>
 +
          </div>
         </div>
         </div>
    
    
Line 158: Line 140:
<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(){
$(window).scroll($.debounce( 300, true, function(){
     $(".navbar").hide();
     $(".navbar").hide();
Line 200: Line 175:
          
          
         });
         });
 +
 +
         
 +
         
         });
         });
     </script>
     </script>
</html>
</html>

Revision as of 12:21, 22 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"