Team:Potsdam Bioware/slider

From 2012.igem.org

(Difference between revisions)
(Created page with "<html> <head> <style type="text/css"> #slider { margin: 0px auto; width: 845px; top: 60px; height: 200px; position: relative; overflow: hidden; box-shadow: 0px 0px 40p...")
 
(57 intermediate revisions not shown)
Line 1: Line 1:
 +
{{:Team:Potsdam_Bioware/slider/javascript}}
<html>
<html>
Line 4: Line 5:
<style type="text/css">
<style type="text/css">
-
 
#slider {
#slider {
 +
        border-radius: 5px;
margin: 0px auto;
margin: 0px auto;
-
width: 845px;
+
width: 975px;
-
top: 60px;
+
height: 340px;
-
height: 200px;
+
position: relative;
position: relative;
overflow: hidden;
overflow: hidden;
-
box-shadow: 0px 0px 40px rgba(0,0,0,0.4);
 
background: #434343;
background: #434343;
-
}
 
-
 
-
#slider [id^='image']:target img {
 
-
top: 0; 
 
-
left: 0;
 
}
}
Line 29: Line 23:
}
}
-
#slider [id^="image"] img {
+
#slider [id^="image"] div{
position: absolute;
position: absolute;
-
top: -200px;
+
left: 2000px;
border: 0;
border: 0;
-
-moz-transition: top 0.5s ease-in;
+
-moz-transition: 0.5s ease-in;
-
-ms-transition: top 0.5s ease-in;
+
-ms-transition: 0.5s ease-in;
-
-webkit-transition: top 0.5s ease-in;
+
-webkit-transition: 0.5s ease-in;
-
-o-transition: top 0.5s ease-in;
+
-o-transition: 0.5s ease-in;
 +
}
 +
 
 +
#slider [id^='image']:target div{
 +
bottom: 0; 
 +
left: 0;
}
}
Line 50: Line 49:
}
}
-
#image-1 .slider-nav {
 
-
right: 80px;
 
-
}
 
#image-2 .slider-nav {
#image-2 .slider-nav {
-
right: 60px;
+
right: 140px;
}
}
#image-3 .slider-nav {
#image-3 .slider-nav {
-
right: 40px;
+
right: 120px;
}
}
#image-4 .slider-nav {
#image-4 .slider-nav {
-
right: 20px;
+
right: 100px;
}
}
-
 
+
#image-5 .slider-nav {
-
 
+
right: 80px;
-
 
+
-
#header {
+
-
background: #000;
+
-
padding: 20px;
+
-
color: #fff;
+
}
}
-
+
#image-6 .slider-nav {
-
#header a {
+
right: 60px;
-
opacity: 1 !important;
+
-
color: #fff;
+
-
font-family: 'Myriad Pro', Helvetica, Arial, sans-serif;
+
-
font-size: 20px;
+
-
font-weight: bold;
+
-
text-decoration: none;
+
}
}
-
+
#image-7 .slider-nav {
-
#header img {
+
right: 40px;
-
width: 150px;
+
-
height: 33px;
+
-
float: none;
+
}
}
-
+
#image-8 .slider-nav {
-
+
right: 20px;
-
#header .button {
+
-
text-decoration: none;
+
-
color: #fff;
+
-
font-weight: bold;
+
-
padding: 12px 20px;
+
-
font-size: 18px;
+
-
border-radius: 10px;
+
-
background-color: #666666;
+
-
box-shadow: 0 5px 5px #313131, 0 2px 0 #393939, inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
+
-
position: relative;
+
-
border-bottom: 1px solid rgba(255,255,255,0.2);
+
-
display: inline-block;
+
-
float: right;
+
-
position: relative;
+
-
bottom: 5px;
+
-
text-shadow: 0px -1px 0px rgba(0,0,0,0.2);
+
}
}
 +
-
#header .button:hover {
+
div.image_description{
-
box-shadow: 0 5px 5px #313131, 0 2px 0 #393939, 0px 9px 10px rgba(0,0,0,0.4), inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
+
    position:absolute;
-
}
+
    top:50 px;
-
+
    bottom: 0 px;
-
#header .blue {
+
    height: 40px;
-
background: #2a8ad8;
+
    left:0px;
-
box-shadow: 0 2px 0 #25325e, inset 0px 2px 9px rgba(255,255,255,0.2), inset 0 -2px 9px rgba(0,0,0,0.2);
+
    width:100%; 
-
}
+
-
+
    background-color:black;
-
#header .blue:hover {
+
    font-family: 'tahoma'; 
-
box-shadow: 0 2px 0 #25325e, inset 0px 2px 15px rgba(255,255,255,0.4), inset 0 -2px 9px rgba(0,0,0,0.2);
+
    font-size:15px; 
-
}
+
    color:white; 
-
#header .blue:active {
+
    opacity:0.6;
-
box-shadow: 0 2px 0 #25325e, 0px 4px 4px rgba(0,0,0,0.3), inset 0px 2px 5px rgba(0,0,0,0.2);
+
    filter:alpha(opacity=60);  
 +
}
 +
p.image_description_content{
 +
    padding:10px; 
 +
    margin:0px;  
 +
}
 +
 
 +
div.slider_wrapper {
 +
  float:left;
 +
  position:relative;
 +
  top: 0;
}
}
</style>
</style>
-
 
+
<script type="text/javascript">
-
</head
+
$(document).ready(function() {
 +
  window.location.hash = '#image-2'
 +
})
 +
</script>
 +
</head>
<div id="slider">
<div id="slider">
-
<div id="image-1">
+
 
-
Some text and image
+
 
-
<a class="slider-nav" href="#image-1"></a>
+
-
</div>
+
<div id="image-2">
<div id="image-2">
-
More
+
            <div class="slider_wrapper">
-
<a class="slider-nav" href="#image-2"></a>
+
                <img src="https://static.igem.org/mediawiki/2012/2/28/UP12_Slide1.jpg"/>
 +
                            </div>
 +
            <a class="slider-nav" href="#image-2"></a>
</div>
</div>
<div id="image-3">
<div id="image-3">
-
even more
+
                <div class="slider_wrapper">
 +
                <img src="https://static.igem.org/mediawiki/2012/5/52/UP12_slide2.jpg"/>
 +
                              </div>
<a class="slider-nav" href="#image-3"></a>
<a class="slider-nav" href="#image-3"></a>
</div>
</div>
<div id="image-4">
<div id="image-4">
-
the last
+
<div class="slider_wrapper">
 +
                <img src="https://static.igem.org/mediawiki/2012/5/57/UP12Slide3.jpg"/>
 +
                <div class="image_description">
 +
                    <p class="image_description_content">
 +
                      <b>Antibody module: In the first step, an antibody gene is integrated into the genome of CHO cells.</b>
 +
                    </p>
 +
                </div>
 +
                </div>
<a class="slider-nav" href="#image-4"></a>
<a class="slider-nav" href="#image-4"></a>
</div>
</div>
 +
<div id="image-5">
 +
<div class="slider_wrapper">
 +
                <img src="https://static.igem.org/mediawiki/2012/8/87/UP12Slide4.jpg"/>
 +
                <div class="image_description">
 +
                    <p class="image_description_content">
 +
                      <b>Antibody module: The CHO cell expresses the antibody on the cell surface.</b>
 +
                    </p>
 +
                </div>
 +
                </div>
 +
<a class="slider-nav" href="#image-5"></a>
 +
</div>
 +
<div id="image-6">
 +
<div class="slider_wrapper">
 +
                <img src="https://static.igem.org/mediawiki/2012/f/f0/UP12Slide5.jpg"/>
 +
                <div class="image_description">
 +
                    <p class="image_description_content">
 +
                    <b>Mutation module: The enzyme AID mutates the antibody gene -> maturation</b> 
 +
                    </p>
 +
                </div>
 +
                </div>
 +
<a class="slider-nav" href="#image-6"></a>
 +
</div>
 +
<div id="image-7">
 +
<div class="slider_wrapper">
 +
                <img src="https://static.igem.org/mediawiki/2012/7/79/UP12slide7.jpg"/>
 +
                <div class="image_description">
 +
                    <p class="image_description_content">
 +
                      <b>Selection Module: A virus infects cells with high affine antibodies. These cells survive. </b>
 +
                    </p>
 +
                </div>
 +
                </div>
 +
<a class="slider-nav" href="#image-7"></a>
 +
</div>
 +
<div id="image-8">
 +
<div class="slider_wrapper">
 +
                <img src="https://static.igem.org/mediawiki/2012/9/92/UP12slide8.jpg"/>
 +
                <div class="image_description">
 +
                    <p class="image_description_content">
 +
                      <b>The selected cells are switched to antibody secreting cells with Cre-recombinase.</b>
 +
                    </p>
 +
                </div>
 +
                </div>
 +
<a class="slider-nav" href="#image-8"></a>
 +
</div>
 +
 +
</div>
</div>
</html>
</html>

Latest revision as of 21:51, 26 September 2012

Antibody module: In the first step, an antibody gene is integrated into the genome of CHO cells.

Antibody module: The CHO cell expresses the antibody on the cell surface.

Mutation module: The enzyme AID mutates the antibody gene -> maturation

Selection Module: A virus infects cells with high affine antibodies. These cells survive.

The selected cells are switched to antibody secreting cells with Cre-recombinase.

Retrieved from "http://2012.igem.org/Team:Potsdam_Bioware/slider"