Difference between revisions of "Team:Warwick"

Line 4: Line 4:
 
     <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="http:\\2016.igem.org/Team:Warwick\css?action=raw&ctype=text/css" />
+
     <link rel="stylesheet" href="https://dl.dropbox.com/s/35wa4mc39p6vytg/main.css" />
 
   </head>
 
   </head>
 
   <body>
 
   <body>
Line 29: Line 29:
 
     <!-- Banner -->
 
     <!-- Banner -->
 
       <section id="banner">
 
       <section id="banner">
−
         <h1>Warwick iGEM 2016</h1>
+
         <h1>Our Project</h1>
−
         <p>Application of CRISPR/Cas9 as a novel modular biosensor</p>
+
         <p>From design to Product.</p>
 
       </section>
 
       </section>
  
−
     <!-- One -->
+
     <!-- 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>CRISPR/Cas9<br /> biosensor.</h3>
+
                 <h3>The Brainstorm</h3>
 
               </header>
 
               </header>
−
               <p>Using a dCas9 protein and an RNA-binding protein (RBP) fused to an effector, transcription of a fluorescent reporter gene can be regulated, with a significant colour change indicating the presence of targeted RNA.</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>
 
               <footer>
 
                 <a href="#" class="button special">More</a>
 
                 <a href="#" class="button special">More</a>
 
               </footer>
 
               </footer>
 
             </article>
 
             </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>
 
             <article>
 
               <header>
 
               <header>
−
                 <h3>Lyme's disease impact and diagnosis.</h3>
+
                 <h3>Praesent placerat magna</h3>
 
               </header>
 
               </header>
−
               <p>Our project will enable diagnosis of the disease at an early stage, increasing the likelihood of successful treatment and reducing the risk of irreversible bodily damage.</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="button special">More</a>
 
                 <a href="#" class="button special">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>Pollutant Detection: Heavy Metal Ions.</h3>
+
                 <h3>Praesent placerat magna</h3>
 
               </header>
 
               </header>
−
               <p>Our team has developed a system capable of detecting these ions in water sources, potentially improving the quality of human life on a global scale, in an inexpensive easily accessible manner.</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="button special">More</a>
 
                 <a href="#" class="button special">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>
 +
              <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>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
       </section>
 
       </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>
 +
                <a href="#" class="mButt">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="mButt">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="mButt">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 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">
−
                   &copy; Warwick iGem 2016.
+
                   &copy; Warwick iGem 2016. Design: <a href="https://templated.co">TEMPLATED</a>.
−
                </div>
+
 
                 <ul class="icons">
 
                 <ul class="icons">
−
                     <li><a href="https://www.facebook.com/WarwickIGEM" class="clogo" ><img src="https://dl.dropbox.com/s/4glmgypg4818k37/1473711361_Facebook_Color.png" alt="Facebook" class="soclogo">
+
                     <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="soclogo">
+
                     <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>

Revision as of 08:51, 20 September 2016

Theory by TEMPLATED

The Brainstorm

Planning our project

The Lyme's Project

Our Lyme's Disease detector.

Metal Aptamers Project

Detecting Heavy Metals.

Lyme's Plasmid

Lyme's Plasmid

L.Plasmid

L.Plasmid

L.Plasmid

L.Plasmid

Metal Plasmid

Metal Plasmid

Brainstorming

Praesent placerat magna

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.

Pic 02

The Lyme's Project

Aliquam erat volutpat nam dui

Praesent placerat magna

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.

Pic 02

Praesent placerat magna

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.

Pic 02

Praesent placerat magna

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.

Pic 02

Praesent placerat magna

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.

Pic 02

Praesent placerat magna

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.

Pic 02

Praesent placerat magna

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.

Pic 02

The Metal Aptamer Project

Aliquam erat volutpat nam dui

Praesent placerat magna

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.

Pic 02

Praesent placerat magna

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.

Pic 02

Praesent placerat magna

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.

Pic 02

Praesent placerat magna

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.

Pic 02

Praesent placerat magna

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.

Pic 02

Praesent placerat magna

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.

Pic 02