Difference between revisions of "Team:Toronto/Design"

Line 11: Line 11:
 
<html>
 
<html>
  
−
<div id="navigation">
+
<div class="section">
−
<ul>
+
<div class="container header" id="design">
−
<li><a href="https://2017.igem.org/Team:Toronto"><span>home</span></a></li>
+
<h1>Design</h1>
−
</li>
+
</div>
−
<li><a href="#"><span>team</span></a>
+
−
<ul>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Team"><span>team</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Collaborations"><span>collaborations</span></a></li>
+
−
</li>
+
−
</ul>
+
−
<li class="active"><a href="#"><span>project</span></a>
+
−
<ul>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Description"><span>description</span></a></li>
+
−
</li>
+
−
<li class="active"><a href="https://2017.igem.org/Team:Toronto/Design"><span>design</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Experiments"><span>experiments</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Proof"><span>proof</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Demonstrate"><span>demonstrate</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Results"><span>results</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Notebook"><span>notebook</span></a></li>
+
−
</li>
+
−
</ul>
+
−
<li><a href="#"><span>parts</span></a>
+
−
<ul>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Parts"><span>parts</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Basic_Part"><span>basic_part</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Composite_Part"><span>composite_part</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Part_Collection"><span>part_collection</span></a></li>
+
−
</li>
+
−
</ul>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Safety"><span>safety</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Attributions"><span>attributions</span></a></li>
+
−
</li>
+
−
<li><a href="#"><span>human_practices</span></a>
+
−
<ul>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Human_Practices"><span>human_practices</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/HP-Silver"><span>silver</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/HP-Gold"><span>gold</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Integrated_Practices"><span>integrated_practices</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Engagement"><span>engagement</span></a></li>
+
−
</li>
+
−
</ul>
+
−
<li><a href="#"><span>awards</span></a>
+
−
<ul>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Entrepreneurship"><span>entrepreneurship</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Hardware"><span>hardware</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Software"><span>software</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Measurement"><span>measurement</span></a></li>
+
−
</li>
+
−
<li><a href="https://2017.igem.org/Team:Toronto/Model"><span>model</span></a></li>
+
−
</li>
+
−
</ul>
+
−
</ul>
+
 
</div>
 
</div>
−
<div class="content">
+
<div class="section bg-white">
−
<div class="content" id="content-main"><div class="row"><div class="col col-lg-8 col-md-12"><div class="content-main"><h3 id="-alert-">★ ALERT!</h3>
+
<div class="container content-page row">
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2016.igem.org/Judging/Awards#Special_Prizes">design special prize</a>.</p>
+
<div class="block content">
−
<p>Delete this box in order to be evaluated for this medal. See more information at <a href="https://2016.igem.org/Judging/Pages_for_Awards/Instructions">Instructions for Pages for awards</a>.</p>
+
<div id="content-red" class="subsection">
−
<p>By talking about your design work on this page, there is one medal criterion that you can attempt to meet, and one award that you can apply for. If your team is going for a gold medal by building a functional prototype, you should tell us what you did on this page.</p>
+
<h2 class="text-red">content-red</h2>
−
<p>This is a prize for the team that has developed a synthetic biology product to solve a real world problem in the most elegant way. The students will have considered how well the product addresses the problem versus other potential solutions, how the product integrates or disrupts other products and processes, and how its lifecycle can more broadly impact our lives and environments in positive and negative ways.</p>
+
<p>
−
<p>If you are working on art and design as your main project, please join the art and design track. If you are integrating art and design into the core of your main project, please apply for the award by completing this page.</p>
+
 
−
<p>Teams who want to focus on art and design should be in the art and design special track. If you want to have a sub-project in this area, you should compete for this award.</p>
+
Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque <b>illum</b>nobis, <i>non </i>neque reprehenderit consequatur ipsam ullam perferendis magni.<sup><a href="#ref1">[1]</a></sup>
−
</div></div><div id="tableofcontents" class="tableofcontents affix sidebar col-lg-4 hidden-xs hidden-sm hidden-md visible-lg-3"><ul class="nav"></div></div></div>
+
</p>
 +
<div class="audio audio-player">
 +
<div class="loading">
 +
<div class="spinner"></div>
 +
</div>
 +
<div class="play-pause-btn">
 +
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="24" viewbox="0 0 18 24">
 +
<path id="playPause" fill="#566574" fill-rule="evenodd" d="M18 12L0 24V0" class="play-pause-icon"></path>
 +
</svg>
 +
</div>
 +
<div class="controls"><span class="current-time">0:00</span>
 +
<div data-direction="horizontal" class="slider">
 +
<div class="progress">
 +
<div id="progress-pin" data-method="rewind" class="pin"></div>
 +
</div>
 +
</div><span class="total-time">0:00</span>
 +
</div>
 +
<div class="volume">
 +
<div class="volume-btn">
 +
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24">
 +
<path id="speaker" fill="#566574" fill-rule="evenodd" d="M14.667 0v2.747c3.853 1.146 6.666 4.72 6.666 8.946 0 4.227-2.813 7.787-6.666 8.934v2.76C20 22.173 24 17.4 24 11.693 24 5.987 20 1.213 14.667 0zM18 11.693c0-2.36-1.333-4.386-3.333-5.373v10.707c2-.947 3.333-2.987 3.333-5.334zm-18-4v8h5.333L12 22.36V1.027L5.333 7.693H0z"></path>
 +
</svg>
 +
</div>
 +
<div class="volume-controls hidden">
 +
<div data-direction="vertical" class="slider">
 +
<div class="progress">
 +
<div id="volume-pin" data-method="changeVolume" class="pin"></div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<audio>
 +
<source src="http://www.sample-videos.com/audio/mp3/crowd-cheering.mp3" type="audio/mpeg">
 +
</audio>
 +
</div>
 +
<audio controls>
 +
<source src="http://www.sample-videos.com/audio/mp3/crowd-cheering.mp3" type="audio/mpeg">
 +
</audio>
 +
<p>Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.</p>
 +
<div lang="latex">1+sin(x)^2+3</div>
 +
<p>Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.</p>
 +
<figure>
 +
<div class="figures">
 +
<div id="container-01" class="mol-container"></div>
 +
<div id="container-02" class="mol-container"></div>
 +
</div>
 +
<figcaption>Figure 1.1: Wildlife population is wildlife population is wildlife population is wildlife population</figcaption>
 +
</figure>
 +
<p>Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.</p>
 +
</div>
 +
<div id="content-cyan" class="subsection">
 +
<h2 class="text-cyan">content-cyan</h2>
 +
<p>Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.</p>
 +
<blockquote class="regular">Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.</blockquote>
 +
<p>Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.</p>
 +
<blockquote class="sequence">
 +
<pre>>SEQUENCE THAT CREATES THE ALPHA HELIX
 +
--------10--------20--------30--------40--------50
 +
1 MTEITAAMVKELRESTGAGMMDCKNALSETNGDFDKAVQLLREKGLGKA
 +
51 LVSVKVSDDFTILSYEDLDMTF<span class="text-red">AAMRPSY</span>VENEYKALVAELEKENEERR
 +
101 IPQFASRKQLSDAILKEAEEKIKEELKAQGKPEKIWDNIIPGKMNSFIA
 +
151 MGQFYVMDDKKTVEQVIAEKEKEFGGKIKIVEFICFEVGEGLEKKTEDA</pre>
 +
</blockquote>
 +
<p>Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.</p>
 +
<blockquote class="code">
 +
<pre>// Some dry lab code?
 +
function setActive(elem) {
 +
var sideNav = document.getElementsByClassName('sidebar-minibox');
 +
// console.log(sideNav);
 +
var ul = sideNav[0].getElementsByTagName('ul');
 +
console.log(ul);
 +
var li = ul[0].getElementsByTagName('li');
 +
for (i=0; i < li.length; i++) {
 +
li[i].classList.remove('active');
 +
}
 +
elem.classList.add('active');
 +
}</pre>
 +
</blockquote>
 +
<p>Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.</p>
 +
</div>
 +
<div id="one" class="subsection">
 +
<h2 class="text-yellow">content-yellow</h2>
 +
<p>Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.</p>
 +
<figure>
 +
<div class="figures">
 +
<div class="image"><img src="http://www.excel-easy.com/data-analysis/images/charts/column-chart.png" alt="data"></div>
 +
</div>
 +
<figcaption>Figure 1.1: Wildlife population is wildlife population is wildlife population is wildlife population</figcaption>
 +
</figure>
 +
<figure>
 +
<div class="figures">
 +
<div class="image"><img src="http://www.excel-easy.com/data-analysis/images/charts/column-chart.png" alt="data"></div>
 +
</div>
 +
<figcaption>Figure 1.1: Wildlife population is wildlife population is wildlife population is wildlife population</figcaption>
 +
</figure>
 +
<p>Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.</p>
 +
<figure>
 +
<div class="figures">
 +
<div class="image"><img src="https://zippy.gfycat.com/MedicalAdventurousCanine.gif" alt="data" width="200px"></div>
 +
<div class="image"><img src="https://media.giphy.com/media/R6vXyeo7NA0gg/giphy.gif" alt="data" width="200px"></div>
 +
</div>
 +
<figcaption>Figure 1.1: Wildlife population is wildlife population is wildlife population is wildlife population</figcaption>
 +
</figure>
 +
<p>Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni. </p>
 +
<p>Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.</p>
 +
<figure>
 +
<div class="figures">
 +
<table>
 +
<thead>
 +
<tr>
 +
<th>Time</th>
 +
<th>Quantity</th>
 +
<th>iunno</th>
 +
</tr>
 +
</thead>
 +
<tbody class="table-hover">
 +
<tr>
 +
<td>Hello</td>
 +
<td>9adsf asd</td>
 +
<td>2 ads fads fdsa s </td>
 +
</tr>
 +
<tr>
 +
<td>1</td>
 +
<td>2 ads fads fdsa s </td>
 +
<td>2 ads fads fdsa s </td>
 +
</tr>
 +
<tr>
 +
<td>1</td>
 +
<td>2</td>
 +
<td>2 ads fads fdsa s </td>
 +
</tr>
 +
<tr>
 +
<td>1</td>
 +
<td>2</td>
 +
<td>2 ads fads fdsa s </td>
 +
</tr>
 +
<tr>
 +
<td>Hello</td>
 +
<td>911 asd afd </td>
 +
<td>2 ads fads fdsa s </td>
 +
</tr>
 +
<tr>
 +
<td>1</td>
 +
<td>2</td>
 +
<td>2 ads fads fdsa s </td>
 +
</tr>
 +
</tbody>
 +
</table>
 +
</div>
 +
<figcaption>Figure 1.1: Wildlife population is wildlife population is wildlife population is wildlife population</figcaption>
 +
</figure>
 +
<p>Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.</p><a>
 +
<button class="btn-primary red">More Info</button></a>
 +
</div>
 +
<hr>
 +
<div id="content-yellow" class="subsection">
 +
<h2 class="text-cyan">References</h2>
 +
<ol>
 +
<li id="ref1">Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam</li>
 +
</ol>
 +
</div>
 +
</div>
 +
<div class="block sidebar">
 +
<div id="sidebar-box">
 +
<h3>Contents</h3>
 +
<div class="sidebar-minibox">
 +
<ul></ul>
 +
</div>
 +
<h3>Related Pages</h3>
 +
<div class="sidebar-minibox">
 +
<ul>
 +
<li> <a href="#">Content 1</a></li>
 +
<li> <a href="#">Content 2</a></li>
 +
</ul>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 
</div>
 
</div>
 +
 +
 
</html>
 
</html>
 
{{Toronto/footer}}
 
{{Toronto/footer}}

Revision as of 06:57, 28 October 2017

Design

content-red

Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illumnobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.[1]

0:00
0:00

Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.

1+sin(x)^2+3

Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.

Figure 1.1: Wildlife population is wildlife population is wildlife population is wildlife population

Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.

content-cyan

Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.

Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.

Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.

>SEQUENCE THAT CREATES THE ALPHA HELIX
	--------10--------20--------30--------40--------50
1 MTEITAAMVKELRESTGAGMMDCKNALSETNGDFDKAVQLLREKGLGKA
51 LVSVKVSDDFTILSYEDLDMTFAAMRPSYVENEYKALVAELEKENEERR
101 IPQFASRKQLSDAILKEAEEKIKEELKAQGKPEKIWDNIIPGKMNSFIA
151 MGQFYVMDDKKTVEQVIAEKEKEFGGKIKIVEFICFEVGEGLEKKTEDA

Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.

// Some dry lab code?
function setActive(elem) {
var sideNav = document.getElementsByClassName('sidebar-minibox');
// console.log(sideNav);
var ul = sideNav[0].getElementsByTagName('ul');
console.log(ul);
var li = ul[0].getElementsByTagName('li');
for (i=0; i < li.length; i++) {
	li[i].classList.remove('active');
}
elem.classList.add('active');
}

Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.

content-yellow

Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.

data
Figure 1.1: Wildlife population is wildlife population is wildlife population is wildlife population
data
Figure 1.1: Wildlife population is wildlife population is wildlife population is wildlife population

Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.

data
data
Figure 1.1: Wildlife population is wildlife population is wildlife population is wildlife population

Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.

Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.

Time Quantity iunno
Hello 9adsf asd 2 ads fads fdsa s
1 2 ads fads fdsa s 2 ads fads fdsa s
1 2 2 ads fads fdsa s
1 2 2 ads fads fdsa s
Hello 911 asd afd 2 ads fads fdsa s
1 2 2 ads fads fdsa s
Figure 1.1: Wildlife population is wildlife population is wildlife population is wildlife population

Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam, aspernatur aperiam optio odit deleniti eaque illum nobis, non neque reprehenderit consequatur ipsam ullam perferendis magni.

References

  1. Lorem is haha ipsum dolor sit amet consectetur adipisicing elit. Inventore maiores quibusdam, adipisci ipsum quisquam

General Pages

Wet Lab

Dry Lab

Human Practices

iGEM Toronto