Difference between revisions of "HQ:Code Documentation"
(Transferred from 2020 - date fixed) |
|||
| (51 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
{{Main2021}} | {{Main2021}} | ||
<html> | <html> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| − | + | ||
| − | + | <!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | |
| − | < | + | <!-- CONTENT --> |
| − | < | + | <!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> |
| − | + | ||
| − | < | + | <img class="full_image" src="https://via.placeholder.com/2000X400/ddd6d0/99948f"> |
| − | + | ||
| − | + | ||
| − | < | + | <div class="igem_column_wrapper"> |
| − | + | ||
| − | + | <div class="clear extra_space"></div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div class="clear extra_space"></div> | + | |
<div class="line_divider"></div> | <div class="line_divider"></div> | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space"></div> |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<div class="clear"></div> | <div class="clear"></div> | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<div class="column full_size"> | <div class="column full_size"> | ||
| − | |||
| − | |||
| − | |||
| − | + | <div class="highlight gray post"> | |
| − | + | <div class="details"> | |
| − | + | <div class="title note">Note </div> | |
| − | + | </div> | |
| − | <div class=" | + | <div class="clear"></div> |
| − | < | + | <div class="column full_size"> |
| − | < | + | <p>Lorem ipsum</p> |
| + | </div> | ||
| + | </div> | ||
</div> | </div> | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<div class="clear"></div> | <div class="clear"></div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<div class="column full_size"> | <div class="column full_size"> | ||
| − | < | + | <h2>HQ Wishlist</h2> |
| − | </ | + | <ul> |
| − | + | <li> (could you also pls provide instructions on how to generate the vector coordinate versions?) </li> | |
| − | < | + | <li>On pages with the new accordions - a link/button that expands and collapses all accordions in a section</li> |
| + | |||
| + | <li>Gallery, carousels, timezone converters, light, medium, dark themes (below)</li> | ||
| + | <li>https://2021.igem.org/Resources/Template_Documentation - can you check that it's still accurate for team templates?</li> | ||
| + | <li>i *tried* doing contrasting header colours for highlight boxes - please adjust the colours as you see fit! - Abi</li> | ||
| + | <li>Can't save from the wiki page preview (menu covers the save button)</li> | ||
| + | <li></li> | ||
| + | <li></li> | ||
| + | <li></li> | ||
| + | <li></li> | ||
| − | < | + | </ul> |
| − | + | ||
</div> | </div> | ||
| − | + | <div class="clear extra_space"></div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div class="clear extra_space"></div> | + | |
<div class="line_divider"></div> | <div class="line_divider"></div> | ||
| − | <div class="clear extra_space"></div> | + | <div class="clear extra_space"></div> |
| + | |||
| + | <div class="column full_size"> | ||
| + | <h2>COLUMNS : LAYOUT CLASSES </h2> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | |||
| + | <img src="https://via.placeholder.com/1000X200/ddd6d0/99948f"> | ||
| + | |||
| + | <h2>H1 > Column Full size: </h1> | ||
| + | <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="clear "></div> | ||
| − | <div class="column | + | |
| − | <h2> | + | <div class="column half_size"> |
| − | </div> | + | <img src="https://via.placeholder.com/1000X200/ddd6d0/99948f"> |
| + | <h2>H2 > Column Half size </h2> | ||
| + | <p>Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column half_size"> | ||
| + | <img src="https://via.placeholder.com/1000X200/ddd6d0/99948f"> | ||
| + | <h2>H2 > Column Half size </h2> | ||
| + | <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear"></div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <img src="https://via.placeholder.com/1000X200/ddd6d0/99948f"> | ||
| + | <H3>H3 > Column Third size </H3> | ||
| + | <p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <img src="https://via.placeholder.com/1000X200/ddd6d0/99948f"> | ||
| + | <H3>H3 > Column Third size </H3> | ||
| + | <p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <img src="https://via.placeholder.com/1000X200/ddd6d0/99948f"> | ||
| + | <H3>H3 > Column Third size </H3> | ||
| + | <p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear"></div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <img src="https://via.placeholder.com/1000X200/ddd6d0/99948f"> | ||
| + | <H4>H4 > Column Quarter size </H4> | ||
| + | <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <img src="https://via.placeholder.com/1000X200/ddd6d0/99948f"> | ||
| + | <H4>H4 > Column Quarter size </H4> | ||
| + | <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <img src="https://via.placeholder.com/1000X200/ddd6d0/99948f"> | ||
| + | <H4>H4 > Column Quarter size </H4> | ||
| + | <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <img src="https://via.placeholder.com/1000X200/ddd6d0/99948f"> | ||
| + | <H4>H4 > Column Quarter size </H4> | ||
| + | <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear"></div> | ||
| + | |||
| + | |||
| + | <div class="column three_quarter_size"> | ||
| + | <img src="https://via.placeholder.com/1000X200/ddd6d0/99948f"> | ||
| + | <H5>H5 > Column Three Quarter size </H5> | ||
| + | <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <img src="https://via.placeholder.com/1000X635/ddd6d0/99948f"> | ||
| + | <H5>H5 > Column Quarter size </H4> | ||
| + | <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear"></div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <img src="https://via.placeholder.com/1000X410/ddd6d0/99948f"> | ||
| + | <H6>H6 > Column Third size </H6> | ||
| + | <p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column two_third_size"> | ||
| + | <img src="https://via.placeholder.com/1000X200/ddd6d0/99948f"> | ||
| + | <H6>H6 > Column Two Third size </H6> | ||
| + | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <div class= "column third_size"> | ||
| + | <div class="button"> | ||
| + | <a href="">BUTTON / DEFAULT </a> | ||
| + | </div> | ||
| + | <div class="button light"> | ||
| + | <a href="">BUTTON LIGHT </a> | ||
| + | </div> | ||
| + | <div class="button dark"> | ||
| + | <a href="">BUTTON DARK </a> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class= "column third_size"> | ||
| + | <div class="button orange"> | ||
| + | <a href="">BUTTON ORANGE</a> | ||
| + | </div> | ||
| + | <div class="button purple"> | ||
| + | <a href="">BUTTON PURPLE </a> | ||
| + | </div> | ||
| + | |||
| + | <div class="button wine"> | ||
| + | <a href="">BUTTON WINE</a> | ||
| + | </div> | ||
| + | <div class="button coral"> | ||
| + | <a href="">BUTTON CORAL</a> | ||
| + | </div> | ||
| − | <div class="column | + | </div> |
| − | < | + | |
| − | < | + | <div class= "column third_size"> |
| − | </div> | + | <div class="button teal"> |
| + | <a href="">BUTTON TEAL </a> | ||
| + | </div> | ||
| + | <div class="button lightgreen"> | ||
| + | <a href="">BUTTON LIGHT GREEN</a> | ||
| + | </div> | ||
| + | <div class="button darkgreen"> | ||
| + | <a href="">BUTTON DARK GREEN </a> | ||
| + | </div> | ||
| + | <div class="button yellow"> | ||
| + | <a href="">BUTTON YELLOW </a> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | <h2> DECORATION: HIGHLIGHTS </h2> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight border light"> | ||
| + | <p>Third size: highlight border light : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight border medium"> | ||
| + | <p>Third size: highlight border medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| − | <div class="column | + | |
| − | <div class="highlight | + | <div class="column third_size"> |
| − | <p> | + | <div class="highlight border dark"> |
| − | + | <p>Third size: highlight border dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | </p> | + | |
| − | + | <div class="clear extra_space"></div> | |
| − | </div> | + | |
| − | </div> | + | <div class="column third_size"> |
| − | + | <div class="highlight border gray"> | |
| − | + | <p>Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| − | <div class="clear extra_space"></div> | + | </div> |
| − | + | </div> | |
| − | + | ||
| − | + | <div class="column third_size"> | |
| − | <div class="column | + | <div class="highlight gray"> |
| − | < | + | <p>Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> |
| − | <p> | + | </div> |
| − | + | </div> | |
| − | < | + | |
| − | < | + | <div class="column third_size"> |
| − | < | + | <div class="highlight border red"> |
| − | < | + | <p>Third size: highlight border red: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> |
| − | < | + | </div> |
| − | < | + | </div> |
| − | + | ||
| − | + | <div class="clear extra_space"></div> | |
| − | + | ||
| − | <p> | + | <div class="column quarter_size"> |
| − | </div> | + | <div class="highlight border lightgreen"> |
| − | + | <p>Quarter size: highlight border lightgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| − | + | </div> | |
| − | <div class=" | + | </div> |
| − | <div | + | |
| − | < | + | <div class="column quarter_size"> |
| − | + | <div class="highlight border darkgreen"> | |
| − | + | <p>Quarter size: highlight border darkgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| − | + | </div> | |
| − | + | </div> | |
| − | </p> | + | |
| − | + | <div class="column quarter_size"> | |
| − | </div> | + | <div class="highlight border teal"> |
| − | </div> | + | <p>Quarter size: highlight border teal: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> |
| − | + | </div> | |
| − | <div class="column quarter_size"> | + | </div> |
| − | <div class="highlight | + | |
| − | <p> | + | <div class="column quarter_size"> |
| − | + | <div class="highlight border yellow"> | |
| − | + | <p>Quarter size: highlight border yellow: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| − | + | </div> | |
| − | + | </div> | |
| − | </p> | + | |
| − | + | ||
| − | </div> | + | <div class="clear extra_space"></div> |
| − | </div> | + | |
| − | + | ||
| − | + | <div class="column quarter_size"> | |
| − | + | <div class="highlight border coral"> | |
| − | + | <p>Quarter size: highlight border coral: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| − | <div class="column | + | </div> |
| − | < | + | </div> |
| − | <p> | + | |
| − | + | <div class="column quarter_size"> | |
| − | </p> | + | <div class="highlight border purple"> |
| − | + | <p>Quarter size: highlight border purple: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| − | < | + | </div> |
| − | + | </div> | |
| − | <div class=" | + | |
| − | + | ||
| − | + | <div class="column quarter_size"> | |
| − | + | <div class="highlight border orange"> | |
| − | + | <p>Quarter size: highlight border orange: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | + | <div class="column quarter_size"> | |
| − | + | <div class="highlight border wine"> | |
| − | + | <p>Quarter size: highlight border wine: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| − | </div> | + | </div> |
| + | </div> | ||
| + | |||
| + | |||
| − | + | ||
| − | </div> | + | <div class="clear extra_space"></div> |
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight dark"> | ||
| + | <h1>Header 1</h1> | ||
| + | <h2>Header 2</h2> | ||
| + | <h3>Header 3</h3> | ||
| + | <h4>Header 4</h4> | ||
| + | <h5>Header 5</h5> | ||
| + | <h6>Header 6</h6> | ||
| + | <p>Third size: highlight dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | <ul><li>Unordered list item</li></ul> | ||
| + | <ol><li>Ordered list item</li></ol> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight medium"> | ||
| + | <h1>Header 1</h1> | ||
| + | <h2>Header 2</h2> | ||
| + | <h3>Header 3</h3> | ||
| + | <h4>Header 4</h4> | ||
| + | <h5>Header 5</h5> | ||
| + | <h6>Header 6</h6> | ||
| + | <p>Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | <ul><li>Unordered list item</li></ul> | ||
| + | <ol><li>Ordered list item</li></ol> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight light"> | ||
| + | <h1>Header 1</h1> | ||
| + | <h2>Header 2</h2> | ||
| + | <h3>Header 3</h3> | ||
| + | <h4>Header 4</h4> | ||
| + | <h5>Header 5</h5> | ||
| + | <h6>Header 6</h6> | ||
| + | <p>Third size: highlight light: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | <ul><li>Unordered list item</li></ul> | ||
| + | <ol><li>Ordered list item</li></ol> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | <h2> SAME HEIGHT BOXES: ROW</h2> | ||
| + | </div> | ||
| + | |||
| − | + | ||
| − | + | <div class="row"> | |
| − | + | <div class="column half_size"> | |
| − | + | <div class="highlight border"> | |
| − | + | <p>Row: Half size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <div class="column quarter_size"> | |
| − | + | <div class="highlight border"> | |
| − | + | <p>Row: Quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | <div class="column quarter_size"> | |
| − | + | <div class="highlight border"> | |
| − | + | <p>Row: Quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | <div class="clear extra_space"></div> | |
| − | + | ||
| + | <div class="row"> | ||
| + | <div class="column third_size"> | ||
| + | <div class="highlight border"> | ||
| + | <p>Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| − | </div> | + | <div class="column two_third_size"> |
| + | <div class="highlight border"> | ||
| + | <p>Row: Two third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="row"> | ||
| + | <div class="column three_quarter_size"> | ||
| + | <div class="highlight border"> | ||
| + | <p>Row: Three quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border"> | ||
| + | <p>Row: Quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | <div class="row"> | ||
| + | <div class="column half_size"> | ||
| + | <div class="highlight border"> | ||
| + | <p>Row: Half size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column half_size"> | ||
| + | <div class="highlight border"> | ||
| + | <p>Row: Half size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | <div class="row"> | ||
| + | <div class="column third_size"> | ||
| + | <div class="highlight border"> | ||
| + | <p>Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight border"> | ||
| + | <p>Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight border"> | ||
| + | <p>Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | <h2> HIGHLIGHT POSTS </h2> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | <div class="highlight post"> | ||
| + | <div class="details"> | ||
| + | <div class="title base">Title of the post with icon </div> </div> | ||
| + | <div class="details "><div class="title announcement"> announcement</div> </div> | ||
| + | <div class="details "> <div class="title alert"> alert</div></div> | ||
| + | <div class="details "> <div class="title heart"> heart </div></div> | ||
| + | <div class="details "> <div class="title note"> note </div></div> | ||
| + | <div class="details "> <div class="title notice"> notice</div></div> | ||
| + | <div class="details "> <div class="title reminder"> reminder</div></div> | ||
| + | <div class="details "> <div class="title pinned"> pinned</div></div> | ||
| + | <div class="details "> <div class="title why"> why </div></div> | ||
| + | |||
| + | <div class="column full_size"> | ||
| + | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | <div class="column full_size"> | ||
| + | <div class="highlight post"> | ||
| + | |||
| + | <div class="details"> | ||
| + | <div class="title base">Title of the post with icon </div> | ||
| + | <div class="keyword">Keyword </div> | ||
| + | |||
| + | <div class="clear"></div> | ||
| + | |||
| + | <div class="host">Team name / Host </div> | ||
| + | <div class="date">Time of event</div> | ||
| + | <div class="location">Location of event </div> | ||
| + | <div class="contact">Contact for event </div> | ||
| + | </div> | ||
| + | <div class="details"><div class="title team_meetup">Team meetup event</div></div> | ||
| + | <div class="details"><div class="title igem_hq">iGEM HQ event </div></div> | ||
| + | <div class="details"><div class="title sponsors">Sponsors event </div></div> | ||
| + | <div class="details"><div class="title ambassadors">Ambassadors event </div></div> | ||
| + | |||
| − | <div class=" | + | <div class="details"><div class="title working_group">working group collab</div></div> |
| − | + | <div class="details"><div class="title social_media">social media collab </div></div> | |
| − | + | <div class="details"><div class="title surveys">survey collab </div></div> | |
| − | <div class=" | + | <div class="details"><div class="title creative">creative collab </div></div> |
| − | + | <div class="column full_size"> | |
| − | + | <p>Full size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <p> | + | |
</div> | </div> | ||
| − | + | ||
<div class="clear"></div> | <div class="clear"></div> | ||
| − | + | ||
| + | <div class="column half_size"> | ||
| + | <p>Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column half_size"> | ||
| + | <p>Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear"></div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear"></div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <p>Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <p>Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <p>Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <p>Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear"></div> | ||
| + | |||
| + | |||
| + | <div class="column three_quarter_size"> | ||
| + | <p>Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <p>Three Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear"></div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column two_third_size"> | ||
| + | <p>Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | |||
</div> | </div> | ||
| + | </div> | ||
| − | |||
| − | + | ||
| − | + | ||
| − | < | + | <div class="clear extra_space"></div> |
| − | + | <div class="clear extra_space"></div> | |
| − | + | <div class="clear extra_space"></div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | <div class="column full_size"> | |
| − | + | ||
| − | + | <h1> CARROUSELS</h1> | |
| − | + | <div class="gallery carousel" id="one"> | |
| − | + | ||
| − | + | <div class="content"> | |
| − | + | ||
| − | + | <div class="slide "> | |
| − | + | <img src="https://via.placeholder.com/1000X201/ddd6d0/99948f"> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div class="clear extra_space"></div> | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div class="clear extra_space"></div> | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div class="column | + | |
| − | + | ||
| − | < | + | |
| − | < | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div class=" | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div class=" | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
</div> | </div> | ||
| + | <div class="slide"> | ||
| + | <img src="https://via.placeholder.com/1000X202/ddd6d0/99948f"> | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | <img src="https://via.placeholder.com/1000X203/ddd6d0/99948f"> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="controls"></div> | ||
| + | |||
| + | |||
| − | <div class=" | + | </div> |
| − | < | + | |
| − | + | </div> | |
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | <div class="column half_size"> | ||
| + | |||
| + | <div class="gallery carousel" id="two"> | ||
| + | |||
| + | <div class="content"> | ||
| + | |||
| + | <div class="slide"> | ||
| + | <img src="https://via.placeholder.com/1000X201/ddd6d0/99948f"> | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | <img src="https://via.placeholder.com/1000X202/ddd6d0/99948f"> | ||
</div> | </div> | ||
| − | + | <div class="slide"> | |
| + | <img src="https://via.placeholder.com/1000X203/ddd6d0/99948f"> | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | <img src="https://via.placeholder.com/1000X204/ddd6d0/99948f"> | ||
| + | </div> | ||
</div> | </div> | ||
| + | |||
| + | <div class="controls"></div> | ||
</div> | </div> | ||
| − | + | ||
| − | + | </div> | |
| − | + | ||
| − | </div> | + | <div class="column half_size"> |
| − | + | ||
| − | + | <div class="gallery carousel" id="three"> | |
| − | <div class="column half_size"> | + | |
| − | + | <div class="content"> | |
| − | + | <div class="slide"> | |
| − | + | <img src="https://via.placeholder.com/1000X201/ddd6d0/99948f"> | |
| − | + | </div> | |
| − | + | <div class="slide"> | |
| − | + | <img src="https://via.placeholder.com/1000X202/ddd6d0/99948f"> | |
| − | + | </div> | |
| − | + | <div class="slide"> | |
| − | + | <img src="https://via.placeholder.com/1000X203/ddd6d0/99948f"> | |
| − | + | </div> | |
| − | + | ||
| − | + | </div> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div class=" | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div class=" | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div class=" | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | <div | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | </div> | + | </div> |
| − | </div> | + | |
| + | </div> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | <div class="column full_size"> | ||
| + | <h1> GALLERY </h1> | ||
| + | |||
| + | <div class="gallery" id="four"> | ||
| + | <div class="content"> | ||
| + | <div class="slide"> | ||
| + | <img src="https://via.placeholder.com/1000X201/ddd6d0/99948f"> | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | <img src="https://via.placeholder.com/1000X202/ddd6d0/99948f"> | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | <img src="https://via.placeholder.com/1000X203/ddd6d0/99948f"> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="controls"></div> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | <div class="gallery" id="five"> | ||
| + | <div class="content"> | ||
| + | <div class="slide"> | ||
| + | <img src="https://via.placeholder.com/1000X201/ddd6d0/99948f"> | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | <img src="https://via.placeholder.com/1000X202/ddd6d0/99948f"> | ||
| + | </div> | ||
| + | <div class="slide"> | ||
| + | <img src="https://via.placeholder.com/1000X203/ddd6d0/99948f"> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <div class="gallery" id="six"> | ||
| + | <div class="content"> | ||
| + | |||
| + | |||
| + | <div class="slide"> | ||
| + | <div class="column third_size"> | ||
| + | <img src="https://via.placeholder.com/1000X201/ddd6d0/99948f"> | ||
| + | <p> example slide 1.1</p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <img src="https://via.placeholder.com/1000X202/ddd6d0/99948f"> | ||
| + | <p> example slide 1.2</p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <img src="https://via.placeholder.com/1000X203/ddd6d0/99948f"> | ||
| + | <p> example slide 1.3</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="slide"> | ||
| + | <div class="column third_size"> | ||
| + | <img src="https://via.placeholder.com/1000X201/ddd6d0/99948f"> | ||
| + | <p> example slide 2.1</p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <img src="https://via.placeholder.com/1000X202/ddd6d0/99948f"> | ||
| + | <p> example slide 2.2</p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <img src="https://via.placeholder.com/1000X203/ddd6d0/99948f"> | ||
| + | <p> example slide 2.3</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="controls"></div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | |||
| + | |||
| + | <h1> TABLES AND TIMEZONE CONVERTER</h1> | ||
| + | |||
| + | <select class="styled_select" id="timezone_converter"> | ||
| + | </select> | ||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | |||
| + | <table> | ||
| − | < | + | <tr> |
| − | + | <th>Date </th> | |
| − | + | <th>#</th> | |
| − | < | + | </tr> |
| − | + | <tr> | |
| − | < | + | <td class="date_timezone">06,09,1000,30</td> |
| − | < | + | <td>1</td> |
| − | + | </tr> | |
| − | < | + | |
| + | <tr> | ||
| + | <td class="date_timezone">06,09,0300,60</td> | ||
| + | <td>2</td> | ||
| + | </tr> | ||
| − | + | <tr> | |
| − | + | <td class="date_timezone">06,09,1300,60</td> | |
| − | + | <td>3</td> | |
| − | + | </tr> | |
| − | + | <tr> | |
| − | + | <td class="date_timezone">06,16,1000,30</td> | |
| − | + | <td>4</td> | |
| + | </tr> | ||
| + | |||
| + | <tr> | ||
| + | <td class="date_timezone">06,23,0300,60</td> | ||
| + | <td>5</td> | ||
| + | </tr> | ||
| + | |||
| + | <tr> | ||
| + | <td class="date_timezone">06,23,1300,60</td> | ||
| + | <td>6</td> | ||
| + | </tr> | ||
| + | |||
| + | </table> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | </p> | + | |
| + | <div class="igem_content_wrapper light"> | ||
| + | <div class=" igem_column_wrapper"> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | <h2>LIGHT THEME </h2> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | |||
| + | <img src="https://via.placeholder.com/1000X200/ddd6d0/99948f"> | ||
| + | |||
| + | <h2>H1 > Column Full size: </h1> | ||
| + | <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | <h2> DECORATION: HIGHLIGHTS </h2> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight border light"> | ||
| + | <p>Third size: highlight border light : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight border medium"> | ||
| + | <p>Third size: highlight border medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| − | </div> | + | |
| − | </div> | + | <div class="column third_size"> |
| + | <div class="highlight border dark"> | ||
| + | <p>Third size: highlight border dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight border gray"> | ||
| + | <p>Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight gray"> | ||
| + | <p>Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight border red"> | ||
| + | <p>Third size: highlight border red: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border lightgreen"> | ||
| + | <p>Quarter size: highlight border lightgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border darkgreen"> | ||
| + | <p>Quarter size: highlight border darkgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border teal"> | ||
| + | <p>Quarter size: highlight border teal: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border yellow"> | ||
| + | <p>Quarter size: highlight border yellow: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border coral"> | ||
| + | <p>Quarter size: highlight border coral: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border purple"> | ||
| + | <p>Quarter size: highlight border purple: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border orange"> | ||
| + | <p>Quarter size: highlight border orange: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border wine"> | ||
| + | <p>Quarter size: highlight border wine: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight dark"> | ||
| + | <p>Third size: highlight dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight medium"> | ||
| + | <p>Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight light"> | ||
| + | <p>Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | <h2> HIGHLIGHT POSTS </h2> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | <div class="highlight post"> | ||
| + | <div class="details"> | ||
| + | <div class="title base">Title of the post with icon </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column full_size"> | ||
| + | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | <div class="column full_size"> | ||
| + | <div class="highlight post"> | ||
| + | |||
| + | <div class="details"> | ||
| + | <div class="title base">Title of the post with icon </div> | ||
| + | <div class="keyword">Keyword </div> | ||
| + | |||
| + | <div class="clear"></div> | ||
| + | |||
| + | <div class="host">Team name / Host </div> | ||
| + | <div class="date">Time of event</div> | ||
| + | <div class="location">Location of event </div> | ||
| + | <div class="contact">Contact for event </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column full_size"> | ||
| + | <p>Full size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear"></div> | ||
| + | |||
| + | <div class="column half_size"> | ||
| + | <p>Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column half_size"> | ||
| + | <p>Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | > | ||
| + | |||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="igem_content_wrapper dark"> | ||
| + | <div class=" igem_column_wrapper"> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | <h2>DARK THEME </h2> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | |||
| + | <img src="https://via.placeholder.com/1000X200/ddd6d0/99948f"> | ||
| + | |||
| + | <h2>H1 > Column Full size: </h1> | ||
| + | <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | <h2> DECORATION: HIGHLIGHTS </h2> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight border light"> | ||
| + | <p>Third size: highlight border light : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight border medium"> | ||
| + | <p>Third size: highlight border medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight border dark"> | ||
| + | <p>Third size: highlight border dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight border gray"> | ||
| + | <p>Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight gray"> | ||
| + | <p>Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight border red"> | ||
| + | <p>Third size: highlight border red: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border lightgreen"> | ||
| + | <p>Quarter size: highlight border lightgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border darkgreen"> | ||
| + | <p>Quarter size: highlight border darkgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border teal"> | ||
| + | <p>Quarter size: highlight border teal: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border yellow"> | ||
| + | <p>Quarter size: highlight border yellow: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border coral"> | ||
| + | <p>Quarter size: highlight border coral: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border purple"> | ||
| + | <p>Quarter size: highlight border purple: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border orange"> | ||
| + | <p>Quarter size: highlight border orange: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column quarter_size"> | ||
| + | <div class="highlight border wine"> | ||
| + | <p>Quarter size: highlight border wine: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight dark"> | ||
| + | <p>Third size: highlight dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight medium"> | ||
| + | <p>Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column third_size"> | ||
| + | <div class="highlight light"> | ||
| + | <p>Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | <h2> HIGHLIGHT POSTS </h2> | ||
| + | </div> | ||
| + | |||
| + | |||
| + | <div class="column full_size"> | ||
| + | <div class="highlight post"> | ||
| + | <div class="details"> | ||
| + | <div class="title base">Title of the post with icon </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column full_size"> | ||
| + | <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
| + | </div> | ||
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear extra_space"></div> | ||
| + | |||
| + | <div class="column full_size"> | ||
| + | <div class="highlight post"> | ||
| + | |||
| + | <div class="details"> | ||
| + | <div class="title base">Title of the post with icon </div> | ||
| + | <div class="keyword">Keyword </div> | ||
| + | |||
| + | <div class="clear"></div> | ||
| + | |||
| + | <div class="host">Team name / Host </div> | ||
| + | <div class="date">Time of event</div> | ||
| + | <div class="location">Location of event </div> | ||
| + | <div class="contact">Contact for event </div> | ||
| + | </div> | ||
| + | |||
| + | <div class="column full_size"> | ||
| + | <p>Full size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="clear"></div> | ||
| + | |||
| + | <div class="column half_size"> | ||
| + | <p>Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | <div class="column half_size"> | ||
| + | <p>Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | ||
| + | </div> | ||
| + | |||
| + | > | ||
| + | |||
| + | |||
| + | </div> | ||
| + | </div> | ||
| − | <div | + | |
| + | </div> | ||
| + | </div> | ||
| + | |||
| + | |||
| − | |||
| − | |||
| − | |||
| − | |||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</html> | </html> | ||
{{Footer2021}} | {{Footer2021}} | ||
Latest revision as of 13:37, 30 April 2021
Note
Lorem ipsum
HQ Wishlist
- (could you also pls provide instructions on how to generate the vector coordinate versions?)
- On pages with the new accordions - a link/button that expands and collapses all accordions in a section
- Gallery, carousels, timezone converters, light, medium, dark themes (below)
- https://2021.igem.org/Resources/Template_Documentation - can you check that it's still accurate for team templates?
- i *tried* doing contrasting header colours for highlight boxes - please adjust the colours as you see fit! - Abi
- Can't save from the wiki page preview (menu covers the save button)
COLUMNS : LAYOUT CLASSES
H1 > Column Full size:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
H2 > Column Half size
Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
H2 > Column Half size
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
H3 > Column Third size
Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
H3 > Column Third size
Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
H3 > Column Third size
Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
H4 > Column Quarter size
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
H4 > Column Quarter size
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
H4 > Column Quarter size
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
H4 > Column Quarter size
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
H5 > Column Three Quarter size
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
H5 > Column Quarter size
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
H6 > Column Third size
Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
H6 > Column Two Third size
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
DECORATION: HIGHLIGHTS
Third size: highlight border light : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight border medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight border dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight border red: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border lightgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border darkgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border teal: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border yellow: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border coral: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border purple: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border orange: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border wine: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Third size: highlight dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Unordered list item
- Ordered list item
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Unordered list item
- Ordered list item
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Third size: highlight light: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- Unordered list item
- Ordered list item
SAME HEIGHT BOXES: ROW
Row: Half size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Row: Quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Row: Quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Row: Two third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Row: Three quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Row: Quarter size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Row: Half size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Row: Half size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Row: Third size: highlight border: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
HIGHLIGHT POSTS
Title of the post with icon
announcement
alert
heart
note
notice
reminder
pinned
why
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Title of the post with icon
Keyword
Team name / Host
Time of event
Location of event
Contact for event
Team meetup event
iGEM HQ event
Sponsors event
Ambassadors event
working group collab
survey collab
creative collab
Full size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Three Quarter size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
CARROUSELS
GALLERY
example slide 1.1
example slide 1.2
example slide 1.3
example slide 2.1
example slide 2.2
example slide 2.3
TABLES AND TIMEZONE CONVERTER
| Date | # |
|---|---|
| 06,09,1000,30 | 1 |
| 06,09,0300,60 | 2 |
| 06,09,1300,60 | 3 |
| 06,16,1000,30 | 4 |
| 06,23,0300,60 | 5 |
| 06,23,1300,60 | 6 |
LIGHT THEME
H1 > Column Full size:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
DECORATION: HIGHLIGHTS
Third size: highlight border light : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight border medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight border dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight border red: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border lightgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border darkgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border teal: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border yellow: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border coral: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border purple: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border orange: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border wine: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
HIGHLIGHT POSTS
Title of the post with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Title of the post with icon
Keyword
Team name / Host
Time of event
Location of event
Contact for event
Full size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
DARK THEME
H1 > Column Full size:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
DECORATION: HIGHLIGHTS
Third size: highlight border light : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight border medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight border dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight background gray: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight border red: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border lightgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border darkgreen: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border teal: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border yellow: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border coral: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border purple: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border orange: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Quarter size: highlight border wine: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight dark: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Third size: highlight medium: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
HIGHLIGHT POSTS
Title of the post with icon
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Title of the post with icon
Keyword
Team name / Host
Time of event
Location of event
Contact for event
Full size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Half size: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
iGEM Foundation
The International Genetically Engineered Machine (iGEM) Foundation is an independent, non-profit organization dedicated to the advancement of synthetic biology, education and competition, and the development of an open community and collaboration. Visit us at igem.org
Contact
hq AT igem DOT org
45 Prospect Street
Cambridge, MA 02139
Due to COVID-19, iGEM staff are working remotely and cannot receive phone calls.
Please contact us by email.
