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"/>
-
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script><!--jquery-->
+
     <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></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/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
 +
     <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>
     <style>
          
          
-
  /*Page specific css*/
+
  /*Page specific*/
-
+
 
-
/*.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: 1975px;
+
         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 the title*/
+
      
       h2 {
       h2 {
             text-align: center;
             text-align: center;
Line 36: 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 41: Line 89:
<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-->
 
   <div class="left_wrap">
   <div class="left_wrap">
      
      
Line 50: Line 97:
         <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 60: Line 107:
                 </li>
                 </li>
                 <li class="dropdown" id="about">
                 <li class="dropdown" id="about">
-
                   <a href="#" class="dropdown-toggle" data-toggle="dropdown" id="about">ABOUT<div class="arrow">></div>  <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" 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 72: Line 119:
      
      
      
      
-
     <div class="section-title" style=" margin-top: 150px; position: relative;">abstract</div>
+
     <div class="section-title" style=" margin-top: 150px; position: relative;">welcome</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 80: Line 126:
     <div class="section1">
     <div class="section1">
         <div class="text">
         <div class="text">
-
                <h2>ABSTRACT</h2>
+
            <div id="carousel" style="width: 700px; height: 500px; overflow: hidden; font-family: arial, sans-serif; color: black;">
-
                <p>The code of life is much more than a sequence of A's, G's, C's and T's;
+
<ul>
-
        a suite of epigenetic mechanisms, ranging from chromatin remodeling to non-coding RNAs,
+
<li><img alt="" src="https://googledrive.com/host/0B4ZBZOYYKBzES3Jrc042WTlMR3c/" width="700" height="auto" /><p>
-
        affect gene expression and cellular function. <div class="figure-wrap" style="margin-left: 200px;"><img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEeG5XLTdURjc0aTA" "/>
+
            <em>Hello and Welcome!<br/></em>Welcome to Penn's iGEM team wiki!  This wiki is currently under construction, but check
-
        <img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEeG05enR0ZFFXeEE" />
+
            back with us soon to learn more about what we're up to!
-
        <img class="figure" src="https://googledrive.com/host/0B4ZBZOYYKBzEXzVMY3EtX284cTA" /></div>
+
            <a id="team" href="https://2013.igem.org/Team:Penn/Team">
-
         <p> In particular, DNA methylation has been
+
                Meet the Team &raquo;</a></p>
-
        shown to alter transcriptional activity in a powerful, heritable manner. Abnormal methylation
+
        </p></li>
-
        patterns are associated with diseases including immunodeficiency syndromes, neurodevelopmental
+
<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,
-
        disorders, and many types of cancer. Comprehensive understanding and control of DNA methylation
+
         affect gene expression and cellular function.  In particular, DNA methylation has been shown to alter transcriptional activity in a powerful, heritable manner...
-
        could be invaluable to researchers studying these diseases.</p>
+
            <br/> <a class="btn" href="https://2013.igem.org/Team:Penn/Project" style="color: black  !important;">Read More &raquo;</a></p></li>
-
     
+
<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">
+
-
   
+
              
              
-
      <div class="text-wrap">
+
                <ul class="captions">
-
       
+
                    <li>Hello and Welcome!</li>
-
 
+
                    <li>Slide 2</li>
-
        <div class="text" style="display: inline-block; width: 300px; margin: auto;float: left;">
+
                    <li>Slide 3</li>
-
        </div>
+
                </ul>
-
       
+
               
-
        <div class="text" style="display:inline-block; width: 300px; margin: auto; float: right; ">
+
-
        </div>
+
-
          </div>
+
         </div>
         </div>
    
    
Line 139: Line 156:
<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 174: Line 198:
          
          
         });
         });
-
 
-
         
 
-
         
 
         });
         });
     </script>
     </script>
</html>
</html>

Revision as of 12:24, 22 August 2013

Project

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

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