Difference between revisions of "Team:BostonU HW/CSS"

 
(500 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{Template:BUHW2016_Bootstrap}}
 
<html>
 
<html>
 +
 +
 +
 
<head>
 
<head>
 +
 
<style type="text/css">
 
<style type="text/css">
  
Line 6: Line 11:
  
 
#sideMenu, #top_title {display:none;}
 
#sideMenu, #top_title {display:none;}
−
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
+
#content { padding:0px; width:100%; margin-top:-12px; margin-left:0px;}
 
body {background-color:white; }
 
body {background-color:white; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
  
−
.topWikiNavBackground {
+
@font-face {
−
     height:18px;
+
     font-family: openSans;
−
     margin-top: -32px;
+
     src: url(https://static.igem.org/mediawiki/2016/1/1e/T--BostonU_HW--OpenSansRegular_rcwolf.ttf);
−
    background-color:transparent;
+
 
}
 
}
  
  
−
#globalWrapper, #content { /*-- changes default wiki settings --*/
+
html,body
−
width: 100%;  
+
{
−
height: 100%;
+
    width: 100%;
−
border: 0px;
+
    min-width: 100%;
−
background-color: transparent;
+
    height: 100%;
−
margin: 0px;
+
    margin: 0px;
−
padding: 0px;
+
    padding: 0px;
 +
    overflow-x: hidden;  
 
}
 
}
  
−
html, body, .wrapper { /*-- changes default wiki settings --*/
 
−
width: 100%;
 
−
height: 100%;
 
−
background-color: transparent;
 
−
}
 
−
#top-section { /*-- styling for default menu bar (edit, page, history, etc.) --*/
 
−
border: 0 none;
 
−
height: 14px;
 
−
z-index: 100;
 
−
top: 0;
 
−
position: fixed;
 
−
width: 975px;
 
−
left: 50%;
 
−
margin-left: -487px;
 
−
        background-color: transparent;
 
−
}
 
  
−
#top-section-bar { /*-- styling full width bar which hides behind default menu bar (edit, page, history, etc.) --*/
+
body{
−
        background-color:transparent;
+
background-color:black;
−
        height: 14px;
+
−
display: block;
+
−
z-index: 10;
+
−
position: fixed;
+
−
width:100%;
+
−
top: 0;
+
 
}
 
}
  
−
#menubar a:link, #menubar a:visited  { /*-- styling for default menu bar links (edit, page, history, etc.) --*/
+
* {
−
        color:#FFF;
+
font-family: openSans !important;
−
text-decoration: none;
+
−
background-color: transparent;
+
 
}
 
}
  
−
#menubar a:active, #menubar a:hover
 
−
{
 
−
        color:#FFF;
 
−
text-decoration: underline;
 
−
        background-color:transparent;
 
−
}
 
−
* {
 
−
margin: 0;
 
−
padding: 0;
 
  
−
-webkit-font-smoothing: antialiased;
+
.navbar {
−
-webkit-box-sizing: border-box;
+
  background-color: transparent;
−
-moz-box-sizing: border-box;
+
  background: transparent;
−
box-sizing: border-box;
+
  border-color: transparent;
−
}
+
  margin-top: 10px;
  
−
::selection {
 
−
background: #F79042;
 
−
color: #fff;
 
 
}
 
}
  
−
.slide-out-div {
 
−
          padding: 20px;
 
−
          background-image:url(../img_bu14/popopenbkgd_bu14.png);
 
−
  background-repeat:repeat;
 
−
  z-index:30;
 
−
  text-align:left;
 
−
      }
 
−
 
 
−
a:link {
 
−
color: #F79042;
 
−
        font-weight=500;
 
−
text-decoration: none;
 
−
}
 
−
a:visited {
 
−
text-decoration: none;
 
−
        font-weight=500;
 
−
color: #F79042;
 
−
}
 
−
a:hover {
 
−
text-decoration: underline;
 
−
}
 
−
a:active {
 
−
text-decoration: none;
 
−
}
 
  
−
.title{
 
−
position:absolute;
 
−
top:38px;
 
−
left:83px;
 
−
z-index:2;
 
−
}
 
  
−
body {
+
.navbar-default .navbar-header .navbar-brand,
−
color: #353535;
+
.navbar-default .navbar-header .navbar-brand:hover,
−
font: 14px/23px proxima-nova-alt, "Proxima Nova Alt", sans-serif;
+
.navbar-default .navbar-header .navbar-brand:focus {
−
text-align:center;
+
      color: white;
−
}
+
  }
 +
  .navbar-default .nav > li > a,
 +
  .navbar-default .nav > li > a:focus {
 +
      color: white;
 +
      font-size: medium;
 +
  }
 +
  .navbar-default .nav > li > a:hover,
 +
  .navbar-default .nav > li > a:focus:hover {
 +
      color: white;
 +
      font-size: medium;
 +
  }
 +
  .navbar-default.affix {
 +
      background-color: white;
 +
      border-color: white;
 +
  }
  
−
h0{
 
−
color:#FFF;
 
−
font-size:40px;
 
−
font-weight:700;
 
−
        text-decoration:none;
 
−
}
 
  
−
header1{
 
−
font-size:28px;
 
−
font-weight:700;
 
−
text-transform:uppercase;
 
−
        text-decoration:none;
 
−
}
 
  
−
header2{
+
 
−
font-size:18px;
+
.header {
−
color:#FFF;
+
−
font-weight:700;
+
 
−
text-transform:uppercase;
+
background: url('https://static.igem.org/mediawiki/2016/8/8b/T--BostonU_HW--NeptuneNASA_rcwolf.jpg') no-repeat center center fixed;  
−
text-align:left;
+
  -webkit-background-size: cover;
−
        text-decoration:none;
+
  -moz-background-size: cover;
−
}
+
  -o-background-size: cover;
 +
  background-size: cover;
  
  
−
header2black{
 
−
font-size:18px;
 
−
color:#000000;
 
−
font-weight:700;
 
−
text-transform:uppercase;
 
−
text-align:left;
 
−
        text-decoration:none;
 
 
}
 
}
  
−
header3{
+
.ourProject {
−
font-size:20px;
+
position: relative;
−
color:#353535;
+
background: url("https://static.igem.org/mediawiki/2016/b/b7/T--BostonU_HW--MFBackground_rcwolf.png");
−
font-weight:550;
+
background-size: 100% 100%;
−
        text-decoration:none;
+
height: 110%;
 +
width: 100%;
 
}
 
}
  
−
h3{
+
 
−
font-size:20px;
+
.noPadding {
−
color:#353535;
+
  padding: 0 !important;
−
font-weight:550;
+
  margin: 0 !important;
−
        text-decoration:none;
+
 
}
 
}
  
−
maincontent{
+
.sectionPadding {
−
font-weight:100;
+
  padding-top: 90px !important;
−
font-size:14px;
+
  padding-bottom: 90px !important;
−
text-align:justify;
+
 
}
 
}
  
−
capt{
+
 
−
font-size:12px;
+
.pageBranding {
−
        color:#5E5F5F;
+
font-size: 67px;
−
font-weight:300;
+
−
text-align:justify;
+
−
        line-height:110%
+
 
}
 
}
  
−
sidenav{
+
 
−
color:#FFF;
+
.headerCaption {
−
font-weight:700;
+
font-size: 130%;
 +
font-weight: 400;
 +
line-height: 130%;
 
}
 
}
  
−
#logo {
+
 
−
position: absolute;
+
.headerText {
−
left: 80px;
+
color: white;
−
top: 40px;
+
padding-top: 170px;
−
z-index: 2;
+
−
margin-left: -17px;
+
 
}
 
}
  
−
.header{
+
.ourProjectText {
−
background-color:#353535;
+
    margin-top: 100px;
−
position:fixed;
+
    margin-bottom: 100px;
−
height:125px;
+
    -webkit-box-shadow: 5px 5px 0px rgba(4, 4, 4, 0.3);
−
top:0px;
+
    -moz-box-shadow:   5px 5px 0px rgba(4, 4, 4, 0.3);
−
width:100%;
+
    box-shadow:         5px 5px 0px rgba(4, 4, 4, 0.3);
−
z-index:30;
+
−
}
+
−
.igemlogo
+
−
{
+
−
position:fixed;
+
−
right:5px;
+
−
z-index:30;
+
 
}
 
}
 +
 +
.ourProjectTextBoarder {
 +
    margin: 80px;
 +
    padding:10px;
  
  
−
#tracking_nav
 
−
{
 
−
margin: 0px 0px 0px 950px;
 
−
position: fixed;
 
−
color:#bababa;
 
−
border: 1px solid #3d3f3c;
 
−
background:#3d3f3c;
 
−
font-size: 16pt;
 
−
padding: 5px;
 
−
line-height: 120%;
 
 
}
 
}
  
−
#tracking_nav a { color:#ffffff; text-transform: lowercase;font-size: 16pt;}
+
.contactUs {
−
#tracking_nav a:hover {background:#bababa;}
+
position: relative;
 +
background-color: black;
 +
background-size: 100% 100%;
 +
height: 230px;
 +
width: 100%;
 +
}
  
−
ul#nav {
+
.contactUsContent {
−
width:90%;
+
margin-top: 70px;
−
top:100px;
+
font-size: 25px;
−
left:60px;
+
−
position:fixed;
+
−
z-index:30;
+
 
}
 
}
  
−
#nav li {
 
−
color: #FFF;
 
−
background-color:none;
 
−
margin: 0 15px 0 0;
 
−
float: left;
 
−
position: relative;
 
−
list-style: none;
 
  
−
}
 
−
#nav li:last-child { margin:0; }
 
  
−
/* main level link */
+
 
−
#nav a {
+
.btn {
−
font-family:bree-web, Bree, sans-serif;
+
    padding: 14px 24px;
−
font-size:10pt;
+
    border: 0 none;
−
font-weight:600;
+
    border-radius: 0;
−
line-height:210%;
+
    font-weight: 700;
−
color: inherit;
+
    font-size: 20px;
−
text-decoration: none;
+
    letter-spacing: 1px;
−
display: block;
+
    text-transform: uppercase;
−
padding: 0 0 0 5px;
+
    -webkit-box-shadow: 5px 5px 0px rgba(4, 4, 4, 0.3);
−
margin: 0;
+
    -moz-box-shadow:   5px 5px 0px rgba(4, 4, 4, 0.3);
 +
    box-shadow:         5px 5px 0px rgba(4, 4, 4, 0.3);
 +
   
 
}
 
}
−
 
+
−
ul#nav > li > a {
+
.btn:focus, .btn:active:focus, .btn.active:focus {
−
line-height:10px;
+
    outline: 0 none;
−
border-left:solid 3px #bbb;
+
}
−
padding:0 0 0 15px;
+
 +
.btn-primary {
 +
    background: #ffffff;
 +
    color: #000000;
 
}
 
}
  
−
#nav a:hover {
+
.btn-primary:active, .btn-primary.active {
−
/*background-color: #870203;
+
    background: #ffffff;
−
color: #ffffff;*/
+
    color: #000000;
 
}
 
}
  
 +
  
−
/* main level link hover */
+
.btn-primary:focus {
−
#nav .current a, #nav li:hover > a {
+
    background: #ffffff;
−
color: #F79042;
+
    color: #000000;
−
border-color:#F79042;
+
 
}
 
}
 +
  
−
/* sub levels link hover */
+
.btn:active:focus {
−
#nav ul li:hover a , #nav li:hover li a{
+
    background: #545454 !important;
−
border: none;
+
    color: white;
−
background-image:url(https://static.igem.org/mediawiki/2014/3/3a/Orangemenubkgd_bu14.png);
+
    box-shadow: none;
−
background-repeat:repeat;
+
−
color:#FFF;
+
 
}
 
}
−
#nav ul a:hover {
+
.btn-primary:hover{
−
color: #353535 !important;
+
    background: #545454;
−
/*background: #fff url() repeat-x 0 -100px !important;
+
    color: white;
−
text-shadow: 0 1px 1px rgba(0,0,0, .1);*/
+
 
}
 
}
  
  
−
/* dropdown */
+
 
−
#nav li:hover > ul {
+
 
 +
 
 +
 
 +
 
 +
 
 +
/* Animated Underlining For Menu Items  */
 +
.dropbtn {
 +
display: inline-block;
 +
position: relative;
 +
padding-bottom: 3px;
 +
}
 +
.dropbtn:after {
 +
content: '';
 
display: block;
 
display: block;
−
opacity:1;
+
margin: auto;
−
margin:0;
+
height: 2px;
−
background-color: none;
+
width: 0px;
−
z-index:0;
+
background: transparent;
 +
transition: width .5s ease, background-color .5s ease;
 +
}
 +
.sliding-middle-out:hover > .dropbtn:after {
 +
width: 100%;
 +
background: white;
 
}
 
}
  
  
−
/* level 2 list */
 
−
#nav ul {
 
−
display: none;
 
−
opacity:0;
 
−
margin: 20px 0 0 0;
 
−
padding: 7px 0 0 0;
 
−
width: 205px;
 
−
position: absolute;
 
−
left: 0;
 
−
z-index:-1;
 
  
 +
 +
 +
/*  Dropdown Menu Functionality  */
 +
/* Style The Dropdown Button */
 +
.dropbtn {
 +
    color: white;
 +
    border: none;
 +
    cursor: pointer;
 
}
 
}
−
#nav ul li {
+
 
−
float: none;
+
/* The container <div> - needed to position the dropdown content */
−
margin: 0;
+
.dropdown {
−
padding: 0;
+
    position: relative;
 +
    display: inline-block;
 
}
 
}
  
−
#nav ul a {
+
/* Dropdown Content (Hidden by Default) */
−
font-weight: normal;
+
.dropdown-content {
−
/*text-shadow: 0 1px 0 #fff;*/
+
    display: none;
 +
    position: absolute;
 +
    background-color: rgba(249,249,249,0.4);
 +
    min-width: 160px;
 
}
 
}
  
−
/* clearfix */
+
/* Links inside the dropdown */
−
#nav:after {
+
.dropdown-content a {
−
content: ".";
+
    color: black;
−
display: block;
+
    font-size: 15px;
−
clear: both;
+
    padding: 10px 16px;
−
visibility: hidden;
+
    text-decoration: none;
−
line-height: 0;
+
    display: block;
−
height: 0;
+
 
}
 
}
−
#nav {
+
 
−
display: inline-block;
+
/* Change color of dropdown links on hover */
−
}  
+
.dropdown-content a:hover {background-color: #f1f1f1}
−
html[xmlns] #nav {
+
 
−
display: block;
+
/* Show the dropdown menu on hover */
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 
}
 
}
 +
 +
 +
 +
 +
 +
 +
 +
 +
</style>
 +
 +
</head>
 +
 +
<body>
 +
 +
 +
 +
 +
 +
 +
<!-- Header -->
 +
    <header id="top" class="header">
 +
 +
<nav class="navbar navbar-default">
 +
  <div class="container-fluid">
 +
    <!-- Brand and toggle get grouped for better mobile display -->
 +
    <div class="navbar-header">
 +
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 +
        <span class="sr-only">Toggle navigation</span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
        <span class="icon-bar"></span>
 +
      </button>
 +
      <a class="navbar-brand" href="#">BU HW 2016</a>
 +
    </div>
 +
 +
    <!-- Collect the nav links, forms, and other content for toggling -->
 +
    <div class="collapse navbar-collapse " >
 +
      <ul class="nav navbar-nav navbar-right">
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">TEAM</a>
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Team">Us</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Attributions">Attributions</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Collaborations">Collaborations</a>
 +
            </div>
 +
        </li>
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">PROJECT</a>
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Results">Results</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Demonstrate">Project Build</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Proof">Application</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Design">Documentation</a>
 +
            </div>
 +
        </li>
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">NOTEBOOK</a>
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Notebook">Timeline</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Experiments">Experiments</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Safety">Safety</a>
 +
            </div>
 +
        </li>
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="https://2016.igem.org/Team:BostonU_HW/Human_Practices" class="dropbtn">HUMAN PRACTICES</a>
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/HP/Silver">Silver</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/HP/Gold">Gold</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Integrated_Practices">Integrated Practices</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Engagement">Engagement</a>
 +
            </div>
 +
        </li>
 +
        <li class="sliding-middle-out dropdown">
 +
            <a href="#" class="dropbtn">AWARDS</a>
 +
            <div class="dropdown-content">
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Hardware">Hardware</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Software">Software</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Measurement">Measurement</a>
 +
                  <a href="https://2016.igem.org/Team:BostonU_HW/Model">Model</a>
 +
            </div>
 +
        </li>
 +
      </ul>
 +
    </div><!-- /.navbar-collapse -->
 +
  </div><!-- /.container-fluid -->
 +
</nav>
 
   
 
   
−
* html #nav {
 
−
height: 1%;
 
−
}
 
  
  
  
 +
<div class="container headerText">
  
 +
<div class="row pageBranding">EXPERIENCE NEPTUNE</div>
 +
<div class="row"><br><br></div> 
 +
<div class="row headerCaption">An end to end design suite for <br>
 +
continuous flow microfluidic devices </div>
 +
<div class="row"><br><br></div> 
 +
<div class="row">
 +
<a href="https://2016.igem.org/Team:BostonU_HW/Demonstrate" > <button type="button" class="btn btn-primary" id="down">GET STARTED</button></a>
 +
</div>
 +
</div>
  
−
.headerdivider{
+
<br><br><br><br><br><br><br><br><br><br>
−
        background-image:url(https://static.igem.org/mediawiki/2014/1/15/Headerdivider_bu14.png);
+
 
−
position:absolute;
+
</header>
−
top:120px;
+
−
height:15px;
+
−
width:100%;
+
−
z-index:10;
+
−
}
+
  
−
.plasmid{
 
−
        background-color:transparent;
 
−
position: relative;
 
−
background-repeat:no-repeat;
 
−
margin-left:auto;
 
−
margin-right:auto;
 
−
width:400px;
 
−
height:500px;
 
−
        top: calc(50% - 300px);
 
−
z-index:10;
 
−
}
 
  
−
.banner {
+
<div class="container sectionPadding" id="basics">
−
        background-image:url(https://static.igem.org/mediawiki/2014/0/03/Boston1_bu14.jpg);
+
<div class="row">
−
        background-size:cover;
+
    <div class="col-md-1"></div>
−
position: absolute;
+
    <div class="col-md-10">
−
top:100px;
+
          <div class="col-md-4" style="font-size:30px">
−
width: 100%;
+
              <div class="col-md-6 noPadding">SPECIFY</div>
−
height:100%;
+
              <div class="col-md-3"><img src="https://static.igem.org/mediawiki/2016/3/36/T--BostonU_HW--SpecifyIcon_rcwolf.png" height="32" width:"32"></div>
−
overflow: auto;
+
              <div class="col-md-3"></div>
−
font-size: 18px;
+
          </div>
−
text-align: center;
+
          <div class="col-md-4" style="font-size:30px">
−
color: rgba(255,255,255,.6);
+
              <div class="col-md-6 noPadding">DESIGN</div>
−
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
+
              <div class="col-md-3"><img src="https://static.igem.org/mediawiki/2016/4/41/T--BostonU_HW--DesignIcon_rcwolf.png" height="32" width:"32"></div>
 +
              <div class="col-md-3"></div>
 +
          </div>
 +
          <div class="col-md-4" style="font-size:30px">
 +
              <div class="col-md-6 noPadding">BUILD</div>
 +
              <div class="col-md-3"><img src="https://static.igem.org/mediawiki/2016/f/f5/T--BostonU_HW--BuildIcon_rcwolf.png" height="32" width:"32"></div>
 +
              <div class="col-md-3"></div>
 +
          </div>
 +
    </div>
 +
    <div class="col-md-1"></div>
 +
</div>
 +
 
 +
<div class="row">
 +
<br>
 +
</div>
 +
 
 +
<div class="row">
 +
    <div class="col-md-1"></div>
 +
    <div class="col-md-10">
 +
          <div class="col-md-4" style="font-size:15px">Begin by defining which inputs and outputs your microfluidic chip will have.
 +
Declare any limitations in terms of port size, channel width. Neptune will efficiently place and route the features of your chip.
 +
The mapper (MM) tool within the place and routing functionality has been made completely by the iGEM Team.
 +
</div>
 +
          <div class="col-md-4" style="font-size:15px">Check and visualize your device layout using the Neptune graphical user interface.
 +
Edit the design if you so desire. Establish a control sequence to move fluids through the microfluidic chip.
 +
The interface has been made completely by the iGEM Team.
 +
</div>
 +
          <div class="col-md-4" style="font-size:15px">Assemble your microfluidic system. Import our design files into a 3D Printer and CNC mill to make the chip and the pump setup.
 +
Change the setup using our parameterized designs to fit your specific needs.
 +
The design of the setup is BU iGEM work, whilst the chip manufacturing is the work of our mentors.
 +
</div>
 +
    </div>
 +
    <div class="col-md-1"></div>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
 
 +
 
 +
<div class="row">
 +
<div class="container ourProject">
 +
 
 +
<div class="container ourProjectText" style="background-color: white">
 +
 
 +
<div class="ourProjectTextBoarder">
 +
<div style="text-align:center; font-size:31px;">OUR PROJECT</div>
 +
<br>
 +
Neptune is a specify, design, and build tool for the development of continuous flow microfluidics. With Neptune, users can specify microfluidic devices through a high level description of liquid flow relations. Our application will automatically place and route the design schematic of the microfluidic and, when used in conjunction with low cost and readily available CAD tools, a user can build their custom microfluidic system in-lab.  
 +
<br><br>
 +
The Boston University 2016 iGem Hardware Team is encapsulating this entire workflow through a graphical user interface. Users can write files that specify the function of the microfluidic, preview and edit their microfluidic design generated by the application, use this application directly with CAD tools such as a CNC mill to fabricate their device, and physically control valves and ports on the microfluidic chip. The iGem team is also complementing this workflow by developing and releasing open source designs of our hardware, including parametric 3D print files and firmware for microcontrollers that actuate the microfluidic valves. Finally, the iGem team is also involved in the development of the place and route software that converts a high level description of liquid flow relations into a microfluidic netlist that can that be converted into a design schematic.
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<style type="text/css">
 +
.imgNavBlock{
 +
background-color: #000000;
 +
padding-top: 100px;
 +
padding-bottom: 100px;
  
−
box-shadow: 0 1px 2px rgba(0,0,0,.25);
 
−
 
−
 
 
}
 
}
−
+
.imgSquarePadding{
−
.wrap {
+
background-color: #000000;
−
margin: 0 auto;
+
height: 100px;
−
width: 960px;
+
}
 +
.imgSquare{
 +
background: url('https://static.igem.org/mediawiki/2016/0/02/T--BostonU_HW--chalkboardIconDownsized_rcwolf.png') no-repeat;
 +
    -webkit-background-size: 95% auto;
 +
    -moz-background-size: 95% auto;
 +
    -o-background-size: 95% auto;
 +
    background-size: 95% auto;
 +
    height: 280px;
 
}
 
}
  
−
.anchor{
+
.imgSquareOpenSource{
−
position:absolute;
+
  background: url('https://static.igem.org/mediawiki/2016/9/9b/T--BostonU_HW--openSourceSquareDownsized_rcwolf.jpg') no-repeat;
−
top:calc(100% - 125px);
+
    -webkit-background-size: 95% auto;
 +
    -moz-background-size: 95% auto;
 +
    -o-background-size: 95% auto;
 +
    background-size: 95% auto;
 +
    height: 280px;
 
}
 
}
  
−
.topanchor{
+
.imgSquareOurTeam{
−
position:absolute;
+
  background: url('https://static.igem.org/mediawiki/2016/7/76/T--BostonU_HW--walkingTeamDownsized_rcwolf.png') no-repeat;
−
top:calc(0% - 125px);
+
    -webkit-background-size: 95% auto;
 +
    -moz-background-size: 95% auto;
 +
    -o-background-size: 95% auto;
 +
    background-size: 95% auto;
 +
    height: 280px;
 
}
 
}
  
−
.lower{
+
.imgSquareTutorial{
−
background-image:url(https://static.igem.org/mediawiki/2014/d/d7/Gradient_bu14.png);
+
  background: url('https://static.igem.org/mediawiki/2016/7/72/T--BostonU_HW--tutorialTypingDownsized_rcwolf.png') no-repeat;
−
background-color:#FFF;
+
    -webkit-background-size: 95% auto;
−
text-align:center;
+
    -moz-background-size: 95% auto;
−
background-repeat:repeat-x;
+
    -o-background-size: 95% auto;
−
width:100%;
+
    background-size: 95% auto;
−
position:absolute;
+
    height: 280px;
−
top:100%;
+
−
z-index:10;
+
 
}
 
}
−
.content{
 
−
text-align:left;
 
−
width:100%;
 
−
position:relative;
 
−
z-index:10;
 
  
 +
 +
.navImg{
 +
max-width: 100%;
 +
margin: auto;
 +
opacity: 0.4;
 
}
 
}
−
.text{
+
.navBlockTxt{
−
width:75%;
+
z-index: 100;
−
margin-left:auto;
+
color: white;
−
margin-right:auto;
+
font-size: 30px;
 +
text-align: center;
 +
line-height: 100px;
 
}
 
}
−
.content1{
 
−
background-image:url(../img_bu14/whitebkgd_bu14.png);
 
−
background-repeat:repeat;
 
  
−
 
+
.cubeHeight {
−
.sponsors{
+
  height: 280px;
−
background-color:#FFF;
+
−
position:relative;
+
−
text-align:center;
+
−
bottom:0px;
+
−
z-index:10;
+
 
}
 
}
 +
.card-container {
 +
  height: 100%;
 +
  min-height: 100%;
 +
  perspective: 600;
 +
  position: relative;
 +
  max-width: 100%;
 +
}
 +
.card {
 +
  height: 100%;
 +
  /*position: absolute;*/
 +
  transform-style: preserve-3d;
 +
  transition: all 1s ease-in-out;
 +
}
 +
.card:hover {
 +
  transform: rotateY(180deg);
 +
}
 +
.card .side {
 +
  backface-visibility: hidden;
 +
  border-radius: 0px;
 +
  height: 100%;
 +
  position: absolute;
 +
  overflow: hidden;
 +
  width: 100%;
 +
}
 +
.card .back {
 +
  color: white;
 +
  text-align: center !important;
 +
  transform: rotateY(180deg);
 +
  margin-left: -22px !important;
 +
/*  font-size: 30px;*/
 +
}
 +
</style>
  
−
@media only screen and (min-device-width: 320px) and (max-device-width: 480px), (max-width: 900px) {
+
<div class="row imgNavBlock">
−
.wrap {
+
−
width: 90%;
+
−
}
+
−
#logo {
+
−
left: 50px;
+
−
top: 30px;
+
−
}
+
  
−
.banner header1, .banner header2 {
+
<div class="col-md-1 imgSquarePadding"></div>
−
font-size: 24px;
+
−
line-height: 30px;
+
  <div class="col-md-10">
−
}
+
−
.banner ul li {
+
−
height: 240px;
+
−
}
+
−
.banner .inner {
+
−
padding-top: 100px;
+
−
padding-bottom: 50px;
+
−
}
+
−
.banner p {
+
−
font-size: 15px;
+
−
width: 80%;
+
−
margin: 0 auto;
+
−
}
+
−
pre {
+
−
overflow: auto;
+
−
}
+
−
.features li {
+
−
width: 100%;
+
−
margin-left: 10px;
+
−
margin-bottom: 30px;
+
−
}
+
−
.how li {
+
−
width: 90%;
+
−
}
+
−
.how pre {
+
−
position: static;
+
−
width: 100%;
+
−
}
+
−
}
+
  
−
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+
   
−
.features li:before {
+
    <div class="card-container">
−
background: url('img/icons@2x.png');
+
  <div class="col-md-3 card">
−
background-size: 100%;
+
        <div class="cubeHeight">
−
}
+
  <div class="navBlockTxt side imgSquareOpenSource"> Open Source <br> <img src="https://static.igem.org/mediawiki/2016/7/71/T--BostonU_HW--openSourceIcon_rcwolf.png" >
−
}
+
        </div>
 +
        <div class="side back" style="top: 15%">
 +
            <h4>Neptune is completely open-source</h4>
 +
            <br>
 +
            <a href=""><button type="button" class="btn btn-primary" >learn more</button></a>
 +
        </div>
 +
  </div>
 +
    </div>
 +
  </div>
  
  
−
</style>
+
   
 +
    <div class="card-container">
 +
    <div class="col-md-3 card">
 +
        <div class="cubeHeight">
 +
    <div class="navBlockTxt side imgSquareTutorial"> Tutorials <br> <img src="https://static.igem.org/mediawiki/2016/a/a4/T--BostonU_HW--tutorialsIcon_rcwolf.png" >
 +
        </div>
 +
        <div class="side back" style="top: 15%">
 +
          <h4>Watch our Neptune tutorial</h4>
 +
          <br>
 +
          <a href=""><button type="button" class="btn btn-primary">learn more</button></a>
 +
        </div>
 +
  </div>
 +
    </div>
 +
  </div>
  
  
−
<head>
+
   
−
<script type="text/javascript">
+
    <div class="card-container">
−
$(document).ready(function() {
+
  <div class="col-md-3 card">  
−
$('a').click(function(){
+
      <div class="cubeHeight">
−
    $('html, body').animate({
+
<div class="navBlockTxt side imgSquareOurTeam"> Our Team <br> <img src="https://static.igem.org/mediawiki/2016/4/49/T--BostonU_HW--ourTeamIcon_rcwolf.png" >
−
        scrollTop: $( $.attr(this, 'href') ).offset().top
+
        </div>
−
    }, 500);
+
        <div class="side back" style="top: 15%">
−
    return false;
+
            <h4>Meet the team behind the magic</h4>
−
});
+
            <br>
−
});
+
            <a href=""><button type="button" class="btn btn-primary">learn more</button></a>
−
</script>
+
        </div>
−
</head>
+
  </div>
 +
    </div>
 +
  </div>
  
−
<body>
+
   
 +
    <div class="card-container">
 +
  <div class="col-md-3 card">
 +
        <div class="cubeHeight">
 +
<div class="navBlockTxt side imgSquare"> Demonstration <br> <img src="https://static.igem.org/mediawiki/2016/d/da/T--BostonU_HW--demonstrationIcon_rcwolf.png" >
 +
        </div>
 +
    <div class="side back" style="top: 15%">
 +
            <h4>See how Neptune is being used in other labs</h4>
 +
            <br>
 +
            <a href=""><button type="button" class="btn btn-primary">learn more</button></a>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
  
−
<!--Header-->
+
  </div>
−
<div class="header">  
+
  
−
<!--BU iGEM Title-->
+
  <div class="col-md-1 imgSquarePadding"></div>
−
<div class="title"><a href="index_bu14.html"><img src="https://static.igem.org/mediawiki/2014/a/a0/Pagetitle_bu14.png" width="728" height="51"></a></div>
+
  
−
<!--iGEM Logo-->
 
−
  <div class="igemlogo"> <a href="https://2014.igem.org/Main_Page" target="_blank"><img src="https://static.igem.org/mediawiki/2014/9/9e/IGEMLogo_bu14.gif" width="147" height="120"></a></div>
 
 
</div>
 
</div>
  
−
<!--Navibar-->
 
−
<ul id="nav">
 
−
<li><a href="https://2014.igem.org/Team:BostonU/Team">TEAM</a>
 
−
  </li>
 
−
<li><a href="">PROJECT</a>
 
−
<ul>
 
−
<li><a href="https://2014.igem.org/Team:BostonU/Chimera">Overview</a></li>
 
−
<li><a href="https://2014.igem.org/Team:BostonU/Encoder">Priority Encoder</a></li>
 
−
<li><a href="https://2014.igem.org/Team:BostonU/MoClo">MoClo Assembly Method</a></li>
 
−
                        <li><a href="https://2014.igem.org/Team:BostonU/Backbones">Low Copy Backbones</a></li>
 
−
<li><a href="https://2014.igem.org/Team:BostonU/ProjectTandemPromoters">Tandem Promoters</a></li>
 
−
      <li><a href="https://2014.igem.org/Team:BostonU/FusionProteins">Fusion Proteins</a></li>
 
−
      <li><a href="https://2014.igem.org/Team:BostonU/Repressors">Repressor Proteins</a></li>
 
−
            <li><a href="https://2014.igem.org/Team:BostonU/Multiplexing">Multiplexing</a></li>
 
−
<li><a href="https://2014.igem.org/Team:BostonU/Software">BioDesign Automation Tools</a></li>
 
−
            <li><a href="https://2014.igem.org/Team:BostonU/Future">Future Work</a></li>
 
  
−
  </ul>
+
<!-- Footer -->
−
</li>
+
    <div id="contact" class="row">
−
<li><a href="">ACHIEVEMENTS</a>
+
        <div class="container">
−
<ul>
+
−
        <li><a href="https://2014.igem.org/Team:BostonU/Data">Data Collected</a></li>
+
−
<li><a href="https://2014.igem.org/Team:BostonU/Parts">Parts Submitted</a></li>
+
−
            <li><a href="https://2014.igem.org/Team:BostonU/Workflow">Chimera Workflow</a></li>
+
−
            <li><a href="https://2014.igem.org/Team:BostonU/ChimeraExample">Chimera Example</a></li>
+
−
            <li><a href="https://2014.igem.org/Team:BostonU/Medals">Medal Fulfillment</a></li>
+
  
−
  </ul>
 
−
  </li>
 
−
<li><a href="">NOTEBOOK</a>
 
−
  <ul>
 
−
      <li><a href="https://2014.igem.org/Team:BostonU/Training">Training</a></li>
 
−
<li><a href="https://2014.igem.org/Team:BostonU/Protocols">Protocols</a></li>
 
−
                        <li><a href="https://2014.igem.org/Team:BostonU/BackbonesNotebook">Backbones</a></li>
 
−
                        <li><a href="https://2014.igem.org/Team:BostonU/TandemPromoters">Tandem Promoters and Repressors</a></li>
 
−
                        <li><a href="https://2014.igem.org/Team:BostonU/FusionProteinsNotebook">Fusion Proteins</a></li>
 
−
  </ul>
 
−
  </li>
 
−
<li><a href="">CONSIDERATIONS</a>
 
−
    <ul>
 
−
<li><a href="https://2014.igem.org/Team:BostonU/Collaborations">Collaborations</a></li>
 
−
<li><a href="https://2014.igem.org/Team:BostonU/Measurement">Measurement Track</a></li>
 
−
<li><a href="https://2014.igem.org/Team:BostonU/Safety">Safety</a></li>
 
−
<li><a href="https://2014.igem.org/Team:BostonU/Interlab">Interlab Study</a></li>
 
−
<li><a href="https://2014.igem.org/Team:BostonU/NEGEM">NEGEM</a></li>
 
−
<li><a href="https://2014.igem.org/Team:BostonU/HumanPractices">Policy and Practices</a></li>
 
−
  </ul>
 
−
<li><a href="https://2014.igem.org/Team:BostonU/Acknowledgements">ACKNOWLEDGEMENTS</a>
 
−
  </li>
 
−
 
−
</ul>
 
  
−
<!--Photo Slider-->
 
−
<div class="banner">
 
  
−
<!--Plasmid-->
+
<br><br/>
−
<div class="plasmid" align="center">
+
<h3 style="text-align:center; font-size:20px;">Thank you to our sponsors for their support</h3>
−
<img src="https://static.igem.org/mediawiki/2014/3/32/Plasmidoutline_bu14.png" width="350" height="350"><br><br><br>
+
<br><br/>
−
<a href="#Lower" rel="" id="#Lower" class="anchorLink"><img src="https://static.igem.org/mediawiki/2014/9/9e/Start_bu14.png" width="166" height="48" alt="Start"></a>
+
<img src="https://static.igem.org/mediawiki/2016/9/9a/FooterLogoBoard_rcwolf.png" align="middle"></img>
−
</div></div>
+
<br><br/><br>
  
 +
                   
 +
    </div>
 +
</div>
 +
        </div>
 +
</div>
 +
 +
 +
 +
<div class="container contactUs">
 +
 +
<div class="row contactUsContent">
 +
<div class="col-md-3" style="color:white; padding-left: 50px;">CONTACT US</div>
 +
<div class="col-md-2" style="text-align:center;"><a href="mailto:bu.igemhw2016@gmail.com"><img src="https://static.igem.org/mediawiki/2016/b/b1/T--BostonU_HW--emailIcon_rcwolf.png" height="50px" width="60px"></a></div>
 +
<div class="col-md-2"></div>
 +
<div class="col-md-2" style="text-align:center;"><a href="https://twitter.com/iGemHWBU"><img src="https://static.igem.org/mediawiki/2016/7/78/T--BostonU_HW--twitterIcon_rcwolf.png" height="50px" width="60px"></a></div>
 +
<div class="col-md-3"></div>
 +
</div>
 +
<br><br>
 +
<div class="row">
 +
<p class="text-muted" style="text-align:center; color:white; ">Copyright &copy; Boston University Hardware Team Website 2016</p>
 +
</div>
 +
 +
 +
</div>
  
−
<!--Lower Content-->
 
−
<div id='Lower' class="anchor"></div>
 
−
<div class="lower">
 
−
  <div class="content">
 
−
  <!--Section 1-->
 
−
    <div class="content1">
 
−
  <div class="text">
 
−
  <br>
 
−
  <br>
 
−
<header1>Chimera</header1><h3>an optimized characterization workflow for synthetic biology</h3>
 
−
<maincontent><br>
 
−
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 
−
      <tr>
 
−
        <td colspan="2" scope="col">
 
−
<h3>Abstract </h3>
 
−
<strong>The Joy of Cloning: Chimera, a Recipe for Integrating Computational Tools with Experimental Protocols </strong><br>
 
−
If BU can clone it, so can you! With a pinch of wet lab work and a dash of computational tools, we have developed a new recipe called <a href="https://2014.igem.org/Team:BostonU/Workflow">Chimera</a> that will help fellow synthetic biology cloners in the creation of their genetic devices! Chimera utilizes <a href="https://2014.igem.org/Team:BostonU/Software">bio-design automation software tools</a> with experimental protocols and builds upon a thoroughly characterized library of <a href="https://2014.igem.org/Team:BostonU/MoClo">MoClo</a> parts. This recipe, or workflow, integrates software tools to reduce human error and to structure the way device designs are chosen, assembled, and tested. To demonstrate that this workflow can be used by any level of cloner (beginner, intermediate, and advanced), we will highlight how we used Chimera to create:<br>
 
−
<p class="tab"><li> individual genetic parts (namely <a href="https://2014.igem.org/Team:BostonU/ProjectTandemPromoters">tandem promoters</a>, <a href="https://2014.igem.org/Team:BostonU/FusionProteins">fusion proteins</a>, and <a href="https://2014.igem.org/Team:BostonU/Backbones">different backbones</a>), </p>
 
−
<p class="tab"><li> transcriptional units assembled from individual parts (with both new and previously made MoClo parts), and </p>
 
−
<p class="tab"><li> a complex genetic device (our goal is a <a href="https://2014.igem.org/Team:BostonU/Encoder">priority encoder</a>).</p>
 
−
<br><br><strong><a href="https://2014.igem.org/Team:BostonU/Chimera">Click here to explore our project!</a></strong></td></tr></table>
 
−
</maincontent>
 
  
−
</div></div>
 
−
 
 
−
<!--Footer-->
 
−
<div class="sponsors" align="center"> <br><br><header1>Our Sponsors</header1><br><br><img src="https://static.igem.org/mediawiki/2014/c/c5/Sponsors_bu14.png" width="983" height="149"> </div>
 
−
</div></div>
 
  
 +
</body>
  
 
</html>
 
</html>

Latest revision as of 20:52, 4 August 2016

EXPERIENCE NEPTUNE


An end to end design suite for
continuous flow microfluidic devices












SPECIFY
DESIGN
BUILD

Begin by defining which inputs and outputs your microfluidic chip will have. Declare any limitations in terms of port size, channel width. Neptune will efficiently place and route the features of your chip. The mapper (MM) tool within the place and routing functionality has been made completely by the iGEM Team.
Check and visualize your device layout using the Neptune graphical user interface. Edit the design if you so desire. Establish a control sequence to move fluids through the microfluidic chip. The interface has been made completely by the iGEM Team.
Assemble your microfluidic system. Import our design files into a 3D Printer and CNC mill to make the chip and the pump setup. Change the setup using our parameterized designs to fit your specific needs. The design of the setup is BU iGEM work, whilst the chip manufacturing is the work of our mentors.
OUR PROJECT

Neptune is a specify, design, and build tool for the development of continuous flow microfluidics. With Neptune, users can specify microfluidic devices through a high level description of liquid flow relations. Our application will automatically place and route the design schematic of the microfluidic and, when used in conjunction with low cost and readily available CAD tools, a user can build their custom microfluidic system in-lab.

The Boston University 2016 iGem Hardware Team is encapsulating this entire workflow through a graphical user interface. Users can write files that specify the function of the microfluidic, preview and edit their microfluidic design generated by the application, use this application directly with CAD tools such as a CNC mill to fabricate their device, and physically control valves and ports on the microfluidic chip. The iGem team is also complementing this workflow by developing and releasing open source designs of our hardware, including parametric 3D print files and firmware for microcontrollers that actuate the microfluidic valves. Finally, the iGem team is also involved in the development of the place and route software that converts a high level description of liquid flow relations into a microfluidic netlist that can that be converted into a design schematic.
Open Source

Neptune is completely open-source


Tutorials

Watch our Neptune tutorial


Our Team

Meet the team behind the magic


Demonstration

See how Neptune is being used in other labs




Thank you to our sponsors for their support






CONTACT US


Copyright © Boston University Hardware Team Website 2016