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

 
(90 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{Template:BUHW2016_Bootstrap}}
 
{{Template:BUHW2016_Bootstrap}}
−
 
 
<html>
 
<html>
 +
 +
  
 
<head>
 
<head>
Line 24: Line 25:
 
{
 
{
 
     width: 100%;
 
     width: 100%;
 +
    min-width: 100%;
 
     height: 100%;
 
     height: 100%;
 
     margin: 0px;
 
     margin: 0px;
Line 74: Line 76:
  
 
.header {
 
.header {
−
    display: table;
+
−
    position: relative;
+
−
    background-size:contain;
+
−
    overflow: auto;
+
−
 
+
−
    width: 100%;
+
−
    height: 100%;
+
  
−
    background: url('https://static.igem.org/mediawiki/2016/8/8b/T--BostonU_HW--NeptuneNASA_rcwolf.jpg') no-repeat center center scroll;
+
background: url('https://static.igem.org/mediawiki/2016/8/8b/T--BostonU_HW--NeptuneNASA_rcwolf.jpg') no-repeat center center fixed;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
  
  
Line 283: Line 283:
  
 
<body>
 
<body>
−
 
−
 
−
 
−
 
−
 
−
 
−
 
  
  
Line 363: Line 356:
 
</nav>
 
</nav>
 
   
 
   
 +
  
  
Line 373: Line 367:
 
<div class="row"><br><br></div>   
 
<div class="row"><br><br></div>   
 
<div class="row">
 
<div class="row">
−
<button type="button" class="btn btn-primary" href="https://2016.igem.org/Team:BostonU_HW/Description">GET STARTED</button>
+
<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>
 
</div>
 
</div>
Line 382: Line 376:
  
  
−
<div class="container sectionPadding">
+
<div class="container sectionPadding" id="basics">
 
<div class="row">
 
<div class="row">
 
     <div class="col-md-1"></div>
 
     <div class="col-md-1"></div>
Line 447: Line 441:
 
</div>
 
</div>
 
</div>
 
</div>
 +
 +
  
  
Line 478: Line 474:
 
     -o-background-size: 95% auto;
 
     -o-background-size: 95% auto;
 
     background-size: 95% auto;
 
     background-size: 95% auto;
−
     height: 280px;  
+
     height: 280px;
 
}
 
}
 +
 +
.imgSquareOpenSource{
 +
  background: url('https://static.igem.org/mediawiki/2016/9/9b/T--BostonU_HW--openSourceSquareDownsized_rcwolf.jpg') no-repeat;
 +
    -webkit-background-size: 95% auto;
 +
    -moz-background-size: 95% auto;
 +
    -o-background-size: 95% auto;
 +
    background-size: 95% auto;
 +
    height: 280px; 
 +
}
 +
 +
.imgSquareOurTeam{
 +
  background: url('https://static.igem.org/mediawiki/2016/7/76/T--BostonU_HW--walkingTeamDownsized_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; 
 +
}
 +
 +
.imgSquareTutorial{
 +
  background: url('https://static.igem.org/mediawiki/2016/7/72/T--BostonU_HW--tutorialTypingDownsized_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; 
 +
}
 +
 +
 
.navImg{
 
.navImg{
 
max-width: 100%;
 
max-width: 100%;
Line 493: Line 518:
 
}
 
}
  
−
</style>
+
.cubeHeight {
−
 
+
  height: 280px;
−
 
+
}
−
 
+
−
 
+
−
<style>
+
 
.card-container {
 
.card-container {
−
 
+
  height: 100%;
 +
  min-height: 100%;
 +
  perspective: 600;
 +
  position: relative;
 +
  max-width: 100%;
 
}
 
}
 
.card {
 
.card {
 
   height: 100%;
 
   height: 100%;
−
   position: absolute;
+
   /*position: absolute;*/
 
   transform-style: preserve-3d;
 
   transform-style: preserve-3d;
 
   transition: all 1s ease-in-out;
 
   transition: all 1s ease-in-out;
−
  width: 100%;
 
 
}
 
}
 
.card:hover {
 
.card:hover {
Line 514: Line 539:
 
.card .side {
 
.card .side {
 
   backface-visibility: hidden;
 
   backface-visibility: hidden;
 +
  border-radius: 0px;
 
   height: 100%;
 
   height: 100%;
 
   position: absolute;
 
   position: absolute;
 +
  overflow: hidden;
 
   width: 100%;
 
   width: 100%;
 
}
 
}
 
.card .back {
 
.card .back {
 +
  color: white;
 +
  text-align: center !important;
 
   transform: rotateY(180deg);
 
   transform: rotateY(180deg);
 +
  margin-left: -22px !important;
 +
/*  font-size: 30px;*/
 
}
 
}
−
 
−
 
 
</style>
 
</style>
−
 
  
 
<div class="row imgNavBlock">
 
<div class="row imgNavBlock">
−
<div class="col-md-1 imgSquarePadding"></div>
 
−
<div class="col-md-10">
 
  
−
<div class="col-md-3 imgSquare card-container">
 
−
<div class="card">
 
−
 
−
<div class="navBlockTxt side"> Open Source <br> <img src="https://static.igem.org/mediawiki/2016/7/71/T--BostonU_HW--openSourceIcon_rcwolf.png" ></div>
 
−
<div class="side back">
 
−
<div>
 
−
</div>
 
−
 
−
<div class="col-md-3 imgSquare">
 
−
 
−
<div class="navBlockTxt"> Tutorials <br> <img src="https://static.igem.org/mediawiki/2016/a/a4/T--BostonU_HW--tutorialsIcon_rcwolf.png" > </div>
 
−
</div>
 
−
 
−
<div class="col-md-3 imgSquare">
 
−
 
−
<div class="navBlockTxt"> Our Team <br> <img src="https://static.igem.org/mediawiki/2016/4/49/T--BostonU_HW--ourTeamIcon_rcwolf.png" > </div>
 
−
</div>
 
−
 
−
<div class="col-md-3 imgSquare">
 
−
 
−
<div class="navBlockTxt"> Demonstration <br> <img src="https://static.igem.org/mediawiki/2016/d/da/T--BostonU_HW--demonstrationIcon_rcwolf.png" > </div>
 
−
</div>
 
−
 
−
</div>
 
 
<div class="col-md-1 imgSquarePadding"></div>
 
<div class="col-md-1 imgSquarePadding"></div>
−
</div>
+
−
 
+
  <div class="col-md-10">
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
  
 +
   
 +
    <div class="card-container">
 +
  <div class="col-md-3 card">
 +
        <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>
  
  
 +
   
 +
    <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>
  
  
 +
   
 +
    <div class="card-container">
 +
  <div class="col-md-3 card">
 +
      <div class="cubeHeight">
 +
<div class="navBlockTxt side imgSquareOurTeam"> Our Team <br> <img src="https://static.igem.org/mediawiki/2016/4/49/T--BostonU_HW--ourTeamIcon_rcwolf.png" >
 +
        </div>
 +
        <div class="side back" style="top: 15%">
 +
            <h4>Meet the team behind the magic</h4>
 +
            <br>
 +
            <a href=""><button type="button" class="btn btn-primary">learn more</button></a>
 +
        </div>
 +
  </div>
 +
    </div>
 +
  </div>
  
 +
   
 +
    <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>
  
 +
  </div>
  
 +
  <div class="col-md-1 imgSquarePadding"></div>
  
 +
</div>
  
  
Line 603: Line 653:
 
<div class="row contactUsContent">
 
<div class="row contactUsContent">
 
<div class="col-md-3" style="color:white; padding-left: 50px;">CONTACT US</div>
 
<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=""><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" 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"></div>
−
<div class="col-md-2" style="text-align:center;"><a href=""><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-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 class="col-md-3"></div>
 
</div>
 
</div>
Line 619: Line 669:
  
 
</body>
 
</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