Difference between revisions of "Team:BostonU/HP/Silver"

Line 162: Line 162:
 
   padding: 40px;
 
   padding: 40px;
 
}
 
}
 +
/* --- Link slideup --- */
 
.link-slideup {
 
.link-slideup {
 
position: relative;
 
position: relative;
Line 206: Line 207:
 
transform: translateY(0);
 
transform: translateY(0);
 
}
 
}
 +
/* --- END of link slideup --- */
 +
/* --- Carousel --- */
 +
.carousel {
 +
  position: relative;
 +
  width: 600px;
 +
  height: 400px;
 +
  overflow: hidden;
 +
  margin: 0 auto;
 +
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
 +
  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 223: Line 338:
 
   <p class="body-type mainwrap indented">PIC (WRAPPED) </p>
 
   <p class="body-type mainwrap indented">PIC (WRAPPED) </p>
 
   <p class="body-type mainwrap indented">The third station, gel electrophoresis with food dye, was adapted from <a href="#" style="text-indent:0pt;">William and Mary's 2013 Synthetic Biology K-12 curriculum</a>. In this activity, Abbey, Sai, and Madeline discussed the basic biology and protocol of gel electrophoresis. Each participant then loaded a sample of food dye into a gel with a disposable pipette. The final activity, microfluidic design, was led by the BostonU Hardware team. The team first gave a basic overview of what microfluidics are and what applications they have in synbio. The participants were then given a basic protocol for <em>E. coli</em> transformation and challenged to design their own microfluidic chip on cardboard to perform the procedure.</p>
 
   <p class="body-type mainwrap indented">The third station, gel electrophoresis with food dye, was adapted from <a href="#" style="text-indent:0pt;">William and Mary's 2013 Synthetic Biology K-12 curriculum</a>. In this activity, Abbey, Sai, and Madeline discussed the basic biology and protocol of gel electrophoresis. Each participant then loaded a sample of food dye into a gel with a disposable pipette. The final activity, microfluidic design, was led by the BostonU Hardware team. The team first gave a basic overview of what microfluidics are and what applications they have in synbio. The participants were then given a basic protocol for <em>E. coli</em> transformation and challenged to design their own microfluidic chip on cardboard to perform the procedure.</p>
   <p class="body-type mainwrap indented">PIC (WRAPPED) </p>
+
   <div class="carousel">
   <p class="body-type mainwrap indented">Through this workshop we hope we gave the students a better understanding of synthetic biology and inspired them to get involved with the field. </p>
+
  <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>
 
   <p class="inline-heading-type mainwrap">&nbsp;</p>
 
   <p class="inline-heading-type mainwrap">&nbsp;</p>
 
   <p class="inline-heading-type mainwrap">Industry Visits</p>
 
   <p class="inline-heading-type mainwrap">Industry Visits</p>

Revision as of 20:25, 23 October 2017

HUMAN PRACTICES