Team:Freiburg/Content/Templates/Project
From 2014.igem.org
(8 intermediate revisions not shown) | |||
Line 155: | Line 155: | ||
</section> | </section> | ||
- | <section> | + | <section id="partspopup"> |
<h1>Parts Popup</h1> | <h1>Parts Popup</h1> | ||
<p>Just add the partlink class to your link.</p> | <p>Just add the partlink class to your link.</p> | ||
Line 162: | Line 162: | ||
<li><a class="partlink" href="http://parts.igem.org/Part:pSB1A3">pSB1A3:</a></li> | <li><a class="partlink" href="http://parts.igem.org/Part:pSB1A3">pSB1A3:</a></li> | ||
</ul> | </ul> | ||
+ | </section> | ||
+ | |||
+ | <section id="tooltips"> | ||
+ | <h1>Tooltips</h1> | ||
+ | <!-- span with class ttip, data-title attribute and | ||
+ | data-content link --> | ||
+ | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="ttip ttip-text" data-title="Definition: Libero asperiores" data-content="#tip-libero">Libero asperiores</span> cum dignissimos porro, sed. Cumque harum quisquam nam, veritatis nulla.</p> | ||
+ | <ul> | ||
+ | <li><span class="ttip" data-title="List item 1" data-content="#tip-libero">List item with tooltip</span></li> | ||
+ | <li><span class="ttip ttip-text" data-title="List item 2" data-content="#tip-image">List item with tooltip</span></li> | ||
+ | <li>List item with tooltip afterwards <span class="ttip ttip-icon" data-title="List item 3" data-content="#tip-image">!</span></li> | ||
+ | </ul> | ||
+ | <!-- invisible tooltip contents defined at the end of the section --> | ||
+ | <div id="tip-libero" style="display:none;" > | ||
+ | <p>Libero asperiores lorem ipsum dolor sit amet.<p> | ||
+ | <a href="#">Read more</a> | ||
+ | </div> | ||
+ | <div id="tip-image" style="display:none;" > | ||
+ | <img class="centered" style="max-width: 100%;" src="https://static.igem.org/mediawiki/2014/f/fb/2014_Freiburg_Abstract.png" alt="Description of Image"> | ||
+ | <a href="#">Read more</a> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <section> | ||
+ | <h1>Figure Borders</h1> | ||
+ | <figure> | ||
+ | <img src="https://static.igem.org/mediawiki/2014/f/fb/2014_Freiburg_Abstract.png" alt="Description of Image"> | ||
+ | <figcaption> | ||
+ | <p class="header">Fig.X: Lorem ipsum dolor sit amet.</p> | ||
+ | <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt odio quae illum deserunt. Natus perspiciatis sapiente aliquam magnam explicabo.</p> | ||
+ | </figcaption> | ||
+ | </figure> | ||
+ | |||
+ | <figure> | ||
+ | <img class="img-no-pad" src="https://static.igem.org/mediawiki/2014/f/fb/2014_Freiburg_Abstract.png" alt="Description of Image"> | ||
+ | <figcaption> | ||
+ | <p class="header">Fig.X: Lorem ipsum dolor sit amet.</p> | ||
+ | <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt odio quae illum deserunt. Natus perspiciatis sapiente aliquam magnam explicabo.</p> | ||
+ | </figcaption> | ||
+ | </figure> | ||
+ | |||
+ | <figure> | ||
+ | <img class="img-no-border" src="https://static.igem.org/mediawiki/2014/f/fb/2014_Freiburg_Abstract.png" alt="Description of Image"> | ||
+ | <figcaption> | ||
+ | <p class="header">Fig.X: Lorem ipsum dolor sit amet.</p> | ||
+ | <p class="desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt odio quae illum deserunt. Natus perspiciatis sapiente aliquam magnam explicabo.</p> | ||
+ | </figcaption> | ||
+ | </figure> | ||
+ | |||
+ | </section> | ||
+ | |||
+ | <section> | ||
+ | <h1>Highlights</h1> | ||
+ | <p>Lorem <em>ipsum dolor sit amet</em>, consectetur adipisicing elit. Incidunt, laboriosam!</p> | ||
+ | <p>Lorem <em class="highlight-kursiv">ipsum dolor sit amet</em>, consectetur adipisicing elit. Incidunt, laboriosam!</p> | ||
+ | <p>Lorem <em class="highlight-bold">ipsum dolor sit amet</em>, consectetur adipisicing elit. Incidunt, laboriosam!</p> | ||
+ | </section> | ||
+ | |||
+ | <section> | ||
+ | <h1>Arrows</h1> | ||
+ | <!-- Pfeil fw--> | ||
+ | <a href="https://2014.igem.org/Team:Freiburg/Project"> <!-- Link --> | ||
+ | <img class="img-no-border" style="max-width: 100px" src="https://static.igem.org/mediawiki/2014/6/62/Freiburg2014_Navigation_Arrow_fw.png"> <!-- Pfeil fw--> | ||
+ | </a> | ||
+ | </br> | ||
+ | <!-- Pfeil rv--> | ||
+ | <a href="https://2014.igem.org/Team:Freiburg/Project"> <!-- Link --> | ||
+ | <img class="img-no-border" style="max-width: 80px" src="https://static.igem.org/mediawiki/2014/7/74/Freiburg2014_Navigation_Arrow_rv.jpg"> <!-- Pfeil rv--> | ||
+ | </a> | ||
</section> | </section> | ||
Latest revision as of 04:14, 17 October 2014
Page Headline Project Overview
Two column layout
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, dolorum consequuntur, voluptas ab doloremque repellat beatae accusantium nam fugit repudiandae, laborum distinctio ad veritatis sequi. Consectetur repellendus earum iure esse veritatis, quod error, sit nulla quis nemo laudantium, voluptatum eius minus? Aliquid eveniet hic facere esse similique ratione ab rerum harum numquam eius explicabo repellat, velit nulla possimus, labore officia nesciunt unde suscipit. Harum nulla voluptatem, nisi nesciunt totam, maiores quisquam officiis expedita vel delectus possimus veniam facilis suscipit quis qui voluptatum magnam molestias, unde exercitationem velit, provident laborum cumque! Fugit ipsum ea tempora quo sapiente non dolores molestiae, officiis.
Two column layout with one figure underneath
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, dolorum consequuntur, voluptas ab doloremque repellat beatae accusantium nam fugit repudiandae, laborum distinctio ad veritatis sequi. Consectetur repellendus earum iure esse veritatis, quod error, sit nulla quis nemo laudantium, voluptatum eius minus? Aliquid eveniet hic facere esse similique ratione ab rerum harum numquam eius explicabo repellat, velit nulla possimus, labore officia nesciunt unde suscipit. Harum nulla voluptatem, nisi nesciunt totam, maiores quisquam officiis expedita vel delectus possimus veniam facilis suscipit quis qui voluptatum magnam molestias, unde exercitationem velit, provident laborum cumque! Fugit ipsum ea tempora quo sapiente non dolores molestiae, officiis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, dolorum consequuntur, voluptas ab doloremque repellat beatae accusantium nam fugit repudiandae, laborum distinctio ad veritatis sequi. Consectetur repellendus earum iure esse veritatis, quod error, sit nulla quis nemo laudantium, voluptatum eius minus? Aliquid eveniet hic facere esse similique ratione ab rerum harum numquam eius explicabo repellat, velit nulla possimus, labore officia nesciunt unde suscipit. Harum nulla voluptatem, nisi nesciunt totam, maiores quisquam officiis expedita vel delectus possimus veniam facilis suscipit quis qui voluptatum magnam molestias, unde exercitationem velit, provident laborum cumque! Fugit ipsum ea tempora quo sapiente non dolores molestiae, officiis.
Two column layout with two figures underneath
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, dolorum consequuntur, voluptas ab doloremque repellat beatae accusantium nam fugit repudiandae, laborum distinctio ad veritatis sequi. Consectetur repellendus earum iure esse veritatis, quod error, sit nulla quis nemo laudantium, voluptatum eius minus? Aliquid eveniet hic facere esse similique ratione ab rerum harum numquam eius explicabo repellat, velit nulla possimus, labore officia nesciunt unde suscipit. Harum nulla voluptatem, nisi nesciunt totam, maiores quisquam officiis expedita vel delectus possimus veniam facilis suscipit quis qui voluptatum magnam molestias, unde exercitationem velit, provident laborum cumque! Fugit ipsum ea tempora quo sapiente non dolores molestiae, officiis.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, dolorum consequuntur, voluptas ab doloremque repellat beatae accusantium nam fugit repudiandae, laborum distinctio ad veritatis sequi. Consectetur repellendus earum iure esse veritatis, quod error, sit nulla quis nemo laudantium, voluptatum eius minus? Aliquid eveniet hic facere esse similique ratione ab rerum harum numquam eius explicabo repellat, velit nulla possimus, labore officia nesciunt unde suscipit. Harum nulla voluptatem, nisi nesciunt totam, maiores quisquam officiis expedita vel delectus possimus veniam facilis suscipit quis qui voluptatum magnam molestias, unde exercitationem velit, provident laborum cumque! Fugit ipsum ea tempora quo sapiente non dolores molestiae, officiis.
Figure with image width set to 400px
Figure with image width set to 400px and centered
Figure set to 400px and centered
Figure with image width set to original resolution and centered
One figure two images
One figure two images, width both images max-width 400px
Parts Popup
Just add the partlink class to your link.
Tooltips
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero asperiores cum dignissimos porro, sed. Cumque harum quisquam nam, veritatis nulla.
- List item with tooltip
- List item with tooltip
- List item with tooltip afterwards
Figure Borders
Highlights
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laboriosam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laboriosam!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laboriosam!