Difference between revisions of "Team:BostonU/Collaborations"

Line 206: Line 206:
 
transform: translateY(0);
 
transform: translateY(0);
 
}
 
}
 +
/* --- Carousel --- */
 +
.carousel {
 +
  position: relative;
 +
  width: 600px;
 +
  height: 400px;
 +
  overflow: hidden;
 +
  margin: 0 auto;
 +
  box-sizing: border-box;
 +
}
 +
.carousel:hover .slide:after,
 +
.carousel:hover .counter,
 +
.carousel:hover .slide:before {
 +
  opacity: 1;
 +
}
 +
.slide {
 +
  float: right;
 +
  position: absolute;
 +
  z-index: 1;
 +
  width: 600px;
 +
  height: 400px;
 +
  background-color: #eee;
 +
  text-align: center;
 +
  transition: opacity 0.4s;
 +
  opacity: 1;
 +
}
 +
.slide:before {
 +
  content: attr(annot);
 +
  display: block;
 +
  position: absolute;
 +
  left: 20px;
 +
  bottom: 20px;
 +
  color: rgba(255,255,255,0.9);
 +
  font-size: 14px;
 +
  font-weight: 300;
 +
  z-index: 12;
 +
  opacity: 0;
 +
  transition: opacity 0.3s;
 +
  text-shadow: 0 0 1px #000;
 +
}
 +
.slide:after {
 +
  content: attr(slide);
 +
  display: block;
 +
  position: absolute;
 +
  bottom: 0;
 +
  transition: opacity 0.3s;
 +
  width: 100%;
 +
  height: 80px;
 +
  opacity: 0;
 +
  background-image: linear-gradient(transparent, rgba(0,0,0,0.5));
 +
  text-align: left;
 +
  text-indent: 549px;
 +
  line-height: 101px;
 +
  font-size: 13px;
 +
  color: rgba(255,255,255,0.9);
 +
  text-shadow: 0 0 1px #000;
 +
}
 +
.counter {
 +
  position: absolute;
 +
  bottom: 20px;
 +
  right: 1px;
 +
  height: 20px;
 +
  width: 60px;
 +
  z-index: 2;
 +
  text-align: center;
 +
  color: #fff;
 +
  line-height: 21px;
 +
  font-size: 13px;
 +
  opacity: 0;
 +
  transition: opacity 0.3s;
 +
}
 +
.faux-ui-facia {
 +
  top: 0;
 +
  right: 0;
 +
  float: right;
 +
  position: absolute;
 +
  margin-top: 0;
 +
  z-index: 9;
 +
  height: 100%;
 +
  width: 100%;
 +
  opacity: 0;
 +
  cursor: pointer;
 +
}
 +
.faux-ui-facia:checked {
 +
  z-index: 8;
 +
}
 +
.faux-ui-facia:checked + .slide {
 +
  opacity: 0;
 +
}
 +
.faux-ui-facia:checked:nth-child(1):checked {
 +
  z-index: 9;
 +
}
 +
.faux-ui-facia:nth-child(1):checked {
 +
  float: left;
 +
  z-index: 9;
 +
}
 +
.faux-ui-facia:nth-child(1):checked + .slide {
 +
  opacity: 1;
 +
}
 +
.faux-ui-facia:nth-child(1):checked ~ .faux-ui-facia {
 +
  float: left;
 +
  z-index: 8;
 +
}
 +
.faux-ui-facia:nth-child(1):checked ~ .faux-ui-facia + .slide {
 +
  opacity: 0;
 +
}
 +
.faux-ui-facia:nth-child(1):checked ~ .faux-ui-facia:checked {
 +
  z-index: 9;
 +
}
 +
.faux-ui-facia:nth-child(1):checked ~ .faux-ui-facia:checked + .slide {
 +
  opacity: 1;
 +
}
 +
/* --- END of Carousel --- */
 
</style>
 
</style>
 
</head>
 
</head>
Line 214: Line 326:
 
<div id="panel1" class="link-slideup">
 
<div id="panel1" class="link-slideup">
 
   <p class="inline-heading-type mainwrap">BostonU_HW Collaboration: Microfluidics</p>
 
   <p class="inline-heading-type mainwrap">BostonU_HW Collaboration: Microfluidics</p>
−
   <p class="body-type mainwrap">We collaborated with the Boston University Hardware team. We followed the protocols they provided us and assembled three types of chips: PCR, digestion and a toehold chip they designed specifically for our project. To test out functionality of the chips we used color dye to imitate the process of biological fluid flowing into the chip. The toehold chip had a relatively serious leakage problem, and air bubbles in the valves blocked the way for color dye to get through. We hypothesize several reasons that explained why the leakage happened and redid some steps to improve the assembly. After several rounds of tests and trials with all the chips, we gave BU Hardware team some feedback about our thoughts of the chips and how it could potentially be improved. We also pointed out steps on the protocols that appeared unclear to us as users and suggested them to explain purposes of certain steps better to make sure users understand why they’re important. </p>
+
  <p class="body-type mainwrap">&nbsp;</p>
 +
   <p class="body-type mainwrap">We collaborated with the Boston University Hardware team. We followed the protocols they provided us and assembled three types of chips: PCR, digestion and a toehold chip they designed specifically for our project. To test out functionality of the chips we used color dye to imitate the process of biological fluid flowing into the chip. The toehold chip had a relatively serious leakage problem, and air bubbles in the valves blocked the way for color dye to get through. We hypothesize several reasons that explained why the leakage happened and redid some steps to improve the assembly. After several rounds of tests and trials with all the chips, we gave BU Hardware team some feedback about our thoughts of the chips and how it could potentially be improved. We also pointed out steps on the protocols that appeared unclear to us as users and suggested them to explain purposes of certain steps better to make sure users understand why they are important. </p>
 +
  <p class="body-type mainwrap">&nbsp;</p>
 +
  <div class="carousel mainwrap body-type">
 +
    <input type="checkbox" class="faux-ui-facia">
 +
    <div class="slide" slide="5" annot="This is the fifth slide title. Photo by David Marcu."> <img src="https://ununsplash.imgix.net/uploads/141223808515744db9995/3361b5e1?q=75&fm=jpg&w=602" alt="Slide 5"> </div>
 +
    <input type="checkbox" class="faux-ui-facia">
 +
    <div class="slide" slide="4" annot="This is the fourth slide title. Photo by Ryan Lum."> <img src="https://unsplash.imgix.net/photo-1415356838286-df6fd593e8b3?q=75&fm=jpg&w=600" alt="Slide 4"> </div>
 +
    <input type="checkbox" class="faux-ui-facia">
 +
    <div class="slide" slide="3" annot="This is the third slide title. Photo by Tomasz Paciorek."> <img src="https://ununsplash.imgix.net/reserve/JaI1BywIT5Or8Jfmci1E_zakopane.jpg?q=75&fm=jpg&w=600"  alt="Slide 3"> </div>
 +
    <input type="checkbox" class="faux-ui-facia">
 +
    <div class="slide" slide="2" annot="This is the second slide title. Photo by S Charles."> <img src="https://ununsplash.imgix.net/uploads/1413387158190559d80f7/6108b580?fit=crop&fm=jpg&q=75&w=600"  alt="Slide 2"> </div>
 +
    <input type="checkbox" class="faux-ui-facia">
 +
    <div class="slide" slide="1" annot="First slide title. Photo by Forrest Cavale."> <img src="https://ununsplash.imgix.net/uploads/1413399939678471ea070/2c0343f7?q=75&fm=jpg&w=601" alt="Slide 1"> </div>
 +
    <div class="counter" count="5"> / 5</div>
 +
</div>
 
</div>
 
</div>
 
<div id="backgroundimage2"><div class="background-gradient-up">
 
<div id="backgroundimage2"><div class="background-gradient-up">

Revision as of 05:18, 24 October 2017

COLLABORATIONS