Team:Penn/Notebook

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
<html>
<html>
-
<head>
+
  <head>
-
<script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
+
    <title></title>
-
<link href="https://googledrive.com/host/0B4ZBZOYYKBzEYUtsRS1ZWHM2bTQ" type="text/css" rel="stylesheet"/>
+
    <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"/>
 +
   
     <style>
     <style>
-
 
+
        /*fonts/headings*/
-
/*Last year's notbook style code*/
+
         h4 {
-
 
+
            text-align: center;
-
         #accordion-container {
+
        }
-
font-size: 13px;
+
       
-
background: #ffffff;
+
       
-
padding: 5px 10px 10px 10px;
+
       
-
border: 1px solid #cccccc;
+
       
-
-moz-border-radius: 5px;
+
/*Brady Bunch Table and background section*/
-
-webkit-border-radius: 5px;
+
.team {
-
border-radius: 5px;
+
      float: center;
-
-moz-box-shadow: 0 5px 15px #cccccc;
+
        margin-left: 200px;
-
-webkit-box-shadow: 0 5px 15px #cccccc;
+
-
box-shadow: 0 5px 15px #cccccc;
+
}
}
-
.accordion-header {
+
.team td {
-
font-size: 16px;
+
    overflow: hidden;
-
background: #ebebeb;
+
            height:175px;
-
margin: 5px 0 0 0;
+
            width:220px;
-
padding: 5px 20px;
+
            display: inline-block;
-
border: 1px solid #cccccc;
+
            padding:5px;
-
cursor: pointer;
+
   
-
color: #666666;
+
        }
-
-moz-border-radius: 5px;
+
       
-
-webkit-border-radius: 5px;
+
        .hidden { /*change this class when hovered*/
-
border-radius: 5px;
+
            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;
}
}
-
.active-header {
+
.one {
-
-moz-border-radius: 5px 5px 0 0;
+
height:800px;
-
-webkit-border-radius: 5px 5px 0 0;
+
position: relative;
-
border-radius: 5px 5px 0 0;
+
padding-top: 30px;
-
background: url(images/active-header.gif) #cef98d;
+
width: 100%;
-
background-repeat: no-repeat;
+
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/Yn0SK0Y0-7/snap.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
-
background-position: right 50%;
+
background-position: 300px
 +
background-repeat: no-repeat;
 +
background-size: 100%;
 +
background-attachment: fixed;
 +
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 +
  filter: alpha(opacity=70);
 +
-moz-opacity: 0.7;
 +
-khtml-opacity: 0.7;
 +
  opacity: 0.7;
}
}
-
.active-header:hover {
+
.two {
-
background: url(images/active-header.gif) #c6f089;
+
height:800px;
-
background-repeat: no-repeat;
+
position: relative;
-
background-position: right 50%;
+
padding-top: 30px;
 +
width: 100%;
 +
background-color: #50393F;
 +
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/-ZtRJ7Gu1U/photo-8.JPG?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
 +
background-position: 300px -100px;
 +
background-repeat: no-repeat;
 +
background-size: 80%;
 +
background-attachment: fixed;
 +
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 +
  filter: alpha(opacity=70);
 +
-moz-opacity: 0.7;
 +
-khtml-opacity: 0.7;
 +
  opacity: 0.7;
}
}
 +
       
 +
    .three {
-
.inactive-header {
+
no background image for now
-
background: url(images/inactive-header.gif) #ebebeb;
+
background-image: url("https://dl.dropboxusercontent.com/sh/h4cxid18rzzjgan/8XND1QonMj/Profile%20Photos/coolbluestuff.jpg?token_hash=AAGlfzG2xZpKrOTI8pyH02EbYxY1vK3QLUWKsWuYdaPbYg");
-
background-repeat: no-repeat;
+
position: relative;
-
background-position: right 50%;
+
text-align: center;
 +
height:800px;
 +
width: 100%;
 +
padding-top: 50px;
}
}
-
.inactive-header:hover {
+
/*Make hero unit slightly transparent*/
-
background: url(images/inactive-header.gif) #f5f5f5;
+
.hero-unit {
-
background-repeat: no-repeat;
+
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-
background-position: right 50%;
+
  filter: alpha(opacity=70);
 +
-moz-opacity: 0.7;
 +
-khtml-opacity: 0.7;
 +
  opacity: 0.7;
}
}
-
.accordion-content {
 
-
display: none;
 
-
padding: 20px;
 
-
background: #ffffff;
 
-
border: 1px solid #cccccc;
 
-
border-top: 0;
 
-
-moz-border-radius: 0 0 5px 5px;
 
-
-webkit-border-radius: 0 0 5px 5px;
 
-
border-radius: 0 0 5px 5px;
 
-
}
 
-
    </style>
 
-
<script type="text/javascript">
 
-
   
 
-
   
 
-
    var TINY={};
 
-
 
-
function T$(i){return document.getElementById(i)}
 
-
function T$$(e,p){return p.getElementsByTagName(e)}
 
-
 
-
TINY.accordion=function(){
 
-
function slider(n){this.n=n; this.a=[]}
 
-
slider.prototype.init=function(t,e,m,o,k){
 
-
var a=T$(t), i=s=0, n=a.childNodes, l=n.length; this.s=k||0; this.m=m||0;
 
-
for(i;i<l;i++){
 
-
var v=n[i];
 
-
if(v.nodeType!=3){
 
-
this.a[s]={}; this.a[s].h=h=T$$(e,v)[0]; this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')');
 
-
if(o==s){h.className=this.s; c.style.height='auto'; c.d=1}else{c.style.height=0; c.d=-1} s++
 
-
}
 
-
}
 
-
this.l=s
 
-
};
 
-
slider.prototype.pr=function(f,d){
 
-
for(var i=0;i<this.l;i++){
 
-
var h=this.a[i].h, c=this.a[i].c, k=c.style.height; k=k=='auto'?1:parseInt(k); clearInterval(c.t);
 
-
if((k!=1&&c.d==-1)&&(f==1||i==d)){
 
-
c.style.height=''; c.m=c.offsetHeight; c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1)
 
-
}else if(k>0&&(f==-1||this.m||i==d)){
 
-
c.d=-1; h.className=''; su(c,-1)
 
-
}
 
-
}
 
-
};
 
-
function su(c){c.t=setInterval(function(){sl(c)},20)};
 
-
function sl(c){
 
-
var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/5)*c.d)+'px';
 
-
c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')';
 
-
if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'} clearInterval(c.t)}
 
-
};
 
-
return{slider:slider}
 
-
}();
 
-
$(document).ready(function()
 
-
{
 
-
//Add Inactive Class To All Accordion Headers
 
-
$('.accordion-header').toggleClass('inactive-header');
 
-
 
-
//Set The Accordion Content Width
 
-
var contentwidth = $('.accordion-header').width();
 
-
$('.accordion-content').css({'width' : contentwidth });
 
-
 
-
 
-
 
-
// The Accordion Effect
 
-
$('.accordion-header').click(function () {
 
-
if($(this).is('.inactive-header')) {
 
-
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
 
-
$(this).toggleClass('active-header').toggleClass('inactive-header');
 
-
$(this).next().slideToggle().toggleClass('open-content');
 
-
}
 
-
 
-
else {
 
-
$(this).toggleClass('active-header').toggleClass('inactive-header');
 
-
$(this).next().slideToggle().toggleClass('open-content');
 
-
}
 
-
});
 
-
 
-
return false;
 
-
});
 
-
</script>
 
-
</head>
 
-
<body>
 
-
    <div class="outer">
 
-
    <ul class="nav">
 
-
        <li><a href="https://2013.igem.org/Team:Penn">Home</a></li>
 
-
        <li id="team">Team</li>
 
-
        <li><a href="https://igem.org/Team.cgi?year=2013&team_name=Penn">Official Team Profile</a></li>
 
-
        <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/Notebook">Notebook</a></li>
 
-
        <li><a href="https://2013.igem.org/Team:Penn/Safety">Safety</a></li>
 
          
          
-
    </ul>
+
       
-
      
+
       
 +
            /* CUSTOMIZE THE NAVBAR
 +
     -------------------------------------------------- */
-
<iframe src='http://embed.verite.co/timeline/?source=0AoZBZOYYKBzEdDA1dUFNaU93QzQ4LURURjJfdzRiVFE&font=Bevan-PotanoSans&maptype=toner&lang=en&height=650' width='100%' height='650' frameborder='0'></iframe>
+
    /* Special class on .container surrounding .navbar, used for positioning it into place. */
-
   
+
    .navbar-wrapper {
-
   
+
      position: absolute;
-
<p style="text-align:center;color:white;">June 2012 Notebook</p>
+
      top: 0;
 +
      left: 0;
 +
      right: 0;
 +
      z-index: 10;
 +
      margin-top: 20px;
 +
      margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */
 +
    }
 +
    .navbar-wrapper .navbar {
-
<div id="accordion-container">
+
    }
-
<h2 class="accordion-header">Week 1</h2>
+
-
+
-
<div class="accordion-content">
+
-
<p><b>June 6th</b></p>
+
-
                                                <ul>
+
-
                                                  <li>Set up some lab equipment</li>
+
-
                                                  <li>Autoclaved for a while</li>
+
-
                                                  <li>Organized biobrick stuff</li>
+
-
                                                  <li>Called Vinoo about DNA planning</li>
+
-
 
+
-
                                                </ul> 
+
-
<br>
+
-
<p><b>June 7th</b></p>
+
    /* Remove border and change up box shadow for more contrast */
-
                                                <ul>
+
    .navbar .navbar-inner {
-
                                                  <li>Transformed Cph8, pLsr, and LuxS</li>
+
      border: 0;
-
                                                  <li>Placed order with Vinoo</li>
+
      -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25);
-
<li>Developed idea using PGY/PCN system to activate a gene</li>
+
        -moz-box-shadow: 0 2px 10px rgba(0,0,0,.25);
-
                                                </ul>                   
+
              box-shadow: 0 2px 10px rgba(0,0,0,.25);
-
+
    }
-
+
-
+
-
</div>
+
-
+
-
<h2 class="accordion-header">Week 2</h2>
+
-
+
-
<div class="accordion-content">
+
-
+
-
<p><b>June 11th</b></p>
+
-
                            &nbsp;<p>Wet Lab</p>
+
-
                                                <ul>
+
-
                                                  <li>PCR'd mCherry from NAS157</li>
+
-
                                                  <li>Ran 1% Gel and purified product</li>
+
-
                                                </ul>
+
    /* Downsize the brand/project name a bit */
-
&nbsp;&nbsp;<p>Dry Lab</p>
+
    .navbar .brand {
-
<ul>
+
      padding: 14px 20px 16px; /* Increase vertical padding to match navbar links */
-
<li>Designed primers for LsR promoter</li>
+
      font-size: 16px;
-
<li>Meeting with Dr. Sarkar</li>
+
      font-weight: bold;
-
</ul>
+
      text-shadow: 0 -1px 0 rgba(0,0,0,.5);
-
<br>
+
    }
-
<p><b>June 12th</b></p>
+
-
                            &nbsp;<p>Wet Lab</p>
+
-
                                                <ul>
+
-
                                                  <li>Digested mCherry PCR product with BamHI and NotI</li>
+
-
                                                  <li>Column purified mCherry and ligated into NAS152 backbone</li>
+
-
<li>Transformed NAS152-mCherry into DH5alpha</li>
+
-
<li>Poured 25 LB-Kan plates</li>
+
-
                                                </ul>
+
-
&nbsp;&nbsp;<p>Dry Lab</p>
+
-
<ul>
+
-
<li>Research more information about bacterial drug delivery system</li>
+
-
<li>More research into biofilm project</li>
+
-
</ul>
+
-
<br>
+
-
<p><b>June 14th</b></p>
+
-
&nbsp;&nbsp;<p>Dry Lab</p>
+
    /* Navbar links: increase padding for taller navbar */
-
<ul>
+
    .navbar .nav > li > a {
-
<li>Met with Dr. Goulian, obtained pDawn and pDusk</li>
+
      padding: 15px 20px;
-
<li>Identified inaK as a surface display gene we can use</li>
+
    }
-
</ul>
+
-
</div>
+
-
+
-
<h2 class="accordion-header">Week 3</h2>
+
-
+
-
<div class="accordion-content">
+
-
+
-
<p>June 18th</p>
+
-
&nbsp;&nbsp;<p>Wet Lab</p>
+
    /* Offset the responsive button for proper vertical alignment */
-
<ul>
+
    .navbar .btn-navbar {
-
<li>Miniprep pDawn and pDusk</li>
+
      margin-top: 10px;
-
<li>Test cut pDawn and pDusk with XmaI, analytical gel was correct</li>
+
    }
-
<li>Prep cut pDawn and pDusk with BamHI and NotI, gel purified</li>
+
   
-
</ul>
+
    /*timeline opacity change*/
-
&nbsp;&nbsp;<p>Dry Lab</p>
+
    #timeline {
-
<ul>
+
                    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
-
<li>Ordered and picked up PCR purification kit from cell center</li>
+
  filter: alpha(opacity=70);
-
<li>Additional orders through cell center</li>
+
-moz-opacity: 0.7;
-
<li>Designed primers for one of Peter's components (forgot which)</li>
+
-khtml-opacity: 0.7;
-
</ul>
+
  opacity: 0.7;
-
<br>
+
    }
 +
    </style>
 +
  </head>
 +
  <body>
 +
   
 +
   
 +
          <div class="navbar-wrapper">
 +
      <!-- Wrap the .navbar in .container to center it within the absolutely positioned parent. -->
 +
      <div class="container">
-
<p>June 20</p>
+
        <div class="navbar navbar-inverse">
 +
          <div class="navbar-inner">
 +
            <!-- Responsive Navbar Part 1: Button for triggering responsive navbar (not covered in tutorial). Include responsive CSS to utilize. -->
 +
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
 +
              <span class="icon-bar"></span>
 +
              <span class="icon-bar"></span>
 +
              <span class="icon-bar"></span>
 +
            </button>
 +
            <a class="brand" href="#">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">
 +
                <li class="active"><a href="https://2013.igem.org/Team:Penn">Home</a></li>
 +
                <!-- 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#three">Team</a></li>
 +
                    <li><a href="https://2013.igem.org/Team:Penn/Sponsors">Sponsors</a></li>
 +
                    <li><a href="https://igem.org/Team.cgi?year=2013">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/Project">Project</a></li>
 +
                <li><a href="https://2013.igem.org/Team:Penn/HumanPractices">Human Practices</a></li>
 +
                <li><a href="https://2013.igem.org/Team:Penn/Outreach">Outreach</a></li>
 +
                <li class="dropdown">
 +
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">In the Lab <b class="caret"></b></a>
 +
                  <ul class="dropdown-menu">
 +
                 
 +
                    <li><a href="https://2013.igem.org/Team:Penn/Notebook">Notebook</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>
 +
              </ul>
 +
            </div><!--/.nav-collapse -->
 +
          </div><!-- /.navbar-inner -->
 +
        </div><!-- /.navbar -->
-
&nbsp;&nbsp;<p>Wet Lab</p>
+
      </div> <!-- /.container -->
-
<ul>
+
    </div><!-- /.navbar-wrapper -->
-
<li>Picked 2 colonies of pDawn-mCherry, innoculated in 5 mL of LB and 50 ug/mL of Kan</li>
+
-
<li>PCR purified fragments (Peter), then ran gel?</li>
+
-
</ul>
+
-
 
+
-
&nbsp;&nbsp;<p>Dry Lab</p>
+
-
<ul>
+
-
<li>Researched DARPin binding domains and linkers</li>
+
-
<li>Finalized some biobrick orders</li>
+
-
<li>Finalized synthesis order (minus linker)</li>
+
-
</ul>
+
 +
   
 +
<div class="three">
 +
    <iframe src='http://embed.verite.co/timeline/?source=0AoZBZOYYKBzEdDA1dUFNaU93QzQ4LURURjJfdzRiVFE&font=Bevan-PotanoSans&maptype=toner&lang=en&height=650' width='100%' height='650' frameborder='0' id="timeline"></iframe>
 +
   
 +
<!--Don't need hero unit--timeline acts as banner<div class="hero-unit">
 +
  <h1>Header</h1>
 +
  <p>Tagline</p>
 +
  <p>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.
 +
    <!--<a class="btn btn-primary btn-large">
 +
      Learn more
 +
    </a>
 +
  </p>
 +
</div>-->
</div>
</div>
-
 
-
 
</div>
</div>
-
</body>
 
-
</html>
 
-
 
+
   
-
 
+
   
-
You should make use of the calendar feature on the wiki and start a lab notebook. This may be looked at by the judges to see how your work progressed throughout the summer. It is a very useful organizational tool as well.
+
   
 +
   
 +
   
 +
   
 +
   
 +
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzETkFqdnhMeV9fMzA" ></script>
 +
    <script src="https://googledrive.com/host/0B4ZBZOYYKBzEZTdBSFdUV19LYjQ"></script>
 +
   
 +
    <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()
 +
       
 +
       
 +
      }(window.jQuery)
 +
    </script>
 +
    <script src="../assets/js/holder/holder.js"></script>
 +
  </body>
 +
</html>

Revision as of 01:18, 9 July 2013

Penn's iGEM Team

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