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

 
(229 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html lang="en">
 
<html lang="en">
 +
<head>
 +
<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, maximum-scale=1, user-scalable=no">
 +
<title >IONIS Paris</title>
  
−
<head>
+
<!-- Google fonts -->
−
    <meta charset="utf-8">
+
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
−
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
−
    <meta name="description" content="">
+
−
    <meta name="author" content="">
+
  
−
    <title>IONIS Paris 2015</title>
+
<!-- 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>
+
</head>
  
−
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
+
<body>
−
<!-- Preloader -->
+
<div class="topbar animated fadeInLeftBig"></div>
−
<div id="preloader">
+
−
  <div id="load"></div>
+
−
</div>
+
  
−
    <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
+
<!-- Banner -->
−
        <div class="container">
+
−
            <div class="navbar-header page-scroll">
+
−
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
+
−
                    <i class="fa fa-bars"></i>
+
−
                </button>
+
−
                <a class="navbar-brand" href="index.html">
+
−
                    <h1>SQUAD FREE</h1>
+
−
                </a>
+
−
            </div>
+
  
−
            <!-- Collect the nav links, forms, and other content for toggling -->
+
<div class="banner row" id="banner">
−
            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
+
<div class="parallax text-center" style="background-image: url(https://static.igem.org/mediawiki/2015/2/2f/TEST.jpg);width:100%;">
−
      <ul class="nav navbar-nav">
+
<div class="parallax-pattern-overlay" style="background: rgb(200,200,200,0.6);background-size: cover; color:#fff; ">
−
        <li class="active"><a href="#intro">Home</a></li>
+
<div class="container text-center" style="height:580px;padding-top:20px;">
−
        <li><a href="#about">About</a></li>
+
<h2 class="intro wow zoomIn" wow-data-delay="0.4s" wow-data-duration="0.9s" style="padding-top:75px;">IONIS Paris iGEM</h2>
−
<li><a href="#service">Service</a></li>
+
<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>
−
<li><a href="#contact">Contact</a></li>
+
<!-- https://static.igem.org/mediawiki/2015/8/83/Logo_IONIS.png -->
−
        <li class="dropdown">
+
−
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+
</div>
−
          <ul class="dropdown-menu">
+
</div>
−
            <li><a href="#">Example menu</a></li>
+
</div>
−
            <li><a href="#">Example menu</a></li>
+
</div>
−
            <li><a href="#">Example menu</a></li>
+
−
          </ul>
+
−
        </li>
+
−
      </ul>
+
−
            </div>
+
−
            <!-- /.navbar-collapse -->
+
−
        </div>
+
−
        <!-- /.container -->
+
−
    </nav>
+
  
−
<!-- Section: intro -->
 
−
    <section id="intro" class="intro">
 
−
 
−
<div class="slogan">
 
−
<h2>WELCOME TO <span class="text_color">SQUAD</span> </h2>
 
−
<h4>WE ARE GROUP OF GENTLEMEN MAKING AWESOME WEB WITH BOOTSTRAP</h4>
 
−
</div>
 
−
<div class="page-scroll">
 
−
<a href="#service" class="btn btn-circle">
 
−
<i class="fa fa-angle-double-down animated"></i>
 
−
</a>
 
−
</div>
 
−
    </section>
 
−
<!-- /Section: intro -->
 
  
−
<!-- Section: about -->
+
<!--img src="https://static.igem.org/mediawiki/2015/0/07/Fond_IONIS.jpg" alt="banner"-->
−
    <section id="about" class="home-section text-center">
+
 
−
<div class="heading-about">
+
 
−
<div class="container">
+
<!-- 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="row">
−
<div class="col-lg-8 col-lg-offset-2">
+
<div class="col-sm-6 wowload fadeInLeft">
−
<div class="wow bounceInDown" data-wow-delay="0.4s">
+
<h4><i class="fa fa-gamepad"style="color:#b22222" ></i> The Bio-Console: allow BACT'Man to survive as long as possible </h4>
−
<div class="section-heading">
+
<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>
−
<h2>About us</h2>
+
<p>The Bio-Console: the first game console, where the games will not be so virtual!</p>
−
<i class="fa fa-2x fa-angle-down"></i>
+
</div>
  
−
</div>
+
<div class="col-sm-6 wowload fadeInRight">
−
</div>
+
<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>
 
 
</div>
 
</div>
 
</div>
 
</div>
−
<div class="container">
+
−
 
+
−
<div class="row">
+
<!-- Circle -->
−
<div class="col-lg-2 col-lg-offset-5">
+
<div class="services container">
−
<hr class="marginbot-50">
+
  <h3 class="text-center wowload fadeInUp"> A Multidisciplinary Project</h3>
−
</div>
+
<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>
 
</div>
−
        <div class="row">
 
−
            <div class="col-xs-6 col-sm-3 col-md-3">
 
−
<div class="wow bounceInUp" data-wow-delay="0.2s">
 
−
                <div class="team boxed-grey">
 
−
                    <div class="inner">
 
−
<h5>Anna Hanaceck</h5>
 
−
                        <p class="subtitle">Pixel Crafter</p>
 
−
                        <div class="avatar"><img src="img/team/1.jpg" alt="" class="img-responsive img-circle" /></div>
 
−
                    </div>
 
−
                </div>
 
−
</div>
 
−
            </div>
 
−
<div class="col-xs-6 col-sm-3 col-md-3">
 
−
<div class="wow bounceInUp" data-wow-delay="0.5s">
 
−
                <div class="team boxed-grey">
 
−
                    <div class="inner">
 
−
<h5>Maura Daniels</h5>
 
−
                        <p class="subtitle">Ruby on Rails</p>
 
−
                        <div class="avatar"><img src="img/team/2.jpg" alt="" class="img-responsive img-circle" /></div>
 
  
−
                    </div>
+
<!-- BOXES -->
−
                </div>
+
<div id="works" class=" clearfix grid">  
−
</div>
+
−
            </div>
+
−
<div class="col-xs-6 col-sm-3 col-md-3">
+
−
<div class="wow bounceInUp" data-wow-delay="0.8s">
+
−
                <div class="team boxed-grey">
+
−
                    <div class="inner">
+
−
<h5>Jack Briane</h5>
+
−
                        <p class="subtitle">jQuery Ninja</p>
+
−
                        <div class="avatar"><img src="img/team/3.jpg" alt="" class="img-responsive img-circle" /></div>
+
  
−
                    </div>
+
<figure class="effect-oscar  wowload fadeInUp" >
−
                </div>
+
<img src="https://static.igem.org/mediawiki/2015/3/34/Wii.jpg" alt="img01"/>
−
</div>
+
<figcaption>
−
            </div>
+
<h2>BIO-CONSOLE</h2>
−
<div class="col-xs-6 col-sm-3 col-md-3">
+
<p>Our reality game using bacteria<br>
−
<div class="wow bounceInUp" data-wow-delay="1s">
+
<a href="https://2015.igem.org/Team:IONIS_Paris/Project" >View more</a></p>          
−
                <div class="team boxed-grey">
+
</figcaption>
−
                    <div class="inner">
+
</figure>
−
<h5>Tom Petterson</h5>
+
−
                        <p class="subtitle">Typographer</p>
+
−
                        <div class="avatar"><img src="img/team/4.jpg" alt="" class="img-responsive img-circle" /></div>
+
 +
<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-->
  
−
                    </div>
+
<figure class="effect-oscar  wowload fadeInUp">
−
                </div>
+
<img style="width:auto"; src="https://static.igem.org/mediawiki/2015/1/19/NOTE.jpg" alt="img01"/>
−
</div>
+
<figcaption>
−
            </div>
+
<h2>NOTEBOOK</h2>
−
        </div>
+
<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>
 
</div>
−
</section>
 
−
<!-- /Section: about -->
 
−
 
  
−
<!-- Section: services -->
+
<!-- END BOXES -->
−
    <section id="service" class="home-section text-center bg-gray">
+
−
+
−
<div class="heading-about">
+
−
<div class="container">
+
−
<div class="row">
+
−
<div class="col-lg-8 col-lg-offset-2">
+
−
<div class="wow bounceInDown" data-wow-delay="0.4s">
+
−
<div class="section-heading">
+
−
<h2>Our Services</h2>
+
−
<i class="fa fa-2x fa-angle-down"></i>
+
  
 +
</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>
 +
 +
<div class="col-sm-3 col-xs-6">
 +
<i class="fa fa-map-marker fa-5x"></i><h4>4 Schools</h4>
 
</div>
 
</div>
−
</div>
+
−
</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>
 +
</div>
 +
</div>
 +
 +
<!-- VIDEO -->
 +
<div id="contact" class="spacer">
 
<div class="container">
 
<div class="container">
−
<div class="row">
+
<h2 class="text-center  wowload fadeInUp">What is iGEM ?</h2>
−
<div class="col-lg-2 col-lg-offset-5">
+
<CENTER>
−
<hr class="marginbot-50">
+
<video width="500" height="281.25" poster="https://static.igem.org/mediawiki/2015/8/83/Logo_IONIS.png" controls>
−
</div>
+
<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>
−
        <div class="row">
+
</div>
−
            <div class="col-sm-3 col-md-3">
+
 
−
<div class="wow fadeInLeft" data-wow-delay="0.2s">
+
<!--SPONSORS-->
−
                <div class="service-box">
+
<div class="sponsors">
−
<div class="service-icon">
+
<div id="contact" class="overlay spacer" >
−
<img src="img/icons/service-icon-1.png" alt="" />
+
<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>
−
<div class="service-desc">
+
<div class="col-sm-3 col-xs-6">
−
<h5>Print</h5>
+
<a href="http://www.e-artsup.net/">
−
<p>Vestibulum tincidunt enim in pharetra malesuada. Duis semper magna metus electram accommodare.</p>
+
<img src="https://static.igem.org/mediawiki/2015/9/98/Logo-e-artsup.png" alt="partners" width="150" height=auto>
 +
</a>
 
</div>
 
</div>
−
                </div>
+
<div class="col-sm-3 col-xs-6">
−
</div>
+
<a href="http://www.epita.fr/international/">
−
            </div>
+
<img src="https://static.igem.org/mediawiki/2015/9/9b/Logo-epita-hd.png" alt="partners" width="150" height=auto>
−
<div class="col-sm-3 col-md-3">
+
</a>
−
<div class="wow fadeInUp" data-wow-delay="0.2s">
+
−
                <div class="service-box">
+
−
<div class="service-icon">
+
−
<img src="img/icons/service-icon-2.png" alt="" />
+
 
</div>
 
</div>
−
<div class="service-desc">
+
<div class="col-sm-3 col-xs-6">
−
<h5>Web Design</h5>
+
<a href="http://ionis-group.com/">
−
<p>Vestibulum tincidunt enim in pharetra malesuada. Duis semper magna metus electram accommodare.</p>
+
<img src="https://static.igem.org/mediawiki/2015/2/2e/Logo_ionis.jpg" alt="partners" width="150" height=auto>
 +
</a>
 
</div>
 
</div>
−
                </div>
+
</CENTER>
−
</div>
+
</div>
−
            </div>
+
<br>
−
<div class="col-sm-3 col-md-3">
+
−
<div class="wow fadeInUp" data-wow-delay="0.2s">
+
<div class="container contactform center">
−
                <div class="service-box">
+
<br>
−
<div class="service-icon">
+
<CENTER>
−
<img src="img/icons/service-icon-3.png" alt="" />
+
<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>
−
<div class="service-desc">
+
−
<h5>Photography</h5>
+
<div class="col-sm-3 col-xs-6">
−
<p>Vestibulum tincidunt enim in pharetra malesuada. Duis semper magna metus electram accommodare.</p>
+
<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>
−
                </div>
+
−
</div>
+
<div class="col-sm-3 col-xs-6">
−
            </div>
+
<a href="https://www.neb.com/">
−
<div class="col-sm-3 col-md-3">
+
<img src="https://static.igem.org/mediawiki/2015/e/e1/NEB.png" alt="partners" width="150" height=auto>
−
<div class="wow fadeInRight" data-wow-delay="0.2s">
+
</a>
−
                <div class="service-box">
+
−
<div class="service-icon">
+
−
<img src="img/icons/service-icon-4.png" alt="" />
+
 
</div>
 
</div>
−
<div class="service-desc">
+
−
<h5>Cloud System</h5>
+
<div class="col-sm-3 col-xs-6">
−
<p>Vestibulum tincidunt enim in pharetra malesuada. Duis semper magna metus electram accommodare.</p>
+
<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>
−
                </div>
+
−
</div>
+
<div class="col-sm-3 col-xs-6">
−
            </div>
+
<a href="https://www.kickstarter.com/">
−
        </div>
+
<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>
−
</div>
+
</a>
−
</section>
+
−
<!-- /Section: services -->
+
−
+
−
 
+
−
+
−
 
+
−
<!-- Section: contact -->
+
−
    <section id="contact" class="home-section text-center">
+
−
<div class="heading-contact">
+
−
<div class="container">
+
−
<div class="row">
+
−
<div class="col-lg-8 col-lg-offset-2">
+
−
<div class="wow bounceInDown" data-wow-delay="0.4s">
+
−
<div class="section-heading">
+
−
<h2>Get in touch</h2>
+
−
<i class="fa fa-2x fa-angle-down"></i>
+
−
 
+
 
</div>
 
</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>
−
</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>
 
−
</div>
 
−
<div class="container">
 
  
−
<div class="row">
+
 
−
<div class="col-lg-2 col-lg-offset-5">
+
</div>
−
<hr class="marginbot-50">
+
−
</div>
+
 
</div>
 
</div>
−
    <div class="row">
 
−
        <div class="col-lg-8">
 
−
            <div class="boxed-grey">
 
−
                <form id="contact-form">
 
−
                <div class="row">
 
−
                    <div class="col-md-6">
 
−
                        <div class="form-group">
 
−
                            <label for="name">
 
−
                                Name</label>
 
−
                            <input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
 
−
                        </div>
 
−
                        <div class="form-group">
 
−
                            <label for="email">
 
−
                                Email Address</label>
 
−
                            <div class="input-group">
 
−
                                <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
 
−
                                </span>
 
−
                                <input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div>
 
−
                        </div>
 
−
                        <div class="form-group">
 
−
                            <label for="subject">
 
−
                                Subject</label>
 
−
                            <select id="subject" name="subject" class="form-control" required="required">
 
−
                                <option value="na" selected="">Choose One:</option>
 
−
                                <option value="service">General Customer Service</option>
 
−
                                <option value="suggestions">Suggestions</option>
 
−
                                <option value="product">Product Support</option>
 
−
                            </select>
 
−
                        </div>
 
−
                    </div>
 
−
                    <div class="col-md-6">
 
−
                        <div class="form-group">
 
−
                            <label for="name">
 
−
                                Message</label>
 
−
                            <textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
 
−
                                placeholder="Message"></textarea>
 
−
                        </div>
 
−
                    </div>
 
−
                    <div class="col-md-12">
 
−
                        <button type="submit" class="btn btn-skin pull-right" id="btnContactUs">
 
−
                            Send Message</button>
 
−
                    </div>
 
−
                </div>
 
−
                </form>
 
−
            </div>
 
−
        </div>
 
 
 
−
<div class="col-lg-4">
 
−
<div class="widget-contact">
 
−
<h5>Main Office</h5>
 
−
 
−
<address>
 
−
  <strong>Squas Design, Inc.</strong><br>
 
−
  Tower 795 Folsom Ave, Beautiful Suite 600<br>
 
−
  San Francisco, CA 94107<br>
 
−
  <abbr title="Phone">P:</abbr> (123) 456-7890
 
−
</address>
 
  
−
<address>
 
−
  <strong>Email</strong><br>
 
−
  <a href="mailto:ionis.igem@gmail.com">ionis.igem@gmail.com</a>
 
−
</address>
 
−
<address>
 
−
  <strong>We're on social networks</strong><br>
 
−
                      <ul class="company-social">
 
−
                            <li class="social-facebook"><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>
 
−
                            <li class="social-twitter"><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>
 
−
                            <li class="social-dribble"><a href="#" target="_blank"><i class="fa fa-dribbble"></i></a></li>
 
−
                            <li class="social-google"><a href="#" target="_blank"><i class="fa fa-google-plus"></i></a></li>
 
−
                        </ul>
 
−
</address>
 
−
 
−
</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>
 
</div>
−
</section>
 
−
<!-- /Section: contact -->
 
  
−
<footer>
 
−
<div class="container">
 
−
<div class="row">
 
−
<div class="col-md-12 col-lg-12">
 
−
<div class="wow shake" data-wow-delay="0.4s">
 
−
<div class="page-scroll marginbot-30">
 
−
<a href="#intro" id="totop" class="btn btn-circle">
 
−
<i class="fa fa-angle-double-up animated"></i>
 
−
</a>
 
−
</div>
 
−
</div>
 
−
<p>&copy;Copyright 2014 - Squad. All rights reserved.</p>
 
−
</div>
 
−
</div>
 
−
</div>
 
−
</footer>
 
  
−
<script>
 
−
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 
−
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 
−
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 
−
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
  
−
  ga('create', 'UA-55234356-2', 'auto');
+
<!-- UP TOP -->
−
  ga('send', 'pageview');
+
  
−
</script>
+
<a href="#banner" class="gototop "><i class="fa fa-chevron-circle-up  fa-3x"></i></a>
  
  
−
</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 ?