Team:Queens Canada/SynthetiQ/DNA

From 2012.igem.org

(Difference between revisions)
 
(7 intermediate revisions not shown)
Line 1: Line 1:
{{Template:Queens_Canada/Header}}
{{Template:Queens_Canada/Header}}
<html>
<html>
 +
<br><br><br>
<head>
<head>
<script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/cufon-yui?action=raw&ctype=text/js"></script>
<script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/cufon-yui?action=raw&ctype=text/js"></script>
Line 48: Line 49:
padding:5px;
padding:5px;
margin:0;
margin:0;
-
}
+
}'''Bold text'''
.nivo-caption a {
.nivo-caption a {
display:inline !important;
display:inline !important;
Line 58: Line 59:
.nivo-directionNav a {
.nivo-directionNav a {
position:absolute;
position:absolute;
-
top:45%;
 
z-index:99;
z-index:99;
cursor:pointer;
cursor:pointer;
 +
        color: white;
 +
        font-size: 2em;
 +
        text-decoration: none;
 +
        font-weight: bold;
 +
        display: inline;
 +
       
}
}
.nivo-prevNav {
.nivo-prevNav {
left:0px;
left:0px;
 +
        top: 0px;
 +
        text-decoration: none;
 +
        margin-left:-52px;
}
}
.nivo-nextNav {
.nivo-nextNav {
right:0px;
right:0px;
 +
                top: 0px;
 +
        margin-right:-55px;
 +
        text-decoration: none;
}
}
/* Control nav styles (e.g. 1,2,3...) */
/* Control nav styles (e.g. 1,2,3...) */
Line 73: Line 85:
z-index:99;
z-index:99;
cursor:pointer;
cursor:pointer;
 +
        bottom: -280px;
 +
        font-size: 1.5em;
 +
        left: 220px;
 +
        text-decoration: none;
 +
        color: black;
 +
        display: none;
}
}
.nivo-controlNav a.active {
.nivo-controlNav a.active {
Line 84: Line 102:
});
});
</script>
</script>
-
 
-
</head>
 
-
<body>
 
-
<div id="content2">
 
-
<div id="slider">
 
-
<img src="http://www.flickr.com/photos/80048659@N02/7366464440/" alt="" />
 
-
<a href="#"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
 
-
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
 
-
<img src="images/slide4.jpg" alt="" />
 
-
</div>
 
-
<div id="htmlcaption" class="nivo-html-caption">
 
-
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
 
-
</div>
 
<script type="text/javascript">
<script type="text/javascript">
$(window).load(function() {
$(window).load(function() {
  $('#slider').nivoSlider({
  $('#slider').nivoSlider({
-
   effect:'random', //Specify sets like: 'fold,fade,sliceDown'
+
   effect:'fold,fade,sliceDown' //Specify sets like: 'fold,fade,sliceDown'
   slices:15,
   slices:15,
   animSpeed:500, //Slide transition speed
   animSpeed:500, //Slide transition speed
-
   pauseTime:3000,
+
   pauseTime:10000,
   startSlide:0, //Set starting Slide (0 index)
   startSlide:0, //Set starting Slide (0 index)
   directionNav:true, //Next & Prev
   directionNav:true, //Next & Prev
Line 116: Line 121:
   manualAdvance:false, //Force manual transitions
   manualAdvance:false, //Force manual transitions
   captionOpacity:0.8, //Universal caption opacity
   captionOpacity:0.8, //Universal caption opacity
-
   beforeChange: function(){},
+
   beforeChange: function(){setTimeout(5000);},
   afterChange: function(){},
   afterChange: function(){},
   slideshowEnd: function(){} //Triggers after all slides have been shown
   slideshowEnd: function(){} //Triggers after all slides have been shown
  });
  });
});
});
 +
 +
</script>
</script>
 +
</head>
 +
<body>
 +
<div id="content2" style="background-color: black; color: white;">
 +
<br>
 +
<br> <p style="margin-left:auto; margin-right:auto;">&nbsp;&nbsp;&nbsp;To help you understand our forthcoming videos better, here is a basic rundown of DNA structure and how our human models illustrate this.</p>
 +
<div id="slider container" style="width: 500px; margin-left:auto; margin-right: auto; margin-top: 50px;">
 +
<div id="slider">
 +
<img src="http://farm8.staticflickr.com/7222/7366464440_828f152294.jpg" title="
 +
DNA Helix-DNA is a right-handed double helix. If you curl the fingers of your right hand and point your thumb up, you will see that each strand coils upwards in the direction your fingers are pointing in."
 +
/>
 +
<a href="#"><img src="http://farm9.staticflickr.com/8157/7366465658_d0a3ca5cfa.jpg" alt="" title="Direction-DNA strands have directionality. Each strand has a 5’ (“five prime”) end and a 3’ (“three prime”) end. An open hand represents the 5’ end. A closed fist represents the 3’ end." /></a>
 +
<img src="http://farm9.staticflickr.com/8165/7366465066_bc774895ae.jpg" alt="" title="Antiparallel-DNA strands are arranged antiparallel to each other, meaning that they run parallel to each other but have opposite alignments. The 5’ end of one strand is bound to the 3’ end of the other strand. You will always see an open hand next to a closed fist." />
 +
<img src="http://farm8.staticflickr.com/7102/7366463810_ce5143ed38.jpg" alt="" title="Primer Binding-DNA polymerase is the enzyme that synthesizes a new strand of DNA on an existing single strand of DNA. However, it needs a primer to get started, which is short strand of RNA. Here, a primer is binding to the 3’ end of a single-stranded DNA molecule, in preparation for synthesis of a new DNA molecule in the 5’ to 3’ direction."/>
 +
</div>
 +
<div id="htmlcaption" class="nivo-html-caption">
 +
    <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
 +
</div>
 +
</div>
 +
</div>
</div>
</body>
</body>

Latest revision as of 02:40, 24 October 2012
Control





   To help you understand our forthcoming videos better, here is a basic rundown of DNA structure and how our human models illustrate this.

This is an example of a HTML caption with a link.

Retrieved from "http://2012.igem.org/Team:Queens_Canada/SynthetiQ/DNA"