Difference between revisions of "Template:Team:William and Mary/HEADER3"

 
(116 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
<!------Adapted from "https://red-team-design.com/css3-animated-dropdown-menu/"------->
 
  
−
<html>
+
<html lang="en">
−
     <script src="https://2017.igem.org/Team:William_and_Mary/jquery1-20?action=raw&ctype=text/javascript" type="text/javascript"></script>
+
<cfheader name="X-XSS-Protection" value="1">
−
<style>
+
     <head>
 +
        <meta charset="utf-8" />
 +
<link rel="icon" type="image/png" href="https://static.igem.org/mediawiki/2015/e/ea/WMFavicon.png">
  
−
#menu, #menu ul {
+
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
−
    margin: 0;
+
        <title>NOISE - W&M iGEM</title>
−
    padding: 0;
+
        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
−
    list-style: none;
+
        <link href="https://2015.igem.org/Team:William_and_Mary/bootstrap?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
−
    z-index:999;
+
−
}
+
  
−
#menu {
+
        <link href="https://2015.igem.org/Team:William_and_Mary/rubick?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
−
    width: 960px;
+
        <link href="https://2015.igem.org/Team:William_and_Mary/demo?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
−
    margin: 60px auto;
+
        <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:William_and_Mary/jquerybxsliderCSS?action=raw&ctype=text/css" />
−
    border: 1px solid #222;
+
−
    background-color: #111;
+
−
    background-image: linear-gradient(#444, #111);
+
−
    border-radius: 6px;
+
−
    box-shadow: 0 1px 1px #777;
+
−
}
+
  
−
#menu:before,
+
        <!--    Fonts and icons    -->
−
#menu:after {
+
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
−
    content: "";
+
        <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700' rel='stylesheet' type='text/css'>
−
    display: table;
+
        <link href="https://2015.igem.org/Team:William_and_Mary/pe-icon-7-stroke?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
−
}
+
        <link href="https://2015.igem.org/Team:William_and_Mary/Rubik-Fonts?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
 +
       
 +
<!-- the wiki settings in the section immediately below are from UC San Diego 2015 -->
 +
        <style type="text/css">
 +
/* WIKI SETTINGS*/
 +
 +
/* Hide first heading */
 +
.firstHeading {
 +
display: none;
 +
}
 +
/* Visited hyperlinks */
 +
                        a:visited{
 +
                                color: #393d31;
 +
                        }
  
−
#menu:after {
+
/*-- Remove borders, float content left and remove padding/margin */
−
    clear: both;
+
#globalWrapper, #content{
−
}
+
background-color: transparent;
 +
border: none;
 +
float: center;
 +
                                width: 101%;
 +
margin-left: -3px;
 +
margin-top: -8px;
 +
padding: auto;
 +
}
  
−
#menu {
+
/*left align Black Menu Bar */
−
    zoom:1;
+
#top_menu_inside {  
 +
margin-left: 0px;
 +
}
 +
.centerImage
 +
{
 +
text-align:center;
 +
display:block;
 
}
 
}
−
 
+
.wraptocenter {
−
#menu li {
+
  display: table-cell;
−
    float: left;
+
  text-align: center;
−
    border-right: 1px solid #222;
+
  vertical-align: middle;
−
    box-shadow: 1px 0 0 #444;
+
  width: 200px;
−
    position: relative;
+
  height: 200px;
 +
  background-color: #999;
 
}
 
}
−
 
+
.wraptocenter * {
−
#menu a {
+
  vertical-align: middle;
−
    float: left;
+
−
    padding: 12px 30px;
+
−
    color: #999;
+
−
    text-transform: uppercase;
+
−
    font: bold 12px Arial, Helvetica;
+
−
    text-decoration: none;
+
−
    text-shadow: 0 1px 0 #000;
+
 
}
 
}
 +
</style>
  
−
#menu li:hover > a {
+
    </head>
−
    color: #fafafa;
+
    <body class="landing-page">
−
}
+
        <nav class="navbar navbar-default navbar-transparent navbar-fixed-top navbar-burger" role="navigation">
 +
            <!-- if you want to keep the navbar hidden you can add this class to the navbar "navbar-burger"-->
 +
            <div class="container">
 +
                <div class="navbar-header">
 +
                    <button id="menu-toggle" type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example">
 +
                    <span class="sr-only">Toggle navigation</span>
 +
                    <span class="icon-bar bar1"></span>
 +
                    <span class="icon-bar bar2"></span>
 +
                    <span class="icon-bar bar3"></span>
 +
                    </button>
 +
<a href="https://2015.igem.org/Team:William_and_Mary" class="navbar-brand">W&M iGEM 2015</a>
 +
                </div>
 +
                <div class="collapse navbar-collapse">
 +
                    <ul class="nav navbar-nav navbar-right navbar-uppercase">
 +
<p>    </p>
  
−
*html #menu li a:hover { /* IE6 only */
+
                        <li>
−
    color: #fafafa;
+
                            <a href="https://2015.igem.org/Team:William_and_Mary">
−
}
+
                            Home
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Description">
 +
                            Project Description
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary#parts">
 +
                            Parts
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Measurement">
 +
                            Results
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Modeling">
 +
                            Modeling
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Interlab">
 +
                            Interlab Study
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Collaborations">
 +
                            Collaboration
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Software">
 +
                          Software
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Practices">
 +
                            Human Practices
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary#ref">
 +
                            References
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Medal_Criteria">
 +
                            Medal Criteria
 +
                            </a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://2015.igem.org/Team:William_and_Mary/Team">
 +
                            Team
 +
                            </a>
 +
                        </li>
 +
                    </ul>
 +
                </div>
 +
            </div>
 +
        </nav>
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
        <div class="wrapper">
 +
       
 +
       
 +
       
 +
            <!--    replace this line with the code generated with the rubik-builder.html              -->
  
−
#menu ul {
+
                        <div class="section section-header" id="header4">
−
    margin: 20px 0 0 0;
+
                            <div id="video-container-4" class="full-image pattern-image filter filter-gradient-black" data-color="gold">
−
    _margin: 0; /*IE6 only*/
+
                               
−
    opacity: 0;
+
                                <div class="container">
−
    visibility: hidden;
+
                                    <div class="content">
−
    position: absolute;
+
                                       
−
    top: 38px;
+
                                        <p class="h1WM" style="font-family:WMSlim-Joe">NOISE</p>
−
    left: 0;
+
−
    z-index: 1;   
+
−
    background: #444; 
+
−
    background: linear-gradient(#444, #111);
+
−
    box-shadow: 0 -1px 0 rgba(255,255,255,.3); 
+
−
    border-radius: 3px;
+
−
    transition: all .2s ease-in-out;
+
−
}
+
  
−
#menu li:hover > ul {
+
                                        <h5>Characterization of promoter-driven transcriptional noise in E. coli</h5>
−
    opacity: 1;
+
                                    </div>
−
    visibility: visible;
+
                                </div>
−
    margin: 0;
+
                            <video class="bgvid" preload="auto" loop="loop" autoplay="false" muted="muted" volume="0"><source src="https://static.igem.org/mediawiki/2015/3/39/WMCYNoise.webm" type="video/webm" responsive-src="https://2015.igem.org/Team:William_and_Mary/rubik_responsive.jpg"><source src="https://static.igem.org/mediawiki/2015/a/a7/WMCYNoise.mp4" type="video/mp4">Video not supported</video></div>
−
}
+
                           
 +
                            <a href="" data-scroll="true" data-id="#projectdesc" class="scroll-arrow hidden-xs hidden-sm">
 +
                                <i class="fa fa-angle-down"></i>
 +
                            </a>
 +
                        </div>
 +
                   
 +
                        <div class="section section-we-are-2" id="projectdesc">
 +
                        <A NAME="whatis">
 +
                            <div class="text-area">
 +
                                <div class="container">
 +
                                    <div class="row">
 +
                                        <div class="col-md-4">
 +
                                            <div class="title">
  
−
#menu ul ul {
+
                                                <p class="h2WM">What is noise?</p>
−
    top: 0;
+
<!--                                                <div class="separator-container">
−
    left: 150px;
+
                                                    <div class="separator line-separator">✻</div>
−
    margin: 0 0 0 20px;
+
                                                </div>-->
−
    _margin: 0; /*IE6 only*/
+
                                            </div>
−
    box-shadow: -1px 0 0 rgba(255,255,255,.3);     
+
                                        </div>
−
}
+
                                        <div class="col-md-7 col-md-offset-1">
 +
                                            <div class="description">
 +
                                                <p>As synthetic biologists continue to construct increasingly complex gene regulatory networks, the need for accurate quantitative characterization of their regulatory components becomes more pressing. Despite the BioBrick registry's thorough characterization of the average strength of promoters, there is insufficient description of the variability in their expression. Our project aims to characterize this variability, or noise, for the most commonly used promoters in synthetic biology and provide additional tools for the regulation of these promoters.  
 +
                                                <p><a href="https://2015.igem.org/Team:William_and_Mary/Description">Read more on our Project Description page.</a>
 +
                                                </p>
 +
                                            </div>
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                            <div class="parallax full-image pattern-image">
 +
                                <img alt="..." class="parallax-img" src="https://static.igem.org/mediawiki/2015/thumb/a/a8/WMlabBench.jpg/800px-WMlabBench.jpg">
 +
                            </div>
 +
                        </div>
 +
                   
  
−
#menu ul li {
+
                   
−
    float: none;
+
  <!-- Section "Our Projects" example 1: 2 Columns Full Width -->
−
    display: block;
+
                        <div class="section section-we-made-1 section-with-hover" id="parts">
−
    border: 0;
+
                            <div class="text-area">
−
    _line-height: 0; /*IE6 only*/
+
                                <div class="title animate">
−
    box-shadow: 0 1px 0 #111, 0 2px 0 #666;
+
                                    <p class = "h2WM">Parts</p2>
−
}
+
<div class = "description">                                    <p>In deciding which parts to submit to the iGEM Registry we focused on three main aspects.</p>
 +
<p><i>First:</i> ensuring our project is as reproducible and extensible as possible. To that end we have submitted all of new composite fluorescent protein parts that we constructed during the project.<br> <i>Second:</i> Making genome integration as straightforward as possible for iGEM teams. In order to accomplish this goal we designed, tested, and validated a new integrator cassette that allows simple genome integration using 3A or Gibson Assembly. <br> <i>Third:</i> Increasing the number of tools available for promoter-mediated regulation in synthetic biology. We created and validated an E. coli codon optimized dCas9 variant and a suite of gRNAs to target the most commonly used promoters in iGEM.  </p>
 +
</p></div>
 +
                                </div>
 +
                            </div>
 +
                            <div class="row" id="projectsLine1">
 +
                                <div class="col-md-3">
 +
                                    <div class="project animate">
 +
                                        <img alt="..." src="https://static.igem.org/mediawiki/2015/3/3e/Allparts.jpeg">
 +
                                        <a class="over-area color-black" href="https://2015.igem.org/Team:William_and_Mary/Parts">
 +
                                            <div class="content">
 +
                                                <h5>All Parts</h5>
 +
                                                <p>A categorized list of all parts.</p>
 +
                                            </div>
 +
                                        </a>
 +
                                    </div>
 +
                                </div>
 +
                                <div class="col-md-3">
 +
                                    <div class="project animate">
 +
                                        <img alt="..." src="https://static.igem.org/mediawiki/2015/7/7d/WMcollections.jpeg">
 +
                                        <a class="over-area color-black " href="https://2015.igem.org/Team:William_and_Mary/Part_Collection">
 +
                                            <div class="content">
 +
                                                <h5>Part Collection</h5>
 +
                                                <p>Guide RNAs for iGEMs top promoters. </p>
 +
                                            </div>
 +
                                        </a>
 +
                                    </div>
 +
                                </div>
 +
                                <div class="col-md-3">
 +
                                    <div class="project animate">
 +
                                        <img alt="..." src="https://static.igem.org/mediawiki/2015/7/7d/WMbasic.jpeg">
 +
                                        <a class="over-area color-black " href="https://2015.igem.org/Team:William_and_Mary/Basic_Part">
 +
                                            <div class="content">
 +
                                                <h5>Basic Part</h5>
 +
                                                <p>Targeted repression with dCAS9.</p>
 +
                                            </div>
 +
                                        </a>
 +
                                    </div>
 +
                                </div>
 +
                                <div class="col-md-3">
 +
                                    <div class="project animate">
 +
                                        <img alt="..." src="https://static.igem.org/mediawiki/2015/f/f4/WMcomposite.jpeg">
 +
                                        <a class="over-area color-black " href="https://2015.igem.org/Team:William_and_Mary/Composite_Part">
 +
                                            <div class="content">
 +
                                                <h5>Composite Part</h5>
 +
                                                <p>An original integrator suite for the E. coli chromosome.</p>
 +
                                            </div>
 +
                                        </a>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                        <!-- End Section "Our Projects" example 1: 2 Columns Full Width -->
 +
                       
 +
                    <!-- Section "What We do" example 4: Big Title & 3 columns icons -->
  
−
#menu ul li:last-child { 
+
                    <div class="section section-we-do-2" id="workflow2">
−
    box-shadow: none;   
+
                        <div class="container">
−
}
+
                            <div class="row">
 +
                                <div class="title add-animation animate">
 +
<!--                                    <h5 class="text-gray">Big Title &amp; 4 Columns Icons</h5>-->
 +
                                    <p class="h2WM">Measurement & Modeling</p>
 +
                                    <p>We measured noise in fluorescence data for dual-integrated sets of CFP and YFP under three promoters: BBa_R0010, BBa_R0011, and BBa_R0051. We also developed an analytic model of the impact of plasmid copy number fluctuations on transcriptional noise, which revealed that intrinsic noise cannot be accurately measured from reporters on the pSB1X3 plasmid series.</p>
 +
                                </div>
 +
                                <div class="col-md-6">
 +
                                    <div class="card animation-1 add-animation animate">
 +
                                        <div class="icon">
 +
                                            <a href = "https://2015.igem.org/Team:William_and_Mary/Measurement"><img alt="Click to go to Measurement" src="https://static.igem.org/mediawiki/2015/0/0f/WMRulerIconColor.png" height= "100" width= "150"/></a>
 +
                                        </div>
 +
                                        <h3><a href = "https://2015.igem.org/Team:William_and_Mary/Measurement">Data & Analysis</a></h3>
 +
                                     
 +
                                    </div>
 +
                                </div>
 +
                                <div class="col-md-6">
 +
                                    <div class="card animation-2 add-animation animate">
 +
                                        <div class="icon">
 +
                                            <a href = "https://2015.igem.org/Team:William_and_Mary/Modeling"><img alt="Click to go to the Model." src="https://static.igem.org/mediawiki/2015/7/72/WMNormalIconColor.png" height= "100" width= "150"/></a>
 +
                                        </div>
 +
                                        <h3><a href = "https://2015.igem.org/Team:William_and_Mary/Modeling">Plasmid Fluctuation Model</a></h3>
 +
                                     
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                    </div>
 +
                    <!-- End Section "What We do" example 3: Small Title & 3 columns icons -->
 +
 +
                        <!-- Section "What We do" example 3: Small Title & 3 columns icons -->
 +
                        <div class="section section-we-do-2" id="workflow2">
 +
                            <div class="container">
 +
                                <div class="row">
 +
                                    <div class="title">
 +
                                        <p class = "h2WM">Human practices</p>
 +
                                    </div>
 +
<p>Our <a href="https://2015.igem.org/Team:William_and_Mary/Practices">Human Practices effort</a> was a multi-faceted outreach approach to science literacy, focusing specifically on spreading a basic understanding of synthetic biology to the general public. We collaborated with numerous organizations to host nine educational Synthetic Biology workshops for the public (from first graders to adults!) and to implement our <a href="https://2015.igem.org/Team:William_and_Mary/Practices#curriculum">educational 24-activity Synthetic Biology booklet</a> into schools worldwide, to further sustain our efforts for years to come.</p>
 +
                                    <div class="col-md-10 col-md-offset-1">
 +
                                        <div class="row">
 +
                                            <div class="col-md-4">
 +
                                                <div class="card">
 +
                                                    <div class="icon">
 +
                                                        <a href="https://2015.igem.org/Team:William_and_Mary/Practices"><img alt="..." src="https://static.igem.org/mediawiki/2015/2/28/WMSpeechIconColor.png" height= "100" width= "100"/></a>
 +
                                                    </div>
 +
                                                    <h3><a href="https://2015.igem.org/Team:William_and_Mary/Practices">Adult Communication</a></h3>
 +
                                                </div>
 +
                                            </div>
 +
                                            <div class="col-md-4">
 +
                                                <div class="card">
 +
                                                    <div class="icon">
 +
                                                        <a href="https://2015.igem.org/Team:William_and_Mary/Practices"><img alt="..." src="https://static.igem.org/mediawiki/2015/0/07/WMBooksIconColor.png" height= "100" width= "100"/></a>
 +
                                                    </div>
 +
                                                    <h3><a href="https://2015.igem.org/Team:William_and_Mary/Practices">Youth Education</a></h3>
 +
                                                </div>
 +
                                            </div>
 +
                                            <div class="col-md-4">
 +
                                                <div class="card">
 +
                                                    <div class="icon">
 +
                                                        <a href="https://2015.igem.org/Team:William_and_Mary/Practices"><img alt="..." src="https://static.igem.org/mediawiki/2015/3/3e/WMTimeIconColor.png" height= "100" width= "100"/></a>
 +
                                                    </div>
 +
                                                    <h3><a href="https://2015.igem.org/Team:William_and_Mary/Practices">Long-Term Sustainability</a></h3>
 +
                                                </div>
 +
                                            </div>
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                        <!-- End Section "What We do" example 3: Small Title & 3 columns icons -->
 +
                   
 +
                    <!-- Section "Our Projects" example 2: 3 Columns Full Width -->
 +
                                            <div class="section section-we-made-1 section-with-hover" id="projects1">
 +
                                                <div class="text-area">
 +
                                                    <div class="title">
 +
                                                        <p class="h2WM">Collaboration</p>
 +
                    <!--                                    <div class="separator-container">
 +
                                                            <div class="separator line-separator">✻</div>
 +
                                                        </div>-->
 +
                                                        <p>W&M iGEM met and exceeded iGEM's collaboration requirements by collaborating with other researchers in four main ways: creating a pen pal program to connect teams with similar projects, participating in the interlab measurement study, interviewing the general public to provide data to future teams about how to communicate synthetic biology, and collaborating on individual research projects with iGEM teams from University of Georgia, University of Maryland, and Cambridge. </p>
 +
                                                    </div>
 +
                                                </div>
 +
                                                <div class="row" id="projectsLine1">
 +
                                                    <div class="col-md-4">
 +
                                                        <div class="project">
 +
                                                            <img alt="..." src="https://static.igem.org/mediawiki/2015/c/c8/WmInter.jpg">
 +
                                                            <a class="over-area color-green" href="https://2015.igem.org/Team:William_and_Mary/Interlab">
 +
                                                                <div class="content">
 +
                                                                    <h4>Interlab Study</h4>
 +
                                                                    <p>Click for details.</p>
 +
                                                                </div>
 +
                                                            </a>
 +
                                                        </div>
 +
                                                    </div>
 +
                                                    <div class="col-md-4">
 +
                                                        <div class="project">
 +
                                                            <img alt="..." src="https://static.igem.org/mediawiki/2015/6/6f/Wmpenpal.jpg">
 +
                                                            <a class="over-area color-black" href="https://2015.igem.org/Team:William_and_Mary/Collaborations#penpals">
 +
                                                                <div class="content">
 +
                                                                    <h4>PenPal Program</h4>
 +
                                                                    <p>Click for details.</p>
 +
                                                                </div>
 +
                                                            </a>
 +
                                                        </div>
 +
                                                    </div>
 +
                                                    <div class="col-md-4">
 +
                                                        <div class="project">
 +
                                                            <img alt="..." src="https://static.igem.org/mediawiki/2015/a/af/WmCollCam.png">                                   
 +
                                                            <a class="over-area color-blue " href="https://2015.igem.org/Team:William_and_Mary/Collaborations#otherteams">
 +
                                                                <div class="content">
 +
                                                                    <h4>With Other Teams</h4>
 +
                                                                    <p>Click for details.</p>
 +
                                                                </div>
 +
                                                            </a>
 +
                                                        </div>
 +
                                                    </div>
 +
                                                </div>
 +
                                            </div>
 +
                                            <!-- End Section "Our Projects" example 2: 3 Columns Full Width -->
 +
                   
 +
<!-- MEDAL CRITERIA HERE -->
  
−
#menu ul a {   
+
<div class="section section-we-are-2">
−
    padding: 10px;
+
                            <div class="text-area">
−
    width: 130px;
+
                                <div class="container">
−
    _height: 10px; /*IE6 only*/
+
                                    <div class="row">
−
    display: block;
+
                                        <div class="col-md-4">
−
    white-space: nowrap;
+
                                            <div class="title">
−
    float: none;
+
                                                <p class="h2WM">Medal Criteria</p>
−
    text-transform: none;
+
                                            </div>
−
}
+
                                        </div>
 +
                                        <div class="col-md-7 col-md-offset-1">
 +
                                            <div class="content">
 +
                                                <p><a href="https://2015.igem.org/Team:William_and_Mary/Medal_Criteria">We're very proud of all of our accomplishments from over the summer! Click here to learn more about what we did to reach our goals.</a></p>
 +
                                            </div>
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                        </div>
  
−
#menu ul a:hover {
+
<!--End Medal Criteria -->                   
−
    background-color: #0186ba;
+
−
    background-image: linear-gradient(#04acec, #0186ba);
+
−
}
+
  
−
#menu ul li:first-child > a {
+
<!--Software starts here! -->
−
    border-radius: 3px 3px 0 0;
+
<div class="section section-we-are-2">
−
}
+
                            <div class="text-area">
 +
                                <div class="container">
 +
                                    <div class="row">
 +
                                        <div class="col-md-7 col-md-offset-1">
 +
                                            <div class="content">
 +
                                                <p><a href="https://2015.igem.org/Team:William_and_Mary/Software">Click here to check out the software we made to help us make sense of sequencing results of complex parts!</a> </p>
 +
                                            </div>
 +
                                        </div>
 +
<div class="col-md-4">
 +
                                            <div class="title">
 +
                                                <p class="h2WM">Software</p>
 +
                                            </div>
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
<!--End software -->
  
−
#menu ul li:first-child > a:after {
 
−
    content: '';
 
−
    position: absolute;
 
−
    left: 40px;
 
−
    top: -6px;
 
−
    border-left: 6px solid transparent;
 
−
    border-right: 6px solid transparent;
 
−
    border-bottom: 6px solid #444;
 
−
}
 
  
−
#menu ul ul li:first-child a:after {
 
−
    left: -6px;
 
−
    top: 50%;
 
−
    margin-top: -6px;
 
−
    border-left: 0;
 
−
    border-bottom: 6px solid transparent;
 
−
    border-top: 6px solid transparent;
 
−
    border-right: 6px solid #3b3b3b;
 
−
}
 
  
−
#menu ul li:first-child a:hover:after {
 
−
    border-bottom-color: #04acec;
 
−
}
 
  
−
#menu ul ul li:first-child a:hover:after {
+
                   
−
    border-right-color: #0299d3;
+
                        <!-- Section "Team" example 1: Title & Full Image -->
−
    border-bottom-color: transparent; 
+
                        <div class="section section-team-1" id="team1">
−
}
+
                            <div class="container">
 +
                                <div class="text-area">
 +
                                    <div class="title">
 +
                                        <p class="h2WM">Team</p>
 +
<!--                                        <div class="separator-container">
 +
                                            <div class="separator line-separator">✻</div>
 +
                                        </div>-->
 +
<div class="content">
 +
                                        <a href="https://2015.igem.org/Team:William_and_Mary/Team"><p>Click here to learn more about our team.</p></a>
 +
</div>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                            <div class="full-image gradient-image">
 +
                                <img alt="..." src="https://static.igem.org/mediawiki/2015/f/f5/WmTeam15a.png">
 +
                            </div>
 +
                        </div>
 +
                        <!-- End Section "Team" example 1: Description & Full Image -->
 +
                   
  
−
#menu ul li:last-child > a {
 
−
    border-radius: 0 0 3px 3px;
 
−
}
 
  
−
<!--CEDARTEST-->
+
<!--Software starts here! -->
−
/* Style the links inside the sidenav */
+
<div class="section section-we-are-2">
−
#mySidenav a {
+
                            <div class="text-area">
−
    position: absolute; /* Position them relative to the browser window */
+
                                <div class="container">
−
    left: -80px; /* Position them outside of the screen */
+
                                    <div class="row">
−
    transition: 0.3s; /* Add transition on hover */
+
<div class="title">
−
    padding: 15px; /* 15px padding */
+
<p class="h2WM">2015 Jamboree Results</p>
−
    width: 100px; /* Set a specific width */
+
</div>
−
    text-decoration: none; /* Remove underline */
+
                                        <div class="col-md-7 col-md-offset-1">
−
    font-size: 20px; /* Increase font size */
+
                                            <div class="content">
−
    color: white; /* White text color */
+
                                                <p><img src="https://static.igem.org/mediawiki/2015/b/b7/WM_Wins.jpg" width=600px> </p>
−
    border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
+
                                            </div>
−
}
+
                                        </div>
 +
<div class="col-md-4">
 +
                                            <div class="content" style="vertical-align:middle;">
 +
                                                <p>Undergraduate Grand Prize Winner<br><br>Best in Track: Measurement<br><br>Best Education & Public Engagement<br><br>Best Presentation<br><br>Nominee: Best Mathematical Model</p>
 +
                                            </div>
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
<!--End software -->
  
−
#mySidenav a:hover {
+
                        <!-- Section "ref" example 2: Text & Icons -->
−
    left: 0; /* On mouse-over, make the elements appear as they should */
+
                        <div class="section section-numbers-1" id="ref">
−
}
+
                            <div class="container">
 +
                                <div class="text-area">
 +
                                    <div class="title">
 +
                                        <p class="h2WM">References</p>
 +
<!--                                      <div class="separator-container">
 +
                                            <div class="separator line-separator">✻</div>
 +
                                        </div>-->
 +
                                    </div>
 +
                                </div>
 +
                                <div class="clearfix"></div>
 +
                                <div class="row">
 +
                                <div class="title add-animation animate">
 +
                                    <div class="col-md-4">
 +
                                        <div class="card">
 +
                                            <div class="icon">
 +
                                                <a href="https://2015.igem.org/Team:William_and_Mary/Notebook"><img alt="..." src="https://static.igem.org/mediawiki/2015/a/a6/WMNotebookIconColor.png" height= "100" width= "90"/></a>
 +
                                            </div>
 +
                                            <h3>
 +
<a href="https://2015.igem.org/Team:William_and_Mary/Notebook">
 +
                            Notebook</a></h3>
 +
<!--                                            <h5 class="text-gray">explain</h5>-->
 +
<!--                                          <div class="number" id="customersNo">
 +
                                                5.382
 +
                                            </div>-->
 +
                                        </div>
 +
                                    </div>
 +
                                    <div class="col-md-4">
 +
                                        <div class="card">
 +
                                            <div class="icon">
 +
                                                <a href="https://2015.igem.org/Team:William_and_Mary/Safety"><img alt="..." src="https://static.igem.org/mediawiki/2015/7/79/WMGogglesIconColor.png" height= "100" width= "100"/></a>
 +
                                            </div>
 +
                                            <h3>
 +
<a href="https://2015.igem.org/Team:William_and_Mary/Safety">
 +
                            Safety</a></h3>
 +
<!--                                            <h5 class="text-gray">explain</h5>-->
 +
<!--                                            <div class="number" id="projectsNo">
 +
                                                26.832
 +
                                            </div>-->
 +
                                        </div>
 +
                                    </div>
 +
                                    <div class="col-md-4">
 +
                                        <div class="card">
 +
                                            <div class="icon">
 +
                                                <a href="https://2015.igem.org/Team:William_and_Mary/Attributions"> <img alt="..." src="https://static.igem.org/mediawiki/2015/a/aa/WMTUIconColor.png" height= "100" width= "100"/></a>
 +
                                            </div>
 +
                                            <h3>
 +
<a href="https://2015.igem.org/Team:William_and_Mary/Attributions">
 +
                            Attributions</a></h3>
 +
<!--                                            <h5 class="text-gray">explain</h5>-->
 +
<!--                                            <div class="number" id="citiesNo">
 +
                                                278
 +
                                            </div>-->
 +
                                        </div>
 +
                                    </div>
 +
                                </div>
 +
                            </div>
 +
                        </div>
 +
                        </div>
 +
                        <!-- End Section "Numbers" example 2: Text & Image -->
 +
                   
 +
                   
 +
                      <footer class="footer footer-color-black" data-color="black">
 +
                            <div class="container">
 +
                                <nav class="pull-left navbar-burger">
 +
                                    <ul>
 +
                                        <li>
 +
                                            <a href="https://2015.igem.org/Team:William_and_Mary">
 +
                                                Home
 +
                                            </a>
 +
                                        </li>
 +
                                        <li>
 +
                                            <a href="mailto:igem@wm.edu">
 +
                                                Contact
 +
                                            </a>
 +
                                        </li>
 +
                                    </ul>
 +
                                </nav>
 +
                                <div class="social-area pull-right">               
 +
                                    <a href="https://www.facebook.com/wmigem2015">
 +
                                        <i class="fa fa-facebook-square"></i>
 +
                                    </a>
 +
                                    <a href="https://twitter.com/wmigem">
 +
                                        <i class="fa fa-twitter"></i>
 +
                                    </a>
 +
                                </div>
 +
                                <div class="copyright">
 +
                                    © 2015 William & Mary iGEM
 +
                                </div>
 +
                            </div>
 +
                        </footer>   
 +
        </div>
 +
       
 +
       
 +
       
 +
       
 +
       
 +
       
 +
        <!--  Here are the examples of the content for each project that is viewed inside of the page. You can create how many projects you want if you set the specific #id     
 +
        -->
 +
       
  
−
/* The about link: 20px from the top with a green background */
+
       
−
#about {
+
        <div class="body-layer"></div>
−
     top: 20px;
+
    </body>
−
     background-color: #4CAF50;
+
   
−
}
+
      
 +
   
 +
    <script type="text/javascript" src="https://2015.igem.org/Template:William_and_Mary/jquery1112minJS?
 +
action=raw&ctype=text/javascript"></script>
 +
      
 +
    <script type="text/javascript" src="https://2015.igem.org/Template:William_and_Mary/bootstrapJS?
 +
action=raw&ctype=text/javascript"></script>
 +
 
  
−
#blog {
+
     <script type="text/javascript" src="https://2015.igem.org/Template:William_and_Mary/jquerywaypointsminJS?
−
     top: 80px;
+
action=raw&ctype=text/javascript"></script>
−
    background-color: #2196F3; /* Blue */
+
−
}
+
  
−
#projects {
+
     <script type="text/javascript" src="http://presentation.paperplane.io/assets/js/modernizr.js"></script>
−
     top: 140px;
+
−
    background-color: #f44336; /* Red */
+
−
}
+
−
 
+
−
#contact {
+
−
    top: 200px;
+
−
    background-color: #555 /* Light Black */
+
−
}
+
−
 
+
−
</style>
+
−
 
+
−
 
+
−
<ul id="menu">
+
−
    <li><a href="#">Home</a></li>
+
−
    <li>
+
−
        <a href="#">Categories</a>
+
−
        <ul>
+
−
            <li><a href="#">CSS</a></li>
+
−
            <li><a href="#">Graphic design</a></li>
+
−
            <li><a href="#">Development tools</a></li>
+
−
            <li><a href="#">Web design</a></li>
+
−
        </ul>
+
−
    </li>
+
−
    <li><a href="#">Work</a></li>
+
−
    <li><a href="#">About</a></li>
+
−
    <li><a href="#">Contact</a></li>
+
−
</ul>
+
−
 
+
−
<div class="dropdown">
+
−
  <button class="dropbtn">Dropdown</button>
+
−
  <div class="dropdown-content">
+
−
    <a href="#">Link 1</a>
+
−
    <a href="#">Link 2</a>
+
−
    <a href="#">Link 3</a>
+
−
  </div>
+
−
</div>
+
  
 +
    <script type="text/javascript" src="https://2015.igem.org/Template:William_and_Mary/rubick2JS?
 +
action=raw&ctype=text/javascript"></script>
 
</html>
 
</html>

Latest revision as of 01:54, 22 August 2017

NOISE - W&M iGEM

NOISE

Characterization of promoter-driven transcriptional noise in E. coli

Parts

In deciding which parts to submit to the iGEM Registry we focused on three main aspects.

First: ensuring our project is as reproducible and extensible as possible. To that end we have submitted all of new composite fluorescent protein parts that we constructed during the project.
Second: Making genome integration as straightforward as possible for iGEM teams. In order to accomplish this goal we designed, tested, and validated a new integrator cassette that allows simple genome integration using 3A or Gibson Assembly.
Third: Increasing the number of tools available for promoter-mediated regulation in synthetic biology. We created and validated an E. coli codon optimized dCas9 variant and a suite of gRNAs to target the most commonly used promoters in iGEM.

Measurement & Modeling

We measured noise in fluorescence data for dual-integrated sets of CFP and YFP under three promoters: BBa_R0010, BBa_R0011, and BBa_R0051. We also developed an analytic model of the impact of plasmid copy number fluctuations on transcriptional noise, which revealed that intrinsic noise cannot be accurately measured from reporters on the pSB1X3 plasmid series.

Click to go to Measurement

Data & Analysis

Click to go to the Model.

Plasmid Fluctuation Model

Human practices

Our Human Practices effort was a multi-faceted outreach approach to science literacy, focusing specifically on spreading a basic understanding of synthetic biology to the general public. We collaborated with numerous organizations to host nine educational Synthetic Biology workshops for the public (from first graders to adults!) and to implement our educational 24-activity Synthetic Biology booklet into schools worldwide, to further sustain our efforts for years to come.

...

Adult Communication

...

Youth Education

...

Long-Term Sustainability

Collaboration

W&M iGEM met and exceeded iGEM's collaboration requirements by collaborating with other researchers in four main ways: creating a pen pal program to connect teams with similar projects, participating in the interlab measurement study, interviewing the general public to provide data to future teams about how to communicate synthetic biology, and collaborating on individual research projects with iGEM teams from University of Georgia, University of Maryland, and Cambridge.

Medal Criteria

We're very proud of all of our accomplishments from over the summer! Click here to learn more about what we did to reach our goals.

Click here to check out the software we made to help us make sense of sequencing results of complex parts!

Software

2015 Jamboree Results

Undergraduate Grand Prize Winner

Best in Track: Measurement

Best Education & Public Engagement

Best Presentation

Nominee: Best Mathematical Model