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

 
(259 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{IONIS_Paris-testcss}}
+
<html lang="en">
−
<!DOCTYPE HTML>
+
−
<!--
+
−
Strongly Typed by HTML5 UP
+
−
html5up.net | @n33co
+
−
Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
+
−
-->
+
−
<html>
+
 
<head>
 
<head>
−
<title>Right Sidebar - Strongly Typed by HTML5 UP</title>
+
<meta charset="UTF-8" />
−
<meta charset="utf-8" />
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
<meta name="viewport" content="width=device-width, initial-scale=1" />
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
−
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
+
<title >IONIS Paris</title>
−
<link rel="stylesheet" href="assets/css/main.css" />
+
−
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
+
−
</head>
+
−
<body class="right-sidebar">
+
−
<div id="page-wrapper">
+
  
−
<!-- Header -->
+
<!-- Google fonts -->
−
<div id="header-wrapper">
+
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
−
<div id="header" class="container">
+
  
−
<!-- Logo -->
+
<!-- font awesome -->
−
<h1 id="logo"><a href="index.html">Strongly Typed</a></h1>
+
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
−
<p>A responsive HTML5 site template. Manufactured by HTML5 UP.</p>
+
  
−
<!-- Nav -->
+
<!-- favicon -->
−
<nav id="nav">
+
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
−
<ul>
+
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
−
<li><a class="icon fa-home" href="index.html"><span>Introduction</span></a></li>
+
−
<li>
+
−
<a href="#" class="icon fa-bar-chart-o"><span>Dropdown</span></a>
+
−
<ul>
+
−
<li><a href="#">Lorem ipsum dolor</a></li>
+
−
<li><a href="#">Magna phasellus</a></li>
+
−
<li><a href="#">Etiam dolore nisl</a></li>
+
−
<li>
+
−
<a href="#">Phasellus consequat</a>
+
−
<ul>
+
−
<li><a href="#">Magna phasellus</a></li>
+
−
<li><a href="#">Etiam dolore nisl</a></li>
+
−
<li><a href="#">Phasellus consequat</a></li>
+
−
</ul>
+
−
</li>
+
−
<li><a href="#">Veroeros feugiat</a></li>
+
−
</ul>
+
−
</li>
+
−
<li><a class="icon fa-cog" href="left-sidebar.html"><span>Left Sidebar</span></a></li>
+
−
<li><a class="icon fa-retweet" href="right-sidebar.html"><span>Right Sidebar</span></a></li>
+
−
<li><a class="icon fa-sitemap" href="no-sidebar.html"><span>No Sidebar</span></a></li>
+
−
</ul>
+
−
</nav>
+
  
 +
 +
</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>
 
</div>
 +
</div>
  
−
<!-- Main -->
 
−
<div id="main-wrapper">
 
−
<div id="main" class="container">
 
−
<div class="row">
 
  
−
<!-- Content -->
+
<!--img src="https://static.igem.org/mediawiki/2015/0/07/Fond_IONIS.jpg" alt="banner"-->
−
<div id="content" class="8u 12u(mobile)">
+
 
  
−
<!-- Post -->
+
<!-- Introduction -->
−
<article class="box post">
+
<div id="about"  class="container spacer about">
−
<header>
+
<h2 class="text-center wowload fadeInUp" style="color:#ff0000"> <big>Popularization of Synthetic Biology</big></h2>
−
<h2>Behold! This is the <strong>right sidebar</strong> layout<br />
+
<h3 class="text-center wowload fadeInUp">BACT'Man: The hero of the Bio-Console!</h3>
−
with a sidebar on the right!</h2>
+
<div class="row">
−
</header>
+
<div class="col-sm-6 wowload fadeInLeft">
−
<span class="image featured"><img src="images/pic04.jpg" alt="" /></span>
+
<h4><i class="fa fa-gamepad"style="color:#b22222" ></i> The Bio-Console: allow BACT'Man to survive as long as possible </h4>
−
<h3>Right is also not left</h3>
+
<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>Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit
+
<p>The Bio-Console: the first game console, where the games will not be so virtual!</p>
−
ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris
+
</div>
−
sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada
+
−
in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
+
−
magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros
+
−
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
+
−
justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
+
−
mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique.
+
−
Curabitur leo nibh, rutrum eu malesuada in, tristique at erat.</p>
+
−
<p>Erat lorem ipsum veroeros consequat magna tempus lorem ipsum consequat
+
−
Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit ligula
+
−
vel quam viverra sit amet mollis tortor congue. Sed quis mauris sit amet
+
−
magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada in,
+
−
tristique at erat. Curabitur leo nibh, rutrum eu malesuada  in, tristique
+
−
at erat lorem ipsum dolor sit amet lorem ipsum sed consequat magna
+
−
tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros consequat
+
−
magna tempus</p>
+
−
<p>Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit
+
−
ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris
+
−
sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada
+
−
in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
+
−
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
+
−
in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
+
−
magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros
+
−
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
+
−
justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
+
−
mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique.
+
−
Curabitur leo nibh, rutrum eu malesuada in, tristique at erat.</p>
+
−
<h3>Accumsan lorem ipsum veroeros</h3>
+
−
<p>Consequat Phasellus laoreet massa id in, tristique at erat lorem
+
−
ipsum dolor sit amet lorem ipsum sed consequat magna tempus veroeros
+
−
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
+
−
justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
+
−
mollis tortor congue. Sed quis mauris sit amet magna.</p>
+
−
<p>Phasellus laoreet massa id justo mattis pharetra. Fusce suscipit
+
−
ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris
+
−
sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada
+
−
in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
+
−
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
+
−
in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
+
−
magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros
+
−
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
+
−
justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
+
−
mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique.
+
−
Curabitur leo nibh, rutrum eu malesuada in, tristique at erat.</p>
+
−
<h3>Ligula suspcipit fusce veroeros</h3>
+
−
<p>Nullam dolore etiam sed massa id in, tristique at erat lorem
+
−
ipsum dolor sit amet lorem ipsum sed consequat magna tempus veroeros
+
−
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
+
−
justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
+
−
mollis tortor congue. Sed quis mauris sit amet magna.</p>
+
−
<p>Sed massa id justo mattis pharetra. Fusce suscipit
+
−
ligula vel quam viverra sit amet mollis tortor congue. Sed quis mauris
+
−
sit amet magna accumsan tristique. Curabitur leo nibh, rutrum eu malesuada
+
−
in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
+
−
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
+
−
in, tristique at erat lorem ipsum dolor sit amet lorem ipsum sed consequat
+
−
magna tempus veroeros lorem sed tempus aliquam lorem ipsum veroeros
+
−
consequat magna tempus lorem ipsum consequat Phasellus laoreet massa id
+
−
justo mattis pharetra. Fusce suscipit ligula vel quam viverra sit amet
+
−
mollis tortor congue. Sed quis mauris sit amet magna accumsan.</p>
+
−
</article>
+
  
−
</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>
 +
 +
 +
<!-- Circle -->
 +
<div class="services container">
 +
  <h3 class="text-center wowload fadeInUp"> A Multidisciplinary Project</h3>
 +
<ul class="row text-center list-inline  wowload bounceInUp">
 +
<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>
  
−
<!-- Sidebar -->
+
<!-- BOXES -->
−
<div id="sidebar" class="4u 12u(mobile)">
+
<div id="works" class=" clearfix grid">  
  
−
<!-- Excerpts -->
+
<figure class="effect-oscar  wowload fadeInUp" >
−
<section>
+
<img src="https://static.igem.org/mediawiki/2015/3/34/Wii.jpg" alt="img01"/>
−
<ul class="divided">
+
<figcaption>
−
<li>
+
<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-->
  
−
<!-- Excerpt -->
+
<figure class="effect-oscar  wowload fadeInUp">
−
<article class="box excerpt">
+
<img style="width:auto"; src="https://static.igem.org/mediawiki/2015/1/19/NOTE.jpg" alt="img01"/>
−
<header>
+
<figcaption>
−
<span class="date">July 30</span>
+
<h2>NOTEBOOK</h2>
−
<h3><a href="#">Just another post</a></h3>
+
<p>Our Lab experiments notebook<br>
−
</header>
+
<a href="https://2015.igem.org/Team:IONIS_Paris/Notebook" >View more</a></p>          
−
<p>Lorem ipsum dolor odio facilisis convallis. Etiam non nunc vel est
+
</figcaption>
−
suscipit convallis non id orci lorem ipsum sed magna consequat feugiat lorem dolore.</p>
+
</figure>
−
</article>
+
<!--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>
  
−
</li>
+
<figure class="effect-oscar  wowload fadeInUp">
−
<li>
+
<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>
  
−
<!-- Excerpt -->
+
<!-- END BOXES -->
−
<article class="box excerpt">
+
−
<header>
+
−
<span class="date">July 28</span>
+
−
<h3><a href="#">And another post</a></h3>
+
−
</header>
+
−
<p>Lorem ipsum dolor odio facilisis convallis. Etiam non nunc vel est
+
−
suscipit convallis non id orci lorem ipsum sed magna consequat feugiat lorem dolore.</p>
+
−
</article>
+
  
−
</li>
+
</br>
−
<li>
+
</br>
  
−
<!-- Excerpt -->
+
<!-- HIGHLIGHT INFO -->
−
<article class="box excerpt">
+
<div class="highlight-info">
−
<header>
+
<div class="overlay spacer">
−
<span class="date">July 24</span>
+
<div class="container" >
−
<h3><a href="#">One more post</a></h3>
+
<div class="row text-center  wowload fadeInDownBig">
−
</header>
+
<CENTER>
−
<p>Lorem ipsum dolor odio facilisis convallis. Etiam non nunc vel est
+
<div class="col-sm-3 col-xs-6">
−
suscipit convallis non id orci lorem ipsum sed magna consequat feugiat lorem dolore.</p>
+
<i class="fa fa-smile-o  fa-5x"></i><h4>13 Members</h4>
−
</article>
+
</div>
  
−
</li>
+
<div class="col-sm-3 col-xs-6">
−
</ul>
+
<i class="fa fa-map-marker fa-5x"></i><h4>4 Schools</h4>
−
</section>
+
</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>
  
−
<!-- Highlights -->
+
<!-- VIDEO -->
−
<section>
+
<div id="contact" class="spacer">
−
<ul class="divided">
+
<div class="container">
−
<li>
+
<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>
  
−
<!-- Highlight -->
+
<!--SPONSORS-->
−
<article class="box highlight">
+
<div class="sponsors">
−
<header>
+
<div id="contact" class="overlay spacer" >
−
<h3><a href="#">Something of note</a></h3>
+
<div class="container contactform center">
−
</header>
+
<h2 class="text-center  wowload fadeInUp" style="color:#fff">Our sponsors</h2>
−
<a href="#" class="image left"><img src="images/pic06.jpg" alt="" /></a>
+
<br>
−
<p>Phasellus  sed laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam
+
<CENTER>
−
viverra sit amet mollis tortor congue magna lorem ipsum dolor et quisque ut odio facilisis
+
<div class="col-sm-3 col-xs-6">
−
convallis. Etiam non nunc vel est suscipit convallis non id orci. Ut interdum tempus
+
<a href="http://www.supbiotech.fr/en/index.aspx">
−
facilisis convallis. Etiam non nunc vel est suscipit convallis non id orci.</p>
+
<img src="https://static.igem.org/mediawiki/2015/3/30/LOGO-SUPBIOTECH-2015-QUADRI.png" alt="partners" width="150" height=auto>
−
<ul class="actions">
+
</a>
−
<li><a href="#" class="button icon fa-file">Learn More</a></li>
+
</div>
−
</ul>
+
<div class="col-sm-3 col-xs-6">
−
</article>
+
<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>
  
−
</li>
 
−
<li>
 
  
−
<!-- Highlight -->
+
</div>
−
<article class="box highlight">
+
</div>
−
<header>
+
−
<h3><a href="#">Something of less note</a></h3>
+
−
</header>
+
−
<a href="#" class="image left"><img src="images/pic07.jpg" alt="" /></a>
+
−
<p>Phasellus  sed laoreet massa id justo mattis pharetra. Fusce suscipit ligula vel quam
+
−
viverra sit amet mollis tortor congue magna lorem ipsum dolor et quisque ut odio facilisis
+
−
convallis. Etiam non nunc vel est suscipit convallis non id orci. Ut interdum tempus
+
−
facilisis convallis. Etiam non nunc vel est suscipit convallis non id orci.</p>
+
−
<ul class="actions">
+
−
<li><a href="#" class="button icon fa-file">Learn More</a></li>
+
−
</ul>
+
−
</article>
+
  
−
</li>
 
−
</ul>
 
−
</section>
 
  
−
</div>
 
  
−
</div>
 
−
</div>
 
−
</div>
 
  
−
<!-- Footer -->
 
−
<div id="footer-wrapper">
 
−
<div id="footer" class="container">
 
−
<header>
 
−
<h2>Questions or comments? <strong>Get in touch:</strong></h2>
 
−
</header>
 
−
<div class="row">
 
−
<div class="6u 12u(mobile)">
 
−
<section>
 
−
<form method="post" action="#">
 
−
<div class="row 50%">
 
−
<div class="6u 12u(mobile)">
 
−
<input name="name" placeholder="Name" type="text" />
 
−
</div>
 
−
<div class="6u 12u(mobile)">
 
−
<input name="email" placeholder="Email" type="text" />
 
−
</div>
 
−
</div>
 
−
<div class="row 50%">
 
−
<div class="12u">
 
−
<textarea name="message" placeholder="Message"></textarea>
 
−
</div>
 
−
</div>
 
−
<div class="row 50%">
 
−
<div class="12u">
 
−
<a href="#" class="form-button-submit button icon fa-envelope">Send Message</a>
 
−
</div>
 
−
</div>
 
−
</form>
 
−
</section>
 
−
</div>
 
−
<div class="6u 12u(mobile)">
 
−
<section>
 
−
<p>Erat lorem ipsum veroeros consequat magna tempus lorem ipsum consequat Phaselamet
 
−
mollis tortor congue. Sed quis mauris sit amet magna accumsan tristique. Curabitur
 
−
leo nibh, rutrum eu malesuada.</p>
 
−
<div class="row">
 
−
<div class="6u 12u(mobile)">
 
−
<ul class="icons">
 
−
<li class="icon fa-home">
 
−
1234 Somewhere Road<br />
 
−
Nashville, TN 00000<br />
 
−
USA
 
−
</li>
 
−
<li class="icon fa-phone">
 
−
(000) 000-0000
 
−
</li>
 
−
<li class="icon fa-envelope">
 
−
<a href="#">info@untitled.tld</a>
 
−
</li>
 
−
</ul>
 
−
</div>
 
−
<div class="6u 12u(mobile)">
 
−
<ul class="icons">
 
−
<li class="icon fa-twitter">
 
−
<a href="#">@untitled-tld</a>
 
−
</li>
 
−
<li class="icon fa-instagram">
 
−
<a href="#">instagram.com/untitled-tld</a>
 
−
</li>
 
−
<li class="icon fa-dribbble">
 
−
<a href="#">dribbble.com/untitled-tld</a>
 
−
</li>
 
−
<li class="icon fa-facebook">
 
−
<a href="#">facebook.com/untitled-tld</a>
 
−
</li>
 
−
</ul>
 
−
</div>
 
−
</div>
 
−
</section>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
<div id="copyright" class="container">
 
−
<ul class="links">
 
−
<li>&copy; Untitled. All rights reserved.</li><li>Design: <a href="http://html5up.net">HTML5 UP</a></li>
 
−
</ul>
 
−
</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>
 
</div>
  
−
<!-- Scripts -->
+
 
−
+
 
−
<script src="assets/js/jquery.dropotron.min.js"></script>
+
<!-- UP TOP -->
−
<script src="assets/js/skel.min.js"></script>
+
 
−
<script src="assets/js/skel-viewport.min.js"></script>
+
<a href="#banner" class="gototop "><i class="fa fa-chevron-circle-up  fa-3x"></i></a>
−
<script src="assets/js/util.js"></script>
+
 
−
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
+
 
−
<script src="assets/js/main.js"></script>
+
  
 
</body>
 
</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 ?