"
Team:Arizona State/Test
From 2011.igem.org
(Difference between revisions)
(Replaced content with "{{:Team:Arizona State/Templates/main|title=Test|content= __NOTOC__ 3: }} <!-- close content attribute for menubar -->") |
|||
| Line 2: | Line 2: | ||
__NOTOC__ | __NOTOC__ | ||
| - | + | <html> | |
| + | <head> | ||
| + | <meta charset="UTF-8"> | ||
| + | |||
| + | <!--[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><script type="text/javascript" async="" src="//s3.buysellads.com/ac/bsa.js"></script> | ||
| + | |||
| + | <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"> | ||
| + | |||
| + | <pre><code><figure> | ||
| + | <img src="yay.jpg" alt=""> | ||
| + | <figcaption class="from-left"> | ||
| + | yay!!! | ||
| + | </figcaption> | ||
| + | </figure></code></pre> | ||
| + | |||
| + | <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> | ||
| + | |||
| + | </html> | ||
}} <!-- close content attribute for menubar --> | }} <!-- close content attribute for menubar --> | ||
Revision as of 23:09, 27 September 2011
|
|
 Photos with Slide-in Captions
|
