The Brainstorm
Planning our project
ConnorB271 (Talk | contribs) |
ConnorB271 (Talk | contribs) |
||
Line 1: | Line 1: | ||
<html> | <html> | ||
<head> | <head> | ||
− | <title> | + | <title>Theory by TEMPLATED</title> |
<meta charset="utf-8" /> | <meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width, initial-scale=1" /> | <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
− | <link rel="stylesheet" type="text/css" href=" | + | <link rel="stylesheet" type="text/css" href="http:\\2016.igem.org/Team:Warwick\css?action=raw&ctype=text/css" /> |
</head> | </head> | ||
<body> | <body> | ||
Line 29: | Line 29: | ||
<!-- Banner --> | <!-- Banner --> | ||
<section id="banner"> | <section id="banner"> | ||
− | <h1> | + | <h1>Our Project</h1> |
− | <p> | + | <p>From design to Product.</p> |
</section> | </section> | ||
− | <!-- | + | <!-- Header --> |
<section id="one" class="wrapper"> | <section id="one" class="wrapper"> | ||
<div class="inner"> | <div class="inner"> | ||
Line 39: | Line 39: | ||
<article> | <article> | ||
<header> | <header> | ||
− | <h3> | + | <h3>The Brainstorm</h3> |
</header> | </header> | ||
− | <p> | + | <p>Planning our project</p> |
+ | <footer> | ||
+ | <a href="#brainstorming" class="moreButton">More</a> | ||
+ | </footer> | ||
+ | </article> | ||
+ | <article> | ||
+ | <header> | ||
+ | <h3>The Lyme's Project</h3> | ||
+ | </header> | ||
+ | <p>Our Lyme's Disease detector.</p> | ||
+ | <footer> | ||
+ | <a href="#lymes" class="moreButton">More</a> | ||
+ | </footer> | ||
+ | </article> | ||
+ | <article> | ||
+ | <header> | ||
+ | <h3>Metal Aptamers Project</h3> | ||
+ | </header> | ||
+ | <p>Detecting Heavy Metals.</p> | ||
+ | <footer> | ||
+ | <a href="#metals" class="moreButton">More</a> | ||
+ | </footer> | ||
+ | </article> | ||
+ | </div> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <!-- Plasmids --> | ||
+ | <section id="two" class="wrapper style1 special"> | ||
+ | <div class="inner"> | ||
+ | <div class="flex flex-4"> | ||
+ | <div class="box person"> | ||
+ | <h3>Lyme's Plasmid</h3> | ||
+ | <div class="image round"> | ||
+ | <img src="images/pic03.jpg" alt="Lyme's Plasmid" /> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="box person"> | ||
+ | <h3>L.Plasmid</h3> | ||
+ | <div class="image round"> | ||
+ | <img src="images/pic03.jpg" alt="L.Plasmid" /> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="box person"> | ||
+ | <h3>L.Plasmid</h3> | ||
+ | <div class="image round"> | ||
+ | <img src="images/pic03.jpg" alt="L.Plasmid" /> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="box person"> | ||
+ | <h3>Metal Plasmid</h3> | ||
+ | <div class="image round"> | ||
+ | <img src="images/pic03.jpg" alt="Metal Plasmid" /> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | <!-- Brainstorming --> | ||
+ | <div id="brainstorming"> | ||
+ | <section id="three" class="wrapper special"> | ||
+ | <div class="inner"> | ||
+ | <header class="align-center"> | ||
+ | <h2>Brainstorming</h2> | ||
+ | </header> | ||
+ | <div class="flex flex-2"> | ||
+ | <article> | ||
+ | <header> | ||
+ | <h3>Praesent placerat magna</h3> | ||
+ | </header> | ||
+ | <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p> | ||
+ | <footer> | ||
+ | <a href="#" class="button special">More</a> | ||
+ | </footer> | ||
+ | </article> | ||
+ | <article> | ||
+ | <div class="image fit"> | ||
+ | <img src="images/pic02.jpg" alt="Pic 02" /> | ||
+ | </div> | ||
+ | </article> | ||
+ | </div> | ||
+ | </div> | ||
+ | </section> | ||
+ | </div> | ||
+ | |||
+ | <!-- Lyme's Project --> | ||
+ | <div id="lymes"> | ||
+ | <section id="three" class="wrapper special"> | ||
+ | <div class="inner"> | ||
+ | <header class="align-center"> | ||
+ | <h2>The Lyme's Project</h2> | ||
+ | <p>Aliquam erat volutpat nam dui </p> | ||
+ | </header> | ||
+ | <div class="flex flex-2"> | ||
+ | <article> | ||
+ | <header> | ||
+ | <h3>Praesent placerat magna</h3> | ||
+ | </header> | ||
+ | <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p> | ||
+ | <footer> | ||
+ | <a href="#" class="button special">More</a> | ||
+ | </footer> | ||
+ | </article> | ||
+ | <article> | ||
+ | <div class="image fit"> | ||
+ | <img src="images/pic02.jpg" alt="Pic 02" /> | ||
+ | </div> | ||
+ | </article> | ||
+ | <article> | ||
+ | <header> | ||
+ | <h3>Praesent placerat magna</h3> | ||
+ | </header> | ||
+ | <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p> | ||
+ | <footer> | ||
+ | <a href="#" class="button special">More</a> | ||
+ | </footer> | ||
+ | </article> | ||
+ | <article> | ||
+ | <div class="image fit"> | ||
+ | <img src="images/pic02.jpg" alt="Pic 02" /> | ||
+ | </div> | ||
+ | </article> | ||
+ | <article> | ||
+ | <header> | ||
+ | <h3>Praesent placerat magna</h3> | ||
+ | </header> | ||
+ | <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p> | ||
+ | <footer> | ||
+ | <a href="#" class="button special">More</a> | ||
+ | </footer> | ||
+ | </article> | ||
+ | <article> | ||
+ | <div class="image fit"> | ||
+ | <img src="images/pic02.jpg" alt="Pic 02" /> | ||
+ | </div> | ||
+ | </article> | ||
+ | <article> | ||
+ | <header> | ||
+ | <h3>Praesent placerat magna</h3> | ||
+ | </header> | ||
+ | <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p> | ||
+ | <footer> | ||
+ | <a href="#" class="button special">More</a> | ||
+ | </footer> | ||
+ | </article> | ||
+ | <article> | ||
+ | <div class="image fit"> | ||
+ | <img src="images/pic02.jpg" alt="Pic 02" /> | ||
+ | </div> | ||
+ | </article> | ||
+ | <article> | ||
+ | <header> | ||
+ | <h3>Praesent placerat magna</h3> | ||
+ | </header> | ||
+ | <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p> | ||
+ | <footer> | ||
+ | <a href="#" class="button special">More</a> | ||
+ | </footer> | ||
+ | </article> | ||
+ | <article> | ||
+ | <div class="image fit"> | ||
+ | <img src="images/pic02.jpg" alt="Pic 02" /> | ||
+ | </div> | ||
+ | </article> | ||
+ | <article> | ||
+ | <header> | ||
+ | <h3>Praesent placerat magna</h3> | ||
+ | </header> | ||
+ | <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p> | ||
+ | <footer> | ||
+ | <a href="#" class="button special">More</a> | ||
+ | </footer> | ||
+ | </article> | ||
+ | <article> | ||
+ | <div class="image fit"> | ||
+ | <img src="images/pic02.jpg" alt="Pic 02" /> | ||
+ | </div> | ||
+ | </article> | ||
+ | </div> | ||
+ | </div> | ||
+ | </section> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <!-- metals --> | ||
+ | <div id="metals"> | ||
+ | <section id="three" class="wrapper special"> | ||
+ | <div class="inner"> | ||
+ | <header class="align-center"> | ||
+ | <h2>The Metal Aptamer Project</h2> | ||
+ | <p>Aliquam erat volutpat nam dui </p> | ||
+ | </header> | ||
+ | <div class="flex flex-2"> | ||
+ | <article> | ||
+ | <header> | ||
+ | <h3>Praesent placerat magna</h3> | ||
+ | </header> | ||
+ | <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p> | ||
+ | <footer> | ||
+ | <a href="#" class="button special">More</a> | ||
+ | </footer> | ||
+ | </article> | ||
+ | <article> | ||
+ | <div class="image fit"> | ||
+ | <img src="images/pic02.jpg" alt="Pic 02" /> | ||
+ | </div> | ||
+ | </article> | ||
+ | <article> | ||
+ | <header> | ||
+ | <h3>Praesent placerat magna</h3> | ||
+ | </header> | ||
+ | <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p> | ||
+ | <footer> | ||
+ | <a href="#" class="button special">More</a> | ||
+ | </footer> | ||
+ | </article> | ||
+ | <article> | ||
+ | <div class="image fit"> | ||
+ | <img src="images/pic02.jpg" alt="Pic 02" /> | ||
+ | </div> | ||
+ | </article> | ||
+ | <article> | ||
+ | <header> | ||
+ | <h3>Praesent placerat magna</h3> | ||
+ | </header> | ||
+ | <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p> | ||
<footer> | <footer> | ||
<a href="#" class="mButt">More</a> | <a href="#" class="mButt">More</a> | ||
</footer> | </footer> | ||
+ | </article> | ||
+ | <article> | ||
+ | <div class="image fit"> | ||
+ | <img src="images/pic02.jpg" alt="Pic 02" /> | ||
+ | </div> | ||
</article> | </article> | ||
<article> | <article> | ||
<header> | <header> | ||
− | <h3> | + | <h3>Praesent placerat magna</h3> |
</header> | </header> | ||
− | <p> | + | <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p> |
<footer> | <footer> | ||
<a href="#" class="mButt">More</a> | <a href="#" class="mButt">More</a> | ||
</footer> | </footer> | ||
+ | </article> | ||
+ | <article> | ||
+ | <div class="image fit"> | ||
+ | <img src="images/pic02.jpg" alt="Pic 02" /> | ||
+ | </div> | ||
</article> | </article> | ||
<article> | <article> | ||
<header> | <header> | ||
− | <h3> | + | <h3>Praesent placerat magna</h3> |
</header> | </header> | ||
− | <p> | + | <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p> |
<footer> | <footer> | ||
<a href="#" class="mButt">More</a> | <a href="#" class="mButt">More</a> | ||
</footer> | </footer> | ||
+ | </article> | ||
+ | <article> | ||
+ | <div class="image fit"> | ||
+ | <img src="images/pic02.jpg" alt="Pic 02" /> | ||
+ | </div> | ||
+ | </article> | ||
+ | <article> | ||
+ | <header> | ||
+ | <h3>Praesent placerat magna</h3> | ||
+ | </header> | ||
+ | <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p> | ||
+ | <footer> | ||
+ | <a href="#" class="button special">More</a> | ||
+ | </footer> | ||
+ | </article> | ||
+ | <article> | ||
+ | <div class="image fit"> | ||
+ | <img src="images/pic02.jpg" alt="Pic 02" /> | ||
+ | </div> | ||
</article> | </article> | ||
</div> | </div> | ||
</div> | </div> | ||
</section> | </section> | ||
+ | </div> | ||
− | + | ||
− | + | <!-- Metals Project --> | |
+ | <div id="metals"> | ||
+ | </div> | ||
+ | |||
<!-- Footer --> | <!-- Footer --> | ||
<footer id="footer"> | <footer id="footer"> | ||
Line 76: | Line 335: | ||
<div class="flex"> | <div class="flex"> | ||
<div class="copyright"> | <div class="copyright"> | ||
− | © Warwick iGem 2016. | + | © Warwick iGem 2016. Design: <a href="https://templated.co">TEMPLATED</a>. |
− | + | ||
<ul class="icons"> | <ul class="icons"> | ||
− | <li><a href="https://www.facebook.com/WarwickIGEM" class=" | + | <li><a href="https://www.facebook.com/WarwickIGEM" class="logo" ><img src="https://dl.dropbox.com/s/4glmgypg4818k37/1473711361_Facebook_Color.png" alt="Facebook" class="logo"> |
</a></li> | </a></li> | ||
− | <li><a href="https://twitter.com/warwickigem" class="logo" ><img src="https://dl.dropbox.com/s/hg113rzniw2pxdq/1473711356_Twitter_Color.png" alt="Twitter" class=" | + | <li><a href="https://twitter.com/warwickigem" class="logo" ><img src="https://dl.dropbox.com/s/hg113rzniw2pxdq/1473711356_Twitter_Color.png" alt="Twitter" class="logo"> |
</a></li> | </a></li> | ||
</ul> | </ul> | ||
Line 94: | Line 352: | ||
<a href="https://2016.igem.org/Team:Warwick/Awards">Awards</a> | <a href="https://2016.igem.org/Team:Warwick/Awards">Awards</a> | ||
</div> | </div> | ||
+ | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
</footer> | </footer> | ||
+ | |||
<!-- Scripts --> | <!-- Scripts --> | ||
<script src="assets/js/jquery.min.js"></script> | <script src="assets/js/jquery.min.js"></script> |
Planning our project
Our Lyme's Disease detector.
Detecting Heavy Metals.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.
Aliquam erat volutpat nam dui
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.
Aliquam erat volutpat nam dui
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.