Team:Freiburg/Content/Templates/Project

From 2014.igem.org

(Difference between revisions)
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" 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" data-title="List item 2" data-content="#tip-image" style="border-bottom: 1px solid white;border: 1px solid white;cursor: pointer;font-weight: 700;font-family: Roboto, sans-serif;padding: 0 2px;">List item with tooltip</span></li>
 +
    <li>List item with tooltip afterwards <span class="glyphicon glyphicon-exclamation-sign ttip" 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>

Revision as of 12:07, 13 October 2014

Abstract Image Header

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.

Description of Image

Fig.X: Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt odio quae illum deserunt. Natus perspiciatis sapiente aliquam magnam explicabo.

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.

Description of Image

Fig.X: Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt odio quae illum deserunt. Natus perspiciatis sapiente aliquam magnam explicabo.

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.

Description of Image

Fig.X: Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt odio quae illum deserunt. Natus perspiciatis sapiente aliquam magnam explicabo.

Description of Image

Fig.X: Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt odio quae illum deserunt. Natus perspiciatis sapiente aliquam magnam explicabo.

Figure with image width set to 400px

Description of Image

Fig.X: Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt odio quae illum deserunt. Natus perspiciatis sapiente aliquam magnam explicabo.

Figure with image width set to 400px and centered

Description of Image

Fig.X: Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt odio quae illum deserunt. Natus perspiciatis sapiente aliquam magnam explicabo.

Figure set to 400px and centered

Description of Image

Fig.X: Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt odio quae illum deserunt. Natus perspiciatis sapiente aliquam magnam explicabo.

Figure with image width set to original resolution and centered

Description of Image

Fig.X: Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt odio quae illum deserunt. Natus perspiciatis sapiente aliquam magnam explicabo.

One figure two images

Description of Image
Description of Image

Fig.X: Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt odio quae illum deserunt. Natus perspiciatis sapiente aliquam magnam explicabo.

One figure two images, width both images max-width 400px

Description of Image
Description of Image

Fig.X: Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sunt odio quae illum deserunt. Natus perspiciatis sapiente aliquam magnam explicabo.

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

List of things and stuff e.g. Literature

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, laboriosam!
  • Aliquam impedit cupiditate et necessitatibus recusandae, qui nostrum accusantium aut.
  • Modi quia fugit quisquam placeat porro! Debitis esse numquam dolorum.
  • Quo aspernatur debitis adipisci reiciendis quidem maxime nesciunt, fugit nam?
  • Ad dolorem impedit quis aliquid iusto nisi earum odit explicabo!
  • Voluptatibus sapiente sunt alias nam, aspernatur dolorum libero, fugit nemo.
  • Nesciunt temporibus dicta iusto dignissimos illum facilis porro quidem nemo!
  • Enim illo, assumenda possimus. Commodi autem adipisci qui hic sunt.
  • Assumenda commodi soluta sit! Voluptas voluptatem possimus amet nemo molestiae.
  • Magni laborum voluptatem commodi, repellat quas ex omnis recusandae animi!