Team:Arizona State/Test
From 2011.igem.org
(Difference between revisions)
(Created page with "{{:Team:Arizona State/Templates/main|title=Test|content= __NOTOC__ <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; chars...") |
Ethan ward (Talk | contribs) |
||
(4 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
__NOTOC__ | __NOTOC__ | ||
- | + | <html> | |
- | <html | + | |
- | + | ||
<head> | <head> | ||
- | <meta | + | <meta charset="UTF-8"> |
- | < | + | |
- | <style> | + | <!--[if IE]> |
- | + | <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
- | + | <![endif]--> | |
- | + | <link rel="stylesheet" href="css/style.css"> | |
- | + | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
<body> | <body> | ||
- | + | <div id="page-wrap"> | |
- | + | ||
- | + | <h1>Photos with Slide-in Captions</h1> | |
- | + | ||
- | + | <figure class="cap-left"> | |
- | + | <img src="https://static.igem.org/mediawiki/2011/2/20/ASU_Trinette.jpg" alt="" width="250" height="335"> | |
- | + | <figcaption>Our lovely thermocycler, Trinette.</figcaption> | |
- | + | </figure> | |
- | + | ||
- | + | <figure class="cap-right"> | |
- | + | <img src="https://static.igem.org/mediawiki/2011/4/47/PLiCRISPR.jpg" alt="" width=325"" height=220""> | |
- | + | <figcaption>A beautiful CRISPR plasmid.</figcaption> | |
- | + | </figure> | |
- | + | ||
- | + | <figure class="cap-top"> | |
- | + | <img src="https://static.igem.org/mediawiki/2011/6/6f/ASU_Joseph3.jpg" alt="" width="280" height="288"> | |
- | + | <figcaption>Punk rock in the lab.</figcaption> | |
- | + | </figure> | |
- | + | ||
- | + | <figure class="cap-bot"> | |
- | + | <img src="https://static.igem.org/mediawiki/2011/9/9e/ASU_Logo.png" alt="" width="300" height="292"> | |
- | + | <figcaption>Our official logo.</figcaption> | |
- | + | </figure> | |
- | + | ||
- | + | <br style="clear: both;"> | |
- | + | ||
- | + | <section id="learninz"> | |
- | + | ||
- | + | ||
- | + | <style scoped="" contenteditable="">figure { | |
- | + | display: block; | |
- | + | position: relative; | |
- | + | float: left; | |
+ | overflow: hidden; | ||
+ | margin: 0 20px 20px 0; | ||
+ | } | ||
+ | figcaption { | ||
+ | position: absolute; | ||
+ | background: black; | ||
+ | background: rgba(0,0,0,0.75); | ||
+ | color: white; | ||
+ | padding: 10px 20px; | ||
+ | opacity: 0; | ||
+ | -webkit-transition: all 0.6s ease; | ||
+ | -moz-transition: all 0.6s ease; | ||
+ | -o-transition: all 0.6s ease; | ||
+ | } | ||
+ | figure:hover figcaption { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | figure:before { | ||
+ | content: "?"; | ||
+ | position: absolute; | ||
+ | font-weight: 800; | ||
+ | background: black; | ||
+ | background: rgba(255,255,255,0.75); | ||
+ | text-shadow: 0 0 5px white; | ||
+ | color: black; | ||
+ | width: 24px; | ||
+ | height: 24px; | ||
+ | -webkit-border-radius: 12px; | ||
+ | -moz-border-radius: 12px; | ||
+ | border-radius: 12px; | ||
+ | text-align: center; | ||
+ | font-size: 14px; | ||
+ | line-height: 24px; | ||
+ | -moz-transition: all 0.6s ease; | ||
+ | opacity: 0.75; | ||
+ | } | ||
+ | figure:hover:before { | ||
+ | opacity: 0; | ||
+ | } | ||
+ | |||
+ | .cap-left:before { bottom: 10px; left: 10px; } | ||
+ | .cap-left figcaption { bottom: 0; left: -30%; } | ||
+ | .cap-left:hover figcaption { left: 0; } | ||
+ | |||
+ | .cap-right:before { bottom: 10px; right: 10px; } | ||
+ | .cap-right figcaption { bottom: 0; right: -30%; } | ||
+ | .cap-right:hover figcaption { right: 0; } | ||
+ | |||
+ | .cap-top:before { top: 10px; left: 10px; } | ||
+ | .cap-top figcaption { left: 0; top: -30%; } | ||
+ | .cap-top:hover figcaption { top: 0; } | ||
+ | |||
+ | .cap-bot:before { bottom: 10px; left: 10px; } | ||
+ | .cap-bot figcaption { left: 0; bottom: -30%;} | ||
+ | .cap-bot:hover figcaption { bottom: 0; }</style> | ||
+ | |||
+ | </section> | ||
+ | |||
+ | </div> | ||
+ | |||
</body> | </body> | ||
+ | |||
</html> | </html> | ||
}} <!-- close content attribute for menubar --> | }} <!-- close content attribute for menubar --> |
Latest revision as of 02:20, 28 September 2011