Difference between revisions of "HQ:Code Documentation"

(Transferred from 2020 - date fixed)
 
Line 3: Line 3:
  
  
−
<div class="column full_size">
+
−
<h1> CODE DOCUMENTATION </h1>
+
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!-- CONTENT -->
 +
<!---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<div class="igem_content_wrapper">
 +
 +
<img class="full_image" src="https://via.placeholder.com/2000X400/ddd6d0/99948f">
 +
 +
 +
<div class="igem_column_wrapper">
 +
 +
  
 +
 +
 +
<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>
  
−
<p>
+
−
<span class="on_page"></span><b>On this page</b>  
+
<div class="column half_size">
−
you will find information on:
+
<img src="https://via.placeholder.com/1000X200/ddd6d0/99948f">
−
<a href="#svgs"> SVGs </a>,
+
<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>
  
−
</p>
+
</div>
 +
 +
<div class= "column third_size">
 +
<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>
+
−
 
+
<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 class="column full_size">
+
</div>
−
<h2> Website Visuals </h2>
+
−
 
+
−
<h3 id="colors"> Colors </h3>
+
<div class="clear extra_space"></div>
−
<p> The colors used on 2021.igem.org are: </p>
+
−
 
+
<div class="column third_size">
−
<table>
+
<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>
−
<tr height="50px">
+
</div>
−
<td bgcolor="#f65097" ></td>
+
</div>
−
<td bgcolor="#ffda00" ></td>
+
−
<td bgcolor="#ef7622" ></td>
+
<div class="column third_size">
−
<td bgcolor="#0069a6" ></td>
+
<div class="highlight gray">
−
<td bgcolor="#00afaa" ></td>
+
<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>
−
<td bgcolor="#131c4e" ></td>
+
</div>
−
</tr>
+
</div>
−
 
+
−
<tr align="center">
+
<div class="column third_size">
−
<td > #f65097 </td>
+
<div class="highlight border red">
−
<td > #ffda00 </td>
+
<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>
−
<td > #ef7622 </td>
+
</div>
−
<td > #0069a6 </td>
+
</div>
−
<td > #00afaa </td>
+
−
<td > #131c4e </td>
+
<div class="clear extra_space"></div>
−
</tr>
+
−
</table>
+
<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>
+
−
 
+
<div class="column quarter_size">
−
 
+
<div class="highlight border darkgreen">
−
<div class="clear extra_space"></div>
+
<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 class="line_divider"></div>
+
</div>
−
<div class="clear extra_space"></div>
+
</div>
−
 
+
−
 
+
<div class="column quarter_size">
−
 
+
<div class="highlight border teal">
−
<div class="column full_size">
+
<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>
−
<h2> Creating a new page </h2>
+
</div>
−
<p> Pages created in the 2021.igem.org website must follow a naming convention in order fit the website structure and to be reflected properly in the menu system. The naming convention should make them fall under these categories:</p>
+
</div>
−
<ul>
+
−
<li>About </li>
+
<div class="column quarter_size">
−
<li>Calendar </li>
+
<div class="highlight border yellow">
−
<li>Teams </li>
+
<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>
−
<li>Competition
+
</div>
−
<ul>
+
</div>
−
<li>Team Registration</li>
+
−
<li>Rules of Conduct</li>
+
−
<li>Deliverables </li>
+
<div class="clear extra_space"></div>
−
<li>Tracks </li>
+
−
</ul></li>
+
−
 
+
<div class="column quarter_size">
−
<li>Giant Jamboree </li>
+
<div class="highlight border coral">
−
<li>Judging </li>
+
<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>
−
<li>Safety</li>
+
</div>
−
<li>Human Practices </li>
+
</div>
−
<li>Measurement </li>
+
−
<li> Resources </li>
+
<div class="column quarter_size">
−
<ul><li>Cloning Help</li></ul>
+
<div class="highlight border purple">
−
<li>Sponsors
+
<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>
−
<ul> <li> Special Offers </li> </ul>
+
</div>
−
</li>
+
</div>
−
<li> Sitemap</li>
+
−
</ul>
+
−
 
+
<div class="column quarter_size">
−
<br><br>
+
<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>
−
<p> Here is an example for creating a new <b>application</b> page under the <b>Teams</b> namespace and within the <b>Mentorship</b> submenu: <br>
+
</div>
−
<b> 2021.igem.org/Teams/Mentorship/Apply </b>
+
</div>
−
</p>
+
−
 
+
<div class="column quarter_size">
−
<p> If a page that doesn't fall under the previous categories needs to be created, please contact Ana or Traci before creating said page. </p>
+
<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 class="clear extra_space"></div>
+
−
<div class="line_divider"></div>
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column full_size" id="menu">
+
−
<h2> Updating the Menu </h2>
+
−
<p>  
+
−
The 2021 Menu is loaded by the wiki template and the original code can be found here: <a href="https://2021.igem.org/HQ:Menu">https://2021.igem.org/HQ:Menu</a>
+
−
The code has been updated so you do not need to include ids for the menu to highlight the current page you are in. Remember to update the menu appropriately when you make a new page and be careful when adding, closing and opening submenus. </p>
+
−
</div>
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column quarter_size" id="adding_menu">
+
−
<h3> Adding a menu item </h3>
+
−
<p> The first tier of the menu is reserved for highly important pages, usually hubs that showcase the subpages within that namespace. To create a menu item on the first tier, you can use the following code. This example creates a menu button for "Colors". </p>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column three_quarter_size">
+
−
<div class="highlight gray">
+
−
<p>
+
−
&#60;div class="igem_menu_item"><br><br>
+
−
&#60;a href="https://2021.igem.org/Colors"><br>
+
−
&#60;div class="hub_icon"> <br>
+
−
&#60;img src="https://static.igem.org/mediawiki/2021/8/81/colors_icon.svg"><br>
+
−
&#60;/div> <br><br>
+
−
 
+
−
&#60;div class="hub_title"> <br>
+
−
COLORS<br>
+
−
&#60;/div> <br>
+
−
&#60;/a><br><br>
+
−
&#60;/div>
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
<div class="column quarter_size" id="adding_submenu">
+
−
<h3> Adding a submenu and submenu items</h3>
+
−
<p> To add another submenu page to the menu, just copy the following code and place it inside the desired submenu wrapper. In this example we are creating three subpages ("Yellow" and"Red") under the "Colors Hub" The "submenu_item subsection_title" class will create an empty button where you can place the title of that particular section of pages.
+
−
 
+
−
 
+
−
  </p>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column three_quarter_size">
+
−
<div class="highlight gray">
+
−
<p>
+
−
 
+
−
 
+
−
&#60;div class="igem_menu_item"><br><br>
+
−
&#60;a href="https://2021.igem.org/Colors"><br>
+
−
&#60;div class="hub_icon"> <br>
+
−
&#60;img src="https://static.igem.org/mediawiki/2021/8/81/colors_icon.svg"><br>
+
−
&#60;/div> <br><br>
+
−
 
+
−
&#60;div class="hub_title"> <br>
+
−
COLORS<br>
+
−
&#60;/div> <br>
+
−
&#60;/a><br><br>
+
−
 
+
−
 
+
−
<b> &#60;div class="submenu_access">&#60;/div><br>
+
−
 
+
−
&#60;div class="igem_submenu"><br><br>
+
−
 
+
−
&#60;div class="submenu_item subsection_title"> Warm Colors &#60;/div><br><br>
+
−
 
+
−
&#60;a href="https://2021.igem.org/Colors/Red"><br>
+
−
&#60;div class="submenu_item"><br>
+
−
Red<br>
+
−
&#60;/div><br>
+
−
&#60;/a><br><br>
+
−
 
+
−
&#60;a href="https://2021.igem.org/Colors/Yellow"><br>
+
−
&#60;div class="submenu_item"><br>
+
−
Yellow<br>
+
−
&#60;/div><br>
+
−
&#60;/a><br><br>
+
−
 
+
−
 
+
−
&#60;/div></b><br>
+
−
<br>
+
−
&#60;/div>
+
−
 
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column quarter_size" id="adding_menu">
+
−
<h3> Adding a subsubmenu and subsubmenu items </h3>
+
−
<p> If the subpage you created has pages under it, you will have to add a subsubmenu. First you need to indicate that the subpage, in this case we will use 'Reds' has a subsubmenu by adding the class "with_subsub_menu" and then you will have to follow a similar nesting process to adding a submenu. The following code shows the example of adding 'Colors/Reds/Scarlet'. </p>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column three_quarter_size">
+
−
<div class="highlight gray">
+
−
<p>
+
−
 
+
−
 
+
−
&#60;div class="igem_menu_item"><br><br>
+
−
&#60;a href="https://2021.igem.org/Colors"><br>
+
−
&#60;div class="hub_icon"> <br>
+
−
&#60;img src="https://static.igem.org/mediawiki/2021/8/81/colors_icon.svg"><br>
+
−
&#60;/div> <br><br>
+
−
 
+
−
&#60;div class="hub_title"> <br>
+
−
COLORS<br>
+
−
&#60;/div> <br>
+
−
&#60;/a><br><br>
+
−
 
+
−
 
+
−
&#60;div class="submenu_access">&#60;/div><br>
+
−
 
+
−
&#60;div class="igem_submenu"><br><br>
+
−
 
+
−
&#60;div class="submenu_item subsection_title"> Warm Colors &#60;/div><br><br>
+
−
 
+
−
&#60;a href="https://2021.igem.org/Colors/Reds"><br>
+
−
&#60;div class="submenu_item <b>with_subsub_menu</b>"><br>
+
−
Reds<br>
+
−
&#60;/div><br>
+
−
&#60;/a><br><br>
+
−
 
+
−
<b> &#60;div class="submenu_access">&#60;/div><br>
+
−
 
+
−
&#60;div class="igem_subsubmenu"><br><br>
+
−
 
+
−
&#60;a href="https://2021.igem.org/Colors/Reds/Scarlet"><br>
+
−
&#60;div class="subsubmenu_item"><br>
+
−
Scarlet<br>
+
−
&#60;/div><br>
+
−
&#60;/a><br>
+
−
 
+
−
&#60;/div></b> <br> </br>
+
−
 
+
−
&#60;a href="https://2021.igem.org/Colors/Yellow"><br>
+
−
&#60;div class="submenu_item"><br>
+
−
Yellow<br>
+
−
&#60;/div><br>
+
−
&#60;/a><br><br>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
&#60;/div><br>
+
−
<br>
+
−
&#60;/div>
+
−
 
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
<div class="line_divider"></div>
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
 
+
−
<div class="column full_size">
+
−
<h2 id="HTML"> HTML</h2>
+
−
<p> Hypertext Markup Language, or HTML, is a standardized system for tagging text to create font, color, graphic, and hyperlink styling on websites. Below we will go voer the general tags used to create a standard wiki page </p>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="column half_size" id="text">
+
−
<h3> Text </h3>
+
−
<p> To write text use the < p > tag </p>
+
−
</div>
+
−
 
+
−
<div class="column half_size">
+
−
<div class="highlight gray">
+
−
<p>
+
−
&#60;p&#62; Text  &#60;/p&#62;
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
 
+
−
<div class="column half_size" id="titles">
+
−
<h3> Titles </h3>
+
−
<p> You can add title using the  h tag, here is how the different sizes look:</p>
+
−
 
+
−
<h1> Title one </h1>
+
−
 
+
−
<h2> Title two </h2>
+
−
 
+
−
<h3> Title three </h3>
+
−
 
+
−
<h4> Title four </h4>
+
−
 
+
−
<h5> Title five </h5>
+
−
 
+
−
<h6> Title six </h6>
+
−
</div>
+
−
 
+
−
<div class="column half_size">
+
−
<div class="highlight gray">
+
−
<p>
+
−
&#60;h1&#62;Title one  &#60;/h1&#62; <br>
+
−
&#60;h2&#62;Title two &#60;/h2&#62; <br>
+
−
&#60;h3&#62;Title three  &#60;/h3&#62; <br>
+
−
&#60;h4&#62;Title four  &#60;/h4&#62; <br>
+
−
&#60;h5&#62;Title five  &#60;/h5&#62; <br>
+
−
&#60;h6&#62;Title six  &#60;/h6&#62; <br>
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column half_size" id="links">
+
−
<h3> Links </h3>
+
−
<p> When creating links use the < a > tag, links will display : <a href ="" > Example </a>  </p>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column half_size">
+
−
<div class="highlight gray">
+
−
<p>
+
−
&#60;a href="link url "&#62; LINK &#60;/a&#62;
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="clear"> </div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column half_size" id="images">
+
−
<h3> Images </h3>
+
−
<p> You can add images to your website by using the img tag, remember all your images must be hosted on the iGEM server. </p>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column half_size">
+
−
<div class="highlight gray">
+
−
<p>
+
−
&#60;img src="image URL "&#62;
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="clear"> </div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column half_size" id="unordered_list">
+
−
 
+
−
<h3> Unordered Lists </h3>
+
−
<p>Use the following example to create a simple list.  <br> <b> Painting materials: </b></p>
+
−
<ul>
+
−
 
+
−
  <li> Brushes </li>
+
−
  <li> Acrylic paint </li>
+
−
  <li> Watercolors </li>
+
−
 
+
−
</ul>
+
−
 
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column half_size">
+
−
<div class="highlight gray">
+
−
<p>
+
−
&#60;b&#62;Painting Materials&#60;/b&#62; <br>
+
−
 
+
−
&#60;ul&#62; <br>
+
−
 
+
−
&#60;li&#62; Brushes  &#60;/li&#62;  <br>
+
−
&#60;li&#62; Acrylic paint &#60;/li&#62;  <br>
+
−
&#60;li&#62; Watercolors &#60;/li&#62;  <br>
+
−
 
+
−
&#60;/ul&#62;
+
−
 
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="column half_size" id="ordered_list">
+
−
<h3> Numbered Lists </h3>
+
−
<p>To create an ordered list, use: <br>
+
−
<b> Things to buy: </b></p>
+
−
<ol>
+
−
 
+
−
  <li> Milk </li>
+
−
  <li> Eggs </li>
+
−
  <li> Flour </li>
+
−
</ol>
+
−
 
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column half_size">
+
−
<div class="highlight gray">
+
−
<p>
+
−
&#60;b&#62;Things to buy: &#60;/b&#62;  <br>
+
−
 
+
−
&#60;ol&#62; <br>
+
−
 
+
−
&#60;li&#62; Milk &#60;/li&#62;  <br>
+
−
&#60;li&#62; Eggs &#60;/li&#62; <br>
+
−
&#60;li&#62; Flour &#60;/li&#62; <br>
+
−
 
+
−
&#60;/ol&#62;
+
−
 
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column half_size" id="nested_list">
+
−
<h3> Nested  Lists </h3>
+
−
<p> Here is an example of a nested list. </p>
+
−
  <ul>
+
−
 
+
−
      <li> Cold Colors </li>
+
−
      <li> Warm Colors
+
−
        <ol>
+
−
            <li> Red </li>
+
−
            <li> Orange </li>
+
−
            <li> Yellow </li>
+
−
        </ol>
+
−
      </li>
+
−
 
+
−
  </ul>
+
−
</div>
+
−
 
+
−
<div class="column half_size">
+
−
<div class="highlight gray">
+
−
<p>
+
−
  &#60;ul&#62;<br>
+
−
 
+
−
      &#60;li&#62; Cold Colors &#60;/li&#62;  <br>
+
−
      &#60;li&#62; Warm Colors  <br>
+
−
        &#60;ol&#62; <br>
+
−
            &#60;li&#62; Red  &#60;/li&#62; <br>
+
−
            &#60;li&#62; Orange &#60;/li&#62; <br>
+
−
            &#60;li&#62; Yellow &#60;/li&#62;<br>
+
−
        &#60;/ol&#62; <br>
+
−
      &#60;/li&#62;<br>
+
−
 
+
−
  &#60;/ul&#62;
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
<div class="column half_size" id="table">
+
−
 
+
−
<h3> Tables</h3>
+
−
<p> Tables created within in a page already have styling and will display:</p>
+
−
<table>
+
−
<tr>
+
−
<th> Header 1  </th> <th> Header 2 </th>
+
−
</tr>
+
−
 
+
−
<tr>
+
−
<td> Content A 1 </td> <td>Content B 1 </td>
+
−
</tr>
+
−
 
+
−
<tr>
+
−
<td> Content A 2 </td> <td>Content B 2 </td>
+
−
</tr>
+
−
</table>
+
−
 
+
−
</div>
+
−
 
+
−
<div class="column half_size">
+
−
<br>
+
−
<div class="highlight gray">
+
−
<p>
+
−
&#60;table&#62;  <br>
+
−
 
+
−
&#60;tr&#62; <br>
+
−
&#60;th&#62;  Header 1  &#60;/th&#62;  &#60;th&#62;  Header 2 &#60;/th&#62;  <br>
+
−
&#60;/tr&#62;  <br>
+
−
 
+
−
&#60;tr&#62;  <br>
+
−
&#60;td&#62;  Content A 1 &#60;/td&#62;  &#60;td&#62; Content B 1 &#60;/td&#62;   <br>
+
−
&#60;/tr&#62;  <br>
+
−
 
+
−
&#60;tr&#62;  <br>
+
−
&#60;td&#62;  Content A 2 &#60;/td&#62;  &#60;td&#62; Content B 2 &#60;/td&#62;  <br>
+
−
&#60;/tr&#62; <br>
+
−
 
+
−
&#60;/table&#62;
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
<div class="line_divider"></div>
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
 
+
−
<div class="column full_size" id="layout_classes">
+
−
<h2>Layout classes</h2>
+
−
</div>
+
−
 
+
−
<div class="column half_size" id="columns">
+
−
<h3> Columns </h3>
+
−
<p> Layout classes will help structure your page. You will need to call it when you start your page to have the proper layout and make it responsive. There are four types of layout options, which vary between one column up to four in the same row. <br>
+
−
<ul>
+
−
<li> One column (100%) : class="column full_size" </li>
+
−
<li> Three quarters column  (75%) : class="column three_quarter_size" </li>
+
−
<li> Two thirds column (66%) : class="column two_thirds_size" </li>
+
−
<li> Two columns (50%) : class="column half_size" </li>
+
−
<li> Three columns (33%): class="column third_size" </li>
+
−
<li> Four columns (25%) : class="column quarter_size" </li>
+
−
</ul>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="column half_size">
+
−
<div class="highlight gray">
+
−
<p>
+
−
&#60;div class="column half_size" > <br>
+
−
&#60;p> Content goes here &#60;/p> <br>
+
−
&#60;/div>
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
<div class="column full_size">
+
−
<img src="https://placehold.it/1050x200">
+
−
</div>
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
<div class="column half_size">
+
−
<img src="https://placehold.it/550x200">
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column half_size">
+
−
<img src="https://placehold.it/550x200">
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
<div class="column quarter_size">
+
−
<img src="https://placehold.it/550x200">
+
−
</div>
+
−
 
+
−
<div class="column quarter_size">
+
−
<img src="https://placehold.it/550x200">
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column quarter_size">
+
−
<img src="https://placehold.it/550x200">
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column quarter_size">
+
−
<img src="https://placehold.it/550x200">
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
 
+
−
<div class="column quarter_size">
+
−
<img src="https://placehold.it/550x200">
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column three_quarter_size">
+
−
<img src="https://placehold.it/1050x115">
+
−
</div>
+
−
 
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
<div class="column third_size">
+
−
<img src="https://placehold.it/550x200">
+
−
</div>
+
−
 
+
−
<div class="column third_size">
+
−
<img src="https://placehold.it/550x200">
+
−
</div>
+
−
 
+
−
<div class="column third_size">
+
−
<img src="https://placehold.it/550x200">
+
−
</div>
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
<div class="column third_size">
+
−
<img src="https://placehold.it/550x200">
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column two_thirds_size">
+
−
<img src="https://placehold.it/1050x180">
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
<div class="line_divider"></div>
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
<div class="column full_size" id="support_classes">
+
−
<h2> Support Classes </h2>
+
−
</div>
+
−
 
+
−
<div class="column half_size"  id="highlight">
+
−
<h3> Highlight  </h3>
+
−
<p> Highlight will need to be declared inside another layout box, this highlight class will make the background gray and the size will be slightly smaller. </p>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column half_size">
+
−
<div class="highlight gray">
+
−
<p>
+
−
&#60;div class="column half_size" > <br>
+
−
&#60;div class="highlight"><br><br>
+
−
&#60;/div><br>
+
−
&#60;/div>
+
−
</p>
+
−
 
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
 
+
−
 
+
−
<div class="column half_size" id="styling_highlight">
+
−
<h3> Styling highlight class</h3>
+
−
<p> There are ways to style  the highlight class, you can add:</p>
+
−
 
+
−
<ul>
+
−
<li> <b> class="highlight gray" </b> to add a gray background </li>
+
−
<li> <b> class="highlight decoration_top"</b> to add a  decorative line on top </li>
+
−
<li> <b> class="highlight decoration_full" </b> to add a border around the div </li>
+
−
<li> <b> class="highlight decoration_red_top"</b> to add a  red line on top </li>
+
−
<li> <b> class="highlight decoration_red_full" </b> to add a red border around the div </li>
+
−
 
+
−
</ul>
+
−
 
+
−
<p> These classes can be combined to create different effects, as seen in the next examples.</p>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column quarter_size">
+
−
<div class="highlight decoration_full" >
+
−
<p>
+
−
&#60;div class="column quarter_size" > <br>
+
−
&#60;div class="highlight decoration_full"><br><br>
+
−
&#60;/div><br>
+
−
&#60;/div>
+
−
</p>
+
−
 
+
−
</div>
+
−
</div>
+
−
 
+
−
<div class="column quarter_size">
+
−
<div class="highlight gray decoration_top">
+
−
<p>
+
−
&#60;div class="column quarter_size" > <br>
+
−
&#60;div class="highlight gray decoration_top"><br><br>
+
−
&#60;/div><br>
+
−
&#60;/div>
+
−
</p>
+
−
 
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="column full_size">
+
−
<h3> Post items </h3>
+
−
<p> Post items is a class that has multiple purposes and can be styled and divided as needed.
+
−
They can be a standard way of highlighting information, making it easy to recognize types of announcements such as notes or alerts. They are also used as a structural type of class, to easily delineate between a list of items,for example meetups or news items.  
+
−
</p>
+
−
 
+
−
<p>The icons that can be used as part of the post item class are:</p>
+
−
 
+
−
<div class="highlight post_item">
+
−
   
+
−
  <div class="details "> <span class="icon announcement"></span> <div class="title">  announcement</div> </div>
+
−
    <div class="details "> <span class="icon alert"></span> <div class="title">  alert</div></div>
+
−
    <div class="details "> <span class="icon heart"></span> <div class="title"> heart </div></div>
+
−
    <div class="details "> <span class="icon note"></span> <div class="title"> note </div></div>
+
−
    <div class="details "> <span class="icon notice"></span> <div class="title"> notice</div></div>
+
−
    <div class="details "> <span class="icon reminder"></span> <div class="title"> reminder</div></div>
+
−
    <div class="details "> <span class="icon pinned"></span> <div class="title">  pinned</div></div>
+
−
    <div class="details "> <span class="icon why"></span> <div class="title">  why </div></div>
+
−
 
+
−
</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> SAME HEIGHT BOXES: ROW</h2>
 +
</div>
 +
  
−
<div class="column half_size">
+
−
 
+
<div class="row">
−
<div class="highlight post_item">
+
<div class="column half_size">
−
    <div class="details ">  
+
<div class="highlight border">
−
        <span class="icon announcement"></span>
+
<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 class="title"> Title  </div>  
+
</div>
−
        <div class="date"> Date </div>  
+
</div>
−
</div>
+
−
     
+
−
          <p>Description </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 class="column half_size">
+
</div>
−
<div class="highlight gray">
+
</div>
−
<p> &#60;div class="highlight post_item"><br>
+
−
    &#60;div class="details "> <br>
+
−
        &#60;span class="icon announcement">&#60;/span><br>
+
<div class="column quarter_size">
−
        &#60;div class="title"> Title  &#60;/div> <br>
+
<div class="highlight border">
−
        &#60;div class="date"> Date &#60;/div> <br>
+
<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>
−
&#60;/div><br>
+
</div>
−
     
+
</div>
−
          &#60;p>Description &#60;/p><br>
+
</div>
−
         
+
−
          &#60;/div>
+
−
</p>
+
<div class="clear extra_space"></div>
−
</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 class="clear"></div>
+
</div>
−
 
+
−
 
+
−
<div class="column half_size">
+
<div class="clear extra_space"></div>
−
<div class="highlight post_item">
+
−
    <div class="details">  
+
−
        <div class="title"> Title </div>  
+
−
        <div class="date"> Date </div>  
+
<div class="row">
−
</div>
+
<div class="column three_quarter_size">
−
     
+
<div class="highlight border">
−
          <div class="column quarter_size">
+
<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>
−
<p>25% </p>
+
</div>
−
        </div>
+
</div>
−
       
+
−
       
+
<div class="column quarter_size">
−
        <div class="column three_quarter_size">   
+
<div class="highlight border">
−
<p>65%</p>
+
<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="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>
−
       
+
 
<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>
 
  
−
<div class="column half_size">
+
−
 
+
−
<div class="highlight gray">
+
<div class="clear extra_space"></div>
−
<p>
+
<div class="clear extra_space"></div>
−
&#60;div class="highlight post_item"><br>
+
<div class="clear extra_space"></div>
−
    &#60;div class="details"> <br>
+
−
        &#60;div class="title"> Title &#60;/div> <br>
+
−
        &#60;div class="date"> Date &#60;/div> <br>
+
−
&#60;/div><br>
+
<div class="column full_size">
−
     
+
−
          &#60;div class="column quarter_size"><br>
+
<h1> CARROUSELS</h1>
−
&#60;p> 25% &#60;/p><br>
+
<div class="gallery carousel" id="one">
−
        &#60;/div><br>
+
−
       
+
<div class="content">
−
       
+
−
        &#60;div class="column three_quarter_size">  <br>
+
<div class="slide ">
−
&#60;p>65%&#60;/p><br>
+
<img src="https://via.placeholder.com/1000X201/ddd6d0/99948f">
−
&#60;/div><br>
+
</div>
−
       
+
<div class="slide">
−
&#60;div class="clear">&#60;/div><br>
+
<img src="https://via.placeholder.com/1000X202/ddd6d0/99948f">
−
 
+
−
&#60;/div>
+
−
 
+
−
 
+
−
</p>
+
−
 
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
<div class="column half_size" id="button">
+
−
<h3>Button </h3>
+
−
<p> You can use the button class to highlight a link in your wiki. </p>
+
−
 
+
−
 
+
−
<div class="button" >
+
−
<a href="">
+
−
REGISTER NOW!
+
−
</a>
+
−
</div>
+
−
 
+
−
 
+
−
</div>
+
−
 
+
−
<div class="column half_size">
+
−
 
+
−
 
+
−
 
+
−
<div class="highlight gray">
+
−
<p>
+
−
    &#60;div class="button"&#62;
+
−
      &#60;a href="URL"&#62;  <b>REGISTER NOW!</b> &#60;/a&#62;
+
−
    &#60;/div&#62;
+
−
</p>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
<div class="column half_size" id="clear">
+
−
<h3> Clear  </h3>
+
−
<p> This class clears the content, it is basically the same as clicking "enter" when you are writing a text.  <br>
+
−
If you add the "extra_space" class, it will add extra vertical spacing between your divs.
+
−
</p>
+
−
 
+
−
</div>
+
−
 
+
−
<div class="column half_size">
+
−
<br>
+
−
<div class="highlight gray">
+
−
<p>
+
−
    &#60;div class="clear extra_space"&#62; &#60;/div&#62;
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="column half_size">
+
−
 
+
−
<h3>line divider </h3>
+
−
<p>This class draws a line to more easily separate sections on a page. You can add <b>"soft"</b> or <b>"dark"</b> to make the line lighter or softer.<br>
+
−
This class should ideally be used in between <b>clear extra_space</b> to add the appropiate padding.</p>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column half_size">
+
−
<div class="highlight gray">
+
−
  <p>
+
−
    &#60;div class="clear extra_space"&#62; &#60;/div><br>
+
−
&#60;div class="line_divider"&#62; &#60;/div><br>
+
−
    &#60;div class="clear extra_space"&#62; &#60;/div>
+
−
    </p>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
 
+
−
<div class="column half_size" >
+
−
<h3> Calendar </h3>
+
−
<p> The Calendar uses a set of special classes that display and control the viewing of the deadlines in each month. Information is divided in the date of the event and the information pertinent to it. The following code shows how to create a month with one event, the final result can be seen bellow.
+
−
This class can also be use for expand and collapsing content.
+
−
</p>
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
<div class="collapsible_accordion">
+
−
 
+
−
<h1> MONTH <div class="collapsible_accordion_access content_control displaying_content"></div> </h1>
+
−
 
+
−
<div class="collapsible_accordion_content" >
+
−
 
+
−
<div class="deadline_date">
+
−
DATE
+
 
</div>
 
</div>
 +
<div class="slide">
 +
<img src="https://via.placeholder.com/1000X203/ddd6d0/99948f">
 +
</div>
 +
</div>
 +
 +
<div class="controls"></div>
 +
 +
  
−
<div class="deadline_content">
+
</div>
−
<H3> Title</H3>
+
−
<p> Description</p>
+
</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>
−
 
+
<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 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="highlight gray">
+
<div class="content">
−
<p>
+
<div class="slide">
−
 
+
<img src="https://via.placeholder.com/1000X201/ddd6d0/99948f">
−
&#60;div class="collapsible_accordion"><br>
+
</div>
−
 
+
<div class="slide">
−
&#60;h1> MONTH &#60;div class="collapsible_accordion_access content_control displaying_content">&#60;/div> &#60;/h1> <br>
+
<img src="https://via.placeholder.com/1000X202/ddd6d0/99948f">
−
 
+
</div>
−
&#60;div class="collapsible_accordion_content" ><br>
+
<div class="slide">
−
 
+
<img src="https://via.placeholder.com/1000X203/ddd6d0/99948f">
−
&#60;div class="deadline_date"><br>
+
</div>
−
DATE<br>
+
−
&#60;/div><br>
+
</div>
−
 
+
−
&#60;div class="deadline_content"><br>
+
−
&#60;H3> Title&#60;/H3> <br>
+
−
&#60;p> Description&#60;/p><br>
+
−
&#60;/div><br>
+
−
 
+
−
&#60;/div><br>
+
−
 
+
−
&#60;/div>
+
−
</p>
+
−
</div>
+
−
</div>
+
−
 
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
<div class="column half_size" >
+
−
<h3>Read more..</h3>
+
−
<p> This class hides text unless the user wishes to read more, therefore it should only be used when the content is not essential for the reader.
+
−
</p>
+
−
 
+
−
<br>
+
−
 
+
−
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
−
<span class="read_more_text">
+
−
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
−
</span>
+
−
<span class="read_more"></span>
+
−
</p>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column half_size" >
+
−
<div class="highlight gray">
+
−
<p>
+
−
 
+
−
&#60;p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br><br>
+
−
 
+
−
&#60;span class="read_more_text"><br>
+
−
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+
−
&#60;/span><br><br>
+
−
&#60;span class="read_more">&#60;/span><br>
+
−
&#60;/p>
+
−
 
+
−
 
+
−
</p>
+
−
</div>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<div class="column half_size" >
+
−
<h3> Image Slider </h3>
+
−
 
+
−
<p>Remember to keep the same number of items in both lists so the numbers match and work correctly.</p>
+
−
 
+
−
 
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
<div id="image_carrousel">
+
−
 
+
−
<ul class="image_slider" >
+
−
<li class="current_image"><img src="https://placehold.it/550x200"></li>
+
−
<li><img src="https://placehold.it/550x200"></li>
+
−
<li><img src="https://placehold.it/550x200"></li>
+
−
</ul>
+
−
 
+
−
<div class="image_controller prev"> </div>
+
−
<ul class="image_number">
+
−
<li class="current_image_number"> 1</li>
+
−
<li> 2</li>
+
−
<li> 3</li>
+
−
</ul>
+
−
<div class="image_controller next">  </div>
+
−
 
+
−
</div>
+
−
 
+
−
</div>
+
−
 
+
−
<div class="column half_size" >
+
−
<div class="highlight gray">
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<p>&#60;div id="image_carrousel"><br><br>
+
−
 
+
−
&#60;ul class="image_slider" ><br>
+
−
&#60;li class="current_image">&#60;img src="https://placehold.it/550x200">&#60;/li><br>
+
−
&#60;li>&#60;img src="https://placehold.it/550x200">&#60;/li><br>
+
−
&#60;li>&#60;img src="https://placehold.it/550x200">&#60;/li><br>
+
−
&#60;/ul><br><br>
+
−
 
+
−
&#60;div class="image_controller prev"> &#60;/div><br>
+
−
&#60;ul class="image_number"><br>
+
−
&#60;li class="current_image_number"> 1&#60;/li><br>
+
−
&#60;li> 2&#60;/li><br>
+
−
&#60;li> 3&#60;/li><br>
+
−
&#60;/ul><br><br>
+
−
 
+
−
&#60;div class="image_controller next">  &#60;/div><br>
+
−
 
+
−
&#60;/div></p>
+
−
 
+
−
</div>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
 
+
−
<div class="column half_size">
+
−
 
+
−
<h3>Image caption</h3>
+
−
<p>This class allows commenting on an image to further explain what is happening in the picture.</p>
+
−
 
+
−
<img src="https://placehold.it/550x200">
+
−
<p class="image_caption">This is caption for the image</p>
+
−
 
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<div class="column half_size">
+
−
<div class="highlight gray">
+
−
 
+
−
<p>
+
−
&#60;img src="https://placehold.it/550x200"><br>
+
−
&#60;p class="image_caption">This is caption for the image&#60;/p>
+
−
</p>
+
 
 
−
</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>
  
−
<div class="clear extra_space"></div>
+
<tr>
−
 
+
<th>Date </th>
−
 
+
<th>#</th>
−
<div class="column half_size">
+
</tr>
−
 
+
<tr>
−
<h3>On this page</h3>
+
<td class="date_timezone">06,09,1000,30</td>
−
<p> This class should be used on every page to give users an at a glance list of the topics covered on the page.
+
<td>1</td>
−
 
+
</tr>
−
<p><span class="on_page"></span><b>On this page</b> you will find information on:</p>
+
 
 
 +
<tr>
 +
<td class="date_timezone">06,09,0300,60</td>
 +
<td>2</td>
 +
</tr>
 
 
−
<p>For dividing the sections on the page, you should use the classes <b>clear extra_space</b> and <b>line divider</b> adding the section id to the last clear div. Below is an example.</p>
+
<tr>
−
 
+
<td class="date_timezone">06,09,1300,60</td>
−
  <p>
+
<td>3</td>
−
    &#60;div class="clear extra_space"&#62; &#60;/div><br>
+
</tr>
−
&#60;div class="line_divider"&#62; &#60;/div><br>
+
<tr>
−
    &#60;div class="clear extra_space"&#62; id="section" &#60;/div>
+
<td class="date_timezone">06,16,1000,30</td>
−
    </p>
+
<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>
 +
 +
  
−
</div>
 
−
 
−
 
−
<div class="column half_size">
 
−
<div class="highlight gray">
 
−
 
−
<p>
 
−
&#60;p><br>
 
−
&#60;span class="on_page">&#60;/span>&#60;b>On this page&#60;/b> <br>
 
−
you will find information on:<br>
 
−
&#60;a href="#link"> section 1 &#60;/a>, <br>
 
−
&#60;a href="#link"> section 2 &#60;/a>, and <br>
 
−
&#60;a href="#link"> section 3 &#60;/a>.<br>
 
−
&#60;/p>
 
−
</p>
 
−
 
−
</div>
 
−
</div>
 
−
 
−
 
−
 
−
<div class="clear extra_space"></div>
 
−
 
−
 
−
<div class="column half_size">
 
−
 
−
<h3>Center content </h3>
 
−
<p>This class can help center content, it should be used instead the "center" tag, as this is a deprecreated tag in html. </p>
 
−
 
−
 
−
<p class="center_content">Centered Text</p>
 
−
 
−
<h1 class="center_content">Centered title</h1>
 
−
 
−
</div>
 
−
 
−
 
−
<div class="column half_size">
 
−
<div class="highlight gray">
 
−
 
−
<p>
 
−
&#60;p class="center_content">Centered Text&#60;/p>
 
−
<br><br>
 
−
&#60;h1 class="center_content">Centered title&#60;/h1>
 
−
 
−
</p>
 
−
</div>
 
−
</div>
 
−
 
−
 
−
 
−
<div class="clear extra_space"></div>
 
−
 
−
 
−
<div class="column half_size">
 
−
 
−
<h3>Multiple links</h3>
 
−
<p> This class should be used when a lot of links are being used in a list, for example the list of tracks.  </p>
 
−
<br>
 
−
<div class="multiple_links">
 
−
 
−
<h5> List of links </h5>
 
−
<ul>
 
−
<li><a href="link url"> Link 1</a></li>
 
−
<li><a href="link url"> Link 2</a></li>
 
−
<li><a href="link url"> Link 3</a></li>
 
−
</ul>
 
−
 
−
</div>
 
−
 
−
</div>
 
−
 
−
 
−
<div class="column half_size">
 
−
<div class="highlight gray">
 
−
<p>
 
−
&#60;div class="multiple_links">
 
−
<br><br>
 
−
&#60;h5> List of links &#60;/h5><br><br>
 
−
&#60;ul><br>
 
−
&#60;li>&#60;a href="link url"> Link 1&#60;/a>&#60;/li><br>
 
−
&#60;li>&#60;a href="link url"> Link 2&#60;/a>&#60;/li><br>
 
−
&#60;li>&#60;a href="link url"> Link 3&#60;/a>&#60;/li><br>
 
−
&#60;/ul> <br><br>
 
−
 
−
&#60;/div>
 
−
</p>
 
−
</div>
 
−
</div>
 
−
 
−
 
−
 
−
 
−
 
−
<div class="clear extra_space"></div>
 
−
 
−
 
−
<div class="column half_size">
 
−
 
−
<h3>Red text</h3>
 
−
<p> Red text can be used to highlight text that is crucial for users to read. For example:</p>
 
−
 
−
<p class="red_text">Make sure to follow the Safety rules!</p>
 
−
</div>
 
−
 
−
 
−
<div class="column half_size">
 
−
<div class="highlight gray">
 
−
  <p>
 
−
    &#60;div class="red_text"&#62; Make sure to follow the Safety rules! &#60;/div>
 
−
</p>
 
−
</div>
 
−
</div>
 
−
 
−
 
−
 
−
 
−
 
−
<div class="clear extra_space"></div>
 
−
 
−
 
−
<div class="column half_size">
 
−
 
−
<h3>Navigation Support</h3>
 
−
<p>This class can be used for navigating between pages in a Hub. This is used in the Competition Hub to browse between the team requirements. The structure is the following: Main link (either to the main hub or a particular section) and then links in a list adding the class <b>active_navigation_button</b> to the current page. See the example below.
 
−
<br><br>
 
−
The goal will be to make this code automatically recognize which page it is currently.*
 
−
</p>
 
−
 
−
<div class="column full_size  navigation_support">
 
−
 
−
<a href="url">
 
−
<div class="navigation_support_title"> 
 
−
MAIN LINK
 
−
</div>
 
−
</a>
 
−
 
−
<a href="url">
 
−
<div class="navigation_button active_navigation_button">
 
−
1 
 
−
<div class="title_extra" > Link 1 </div>
 
−
</div>
 
−
</a>
 
−
 
−
<a href="url">
 
−
<div class="navigation_button" >
 
−
2 
 
−
</div>
 
−
<div class="title_extra"> Link 2 </div>
 
−
</a>
 
−
 
−
 
−
</div>
 
−
 
−
 
−
</div>
 
−
 
−
 
−
<div class="column half_size">
 
−
<div class="highlight gray">
 
−
 
−
<p>
 
−
&#60;div class="column full_size  navigation_support"><br>
 
−
<br>
 
−
&#60;a href="https://2021.igem.org/Competition#requirements"><br>
 
−
&#60;div class="navigation_support_title">  <br>
 
−
MAIN LINK<br>
 
−
&#60;/div><br>
 
−
&#60;/a><br>
 
−
<br>
 
−
&#60;a href="url"><br>
 
−
&#60;div class="navigation_button active_navigation_button"><br>
 
−
1  <br>
 
−
&#60;div class="title_extra" > Link 1 &#60;/div><br>
 
−
&#60;/div><br>
 
−
&#60;/a><br>
 
−
<br>
 
−
&#60;a href="url"><br>
 
−
&#60;div class="navigation_button" > <br>
 
−
2  <br>
 
−
&#60;/div><br>
 
−
&#60;div class="title_extra"> Link 2 &#60;/div><br>
 
−
&#60;/a><br>
 
−
<br>
 
−
&#60;/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 class="clear extra_space"></div>
+
−
 
+
</div>
−
 
+
</div>
−
<div id="HQ_info">
+
−
<div class="column half_size">
+
−
<h3>Hidding content </h3>
+
−
<p>If content needs to be hidden for general users while it is being worked on, you can place said section in the <b>HQ_info</b> id. For example this section can only be viewed by members of HQ. </p>
+
−
</div>
+
−
 
+
−
<div class="column half_size">
+
−
<div class="highlight gray">
+
−
 
+
−
<p>&#60;div id="HQ_info"><br><br>
+
−
 
+
−
&#60;p> Content will be hidden inside this div &#60;/p> <br><br>
+
−
 
+
−
&#60;/div>
+
−
</p>
+
−
 
+
−
</div>
+
−
</div>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<!------------------------------------------------------------------------------------------------->
+
−
 
+
−
 
+
−
<div class="clear extra_space"></div>
+
−
<div class="line_divider"></div>
+
−
<div class="clear extra_space"></div>
+
−
 
+
−
<div class="column full_size" id="svgs">
+
−
 
+
−
<!-- SVG Email -->
+
−
 
+
−
<svg enable-background="new 0 0 250 250" version="1.1" viewBox="0 0 250 250" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" height="35px">
+
−
<style type="text/css"> .st0{fill:#131C4E;} </style>
+
−
<path class="st0" d="m125 33c-50.8 0-92 41.2-92 92s41.2 92 92 92 92-41.2 92-92-41.2-92-92-92zm-44.8 66.6c2.2-5.4 7.6-8.8 13.4-8.6h31.3 31.3c5.8-0.2 11.1 3 13.5 8.3 0.8 1.1 0.6 2.7-0.6 3.5-0.2 0.2-0.5 0.3-0.8 0.4l-41.5 21.6c-1.1 0.6-2.4 0.6-3.4 0l-42-21.8c-1.2-0.3-1.8-1.6-1.5-2.7 0.1-0.3 0.2-0.6 0.3-0.7zm90.5 47.6c-1.1 6.9-7.1 12-14.1 11.8h-25.6-37.4c-6.6 0.1-12.4-4.2-14-10.5-0.3-1.2-0.5-2.4-0.5-3.7v-30c0-2.6 1.6-3.6 4-2.4 13.1 6.8 26.1 13.6 39.2 20.4 1.8 1.1 4 1.1 5.8 0 13-6.8 26-13.6 39-20.2 0.4-0.2 0.8-0.4 1.2-0.5 1.1-0.4 2.4 0.2 2.8 1.4 0.1 0.3 0.1 0.7 0.1 1v26c-0.1 2.2-0.2 4.5-0.5 6.7z"/> </svg>
+
−
 
+
−
<!-- SVG  location -->
+
−
<svg enable-background="new 0 0 250 250" version="1.1" viewBox="0 0 250 250" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" height="35px">
+
−
<style type="text/css"> .st0{fill:#131C4E;}</style> <circle class="st0" cx="125" cy="104.1" r="17.9"/> <path class="st0" d="m125 33c-50.8 0-92 41.2-92 92s41.2 92 92 92 92-41.2 92-92-41.2-92-92-92zm31.6 98l-31.6 53.7-31.6-53.7c-3.7-6.4-7.2-17.3-7.2-25.4 0-22.2 17.4-40.3 38.8-40.3s38.8 18 38.8 40.3c0 8-3.5 19-7.2 25.4z"/></svg>
+
−
 
+
−
 
+
−
<!-- SVG phone -->
+
−
 
+
−
<svg enable-background="new 0 0 250 250" version="1.1" viewBox="0 0 250 250" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"  height="35px">
+
−
<style type="text/css"> .st0{fill:#131C4E;} </style><path class="st0" d="m125 33c-50.8 0-92 41.2-92 92s41.2 92 92 92 92-41.2 92-92-41.2-92-92-92zm49.4 135l-7.5 7.5c-1.4 1.3-5.3 2.2-5.4 2.2-23.7 0.2-46.5-9.1-63.3-25.9-16.8-16.9-26.1-39.8-25.8-63.6 0 0 0.9-3.8 2.2-5.1l7.5-7.5c2.7-2.7 8-4 11.7-2.8l1.6 0.5c3.7 1.3 7.5 5.3 8.5 9.1l3.8 13.8c1 3.8-0.4 9.1-3.1 11.9l-5 5c4.9 18.2 19.2 32.5 37.3 37.4l5-5c2.7-2.8 8.1-4.1 11.8-3.1l13.9 3.8c3.8 1 7.8 4.9 9 8.6l0.6 1.6c1.2 3.6 0 8.8-2.8 11.6z"/>
+
−
</svg>
+
−
 
+
−
 
+
−
<!-- SVG Facebook-->
+
−
 
+
−
<svg enable-background="new 0 0 250 250" version="1.1" viewBox="0 0 250 250" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" height="35px">
+
−
<style type="text/css"> .st0{fill:#131C4E;} </style><path class="st0" d="M199.7,13H50.3C29.7,13,13,29.7,13,50.3v149.3c0,20.7,16.7,37.3,37.3,37.3h149.3c20.7,0,37.3-16.7,37.3-37.3    V50.3C237,29.7,220.3,13,199.7,13z M212.1,199.7c0,7-5.5,12.4-12.4,12.4H50.3c-7,0-12.4-5.5-12.4-12.4V50.3    c0-7,5.5-12.4,12.4-12.4h149.3c7,0,12.4,5.5,12.4,12.4v149.4H212.1z"/><path class="st0" d="m132.9 118.7h-14v-22.6h14v-9.8c0-19.6 9.8-29.4 29.4-29.4h18.9v24.5h-9.2c-6.5 0-9.8 4.9-9.8 14.7h17.8v22.5h-17.8v75.4h-29.4l0.1-75.3z"/></svg>
+
−
 
+
−
<!-- SVG twitter -->
+
−
 
+
−
<svg enable-background="new 0 0 250 250" version="1.1" viewBox="0 0 250 250" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" height="25px">
+
−
<style type="text/css"> .st0{fill:#131C4E;} </style> <path class="st0" d="m231.7 67.3c-7.1 3.3-14.8 5.9-22.6 7.4-7.8-12.6-20.8-21.5-35.6-23.8-2.6-0.4-5.2-0.7-7.8-0.7-25.2 0-46.4 18.2-50.1 43.1-0.4 2.6-0.7 5.6-0.7 8.2-29.1-10.8-52.9-32.4-66.2-60.6-0.7-1.5-2.2-2.2-3.7-2.6-1.5 0-3 0.7-4.1 1.9-8.5 13-10.8 28.6-6.3 43.1-0.7 0-1.5-0.4-1.9 0-1.9 0.4-3 1.5-3.3 3.3-4.1 15.6 0 32.3 9.7 44.5-1.1 0-1.9 0.4-2.6 1.1-1.5 1.1-1.9 3-1.5 4.5 4.1 16 15.6 29 30.4 34.5-15.6 5.6-31.9 7.8-48.6 6.7-1.9 0-3.7 1.1-4.5 3s0 3.7 1.5 5.2c16.7 12.6 36.4 20.8 57.2 24.1 6.7 1.1 13 1.5 19.7 1.5 57.2 0 107.6-38.2 122.9-93.2 1.1-3 1.9-6.3 2.2-9.3 0-0.7 0.4-1.5 0.4-2.2 0.4-1.1 0.4-2.2 0.7-3.3 8.5-8.9 15.6-18.9 20.8-30.1 0.7-1.5 0.4-3.7-0.7-4.8-1.6-1.9-3.8-2.3-5.3-1.5zm-57.9 25.2c-4.8-0.7-8.2-5.2-7.4-10 0.7-4.8 5.2-8.2 10-7.4s8.2 5.2 7.4 10-5.2 8.2-10 7.4z"/> </svg>
+
−
 
+
−
 
+
−
<!-- SVG instagram-->
+
−
<svg enable-background="new 0 0 250 250" version="1.1" viewBox="0 0 250 250" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"  height="25px">
+
−
<style type="text/css"> .st0{fill:#131C4E;} </style><path class="st0" d="m199.7 13h-149.4c-20.6 0-37.3 16.7-37.3 37.3v149.3c0 20.7 16.7 37.3 37.3 37.3h149.3c20.7 0 37.3-16.7 37.3-37.3v-149.3c0.1-20.6-16.6-37.3-37.2-37.3zm12.4 186.7c0 7-5.5 12.4-12.4 12.4h-149.4c-7 0-12.4-5.5-12.4-12.4v-87.1h39.1c-1 4-1.7 8.2-1.7 12.4 0 27.4 22.4 49.8 49.8 49.8s49.8-22.4 49.8-49.8c0-4.2-0.5-8.5-1.7-12.4h39.1v87.1h-0.2zm-112-74.7c0-13.7 11.2-24.9 24.9-24.9s24.9 11.2 24.9 24.9-11.2 24.9-24.9 24.9-24.9-11.2-24.9-24.9zm112-37.3h-54.3c-8.7-7.7-20.2-12.4-32.9-12.4s-24 4.7-32.8 12.4h-54.2v-37.4c0-7 5.5-12.4 12.4-12.4h149.3c7 0 12.4 5.5 12.4 12.4v37.4h0.1z"/><rect class="st0" x="174.8" y="50.3" width="24.9" height="24.9"/> </svg>
+
−
 
+
−
 
+
−
 
+
−
<div class="clear"></div>
+
−
 
+
−
<img src="https://static.igem.org/mediawiki/2021/7/7d/On_this_page.svg" height="30px">
+
−
 
+
−
 
+
−
</div>
+
  
 +
  
−
</div>
 
−
</div>
 
−
</div>
 
  
 
</html>
 
</html>
 
{{Footer2021}}
 
{{Footer2021}}

Revision as of 21:21, 16 February 2021

CALENDAR
Meetups & Events
Opening Weekend Festival ⇗
TEAMS
Certificates ⇗
Judging Feedback ⇗
iGEM 2021 Survey ⇗
Team Grants
Impact Grant
Safety & Security Grant
Team Information
Team List ⇗
Team Wikis ⇗
Team Parts ⇗
Community
Collaborations
Mentorship
iGEM Global Slack
Ambassadors
Ambassador / Team Calls
News Archive
Quick Links
Create an Account ⇗
Join a Team ⇗
COMPETITION
Register A Team
Team Fee
Handbook
Consent Forms
Commercial Teams
2021 Requirements
Team Requirements
Rules of Conduct
Responsible Conduct
Deliverables
Safety Forms
Promotion Video
Team Wiki
Team Poster
Team Presentation
Judging Form
Project Attribution
Part Pages
Project Description
Title and Abstract
Track Selection
Team Roster
Other Information
About Tracks
Diagnostics
Energy
Environment
Food and Nutrition
Foundational Advance
Hardware
High School
Information Processing
Manufacturing
New Application
Open
Software
Therapeutics
Two-Phase Projects
Distribution Kit
GIANT JAMBOREE ⇗
Team Registration
Judging Sessions
Team Information
Volunteer
JUDGING
For Teams
Introduction
Medals
Awards
Pages for Awards
Rubric
Judging Form ⇗
Other Information
Committees
For Judges
Resources
Application
Judging Handbook
SAFETY
Online Events
Workshops
Requirements
Working Safely
Rules
Policies
Coronavirus
Do Not Release
Roles
Committee
Tools
Risk Groups
White List
Risk Assessment Tool
Environmental Samples
Exemplary Projects
Forms
Safety Form
Check In Form
Animal Use Form
HUMAN PRACTICES
Introduction
FAQ
Resources
Examples
History
Committee
ENGINEERING
Introduction
Design
Build
Test
Learn
Exemplary Projects
Committee
StackExchange
Online Events
Webinars
DIVERSITY
Introduction
Gender Diversity
Committee
Recommendations
Examples
Black Lives Matter
VIDEOS
Video Universe ⇗
Production
Wiki
Examples
RESOURCES
General
Navigating iGEM
Tips for Teams
Start a Team
Funding
FAQ
SDGs
Wet and Dry Lab
Cloning Help
Transformations
Digests & Ligations
Parts Registry ⇗
Software Tools
Documentation
Telling your Story
Wiki Editing Help
HTML CSS Javascript
Template Documentation

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.

BUTTON / DEFAULT
BUTTON LIGHT
BUTTON DARK
BUTTON ORANGE
BUTTON PURPLE
BUTTON WINE
BUTTON CORAL
BUTTON TEAL
BUTTON LIGHT GREEN
BUTTON DARK GREEN
BUTTON YELLOW

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.

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

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.

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

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.

Quicklinks

Main Page
Competition Requirements
News
Calendar
Events
Sponsor Offers
Collaborations
Resources Hub
Sitemap

Keep in touch!




Join Slack:

Stay up to date with our newsletter:

SUBSCRIBE