Difference between revisions of "Team:Baltimore Bio-Crew/Description"

(Prototype team page)
 
Line 1: Line 1:
 
{{Baltimore_Bio-Crew}}
 
{{Baltimore_Bio-Crew}}
 +
{{Team:Baltimore Bio-Crew/CSS}}
 +
 +
<!--
 +
Dimension by HTML5 UP
 +
html5up.net | @ajlkn
 +
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 +
-->
 
<html>
 
<html>
 +
<head>
 +
<title>Dimension by HTML5 UP</title>
 +
<meta charset="utf-8" />
 +
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 +
<link rel="stylesheet" href="assets/css/main.css" />
 +
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
 +
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
 +
</head>
 +
<body>
 +
 +
<!-- Wrapper -->
 +
<div id="wrapper">
 +
 +
<!-- Header -->
 +
<header id="header">
 +
<div class="logo">
 +
<span class="icon fa-diamond"></span>
 +
</div>
 +
<div class="content">
 +
<div class="inner">
 +
<h1>Dimension</h1>
 +
<p>A fully responsive site template designed by <a href="https://html5up.net">HTML5 UP</a> and released<br />
 +
for free under the <a href="https://html5up.net/license">Creative Commons</a> license.</p>
 +
</div>
 +
</div>
 +
<nav>
 +
<ul>
 +
<li><a href="https://2017.igem.org/Team:Baltimore_Bio-Crew">Home</a></li>
 +
<li><a href="https://2017.igem.org/Team:Baltimore_Bio-Crew">Project</a></li>
 +
<li><a href="#about">Composite Parts</a></li>
 +
<li><a href="#contact">Notebook</a></li>
 +
<li><a href="#elements">Experiment</a> </li>
 +
<li><a href="https://2017.igem.org/Team:Baltimore_Bio-Crew">Safety</a></li>
 +
<li><a href="#about">Attribution</a></li>
 +
<li><a href="#contact">Human Practice</a></li>
 +
<li><a href="#elements">Team</a> </li>
 +
 +
</ul>
 +
</nav>
 +
</header>
 +
 +
<!-- Main -->
 +
<div id="main">
 +
 +
<!--<!-- Intro -->
 +
<article id="intro">
 +
<h2 class="major">Intro</h2>
 +
<span class="image main"><img src="images/pic01.jpg" alt="" /></span>
 +
<p>Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. By the way, check out my <a href="#work">awesome work</a>.</p>
 +
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.</p>
 +
</article>-->
  
 +
<!-- Work -->
 +
<article id="work">
 +
<h2 class="major">Work</h2>
 +
<span class="image main"><img src="images/pic02.jpg" alt="" /></span>
 +
<p>Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices.</p>
 +
<p>Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus amet feugiat tempus.</p>
 +
</article>
  
 +
<!-- About -->
 +
<article id="about">
 +
<h2 class="major">About</h2>
 +
<span class="image main"><img src="images/pic03.jpg" alt="" /></span>
 +
<p>Lorem ipsum dolor sit amet, consectetur et adipiscing elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices. Aliquam libero et malesuada fames ac ante ipsum primis in faucibus. Cras viverra ligula sit amet ex mollis mattis lorem ipsum dolor sit amet.</p>
 +
</article>
  
−
<div class="column full_size">
+
<!-- Contact -->
−
<h1>Description</h1>
+
<article id="contact">
 +
<h2 class="major">Contact</h2>
 +
<form method="post" action="#">
 +
<div class="field half first">
 +
<label for="name">Name</label>
 +
<input type="text" name="name" id="name" />
 +
</div>
 +
<div class="field half">
 +
<label for="email">Email</label>
 +
<input type="text" name="email" id="email" />
 +
</div>
 +
<div class="field">
 +
<label for="message">Message</label>
 +
<textarea name="message" id="message" rows="4"></textarea>
 +
</div>
 +
<ul class="actions">
 +
<li><input type="submit" value="Send Message" class="special" /></li>
 +
<li><input type="reset" value="Reset" /></li>
 +
</ul>
 +
</form>
 +
<ul class="icons">
 +
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
 +
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
 +
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
 +
<li><a href="#" class="icon fa-github"><span class="label">GitHub</span></a></li>
 +
</ul>
 +
</article>
  
−
<p>Tell us about your project, describe what moves you and why this is something important for your team.</p>
+
<!-- Elements -->
 +
<article id="elements">
 +
<h2 class="major">Elements</h2>
  
 +
<section>
 +
<h3 class="major">Text</h3>
 +
<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
 +
This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
 +
This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>. Finally, <a href="#">this is a link</a>.</p>
 +
<hr />
 +
<h2>Heading Level 2</h2>
 +
<h3>Heading Level 3</h3>
 +
<h4>Heading Level 4</h4>
 +
<h5>Heading Level 5</h5>
 +
<h6>Heading Level 6</h6>
 +
<hr />
 +
<h4>Blockquote</h4>
 +
<blockquote>Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.</blockquote>
 +
<h4>Preformatted</h4>
 +
<pre><code>i = 0;
  
−
<h5>What should this page contain?</h5>
+
while (!deck.isInOrder()) {
−
<ul>
+
    print 'Iteration ' + i;
−
<li> A clear and concise description of your project.</li>
+
    deck.shuffle();
−
<li>A detailed explanation of why your team chose to work on this particular project.</li>
+
    i++;
−
<li>References and sources to document your research.</li>
+
}
−
<li>Use illustrations and other visual resources to explain your project.</li>
+
−
</ul>
+
  
 +
print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
 +
</section>
  
−
</div>
+
<section>
 +
<h3 class="major">Lists</h3>
  
−
<div class="column full_size" >
+
<h4>Unordered</h4>
 +
<ul>
 +
<li>Dolor pulvinar etiam.</li>
 +
<li>Sagittis adipiscing.</li>
 +
<li>Felis enim feugiat.</li>
 +
</ul>
  
−
<h5>Advice on writing your Project Description</h5>
+
<h4>Alternate</h4>
 +
<ul class="alt">
 +
<li>Dolor pulvinar etiam.</li>
 +
<li>Sagittis adipiscing.</li>
 +
<li>Felis enim feugiat.</li>
 +
</ul>
  
−
<p>
+
<h4>Ordered</h4>
−
We encourage you to put up a lot of information and content on your wiki, but we also encourage you to include summaries as much as possible. If you think of the sections in your project description as the sections in a publication, you should try to be consist, accurate and unambiguous in your achievements.  
+
<ol>
−
</p>
+
<li>Dolor pulvinar etiam.</li>
 +
<li>Etiam vel felis viverra.</li>
 +
<li>Felis enim feugiat.</li>
 +
<li>Dolor pulvinar etiam.</li>
 +
<li>Etiam vel felis lorem.</li>
 +
<li>Felis enim et feugiat.</li>
 +
</ol>
 +
<h4>Icons</h4>
 +
<ul class="icons">
 +
<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
 +
<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
 +
<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
 +
<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
 +
</ul>
  
−
<p>
+
<h4>Actions</h4>
−
Judges like to read your wiki and know exactly what you have achieved. This is how you should think about these sections; from the point of view of the judge evaluating you at the end of the year.
+
<ul class="actions">
−
</p>
+
<li><a href="#" class="button special">Default</a></li>
 +
<li><a href="#" class="button">Default</a></li>
 +
</ul>
 +
<ul class="actions vertical">
 +
<li><a href="#" class="button special">Default</a></li>
 +
<li><a href="#" class="button">Default</a></li>
 +
</ul>
 +
</section>
  
−
</div>
+
<section>
 +
<h3 class="major">Table</h3>
 +
<h4>Default</h4>
 +
<div class="table-wrapper">
 +
<table>
 +
<thead>
 +
<tr>
 +
<th>Name</th>
 +
<th>Description</th>
 +
<th>Price</th>
 +
</tr>
 +
</thead>
 +
<tbody>
 +
<tr>
 +
<td>Item One</td>
 +
<td>Ante turpis integer aliquet porttitor.</td>
 +
<td>29.99</td>
 +
</tr>
 +
<tr>
 +
<td>Item Two</td>
 +
<td>Vis ac commodo adipiscing arcu aliquet.</td>
 +
<td>19.99</td>
 +
</tr>
 +
<tr>
 +
<td>Item Three</td>
 +
<td> Morbi faucibus arcu accumsan lorem.</td>
 +
<td>29.99</td>
 +
</tr>
 +
<tr>
 +
<td>Item Four</td>
 +
<td>Vitae integer tempus condimentum.</td>
 +
<td>19.99</td>
 +
</tr>
 +
<tr>
 +
<td>Item Five</td>
 +
<td>Ante turpis integer aliquet porttitor.</td>
 +
<td>29.99</td>
 +
</tr>
 +
</tbody>
 +
<tfoot>
 +
<tr>
 +
<td colspan="2"></td>
 +
<td>100.00</td>
 +
</tr>
 +
</tfoot>
 +
</table>
 +
</div>
  
 +
<h4>Alternate</h4>
 +
<div class="table-wrapper">
 +
<table class="alt">
 +
<thead>
 +
<tr>
 +
<th>Name</th>
 +
<th>Description</th>
 +
<th>Price</th>
 +
</tr>
 +
</thead>
 +
<tbody>
 +
<tr>
 +
<td>Item One</td>
 +
<td>Ante turpis integer aliquet porttitor.</td>
 +
<td>29.99</td>
 +
</tr>
 +
<tr>
 +
<td>Item Two</td>
 +
<td>Vis ac commodo adipiscing arcu aliquet.</td>
 +
<td>19.99</td>
 +
</tr>
 +
<tr>
 +
<td>Item Three</td>
 +
<td> Morbi faucibus arcu accumsan lorem.</td>
 +
<td>29.99</td>
 +
</tr>
 +
<tr>
 +
<td>Item Four</td>
 +
<td>Vitae integer tempus condimentum.</td>
 +
<td>19.99</td>
 +
</tr>
 +
<tr>
 +
<td>Item Five</td>
 +
<td>Ante turpis integer aliquet porttitor.</td>
 +
<td>29.99</td>
 +
</tr>
 +
</tbody>
 +
<tfoot>
 +
<tr>
 +
<td colspan="2"></td>
 +
<td>100.00</td>
 +
</tr>
 +
</tfoot>
 +
</table>
 +
</div>
 +
</section>
  
−
<div class="column half_size" >
+
<section>
 +
<h3 class="major">Buttons</h3>
 +
<ul class="actions">
 +
<li><a href="#" class="button special">Special</a></li>
 +
<li><a href="#" class="button">Default</a></li>
 +
</ul>
 +
<ul class="actions">
 +
<li><a href="#" class="button">Default</a></li>
 +
<li><a href="#" class="button small">Small</a></li>
 +
</ul>
 +
<ul class="actions">
 +
<li><a href="#" class="button special icon fa-download">Icon</a></li>
 +
<li><a href="#" class="button icon fa-download">Icon</a></li>
 +
</ul>
 +
<ul class="actions">
 +
<li><span class="button special disabled">Disabled</span></li>
 +
<li><span class="button disabled">Disabled</span></li>
 +
</ul>
 +
</section>
  
−
<h5>References</h5>
+
<section>
−
<p>iGEM teams are encouraged to record references you use during the course of your research. They should be posted somewhere on your wiki so that judges and other visitors can see how you thought about your project and what works inspired you.</p>
+
<h3 class="major">Form</h3>
 +
<form method="post" action="#">
 +
<div class="field half first">
 +
<label for="demo-name">Name</label>
 +
<input type="text" name="demo-name" id="demo-name" value="" placeholder="Jane Doe" />
 +
</div>
 +
<div class="field half">
 +
<label for="demo-email">Email</label>
 +
<input type="email" name="demo-email" id="demo-email" value="" placeholder="jane@untitled.tld" />
 +
</div>
 +
<div class="field">
 +
<label for="demo-category">Category</label>
 +
<div class="select-wrapper">
 +
<select name="demo-category" id="demo-category">
 +
<option value="">-</option>
 +
<option value="1">Manufacturing</option>
 +
<option value="1">Shipping</option>
 +
<option value="1">Administration</option>
 +
<option value="1">Human Resources</option>
 +
</select>
 +
</div>
 +
</div>
 +
<div class="field half first">
 +
<input type="radio" id="demo-priority-low" name="demo-priority" checked>
 +
<label for="demo-priority-low">Low</label>
 +
</div>
 +
<div class="field half">
 +
<input type="radio" id="demo-priority-high" name="demo-priority">
 +
<label for="demo-priority-high">High</label>
 +
</div>
 +
<div class="field half first">
 +
<input type="checkbox" id="demo-copy" name="demo-copy">
 +
<label for="demo-copy">Email me a copy</label>
 +
</div>
 +
<div class="field half">
 +
<input type="checkbox" id="demo-human" name="demo-human" checked>
 +
<label for="demo-human">Not a robot</label>
 +
</div>
 +
<div class="field">
 +
<label for="demo-message">Message</label>
 +
<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
 +
</div>
 +
<ul class="actions">
 +
<li><input type="submit" value="Send Message" class="special" /></li>
 +
<li><input type="reset" value="Reset" /></li>
 +
</ul>
 +
</form>
 +
</section>
  
−
</div>
+
</article>
  
 +
</div>
  
−
<div class="column half_size" >
+
<!-- Footer -->
−
<h5>Inspiration</h5>
+
<footer id="footer">
−
<p>See how other teams have described and presented their projects: </p>
+
<p class="copyright">&copy; Untitled. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
 +
</footer>
  
−
<ul>
+
</div>
−
<li><a href="https://2016.igem.org/Team:Imperial_College/Description">2016 Imperial College</a></li>
+
−
<li><a href="https://2016.igem.org/Team:Wageningen_UR/Description">2016 Wageningen UR</a></li>
+
−
<li><a href="https://2014.igem.org/Team:UC_Davis/Project_Overview"> 2014 UC Davis</a></li>
+
−
<li><a href="https://2014.igem.org/Team:SYSU-Software/Overview">2014 SYSU Software</a></li>
+
−
</ul>
+
−
</div>
+
  
 +
<!-- BG -->
 +
<div id="bg"></div>
  
 +
<!-- Scripts -->
 +
<script src="assets/js/jquery.min.js"></script>
 +
<script src="assets/js/skel.min.js"></script>
 +
<script src="assets/js/util.js"></script>
 +
<script src="assets/js/main.js"></script>
  
 +
</body>
 
</html>
 
</html>

Revision as of 17:21, 15 July 2017


Dimension by HTML5 UP

Intro

Aenean ornare velit lacus, ac varius enim ullamcorper eu. Proin aliquam facilisis ante interdum congue. Integer mollis, nisl amet convallis, porttitor magna ullamcorper, amet egestas mauris. Ut magna finibus nisi nec lacinia. Nam maximus erat id euismod egestas. By the way, check out my awesome work.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis dapibus rutrum facilisis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam tristique libero eu nibh porttitor fermentum. Nullam venenatis erat id vehicula viverra. Nunc ultrices eros ut ultricies condimentum. Mauris risus lacus, blandit sit amet venenatis non, bibendum vitae dolor. Nunc lorem mauris, fringilla in aliquam at, euismod in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In non lorem sit amet elit placerat maximus. Pellentesque aliquam maximus risus, vel sed vehicula.

-->

Work

Adipiscing magna sed dolor elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices.

Nullam et orci eu lorem consequat tincidunt vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus pharetra. Pellentesque condimentum sem. In efficitur ligula tate urna. Maecenas laoreet massa vel lacinia pellentesque lorem ipsum dolor. Nullam et orci eu lorem consequat tincidunt. Vivamus et sagittis libero. Mauris aliquet magna magna sed nunc rhoncus amet feugiat tempus.

About

Lorem ipsum dolor sit amet, consectetur et adipiscing elit. Praesent eleifend dignissim arcu, at eleifend sapien imperdiet ac. Aliquam erat volutpat. Praesent urna nisi, fringila lorem et vehicula lacinia quam. Integer sollicitudin mauris nec lorem luctus ultrices. Aliquam libero et malesuada fames ac ante ipsum primis in faucibus. Cras viverra ligula sit amet ex mollis mattis lorem ipsum dolor sit amet.

Elements

Text

This is bold and this is strong. This is italic and this is emphasized. This is superscript text and this is subscript text. This is underlined and this is code: for (;;) { ... }. Finally, this is a link.

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6

Blockquote

Fringilla nisl. Donec accumsan interdum nisi, quis tincidunt felis sagittis eget tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan faucibus. Vestibulum ante ipsum primis in faucibus lorem ipsum dolor sit amet nullam adipiscing eu felis.

Preformatted

i = 0;

while (!deck.isInOrder()) {
    print 'Iteration ' + i;
    deck.shuffle();
    i++;
}

print 'It took ' + i + ' iterations to sort the deck.';

Lists

Unordered

  • Dolor pulvinar etiam.
  • Sagittis adipiscing.
  • Felis enim feugiat.

Alternate

  • Dolor pulvinar etiam.
  • Sagittis adipiscing.
  • Felis enim feugiat.

Ordered

  1. Dolor pulvinar etiam.
  2. Etiam vel felis viverra.
  3. Felis enim feugiat.
  4. Dolor pulvinar etiam.
  5. Etiam vel felis lorem.
  6. Felis enim et feugiat.

Icons

Actions

Table

Default

Name Description Price
Item One Ante turpis integer aliquet porttitor. 29.99
Item Two Vis ac commodo adipiscing arcu aliquet. 19.99
Item Three Morbi faucibus arcu accumsan lorem. 29.99
Item Four Vitae integer tempus condimentum. 19.99
Item Five Ante turpis integer aliquet porttitor. 29.99
100.00

Alternate

Name Description Price
Item One Ante turpis integer aliquet porttitor. 29.99
Item Two Vis ac commodo adipiscing arcu aliquet. 19.99
Item Three Morbi faucibus arcu accumsan lorem. 29.99
Item Four Vitae integer tempus condimentum. 19.99
Item Five Ante turpis integer aliquet porttitor. 29.99
100.00

Buttons

  • Disabled
  • Disabled

Form