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> | ||
− | < | + | <div class="carousel"> |
− | < | + | <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"> </p> | <p class="inline-heading-type mainwrap"> </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