Difference between revisions of "Team:William and Mary"

Line 1: Line 1:
 +
{{Team:William_and_Mary/CSS_RESET}}
 +
 
<html lang="en">
 
<html lang="en">
 
<cfheader name="X-XSS-Protection" value="1">
 
<cfheader name="X-XSS-Protection" value="1">
 
     <head>
 
     <head>
 
         <meta charset="utf-8" />
 
         <meta charset="utf-8" />
−
<link rel="icon" type="image/png" href="https://static.igem.org/mediawiki/2015/e/ea/WMFavicon.png">
+
        <link rel="icon" type="image/png" href="assets/img/favicon.ico">
−
 
+
 
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
−
         <title>NOISE - W&M iGEM</title>
+
         <title>William & Mary</title>
 
         <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
 
         <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
−
         <link href="https://2015.igem.org/Team:William_and_Mary/bootstrap?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
+
         <link href="https://2016.igem.org/Team:William_and_Mary/bootstrap?action=raw&amp;ctype=text/css" rel="stylesheet" />
−
<link href="https://2015.igem.org/Team:Stockholm/fixbootstrap?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
+
<link href="https://2016.igem.org/Team:William_and_Mary/fixbootstrap?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
−
         <link href="https://2015.igem.org/Team:William_and_Mary/rubick?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
+
         <link href="https://2016.igem.org/Team:William_and_Mary/rubik?action=raw&amp;ctype=text/css" rel="stylesheet"/>
−
         <link href="https://2015.igem.org/Team:William_and_Mary/demo?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
+
         <link href="https://2016.igem.org/Team:William_and_Mary/demo?action=raw&amp;ctype=text/css" rel="stylesheet"/>
−
         <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:William_and_Mary/jquerybxsliderCSS?action=raw&ctype=text/css" />
+
         <link href="https://2016.igem.org/Team:William_and_Mary/jsquerybxslidercss?action=raw&amp;ctype=text/css" rel="stylesheet"/>
−
 
+
 
         <!--    Fonts and icons    -->
 
         <!--    Fonts and icons    -->
−
         <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
+
         <link href="https://2016.igem.org/Team:William_and_Mary/font-awesome?action=raw&amp;ctype=text/css" rel="stylesheet"/>
−
         <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700' rel='stylesheet' type='text/css'>
+
         <link href='https://2016.igem.org/Team:William_and_Mary/droid-serif?action=raw&amp;ctype=text/css' rel='stylesheet' type='text/css'/>
−
         <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://2016.igem.org/Team:William_and_Mary/pe-icon-7stroke?action=raw&amp;ctype=text/css" rel="stylesheet"/>
−
         <link href="https://2015.igem.org/Team:William_and_Mary/Rubik-Fonts?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css"/>
+
         <link href="https://2016.igem.org/Team:William_and_Mary/Rubik-Fonts?action=raw&amp;ctype=text/css" rel="stylesheet" />
 
          
 
          
 
<!-- the wiki settings in the section immediately below are from UC San Diego 2015 -->
 
<!-- the wiki settings in the section immediately below are from UC San Diego 2015 -->
−
        <style type="text/css">
+
 
 +
<style type="text/css">
 
/* WIKI SETTINGS*/
 
/* WIKI SETTINGS*/
 
 
Line 48: Line 50:
 
margin-left: 0px;  
 
margin-left: 0px;  
 
}
 
}
−
.centerImage
+
.centerImage
−
{
+
{
−
text-align:center;
+
text-align:center;
−
display:block;
+
display:block;
−
}
+
}
−
.wraptocenter {
+
.wraptocenter {
−
  display: table-cell;
+
  display: table-cell;
−
  text-align: center;
+
  text-align: center;
−
  vertical-align: middle;
+
  vertical-align: middle;
−
  width: 200px;
+
  width: 200px;
−
  height: 200px;
+
  height: 200px;
−
  background-color: #999;
+
  background-color: #999;
−
}
+
}
−
.wraptocenter * {
+
.wraptocenter * {
−
  vertical-align: middle;
+
  vertical-align: middle;
−
}
+
}
−
</style>
+
</style>
  
 
     </head>
 
     </head>
 
     <body class="landing-page">
 
     <body class="landing-page">
−
         <nav class="navbar navbar-default navbar-transparent navbar-fixed-top navbar-burger" role="navigation">
+
<!--
 +
        <div class="loading ">
 +
            <div class="loading-container">
 +
                <p>loading...</p>
 +
                <img class="loader" src="assets/img/rubik.svg"/>
 +
            </div>
 +
        </div>
 +
-->
 +
         <nav class="navbar navbar-default navbar-transparent navbar-fixed-top" role="navigation">
 
             <!-- if you want to keep the navbar hidden you can add this class to the navbar "navbar-burger"-->
 
             <!-- if you want to keep the navbar hidden you can add this class to the navbar "navbar-burger"-->
 
             <div class="container">
 
             <div class="container">
Line 78: Line 88:
 
                     <span class="icon-bar bar3"></span>
 
                     <span class="icon-bar bar3"></span>
 
                     </button>
 
                     </button>
−
<a href="https://2015.igem.org/Team:William_and_Mary" class="navbar-brand">W&M iGEM 2015</a>
+
                    <a class="navbar-brand">
 +
                    William & Mary 2016
 +
                    </a>
 
                 </div>
 
                 </div>
 
                 <div class="collapse navbar-collapse">
 
                 <div class="collapse navbar-collapse">
 
                     <ul class="nav navbar-nav navbar-right navbar-uppercase">
 
                     <ul class="nav navbar-nav navbar-right navbar-uppercase">
−
<p>     </p>
+
                        <li class="social-links">
−
 
+
                            <a href="https://www.facebook.com/WMiGEM16/?fref=ts">  
 +
                            <i class="fa fa-facebook"></i>
 +
                            </a>
 +
                            <a href="https://twitter.com/wmigem">
 +
                            <i class="fa fa-twitter"></i>
 +
</a>
 +
<!--
 +
                            <a href="#">
 +
                            <i class="fa fa-instagram"></i>
 +
                            </a>
 +
-->
 +
                        </li>
 
                         <li>
 
                         <li>
−
                             <a href="https://2015.igem.org/Team:William_and_Mary">  
+
                             <a href="template.html">  
−
                             Home
+
                             Overview
 
                             </a>
 
                             </a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="https://2015.igem.org/Team:William_and_Mary/Description">  
+
                             <a href="description.html">  
−
                             Project Description
+
                             Description
 
                             </a>
 
                             </a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="https://2015.igem.org/Team:William_and_Mary#parts">
+
                             <a href="" data-scroll="true" data-id="#projects">
 
                             Parts
 
                             Parts
 
                             </a>
 
                             </a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="https://2015.igem.org/Team:William_and_Mary/Measurement">  
+
                             <a href="" data-scroll="true" data-id="#clients">  
 
                             Results
 
                             Results
 
                             </a>
 
                             </a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="https://2015.igem.org/Team:William_and_Mary/Modeling">  
+
                             <a href="" data-scroll="true" data-id="#team">  
 
                             Modeling
 
                             Modeling
 
                             </a>
 
                             </a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="https://2015.igem.org/Team:William_and_Mary/Interlab">
+
                             <a href="" data-scroll="true" data-id="#numbers">  
−
                            Interlab Study
+
−
                            </a>
+
−
                        </li>
+
−
                        <li>
+
−
                            <a href="https://2015.igem.org/Team:William_and_Mary/Collaborations">  
+
 
                             Collaboration
 
                             Collaboration
 
                             </a>
 
                             </a>
 
                         </li>
 
                         </li>
 
                         <li>
 
                         <li>
−
                             <a href="https://2015.igem.org/Team:William_and_Mary/Software">
+
                             <a href="" data-scroll="true" data-id="#contact">  
−
                          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
 
                             Team
 
                             </a>
 
                             </a>
Line 156: Line 154:
 
         <div class="wrapper">
 
         <div class="wrapper">
 
          
 
          
−
       
+
<!--PRESENTATION PAGE INFORMATION BEGINS HERE-->
−
       
+
−
            <!--   replace this line with the code generated with the rubik-builder.html              -->
+
  
−
                        <div class="section section-header" id="header4">
+
<div class="section section-header" id="overview">
−
                            <div id="video-container-4" class="full-image pattern-image filter filter-gradient-black" data-color="gold">
+
<div class="parallax pattern-image filter filter-gradient-purple" data-color="gold">
−
                               
+
<img alt="..." src="https://static.igem.org/mediawiki/2016/c/ce/T--William_and_Mary--rubik-background.jpg">
−
                                <div class="container">
+
<div class="container">
−
                                    <div class="content">
+
<div class="content">
−
                                       
+
<p class="h1WM" style="WMSlim-Joe">Circuit Control</p>
−
                                        <p class="h1WM" style="font-family:WMSlim-Joe">NOISE</p>
+
<div class="separator-container">
 +
<div class="separator line-separator">✻</div>
 +
</div>
 +
<h5>creating a toolbox allowing for precision circuit control</h5>
 +
</div>
 +
</div>
 +
</div>
 +
<a href="" data-scroll="true" data-id="#description" class="scroll-arrow hidden-xs hidden-sm">
 +
<i class="fa fa-angle-down"></i>
 +
</a>
 +
</div>
  
−
                                        <h5>Characterization of promoter-driven transcriptional noise in E. coli</h5>
+
<div class="section section-we-are-1" id="description">
−
                                    </div>
+
<div class="text-area">
−
                                </div>  
+
<div class="container">
−
                            <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>
+
<div class="row">
−
                           
+
<div class="title">
−
                            <a href="" data-scroll="true" data-id="#projectdesc" class="scroll-arrow hidden-xs hidden-sm">
+
<h2>Project "abstract" here</h2>
−
                                <i class="fa fa-angle-down"></i>
+
<div class="separator-container">
−
                            </a>
+
<div class="separator line-separator">✻</div>
−
                        </div>
+
</div>
−
                   
+
<p class="large">
−
                        <div class="section section-we-are-2" id="projectdesc">
+
What have we done this year, + pictures that can be scrolled through
−
                        <A NAME="whatis">
+
in the 'carousel' below.
−
                            <div class="text-area">
+
</p>
−
                                <div class="container">
+
</div>
−
                                    <div class="row">
+
</div>
−
                                        <div class="col-md-4">
+
</div>
−
                                            <div class="title">
+
</div>
 +
<div id="carousel">
 +
<div id="section-we-are-1" class="carousel slide add-animation-stopped-1" data-interval="20000">
 +
<!-- Wrapper for slides -->
 +
<div class="carousel-inner pattern-image animate">
 +
<div class="item  active">
 +
<img alt="..." class="full-image" src="assets/img/builder/projects/project.jpg">
 +
</div>
 +
<div class="item">
 +
<img alt="..." class="full-image" src="assets/img/builder/projects/project.jpg">
 +
</div>
 +
</div>
 +
<!-- Controls -->
 +
<a class="left carousel-control" href="#section-we-are-1" data-slide="prev"><span class="fa fa-angle-left hidden-md hidden-lg"></span></a>    
 +
<a class="right carousel-control" href="#section-we-are-1" data-slide="next"><span class="fa fa-angle-right hidden-ms hidden-lg"></span></a>     
 +
</div>
 +
</div>
 +
</div>
  
−
                                                <p class="h2WM">What is noise?</p>
+
<!-- Section "What We do" example 4: Big Title & 4 columns icons -->
−
<!--                                                <div class="separator-container">
+
<div class="section section-we-do-2" id="workflow2">
−
                                                    <div class="separator line-separator">✻</div>
+
<div class="container">
−
                                                </div>-->
+
<div class="row">
−
                                            </div>
+
<div class="title">
−
                                        </div>
+
<h5 class="text-gray">Big Title &amp; 4 Columns Icons</h5>
−
                                        <div class="col-md-7 col-md-offset-1">
+
<h2>filler title</h2>
−
                                            <div class="description">
+
<div class="separator-container">
−
                                                <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.
+
<div class="separator line-separator">✻</div>
−
                                                <p><a href="https://2015.igem.org/Team:William_and_Mary/Description">Read more on our Project Description page.</a>
+
</div>
−
                                                </p>
+
<p>
−
                                            </div>
+
I don't know what can go here, something cool I guess
−
                                        </div>
+
</p>
−
                                    </div>
+
</div>
−
                                </div>
+
<div class="col-md-3">
−
                            </div>
+
<div class="card">
−
                            <div class="parallax full-image pattern-image">
+
<div class="icon">
−
                                <img alt="..." class="parallax-img" src="https://static.igem.org/mediawiki/2015/thumb/a/a8/WMlabBench.jpg/800px-WMlabBench.jpg">
+
<i class="pe-7s-piggy"></i>
−
                            </div>
+
</div>
−
                        </div>
+
<h3>section</h3>
−
                   
+
<p>text below that section</p>
 +
</div>
 +
</div>
 +
<div class="col-md-3">
 +
<div class="card">
 +
<div class="icon">
 +
<i class="pe-7s-headphones"></i>
 +
</div>
 +
<h3>ugh</h3>
 +
<p>so much filler text wow</p>
 +
</div>
 +
</div>
 +
<div class="col-md-3">
 +
<div class="card">
 +
<div class="icon">
 +
<i class="pe-7s-pen"></i>
 +
</div>
 +
<h3>kvndkvkldsv</h3>
 +
<p>ipsum lorem dolor</p>
 +
</div>
 +
</div>
 +
<div class="col-md-3">
 +
<div class="card">
 +
<div class="icon">
 +
<i class="pe-7s-plugin"></i>
 +
</div>
 +
<h3>:(</h3>
 +
<p>:-) :-) :-)</p>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<!-- End Section "What We do" example 3: Small Title & 3 columns icons -->
  
−
                   
+
<!-- Section "Our Projects" example 5: Single Line Photos -->
−
  <!-- Section "Our Projects" example 1: 2 Columns Full Width -->
+
<div class="section section-we-made-2 section-with-hover" id="projects2">
−
                        <div class="section section-we-made-1 section-with-hover" id="parts">
+
<div class="projects" style="overflow: hidden;">
−
                            <div class="text-area">
+
<div class="text-area">
−
                                <div class="title animate">
+
<div class="title">
−
                                    <p class = "h2WM">Parts</p2>
+
<h5 class="text-gray">Example No.5</h5>
−
<div class = "description">                                   <p>In deciding which parts to submit to the iGEM Registry we focused on three main aspects.</p>
+
<h2>Projects section</h2>
−
<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>
+
<div class="separator-container">
−
</p></div>
+
<div class="separator line-separator">✻</div>
−
                                </div>
+
</div>
−
                            </div>
+
</div>
−
                            <div class="row" id="projectsLine1">
+
</div>
−
                                <div class="col-md-3">
+
<div class="info">
−
                                    <div class="project animate">
+
<p class="text-center text-gray">more project stuff yay</p>
−
                                        <img alt="..." src="https://static.igem.org/mediawiki/2015/3/3e/Allparts.jpeg">
+
</div>
−
                                        <a class="over-area color-black" href="https://2015.igem.org/Team:William_and_Mary/Parts">
+
<div class="row scroller" style="transform: translateX(-597px);">
−
                                            <div class="content">
+
<div class="col-lg-3 col-md-6 col-sm-6">
−
                                                <h5>All Parts</h5>
+
<div class="project">
−
                                                <p>A categorized list of all parts.</p>
+
<img alt="..." src="assets/img/builder/projects/project.jpg">
−
                                            </div>
+
</div>
−
                                        </a>
+
</div>
−
                                    </div>
+
<div class="col-lg-3 col-md-6 col-sm-6">
−
                                </div>
+
<div class="project">
−
                                <div class="col-md-3">
+
<img alt="..." src="assets/img/builder/projects/project.jpg">
−
                                    <div class="project animate">
+
</div>
−
                                        <img alt="..." src="https://static.igem.org/mediawiki/2015/7/7d/WMcollections.jpeg">
+
</div>
−
                                        <a class="over-area color-black " href="https://2015.igem.org/Team:William_and_Mary/Part_Collection">
+
<div class="col-lg-3 col-md-6 col-sm-6">
−
                                            <div class="content">
+
<div class="project">
−
                                                <h5>Part Collection</h5>
+
<img alt="..." src="assets/img/builder/projects/project.jpg">
−
                                                <p>Guide RNAs for iGEMs top promoters. </p>
+
</div>
−
                                            </div>
+
</div>
−
                                        </a>
+
<div class="col-lg-3 col-md-6 col-sm-6">
−
                                    </div>
+
<div class="project">
−
                                </div>
+
<img alt="..." src="assets/img/builder/projects/project.jpg">
−
                                <div class="col-md-3">
+
<a class="over-area color-black" href="#" target="_blank">
−
                                    <div class="project animate">
+
<div class="content">
−
                                        <img alt="..." src="https://static.igem.org/mediawiki/2015/7/7d/WMbasic.jpeg">
+
<h4>this is</h4>
−
                                        <a class="over-area color-black " href="https://2015.igem.org/Team:William_and_Mary/Basic_Part">
+
<p>a really cool website I think</p>
−
                                            <div class="content">
+
</div>
−
                                                <h5>Basic Part</h5>
+
</a>
−
                                                <p>Targeted repression with dCAS9.</p>
+
</div>
−
                                            </div>
+
</div>
−
                                        </a>
+
</div>
−
                                    </div>
+
</div>
−
                                </div>
+
</div>
−
                                <div class="col-md-3">
+
<!-- End Section "Our Projects" example 5: Single Line Photos -->
−
                                    <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 -->
+
  
−
                    <div class="section section-we-do-2" id="workflow2">
+
<!-- Section "Team" example 1: Title & Full Image -->
−
                        <div class="container">
+
<div class="section section-team-1" id="team1">
−
                            <div class="row">
+
<div class="container">
−
                                <div class="title add-animation animate">
+
<div class="text-area">
−
<!--                                    <h5 class="text-gray">Big Title &amp; 4 Columns Icons</h5>-->
+
<div class="title">
−
                                    <p class="h2WM">Measurement & Modeling</p>
+
<h2>Meet the Team</h2>
−
                                    <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 class="separator-container">
−
                                </div>
+
<div class="separator line-separator">✻</div>
−
                                <div class="col-md-6">
+
</div>
−
                                    <div class="card animation-1 add-animation animate">
+
<p>insert text here about our team, image will go below like this one I stole :-)</p>
−
                                        <div class="icon">
+
</div>
−
                                            <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>
−
                                        </div>
+
</div>
−
                                        <h3><a href = "https://2015.igem.org/Team:William_and_Mary/Measurement">Data & Analysis</a></h3>
+
<div class="full-image gradient-image">
−
                                     
+
<img alt="..." src="assets/img/team/team1.jpg">
−
                                    </div>
+
</div>
−
                                </div>
+
</div>
−
                                <div class="col-md-6">
+
<!-- End Section "Team" example 1: Description & Full Image -->
−
                                    <div class="card animation-2 add-animation animate">
+
−
                                        <div class="icon">
+
<!-- BEGIN FOOTER-->
−
                                            <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>
+
<footer class="footer footer-big footer-color-black" data-color="black">
−
                                        </div>
+
<div class="container">
−
                                        <h3><a href = "https://2015.igem.org/Team:William_and_Mary/Modeling">Plasmid Fluctuation Model</a></h3>
+
<div class="row">
−
                                     
+
<div class="col-md-2 col-sm-3">
−
                                    </div>
+
<div class="info animation-1 add-animation animate">
−
                                </div>
+
<h5 class="title">Company</h5>
−
                            </div>
+
<nav>
−
                        </div>
+
<ul>
−
                    </div>
+
<li>
−
                    <!-- End Section "What We do" example 3: Small Title & 3 columns icons -->
+
<a href="#" data-scroll="true" data-id="#overview">
−
+
Top
−
                        <!-- Section "What We do" example 3: Small Title & 3 columns icons -->
+
</a>
−
                        <div class="section section-we-do-2" id="workflow2">
+
</li>
−
                            <div class="container">
+
<li>
−
                                <div class="row">
+
<a href="#">
−
                                    <div class="title">
+
something
−
                                        <p class = "h2WM">Human practices</p>
+
</a>
−
                                    </div>
+
</li>
−
<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>
+
</ul>
−
                                    <div class="col-md-10 col-md-offset-1">
+
</nav>
−
                                        <div class="row">
+
</div>
−
                                            <div class="col-md-4">
+
</div>
−
                                                <div class="card">
+
<div class="col-md-3 col-md-offset-1 col-sm-3">
−
                                                    <div class="icon">
+
<div class="info animation-2 add-animation animate">
−
                                                        <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>
+
<h5 class="title"> category</h5>
−
                                                    </div>
+
<nav>
−
                                                    <h3><a href="https://2015.igem.org/Team:William_and_Mary/Practices">Adult Communication</a></h3>
+
<ul>
−
                                                </div>
+
<li>
−
                                            </div>
+
<a href="#">
−
                                            <div class="col-md-4">
+
Contact Us
−
                                                <div class="card">
+
</a>
−
                                                    <div class="icon">
+
</li>
−
                                                        <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>
+
</ul>
−
                                                    </div>
+
</nav>
−
                                                    <h3><a href="https://2015.igem.org/Team:William_and_Mary/Practices">Youth Education</a></h3>
+
</div>
−
                                                </div>
+
</div>
−
                                            </div>
+
<div class="col-md-3 col-sm-3">
−
                                            <div class="col-md-4">
+
<div class="info animation-3 add-animation animate">
−
                                                <div class="card">
+
<h5 class="title add-animation animate">Latest News</h5>
−
                                                    <div class="icon">
+
<nav>
−
                                                        <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>
+
<ul>
−
                                                    </div>
+
<li>
−
                                                    <h3><a href="https://2015.igem.org/Team:William_and_Mary/Practices">Long-Term Sustainability</a></h3>
+
<a href="#">
−
                                                </div>
+
<i class="fa fa-twitter"></i> <b>Experiment</b>
−
                                            </div>
+
Curious what our project is about?  Check out this short video...
−
                                        </div>
+
<hr class="hr-small">
−
                                    </div>
+
</a>
−
                                </div>
+
</li>
−
                            </div>
+
<li>
−
                        </div>
+
<a href="#">
−
                        <!-- End Section "What We do" example 3: Small Title & 3 columns icons -->
+
<i class="fa fa-twitter"></i>
−
                   
+
Looking to collaborate this year?  Sign up for our <b>pen pal</b> program...
−
                    <!-- Section "Our Projects" example 2: 3 Columns Full Width -->
+
</a>
−
                                            <div class="section section-we-made-1 section-with-hover" id="projects1">
+
</li>
−
                                                <div class="text-area">
+
</ul>
−
                                                    <div class="title">
+
</nav>
−
                                                        <p class="h2WM">Collaboration</p>
+
</div>
−
                    <!--                                    <div class="separator-container">
+
</div>
−
                                                            <div class="separator line-separator">✻</div>
+
<div class="col-md-2 col-md-offset-1 col-sm-3">
−
                                                        </div>-->
+
<div class="info animation-4 add-animation animate">
−
                                                        <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>
+
<h5 class="title add-animation animate">Follow us on</h5>
−
                                                    </div>
+
<nav>
−
                                                </div>
+
<ul>
−
                                                <div class="row" id="projectsLine1">
+
<li>
−
                                                    <div class="col-md-4">
+
<a href="#" class="btn btn-social btn-facebook btn-simple">
−
                                                        <div class="project">
+
<i class="fa fa-facebook-square"></i> Facebook
−
                                                            <img alt="..." src="https://static.igem.org/mediawiki/2015/c/c8/WmInter.jpg">
+
</a>
−
                                                            <a class="over-area color-green" href="https://2015.igem.org/Team:William_and_Mary/Interlab">
+
</li>
−
                                                                <div class="content">
+
<li>
−
                                                                    <h4>Interlab Study</h4>
+
<a href="#" class="btn btn-social btn-twitter btn-simple">
−
                                                                    <p>Click for details.</p>
+
<i class="fa fa-twitter"></i> Twitter
−
                                                                </div>
+
</a>
−
                                                            </a>
+
</li>
−
                                                        </div>
+
</ul>
−
                                                    </div>
+
</nav>
−
                                                    <div class="col-md-4">
+
</div>
−
                                                        <div class="project">
+
</div>
−
                                                            <img alt="..." src="https://static.igem.org/mediawiki/2015/6/6f/Wmpenpal.jpg">
+
</div>
−
                                                            <a class="over-area color-black" href="https://2015.igem.org/Team:William_and_Mary/Collaborations#penpals">
+
<hr>
−
                                                                <div class="content">
+
<div class="copyright">
−
                                                                    <h4>PenPal Program</h4>
+
2016 William and Mary iGEM
−
                                                                    <p>Click for details.</p>
+
</div>
−
                                                                </div>
+
</div>
−
                                                            </a>
+
</footer>
−
                                                        </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 -->
+
  
−
<div class="section section-we-are-2">
 
−
                            <div class="text-area">
 
−
                                <div class="container">
 
−
                                    <div class="row">
 
−
                                        <div class="col-md-4">
 
−
                                            <div class="title">
 
−
                                                <p class="h2WM">Medal Criteria</p>
 
−
                                            </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>
 
−
 
−
<!--End Medal Criteria -->                   
 
−
 
−
<!--Software starts here! -->
 
−
<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 -->
 
−
 
−
 
−
 
−
 
−
                   
 
−
                        <!-- Section "Team" example 1: Title & Full Image -->
 
−
                        <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 -->
 
−
                   
 
−
 
−
 
−
<!--Software starts here! -->
 
−
<div class="section section-we-are-2">
 
−
                            <div class="text-area">
 
−
                                <div class="container">
 
−
                                    <div class="row">
 
−
<div class="title">
 
−
<p class="h2WM">2015 Jamboree Results</p>
 
−
</div>
 
−
                                        <div class="col-md-7 col-md-offset-1">
 
−
                                            <div class="content">
 
−
                                                <p><img src="https://static.igem.org/mediawiki/2015/b/b7/WM_Wins.jpg" width=600px> </p>
 
−
                                            </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 -->
 
−
 
−
                        <!-- Section "ref" example 2: Text & Icons -->
 
−
                        <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>
 
 
          
 
          
 
          
 
          
 +
        </div>
 
          
 
          
−
       
+
<!-- END OF WRAPPER 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     
+
−
        -->
+
−
       
+
  
−
       
 
 
         <div class="body-layer"></div>
 
         <div class="body-layer"></div>
 
     </body>
 
     </body>
Line 595: Line 427:
 
      
 
      
 
      
 
      
−
     <script type="text/javascript" src="https://2015.igem.org/Template:William_and_Mary/jquery1112minJS?
+
    <!--  core js files    -->
−
action=raw&ctype=text/javascript"></script>
+
     <script src="https://2016.igem.org/Team:William_and_Mary/jquery1-12?action=raw&amp;" type="text/javascript"></script>
−
   
+
    <script src="https://2016.igem.org/Team:William_and_Mary/bootstrapjs?action=raw&amp;" type="text/javascript"></script>
−
     <script type="text/javascript" src="https://2015.igem.org/Template:William_and_Mary/bootstrapJS?
+
     <script type="text/javascript" src="https://2016.igem.org/Team:William_and_Mary/bootstrapswitch?action=raw&amp;"></script>
−
action=raw&ctype=text/javascript"></script>
+
    <script type="text/javascript" src="https://2016.igem.org/Team:William_and_Mary/jquerybxsliderjs?action=raw&amp;"></script>
−
 
+
  
−
     <script type="text/javascript" src="https://2015.igem.org/Template:William_and_Mary/jquerywaypointsminJS?
+
    <!--  file for adding vertical points where we activate the elements animation  -->
−
action=raw&ctype=text/javascript"></script>
+
     <script type="text/javascript" src="assets/js/jquery.waypoints.min.js"></script>
  
−
     <script type="text/javascript" src="http://presentation.paperplane.io/assets/js/modernizr.js"></script>
+
    <!--  js library for devices recognition -->
 +
     <script type="text/javascript" src="assets/js/modernizr.js"></script>
  
−
     <script type="text/javascript" src="https://2015.igem.org/Template:William_and_Mary/rubick2JS?
+
    <!--  script for google maps  -->
−
action=raw&ctype=text/javascript"></script>
+
     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
 +
 
 +
    <!--  file where we handle all the script from the Rubik page  -->
 +
    <script type="text/javascript" src="https://2016.igem.org/Team:William_and_Mary/rubikjs?action=raw&amp;"></script>
 +
   
 
</html>
 
</html>

Revision as of 20:29, 4 October 2016

William & Mary

...

Circuit Control

✻
creating a toolbox allowing for precision circuit control

Project "abstract" here

✻

What have we done this year, + pictures that can be scrolled through in the 'carousel' below.

Big Title & 4 Columns Icons

filler title

✻

I don't know what can go here, something cool I guess

section

text below that section

ugh

so much filler text wow

kvndkvkldsv

ipsum lorem dolor

:(

:-) :-) :-)

Example No.5

Projects section

✻

more project stuff yay

...
...
...
...

this is

a really cool website I think

Meet the Team

✻

insert text here about our team, image will go below like this one I stole :-)

...