Difference between revisions of "Template:IONIS Paris-test"

 
(231 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<html>
+
<html lang="en">
−
<style type="text/css">
+
<head>
−
  /* Hide first heading */
+
<meta charset="UTF-8" />
−
.firstHeading {
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
display: none;
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
−
}
+
<title >IONIS Paris</title>
 +
 
 +
<!-- Google fonts -->
 +
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
 +
 
 +
<!-- font awesome -->
 +
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
 +
 
 +
<!-- favicon -->
 +
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
 +
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
 +
 
 +
 
 +
</head>
 +
 
 +
<body>
 +
<div class="topbar animated fadeInLeftBig"></div>
 +
 
 +
<!-- Banner -->
 +
 
 +
<div class="banner row" id="banner">
 +
<div class="parallax text-center" style="background-image: url(https://static.igem.org/mediawiki/2015/2/2f/TEST.jpg);width:100%;">
 +
<div class="parallax-pattern-overlay" style="background: rgb(200,200,200,0.6);background-size: cover; color:#fff; ">
 +
<div class="container text-center" style="height:580px;padding-top:20px;">
 +
<h2 class="intro wow zoomIn" wow-data-delay="0.4s" wow-data-duration="0.9s" style="padding-top:75px;">IONIS Paris iGEM</h2>
 +
<a href="#"><img id="site-title" class=" wow fadeInDown" wow-data-delay="0.0s" wow-data-duration="0.9s" src="https://static.igem.org/mediawiki/2015/d/d8/Logo-Blanc-sans_fond.png"  width="500" height=auto alt="logo"/></a>
 +
<!-- https://static.igem.org/mediawiki/2015/8/83/Logo_IONIS.png -->
 +
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
 
 +
<!--img src="https://static.igem.org/mediawiki/2015/0/07/Fond_IONIS.jpg" alt="banner"-->
 +
 
 +
 
 +
<!-- Introduction -->
 +
<div id="about"  class="container spacer about">
 +
<h2 class="text-center wowload fadeInUp" style="color:#ff0000"> <big>Popularization of Synthetic Biology</big></h2>
 +
<h3 class="text-center wowload fadeInUp">BACT'Man: The hero of the Bio-Console!</h3> 
 +
<div class="row">
 +
<div class="col-sm-6 wowload fadeInLeft">
 +
<h4><i class="fa fa-gamepad"style="color:#b22222" ></i> The Bio-Console: allow BACT'Man to survive as long as possible </h4>
 +
<p align="justify">Most video games are inspired by reality to create a <font style="color:#66cdaa">VIRTUAL WORLD</font>, in order to make them more realistic. When do we expect to do the opposite? Virtual draw to play with the living to revisit and perceive the gaming world in a new way and thus to have new sensations with the game. Imagine a bacterium, that you can view on your computer screen and that you can control using your joystick. </p>
 +
<p>The Bio-Console: the first game console, where the games will not be so virtual!</p>
 +
</div>
 +
 
 +
<div class="col-sm-6 wowload fadeInRight">
 +
<h4><i class="fa fa-mobile" style="color:#b22222"></i> The mobile application: Biology, Synthetic Biology & Safety! </h4>
 +
<p align="justify"> Follow <b>BACT’Man </b>: from the human's bowels to the iGEM laboratory. He evolves to become a super bacterium and bring the world all the innovations of synthetic biology ! To succeed, you will need to be ingenious and to discover the workings of biology. Progress, explore and help Bact’man along his trip and overcome the challenges on your way.</p>   
 +
<p> Races, puzzles, speed games : biology and being a bacteria have never been so funny! </p>
 +
</div>
 +
</div>
 +
</div>
 
 
−
  #content {
+
−
    border:none;
+
<!-- Circle -->
−
    width:100%;
+
<div class="services container">
−
    margin:0;
+
  <h3 class="text-center wowload fadeInUp"> A Multidisciplinary Project</h3>
−
    padding:0;
+
<ul class="row text-center list-inline  wowload bounceInUp">
−
    background:none;
+
<li>
−
  }
+
<span><i class="fa fa-gamepad" style="color:#b22222"></i><b>Playful</b></span>
 +
</li>
 +
<li>
 +
<span><i class="fa fa-cogs" style="color:#b22222"></i><b>Engineering</b></span>
 +
</li>
 +
<li>
 +
<span><i class="fa fa-graduation-cap" style="color:#b22222"></i><b>Microfluidics</b></span>
 +
</li>
 +
<li>
 +
<span><i class="fa fa-laptop" style="color:#b22222"></i><b>Computer Sciences</b></span>
 +
</li>       
 +
<li>
 +
<span><i class="fa fa-globe" style="color:#b22222"></i><b>Safety issues</b></span>
 +
</li>
 +
</ul>
 +
</div>
 +
<!-- #Cirlce Ends -->
 +
 +
<!--div boxes -->
 +
</div>
 +
 
 +
<!-- BOXES -->
 +
<div id="works"  class=" clearfix grid">
 +
 
 +
<figure class="effect-oscar  wowload fadeInUp" >
 +
<img src="https://static.igem.org/mediawiki/2015/3/34/Wii.jpg" alt="img01"/>
 +
<figcaption>
 +
<h2>BIO-CONSOLE</h2>
 +
<p>Our reality game using bacteria<br>
 +
<a href="https://2015.igem.org/Team:IONIS_Paris/Project" >View more</a></p>           
 +
</figcaption>
 +
</figure>
 +
 +
 +
 +
<figure class="effect-oscar  wowload fadeInUp">
 +
<img src="https://static.igem.org/mediawiki/2015/8/83/Mobile.jpg" alt="img01"/>
 +
 +
<figcaption>
 +
<h2>APPLICATION</h2>
 +
<p>Bact'man, our hero<br>
 +
<a href="https://2015.igem.org/Team:IONIS_Paris/Project" >View more</a></p>           
 +
</figcaption>
 +
</figure>
 +
 +
<!--https://static.igem.org/mediawiki/2015/c/c2/Schema1_IONIS.png-->
 +
 
 +
<figure class="effect-oscar  wowload fadeInUp">
 +
<img style="width:auto"; src="https://static.igem.org/mediawiki/2015/1/19/NOTE.jpg" alt="img01"/>
 +
<figcaption>
 +
<h2>NOTEBOOK</h2>
 +
<p>Our Lab experiments notebook<br>
 +
<a href="https://2015.igem.org/Team:IONIS_Paris/Notebook" >View more</a></p>           
 +
</figcaption>
 +
</figure>
 +
<!--https://static.igem.org/mediawiki/2015/thumb/9/93/Notebook.jpg/600px-Notebook.jpg-->
 +
 +
<figure class="effect-oscar  wowload fadeInUp">
 +
<img src="https://static.igem.org/mediawiki/2015/thumb/1/18/Brick-wall.png/800px-Brick-wall.png" alt="team"/>
 +
<figcaption>
 +
<h2>BIOBRICKS</h2>
 +
<p>Our parts of DNA<br>
 +
<a href="https://2015.igem.org/Team:IONIS_Paris/Biobricks" >View more</a></p>           
 +
</figcaption>
 +
</figure>
 +
 
 +
<figure class="effect-oscar  wowload fadeInUp">
 +
<img src="https://static.igem.org/mediawiki/2015/thumb/b/b1/Optogenetics.jpg/800px-Optogenetics.jpg" alt="team"/>
 +
<figcaption>
 +
<h2>OPTOGENETICS</h2>
 +
<p>Our scientific core of the project<br>
 +
<a href="https://2015.igem.org/Team:IONIS_Paris/Project/Optogenetics" >View more</a></p>           
 +
</figcaption>
 +
</figure>
 +
 +
<figure class="effect-oscar  wowload fadeInUp">
 +
<img src="https://static.igem.org/mediawiki/2015/1/18/GRID.jpg" alt="team"/>
 +
<figcaption>
 +
<h2>MICROFLUIDICS</h2>
 +
<p>Our challenge in achieving the Bio-console<br>
 +
<a href="https://2015.igem.org/Team:IONIS_Paris/Project/Microfluidics" >View more</a></p>           
 +
</figcaption>
 +
</figure>
 +
 +
 +
</div>
 +
 
 +
<!-- END BOXES -->
 +
 
 +
</br>
 +
</br>
 +
 
 +
<!-- HIGHLIGHT INFO -->
 +
<div class="highlight-info">
 +
<div class="overlay spacer">
 +
<div class="container" >
 +
<div class="row text-center  wowload fadeInDownBig">
 +
<CENTER>
 +
<div class="col-sm-3 col-xs-6">
 +
<i class="fa fa-smile-o  fa-5x"></i><h4>13 Members</h4>
 +
</div>
 +
 
 +
<div class="col-sm-3 col-xs-6">
 +
<i class="fa fa-map-marker fa-5x"></i><h4>4 Schools</h4>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<i class="fa fa-gamepad  fa-5x"></i><h4>1 Bio-Console</h4>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<i class="fa fa-tablet fa-5x"></i><h4>1 Mobile Application</h4>
 +
</div>
 +
</CENTER>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
 
 +
<!-- VIDEO -->
 +
<div id="contact" class="spacer">
 +
<div class="container">
 +
<h2 class="text-center  wowload fadeInUp">What is iGEM ?</h2>
 +
<CENTER>
 +
<video width="500" height="281.25" poster="https://static.igem.org/mediawiki/2015/8/83/Logo_IONIS.png" controls>
 +
<source src="https://static.igem.org/mediawiki/2015/7/73/Video-1438606819.mp4.mp4" type='video/mp4'/>
 +
<source src="https://static.igem.org/mediawiki/2015/9/90/Video-1438606819.mp4.ogg" type='video/ogg; codecs="theora, vorbis"'/>
 +
<source src="https://static.igem.org/mediawiki/2015/f/fb/Video-1438606819.mp4.webm" type='video/webm; codecs="vp8, vorbis"'/>
 +
<a href="https://www.youtube.com/watch?v=DWUxy4g_p7w"><img border="0" src="https://static.igem.org/mediawiki/2015/8/83/Logo_IONIS.png" alt="Click to view on Youtube" width="500" height="281.25"></a>
 +
<p style="font-style:italic;color:red;border-style:solid;border-width:2px;border-color:red">Your browser either does not support HTML5 or cannot handle MediaWiki open video formats. Please consider upgrading your browser, installing the appropriate plugin or switching to a Firefox or Chrome install.</p>
 +
</video>
 +
</CENTER>
 +
</div>
 +
</div>
 +
 
 +
<!--SPONSORS-->
 +
<div class="sponsors">
 +
<div id="contact" class="overlay spacer" >
 +
<div class="container contactform center">
 +
<h2 class="text-center  wowload fadeInUp" style="color:#fff">Our sponsors</h2>
 +
<br>
 +
<CENTER>
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="http://www.supbiotech.fr/en/index.aspx">
 +
<img src="https://static.igem.org/mediawiki/2015/3/30/LOGO-SUPBIOTECH-2015-QUADRI.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="http://www.e-artsup.net/">
 +
<img src="https://static.igem.org/mediawiki/2015/9/98/Logo-e-artsup.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="http://www.epita.fr/international/">
 +
<img src="https://static.igem.org/mediawiki/2015/9/9b/Logo-epita-hd.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="http://ionis-group.com/">
 +
<img src="https://static.igem.org/mediawiki/2015/2/2e/Logo_ionis.jpg" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
</CENTER>
 +
</div>
 +
<br>
 +
 +
<div class="container contactform center">
 +
<br>
 +
<CENTER>
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="http://www.fluigent.com/">
 +
<img src="https://static.igem.org/mediawiki/2015/c/c1/Fluigent-basic.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="https://www.qiagen.com">
 +
<img src="https://static.igem.org/mediawiki/2015/a/a0/Qiagen_logo.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="https://www.neb.com/">
 +
<img src="https://static.igem.org/mediawiki/2015/e/e1/NEB.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="https://www.uni-freiburg.de/start-en.html?set_language=en">
 +
<img src="https://static.igem.org/mediawiki/2015/5/59/Uni_Logo.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
</CENTER>
 +
</div>
 +
<br>
 +
<div class="container contactform center">
 +
<CENTER>
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="https://www.exzellenz.uni-freiburg.de/einrichtungen-en/bioss-en/bioss-en?set_language=en">
 +
<img src="https://static.igem.org/mediawiki/2015/4/41/Bioss-4.jpg" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="https://www.kickstarter.com/">
 +
<img src="https://static.igem.org/mediawiki/2015/thumb/2/26/Kickstarter-logo-light.png/800px-Kickstarter-logo-light.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="http://fr.ambafrance-us.org/">
 +
<img src="https://static.igem.org/mediawiki/2015/b/b8/Logo_Embassy-of-France_OS%26T_300_dpi.jpg" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<a href="https://communicationmicrofactory.wordpress.com/nous/">
 +
<img src="https://static.igem.org/mediawiki/2015/0/01/Microfactory.png" alt="partners" width="150" height=auto>
 +
</a>
 +
</div>
 +
</CENTER>
 +
</div>
 +
 
 +
 
 +
</div>
 +
</div>
 +
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!-- The Bootstrap Image Gallery lightbox, should be a child element of the document body -->
 +
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
 +
<!-- The container for the modal slides -->
 +
<div class="slides"></div>
 +
<!-- Controls for the borderless lightbox -->
 +
<h3 class="title">Title</h3>
 +
<a class="prev">‹</a>
 +
<a class="next">›</a>
 +
<a class="close">×</a>
 +
<!-- The modal dialog, which will be used to wrap the lightbox content -->   
 +
</div>
 +
 
 +
 
 +
 
 +
<!-- UP TOP -->
 +
 
 +
<a href="#banner" class="gototop "><i class="fa fa-chevron-circle-up  fa-3x"></i></a>
 +
 
  
−
</style>
 
  
−
<head>
+
</body>
−
<title>Landon</title>
+
−
<meta charset="utf-8">
+
−
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
−
<link href="layout/styles/layout.css" rel="stylesheet" type="text/css" media="all">
+
−
</head>
+
−
<body id="top">
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<!-- Top Background Image Wrapper -->
+
−
<div class="bgded" style="background-image:url('images/demo/backgrounds/01.png');">
+
−
  <div class="wrapper row0">
+
−
    <div id="topbar" class="clear">
+
−
      <!-- ################################################################################################ -->
+
−
      <ul class="nospace inline pushright">
+
−
        <li><a href="#" title="Home"><i class="fa fa-home"></i></a></li>
+
−
        <li><a href="#" title="About"><i class="fa fa-info"></i></a></li>
+
−
        <li><a href="#" title="Contact"><i class="fa fa-mobile"></i></a></li>
+
−
        <li><a href="#" title="Login"><i class="fa fa-sign-in"></i></a></li>
+
−
        <li><a href="#" title="Register"><i class="fa fa-user-plus"></i></a></li>
+
−
        <li><a href="#" title="Newsletter"><i class="fa fa-newspaper-o"></i></a></li>
+
−
        <li><a href="#" title="RSS Feed"><i class="fa fa-rss"></i></a></li>
+
−
      </ul>
+
−
      <!-- ################################################################################################ -->
+
−
    </div>
+
−
  </div>
+
−
  <!-- ################################################################################################ -->
+
−
  <!-- ################################################################################################ -->
+
−
  <!-- ################################################################################################ -->
+
−
  <div class="wrapper row1">
+
−
    <header id="header" class="clear">
+
−
      <!-- ################################################################################################ -->
+
−
      <div id="logo" class="fl_left">
+
−
        <h1><a href="index.html">Landon</a></h1>
+
−
      </div>
+
−
      <nav id="mainav" class="fl_right">
+
−
        <ul class="clear">
+
−
          <li class="active"><a href="index.html">Home</a></li>
+
−
          <li><a class="drop" href="#">Pages</a>
+
−
            <ul>
+
−
              <li><a href="pages/gallery.html">Gallery</a></li>
+
−
              <li><a href="pages/full-width.html">Full Width</a></li>
+
−
              <li><a href="pages/sidebar-left.html">Sidebar Left</a></li>
+
−
              <li><a href="pages/sidebar-right.html">Sidebar Right</a></li>
+
−
              <li><a href="pages/basic-grid.html">Basic Grid</a></li>
+
−
            </ul>
+
−
          </li>
+
−
          <li><a class="drop" href="#">Dropdown</a>
+
−
            <ul>
+
−
              <li><a href="#">Level 2</a></li>
+
−
              <li><a class="drop" href="#">Level 2 + Drop</a>
+
−
                <ul>
+
−
                  <li><a href="#">Level 3</a></li>
+
−
                  <li><a href="#">Level 3</a></li>
+
−
                  <li><a href="#">Level 3</a></li>
+
−
                </ul>
+
−
              </li>
+
−
              <li><a href="#">Level 2</a></li>
+
−
            </ul>
+
−
          </li>
+
−
          <li><a href="#">Link Text</a></li>
+
−
          <li><a href="#">Link Text</a></li>
+
−
        </ul>
+
−
      </nav>
+
−
      <!-- ################################################################################################ -->
+
−
    </header>
+
−
  </div>
+
−
  <!-- ################################################################################################ -->
+
−
  <!-- ################################################################################################ -->
+
−
  <!-- ################################################################################################ -->
+
−
  <div class="wrapper row0">
+
−
    <section id="pageintro" class="clear">
+
−
      <!-- ################################################################################################ -->
+
−
      <h2 class="heading underlined">Proin viverra</h2>
+
−
      <p>Placerat porttitor lacus lacinia id vestibulum egestas nisi at dui posuere aliquet donec at turpis nisl vestibulum ante ipsum primis in faucibus orci.</p>
+
−
      <p><a class="btn inverse" href="#">Luctus et Ultrices</a></p>
+
−
      <!-- ################################################################################################ -->
+
−
    </section>
+
−
  </div>
+
−
  <!-- ################################################################################################ -->
+
−
  <!-- ################################################################################################ -->
+
−
  <!-- ################################################################################################ -->
+
−
  <div class="wrapper row2">
+
−
    <section id="shout" class="clear">
+
−
      <!-- ################################################################################################ -->
+
−
      <div class="three_quarter first">
+
−
        <h2 class="btmspace-10">Posuere cubilia curae sed convallis</h2>
+
−
        <p class="nospace">Tempor nibh ultrices ut etiam feugiat ultrices nisl a rhoncus pellentesque laoreet elit.</p>
+
−
      </div>
+
−
      <div class="one_quarter"><a class="btn" href="#">Accumsan nulla</a></div>
+
−
      <!-- ################################################################################################ -->
+
−
    </section>
+
−
  </div>
+
−
</div>
+
−
<!-- End Top Background Image Wrapper -->
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<div class="wrapper row3">
+
−
  <main class="container clear">
+
−
    <!-- main body -->
+
−
    <!-- ################################################################################################ -->
+
−
    <div class="group">
+
−
      <article class="one_third first btmspace-50">
+
−
        <h2 class="font-x1 btmspace-30"><i class="fa fa-2x fa-microphone rightspace-10"></i> <a href="#">Aliquam pellentesque</a></h2>
+
−
        <p>Donec sollicitudin risus a nisl cursus, in scelerisque lorem sagittis nullam et ligula mattis. Luctus arcu eget vestibulum sollicitudin tortor at ipsum tempor&hellip;</p>
+
−
      </article>
+
−
      <article class="one_third btmspace-50">
+
−
        <h2 class="font-x1 btmspace-30"><i class="fa fa-2x fa-mortar-board rightspace-10"></i> <a href="#">Condimentum posuere</a></h2>
+
−
        <p>Fusce dapibus sodales molestie cras vitae turpis ligula fusce luctus urna lectus, ut pulvinar justo consequat sit amet aliquam ut magna nec arcu tempor rutrum&hellip;</p>
+
−
      </article>
+
−
      <article class="one_third btmspace-50">
+
−
        <h2 class="font-x1 btmspace-30"><i class="fa fa-2x fa-paperclip rightspace-10"></i> <a href="#">Placerat massa</a></h2>
+
−
        <p>Maecenas et purus eu libero ultricies placerat aliquam sed massa volutpat, molestie enim id accumsan lectus mauris quis ante eu urna dictum congue&hellip;</p>
+
−
      </article>
+
−
      <article class="one_third first">
+
−
        <h2 class="font-x1 btmspace-30"><i class="fa fa-2x fa-bullhorn rightspace-10"></i> <a href="#">Lacinia lobortis</a></h2>
+
−
        <p>Vestibulum efficitur ullamcorper odio vitae tristique leo vivamus euismod, turpis elementum aliquam posuere felis justo semper mauris eu volutpat magna&hellip;</p>
+
−
      </article>
+
−
      <article class="one_third">
+
−
        <h2 class="font-x1 btmspace-30"><i class="fa fa-2x fa-calculator rightspace-10"></i> <a href="#">Faucibus malesuada</a></h2>
+
−
        <p>Praesent in mattis lorem nam eget dui volutpat, facilisis arcu at sollicitudin nibh sed egestas eget lorem in laoreet vesti bulum ante ipsum primis faucibus&hellip;</p>
+
−
      </article>
+
−
      <article class="one_third">
+
−
        <h2 class="font-x1 btmspace-30"><i class="fa fa-2x fa-puzzle-piece rightspace-10"></i> <a href="#">Bibendum ut felis</a></h2>
+
−
        <p>Orci luctus et ultrices posuere cubilia curae duis semper vitae augue eu varius sed semper, sapien sit amet urna lobortis sagittis curabitur congue fermentum&hellip;</p>
+
−
      </article>
+
−
    </div>
+
−
    <!-- ################################################################################################ -->
+
−
    <!-- / main body -->
+
−
    <div class="clear"></div>
+
−
  </main>
+
−
</div>
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<div class="bgded overlay" style="background-image:url('images/demo/backgrounds/02.png');">
+
−
  <section class="blocks centred clear">
+
−
    <!-- ################################################################################################ -->
+
−
    <h2 class="center btmspace-80">Aenean eget aliquam odio non fermentum</h2>
+
−
    <div class="group">
+
−
      <div class="one_half first">
+
−
        <article class="btmspace-30 bg_dark inspace-30">
+
−
          <h2 class="font-x2 btmspace-30">Vestibulum efficitur</h2>
+
−
          <p>Curabitur eget molestie dui cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus cras aliquam arcu in lacinia dignissim&hellip;</p>
+
−
          <p class="nospace"><a href="#">Read More &raquo;</a></p>
+
−
        </article>
+
−
        <article class="bg_light inspace-30">
+
−
          <h2 class="font-x2 btmspace-30">Elementum volutpat</h2>
+
−
          <p>Phasellus sit amet lacus quis neque congue porttitor sed id urna curabitur commodo dignissim sollicitudin nunc tincidunt tristique lorem a scelerisque lacinia quis&hellip;</p>
+
−
          <p class="nospace"><a href="#">Read More &raquo;</a></p>
+
−
        </article>
+
−
      </div>
+
−
      <div class="one_half">
+
−
        <ul class="nospace group">
+
−
          <li class="one_half first bg_light btmspace-30">
+
−
            <article class="inspace-30">
+
−
              <h2 class="font-x1">semper ac nunc</h2>
+
−
              <p>Morbi in eros quis lacus aliquet auctor in max imus metus ut consec tetur commodo&hellip;</p>
+
−
              <p class="nospace"><a href="#">Read More &raquo;</a></p>
+
−
            </article>
+
−
          </li>
+
−
          <li class="one_half bg_dark btmspace-30">
+
−
            <article class="inspace-30">
+
−
              <h2 class="font-x1">Curabitur sem</h2>
+
−
              <p>Libero dolor facilisis dui nec suscipit sem ligula in mi praesent porta dui eu tortor pulvinar&hellip;</p>
+
−
              <p class="nospace"><a href="#">Read More &raquo;</a></p>
+
−
            </article>
+
−
          </li>
+
−
          <li class="one_half first bg_dark">
+
−
            <article class="inspace-30">
+
−
              <h2 class="font-x1">dui non ornare</h2>
+
−
              <p>Bibendum sed sit amet nibh ut elit suscipit facilisis nulla facilisi integer auctor ante&hellip;</p>
+
−
              <p class="nospace"><a href="#">Read More &raquo;</a></p>
+
−
            </article>
+
−
          </li>
+
−
          <li class="one_half bg_light">
+
−
            <article class="inspace-30">
+
−
              <h2 class="font-x1">lorem varius at</h2>
+
−
              <p>Nunc molestie maximus dolor sit amet vulputate mi convallis in vivamus mi sem pretium id&hellip;</p>
+
−
              <p class="nospace"><a href="#">Read More &raquo;</a></p>
+
−
            </article>
+
−
          </li>
+
−
        </ul>
+
−
      </div>
+
−
    </div>
+
−
    <!-- ################################################################################################ -->
+
−
  </section>
+
−
</div>
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<div class="wrapper row3">
+
−
  <figure class="container clear">
+
−
    <!-- ################################################################################################ -->
+
−
    <div class="one_half first"><img src="images/demo/500x400.png" alt=""></div>
+
−
    <figcaption class="one_half">
+
−
      <h3 class="font-x2 underlined left btmspace-30">Nunc efficitur ut lacus vel auctor lacinia orci</h3>
+
−
      <p>Pellentesque ac leo non diam varius semper donec id neque ornare, feugiat sem at ullamcorper quam nam, eleifend ipsum ac quam eleifend. Vitae venenatis nulla blandit nulla ac nibh ut lorem volutpat vulputate sed at magna.</p>
+
−
      <p class="btmspace-30">In massa metus euismod id pulvinar eu, pellentesque ut ligula. Phasellus suscipit orci a ex euismod sed laoreet sem viverra suspendisse volutpat ante tellus in interdum.</p>
+
−
      <footer><a class="btn center" href="#">Etiam dignissim at diam sed interdum</a></footer>
+
−
    </figcaption>
+
−
    <!-- ################################################################################################ -->
+
−
  </figure>
+
−
</div>
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<div class="wrapper row4">
+
−
  <footer id="footer" class="clear">
+
−
    <!-- ################################################################################################ -->
+
−
    <div class="one_quarter first">
+
−
      <h6 class="title">Quis nibh ultricies</h6>
+
−
      <address class="btmspace-15">
+
−
      Company Name<br>
+
−
      Street Name &amp; Number<br>
+
−
      Town<br>
+
−
      Postcode/Zip
+
−
      </address>
+
−
      <ul class="nospace">
+
−
        <li class="btmspace-10"><span class="fa fa-phone"></span> +00 (123) 456 7890</li>
+
−
        <li><span class="fa fa-envelope-o"></span> info@domain.com</li>
+
−
      </ul>
+
−
    </div>
+
−
    <div class="one_quarter">
+
−
      <h6 class="title">Nullam tortor</h6>
+
−
      <ul class="nospace linklist">
+
−
        <li><a href="#">venenatis eros maximus</a></li>
+
−
        <li><a href="#">Quisque semper lorem</a></li>
+
−
        <li><a href="#">dui feugiat auctor</a></li>
+
−
        <li><a href="#">pretium at egestas</a></li>
+
−
        <li><a href="#">Vestibulum ante ipsum</a></li>
+
−
      </ul>
+
−
    </div>
+
−
    <div class="one_quarter">
+
−
      <h6 class="title">Rutrum sed ipsum</h6>
+
−
      <article>
+
−
        <h2 class="nospace font-x1"><a href="#">Primis in faucibus</a></h2>
+
−
        <time class="smallfont" datetime="2045-04-06">Friday, 6<sup>th</sup> April 2045</time>
+
−
        <p>Orci luctus et ultrices posuere cubilia tincidunt, ex vitae feugiat enim pellentesque ornare feugiat metus&hellip;</p>
+
−
      </article>
+
−
    </div>
+
−
    <div class="one_quarter">
+
−
      <h6 class="title">Fermentum vitae</h6>
+
−
      <form class="btmspace-30" method="post" action="#">
+
−
        <fieldset>
+
−
          <legend>Newsletter:</legend>
+
−
          <input class="btmspace-15" type="text" value="" placeholder="Email">
+
−
          <button type="submit" value="submit">Submit</button>
+
−
        </fieldset>
+
−
      </form>
+
−
      <ul class="faico clear">
+
−
        <li><a class="faicon-facebook" href="#"><i class="fa fa-facebook"></i></a></li>
+
−
        <li><a class="faicon-twitter" href="#"><i class="fa fa-twitter"></i></a></li>
+
−
        <li><a class="faicon-linkedin" href="#"><i class="fa fa-linkedin"></i></a></li>
+
−
        <li><a class="faicon-google-plus" href="#"><i class="fa fa-google-plus"></i></a></li>
+
−
        <li><a class="faicon-instagram" href="#"><i class="fa fa-instagram"></i></a></li>
+
−
        <li><a class="faicon-tumblr" href="#"><i class="fa fa-tumblr"></i></a></li>
+
−
      </ul>
+
−
    </div>
+
−
    <!-- ################################################################################################ -->
+
−
  </footer>
+
−
</div>
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<div class="wrapper row5">
+
−
  <div id="copyright" class="clear">
+
−
    <!-- ################################################################################################ -->
+
−
    <p class="fl_left">Copyright &copy; 2015 - All Rights Reserved - <a href="#">Domain Name</a></p>
+
−
    <p class="fl_right">Template by <a target="_blank" href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a></p>
+
−
    <!-- ################################################################################################ -->
+
−
  </div>
+
−
</div>
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<!-- ################################################################################################ -->
+
−
<a id="backtotop" href="#top"><i class="fa fa-chevron-up"></i></a>
+
−
<!-- JAVASCRIPTS -->
+
−
<script src="layout/scripts/jquery.min.js"></script>
+
−
<script src="layout/scripts/jquery.backtotop.js"></script>
+
−
<script src="layout/scripts/jquery.mobilemenu.js"></script>
+
−
<!-- IE9 Placeholder Support -->
+
−
<script src="layout/scripts/jquery.placeholder.min.js"></script>
+
−
<!-- / IE9 Placeholder Support -->
+
−
</body>
+
 
</html>
 
</html>

Latest revision as of 10:33, 26 August 2015

IONIS Paris

Popularization of Synthetic Biology

BACT'Man: The hero of the Bio-Console!

The Bio-Console: allow BACT'Man to survive as long as possible

Most video games are inspired by reality to create a VIRTUAL WORLD, in order to make them more realistic. When do we expect to do the opposite? Virtual draw to play with the living to revisit and perceive the gaming world in a new way and thus to have new sensations with the game. Imagine a bacterium, that you can view on your computer screen and that you can control using your joystick.

The Bio-Console: the first game console, where the games will not be so virtual!

The mobile application: Biology, Synthetic Biology & Safety!

Follow BACT’Man : from the human's bowels to the iGEM laboratory. He evolves to become a super bacterium and bring the world all the innovations of synthetic biology ! To succeed, you will need to be ingenious and to discover the workings of biology. Progress, explore and help Bact’man along his trip and overcome the challenges on your way.

Races, puzzles, speed games : biology and being a bacteria have never been so funny!

A Multidisciplinary Project

  • Playful
  • Engineering
  • Microfluidics
  • Computer Sciences
  • Safety issues
img01

BIO-CONSOLE

Our reality game using bacteria
View more

img01

APPLICATION

Bact'man, our hero
View more

img01

NOTEBOOK

Our Lab experiments notebook
View more

team

BIOBRICKS

Our parts of DNA
View more

team

OPTOGENETICS

Our scientific core of the project
View more

team

MICROFLUIDICS

Our challenge in achieving the Bio-console
View more



13 Members

4 Schools

1 Bio-Console

1 Mobile Application

What is iGEM ?