Biomod/2012/Potsdam/DnanoPROT/slider

From OpenWetWare
Jump to navigationJump to search

<html>

<head>

<style type="text/css">

  1. slider {
       border-radius: 5px;

margin: 0px auto; width: 975px; height: 340px; position: relative; overflow: hidden; background: #434343; }

  1. slider [id^='image']:target a {

background: #fff; border: 3px solid #333; width: 10px; height: 10px; }

  1. slider [id^="image"] div{

position: absolute; left: 2000px; border: 0; -moz-transition: 0.5s ease-in; -ms-transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -o-transition: 0.5s ease-in; }

  1. slider [id^='image']:target div{

bottom: 0; left: 0; }

.slider-nav { background: #333; width: 16px; z-index: 9999; height: 16px; box-shadow: inset 0px 2px 10px rgba(0,0,0,0.3), 0px 0px 20px rgba(255,255,255,0.4); border-radius: 32px; position: absolute; bottom: 15px; }


  1. image-5 .slider-nav {

right: 80px; }

  1. image-6 .slider-nav {

right: 60px; }

  1. image-7 .slider-nav {

right: 40px; }

  1. image-8 .slider-nav {

right: 20px; }


div.image_description{ 

   position:absolute; 
   top:50 px;
   bottom: 0 px; 
   height: 40px;
   left:0px;  
   width:100%;  

   background-color:black;  
   font-family: 'tahoma';  
   font-size:15px;  
   color:white;  
   opacity:0.4; 
   filter:alpha(opacity=40);

} p.image_description_content{ 

   padding:10px;  
   margin:0px;

}

div.slider_wrapper { 

  float:left; 
  position:relative;
  top: 0;

}

</style> <script type="text/javascript"> $(document).ready(function() { 

 window.location.hash = '#image-5'

}) </script> </head>

<div id="slider">

<div id="image-5"> <div class="slider_wrapper"> 

               <img src="http://openwetware.org/images/a/a5/UP12_slider1.jpg"/>
               <div class="image_description">
                   <p class="image_description_content">
                      <b>On edges biotin modified DNA origamis are bound by anti-biotin antibody forming a nano substructure seen above</b>
                   </p>
               </div>
               </div>

<a class="slider-nav" href="#image-5"></a> </div> <div id="image-6"> <div class="slider_wrapper"> 

               <img src="http://openwetware.org/images/a/ab/Pr%C3%A4sentation1.jpg"/>
               <div class="image_description">
                   <p class="image_description_content">
                    <b>On the top biotin modified DNA origamis are bound by anti-biotin antibody forming another nano substructure</b>  
                   </p>
               </div>
               </div>

<a class="slider-nav" href="#image-6"></a> </div> <div id="image-7"> <div class="slider_wrapper"> 

               <img src="http://openwetware.org/images/1/19/UP12_slider5.jpg"/>
               <div class="image_description">
                   <p class="image_description_content">
                      <b>Binding DNA origamis to the virus surface using click chemistry and peptide ligation catalysed by the enzyme sortase</b>
                   </p>
               </div>
               </div>

<a class="slider-nav" href="#image-7"></a> </div> <div id="image-8"> <div class="slider_wrapper"> 

               <img src="http://openwetware.org/images/9/99/UP12_slider6.jpg"/>
               <div class="image_description">
                   <p class="image_description_content">
                      <b>Protein can be coupled on DNA origamis using click chemistry and sortase catalysed peptide ligation</b>
                   </p>
               </div>
               </div>

<a class="slider-nav" href="#image-8"></a> </div>


</div>

</html>

Retrieved from "https://openwetware.org/mediawiki/index.php?title=Biomod/2012/Potsdam/DnanoPROT/slider&oldid=643106"