Team:Queens Canada/SynthetiQ/DNA

From 2012.igem.org

(Difference between revisions)
(Created page with "{{Template:Queens_Canada/Header}} <html> <head> <script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/cufon-yui?action=raw&ctype=text/js"></scrip...")
 
(9 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>
<script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/Museo_Slab-font?action=raw&ctype=text/js"></script>  
<script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/Museo_Slab-font?action=raw&ctype=text/js"></script>  
<script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/jquery_nivo_slider_pack?action=raw&ctype=text/js"></script>   
<script type="text/javascript" src="https://2012.igem.org/Team:Queens_Canada/Javascript/jquery_nivo_slider_pack?action=raw&ctype=text/js"></script>   
 +
<style type="text/css">
 +
.nivoSlider {
 +
position:relative;
 +
}
 +
.nivoSlider img {
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
}
 +
/* If an image is wrapped in a link */
 +
.nivoSlider a.nivo-imageLink {
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
width:100%;
 +
height:100%;
 +
border:0;
 +
padding:0;
 +
margin:0;
 +
z-index:60;
 +
display:none;
 +
}
 +
/* The slices in the Slider */
 +
.nivo-slice {
 +
display:block;
 +
position:absolute;
 +
z-index:50;
 +
height:100%;
 +
}
 +
/* Caption styles */
 +
.nivo-caption {
 +
position:absolute;
 +
left:0px;
 +
bottom:0px;
 +
background:#000;
 +
color:#fff;
 +
opacity:0.8; /* Overridden by captionOpacity setting */
 +
width:100%;
 +
z-index:89;
 +
}
 +
.nivo-caption p {
 +
padding:5px;
 +
margin:0;
 +
}'''Bold text'''
 +
.nivo-caption a {
 +
display:inline !important;
 +
}
 +
.nivo-html-caption {
 +
    display:none;
 +
}
 +
/* Direction nav styles (e.g. Next & Prev) */
 +
.nivo-directionNav a {
 +
position:absolute;
 +
z-index:99;
 +
cursor:pointer;
 +
        color: white;
 +
        font-size: 2em;
 +
        text-decoration: none;
 +
        font-weight: bold;
 +
        display: inline;
 +
       
 +
}
 +
.nivo-prevNav {
 +
left:0px;
 +
        top: 0px;
 +
        text-decoration: none;
 +
        margin-left:-52px;
 +
}
 +
.nivo-nextNav {
 +
right:0px;
 +
                top: 0px;
 +
        margin-right:-55px;
 +
        text-decoration: none;
 +
}
 +
/* Control nav styles (e.g. 1,2,3...) */
 +
.nivo-controlNav a {
 +
position:relative;
 +
z-index:99;
 +
cursor:pointer;
 +
        bottom: -280px;
 +
        font-size: 1.5em;
 +
        left: 220px;
 +
        text-decoration: none;
 +
        color: black;
 +
        display: none;
 +
}
 +
.nivo-controlNav a.active {
 +
font-weight:bold;
 +
}
 +
 +
</style>
 +
<script type="text/javascript">
 +
$(window).load(function() {
 +
$('#slider').nivoSlider();
 +
});
 +
</script>
 +
<script type="text/javascript">
 +
$(window).load(function() {
 +
$('#slider').nivoSlider({
 +
  effect:'fold,fade,sliceDown' //Specify sets like: 'fold,fade,sliceDown'
 +
  slices:15,
 +
  animSpeed:500, //Slide transition speed
 +
  pauseTime:10000,
 +
  startSlide:0, //Set starting Slide (0 index)
 +
  directionNav:true, //Next & Prev
 +
  directionNavHide:true, //Only show on hover
 +
  controlNav:true, //1,2,3...
 +
  controlNavThumbs:false, //Use thumbnails for Control Nav
 +
      controlNavThumbsFromRel:false, //Use image rel for thumbs
 +
  controlNavThumbsSearch: '.jpg', //Replace this with...
 +
  controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
 +
  keyboardNav:true, //Use left & right arrows
 +
  pauseOnHover:true, //Stop animation while hovering
 +
  manualAdvance:false, //Force manual transitions
 +
  captionOpacity:0.8, //Universal caption opacity
 +
  beforeChange: function(){setTimeout(5000);},
 +
  afterChange: function(){},
 +
  slideshowEnd: function(){} //Triggers after all slides have been shown
 +
});
 +
});
 +
 +
 +
</script>
</head>
</head>
<body>
<body>
-
<div id="content2">
+
<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"