Team:Queens Canada/SynthetiQ/DNA

From 2012.igem.org

(Difference between revisions)
Line 48: Line 48:
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 58:
.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 84:
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 87: Line 104:
</head>
</head>
<body>
<body>
-
<div id="content2">
+
<div id="content2" style="background-color: black;">
 +
<div id="slider container" style="width: 500px; margin-left:auto; margin-right: auto; margin-top: 50px;">
<div id="slider">
<div id="slider">
-
  <img src="http://www.flickr.com/photos/80048659@N02/7366464440/" alt="" />
+
  <img src="http://farm8.staticflickr.com/7222/7366464440_828f152294.jpg" title="
-
  <a href="#"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
+
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."
-
  <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
+
/>
-
  <img src="images/slide4.jpg" alt="" />
+
  <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>
<div id="htmlcaption" class="nivo-html-caption">
<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>.
     <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
 +
</div>
</div>
</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

Revision as of 15:06, 13 June 2012

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