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

Line 1: Line 1:
<html lang="en">
+
<html>
  
 
<head>
 
<head>
 +
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <meta name="description" content="">
 
     <meta name="description" content="">
 
     <meta name="author" content="">
 
     <meta name="author" content="">
  
     <title>IONIS Paris 2015</title>
+
     <title>IONIS iGEM 2015</title>
  
 +
 
 +
   
 +
</head>
  
 +
<body>
  
</head>
 
  
<body id="page-top" data-spy="scroll" data-target=".navbar-custom">
 
<!-- Preloader -->
 
<div id="preloader">
 
  <div id="load"></div>
 
</div>
 
  
     <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
+
     <!-- Header -->
 +
    <header id="top" class="header">
 +
        <div class="text-vertical-center">
 +
            <h1>HOME</h1>
 +
            <h3>The Bio Console</h3>
 +
            <br>
 +
            <a href="#about" class="btn btn-dark btn-lg">More</a>
 +
        </div>
 +
    </header>
 +
 
 +
    <!-- About -->
 +
    <section id="about" class="about">
 
         <div class="container">
 
         <div class="container">
             <div class="navbar-header page-scroll">
+
             <div class="row">
                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
+
                 <div class="col-lg-12 text-center">
                     <i class="fa fa-bars"></i>
+
                     <h2>Learn about our project!</h2>
                </button>
+
                 
                <a class="navbar-brand" href="index.html">
+
                 </div>
                    <h1>SQUAD FREE</h1>
+
                 </a>
+
 
             </div>
 
             </div>
 
+
             <!-- /.row -->
            <!-- Collect the nav links, forms, and other content for toggling -->
+
            <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
+
      <ul class="nav navbar-nav">
+
        <li class="active"><a href="#intro">Home</a></li>
+
        <li><a href="#about">About</a></li>
+
<li><a href="#service">Service</a></li>
+
<li><a href="#contact">Contact</a></li>
+
        <li class="dropdown">
+
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
+
          <ul class="dropdown-menu">
+
            <li><a href="#">Example menu</a></li>
+
            <li><a href="#">Example menu</a></li>
+
            <li><a href="#">Example menu</a></li>
+
          </ul>
+
        </li>
+
      </ul>
+
            </div>
+
             <!-- /.navbar-collapse -->
+
 
         </div>
 
         </div>
 
         <!-- /.container -->
 
         <!-- /.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>
<!-- /Section: intro -->
 
  
<!-- Section: about -->
+
    <!-- Services -->
     <section id="about" class="home-section text-center">
+
    <!-- The circle icons use Font Awesome's stacked icon classes.-->
<div class="heading-about">
+
     <section id="services" class="services bg-primary">
<div class="container">
+
        <div class="container">
<div class="row">
+
            <div class="row text-center">
<div class="col-lg-8 col-lg-offset-2">
+
                <div class="col-lg-10 col-lg-offset-1">
<div class="wow bounceInDown" data-wow-delay="0.4s">
+
                    <h2>Our Project</h2>
<div class="section-heading">
+
                    <hr class="small">
<h2>About us</h2>
+
                    <div class="row">
<i class="fa fa-2x fa-angle-down"></i>
+
                        <div class="col-md-3 col-sm-6">
 
+
                            <div class="service-item">
</div>
+
                                <span class="fa-stack fa-4x">
</div>
+
                                <i class="fa fa-circle fa-stack-2x"></i>
</div>
+
                                <i class="fa fa-cloud fa-stack-1x text-primary"></i>
</div>
+
                            </span>
</div>
+
                                <h4>
</div>
+
                                    <strong>Bio Console</strong>
<div class="container">
+
                                </h4>
 
+
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div class="row">
+
                                <a href="#" class="btn btn-light">Learn More</a>
<div class="col-lg-2 col-lg-offset-5">
+
                            </div>
<hr class="marginbot-50">
+
                        </div>
</div>
+
                        <div class="col-md-3 col-sm-6">
</div>
+
                            <div class="service-item">
        <div class="row">
+
                                <span class="fa-stack fa-4x">
            <div class="col-xs-6 col-sm-3 col-md-3">
+
                                <i class="fa fa-circle fa-stack-2x"></i>
<div class="wow bounceInUp" data-wow-delay="0.2s">
+
                                <i class="fa fa-compass fa-stack-1x text-primary"></i>
                <div class="team boxed-grey">
+
                            </span>
                    <div class="inner">
+
                                <h4>
<h5>Anna Hanaceck</h5>
+
                                    <strong>Mobile application</strong>
                        <p class="subtitle">Pixel Crafter</p>
+
                                </h4>
                         <div class="avatar"><img src="img/team/1.jpg" alt="" class="img-responsive img-circle" /></div>
+
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 +
                                <a href="#" class="btn btn-light">Learn More</a>
 +
                            </div>
 +
                        </div>
 +
                        <div class="col-md-3 col-sm-6">
 +
                            <div class="service-item">
 +
                                <span class="fa-stack fa-4x">
 +
                                <i class="fa fa-circle fa-stack-2x"></i>
 +
                                <i class="fa fa-flask fa-stack-1x text-primary"></i>
 +
                            </span>
 +
                                <h4>
 +
                                    <strong>Human Practices</strong>
 +
                                </h4>
 +
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 +
                                <a href="#" class="btn btn-light">Learn More</a>
 +
                            </div>
 +
                        </div>
 +
                         <div class="col-md-3 col-sm-6">
 +
                            <div class="service-item">
 +
                                <span class="fa-stack fa-4x">
 +
                                <i class="fa fa-circle fa-stack-2x"></i>
 +
                                <i class="fa fa-shield fa-stack-1x text-primary"></i>
 +
                            </span>
 +
                                <h4>
 +
                                    <strong>Modeling</strong>
 +
                                </h4>
 +
                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
 +
                                <a href="#" class="btn btn-light">Learn More</a>
 +
                            </div>
 +
                        </div>
 
                     </div>
 
                     </div>
 +
                    <!-- /.row (nested) -->
 
                 </div>
 
                 </div>
</div>
+
                <!-- /.col-lg-10 -->
 
             </div>
 
             </div>
<div class="col-xs-6 col-sm-3 col-md-3">
+
            <!-- /.row -->
<div class="wow bounceInUp" data-wow-delay="0.5s">
+
        </div>
                <div class="team boxed-grey">
+
        <!-- /.container -->
                    <div class="inner">
+
    </section>
<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>
+
    <!-- Callout -->
                </div>
+
    <aside class="callout">
</div>
+
        <div class="text-vertical-center">
            </div>
+
            <h1>IONIS Paris 2015</h1>
<div class="col-xs-6 col-sm-3 col-md-3">
+
        </div>
<div class="wow bounceInUp" data-wow-delay="0.8s">
+
    </aside>
                <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>
+
    <!-- Portfolio -->
                </div>
+
    <section id="portfolio" class="portfolio">
</div>
+
        <div class="container">
             </div>
+
             <div class="row">
<div class="col-xs-6 col-sm-3 col-md-3">
+
                <div class="col-lg-10 col-lg-offset-1 text-center">
<div class="wow bounceInUp" data-wow-delay="1s">
+
                    <h2>Our sponsors</h2>
                <div class="team boxed-grey">
+
                    <hr class="small">
                     <div class="inner">
+
                     <div class="row">
<h5>Tom Petterson</h5>
+
                         <div class="col-md-6">
                         <p class="subtitle">Typographer</p>
+
                            <div class="portfolio-item">
                        <div class="avatar"><img src="img/team/4.jpg" alt="" class="img-responsive img-circle" /></div>
+
                                <a href="#">  
  
 +
                                    <img class="img-portfolio img-responsive" src="https://static.igem.org/mediawiki/2015/9/9b/Logo-epita-hd.png">
 +
                                </a>
 +
                            </div>
 +
                        </div>
 +
                        <div class="col-md-6">
 +
                            <div class="portfolio-item">
 +
                                <a href="#">
 +
                                    <img class="img-portfolio img-responsive" src="https://static.igem.org/mediawiki/2015/6/6d/NEW-LOGO-EART-BASELINE-SIMPLE.jpg">
 +
                                </a>
 +
                            </div>
 +
                        </div>
 +
                        <div class="col-md-6">
 +
                            <div class="portfolio-item">
 +
                                <a href="#">
 +
                                    <img class="img-portfolio img-responsive" src="https://static.igem.org/mediawiki/2015/5/59/Uni_Logo.png">
 +
                                </a>
 +
                            </div>
 +
                        </div>
 +
                        <div class="col-md-6">
 +
                            <div class="portfolio-item">
 +
                                <a href="#">
 +
                                    <img class="img-portfolio img-responsive" src="https://static.igem.org/mediawiki/2015/3/30/LOGO-SUPBIOTECH-2015-QUADRI.png">
 +
                                </a>
 +
                            </div>
 +
                        </div>
 
                     </div>
 
                     </div>
 +
                    <!-- /.row (nested) -->
 +
                    <a href="#" class="btn btn-dark">View More Items</a>
 
                 </div>
 
                 </div>
</div>
+
                <!-- /.col-lg-10 -->
 
             </div>
 
             </div>
        </div>
+
            <!-- /.row -->
</div>
+
        </div>
</section>
+
        <!-- /.container -->
<!-- /Section: about -->
+
    </section>
+
  
<!-- Section: services -->
+
    <!-- Call to Action -->
     <section id="service" class="home-section text-center bg-gray">
+
     <aside class="call-to-action bg-primary">
+
        <div class="container">
<div class="heading-about">
+
            <div class="row">
<div class="container">
+
                <div class="col-lg-12 text-center">
<div class="row">
+
                    <h3>The buttons below are impossible to resist.</h3>
<div class="col-lg-8 col-lg-offset-2">
+
                    <a href="#" class="btn btn-lg btn-light">Click Me!</a>
<div class="wow bounceInDown" data-wow-delay="0.4s">
+
                    <a href="#" class="btn btn-lg btn-dark">Look at Me!</a>
<div class="section-heading">
+
<h2>Our Services</h2>
+
<i class="fa fa-2x fa-angle-down"></i>
+
 
+
</div>
+
</div>
+
</div>
+
</div>
+
</div>
+
</div>
+
<div class="container">
+
<div class="row">
+
<div class="col-lg-2 col-lg-offset-5">
+
<hr class="marginbot-50">
+
</div>
+
</div>
+
        <div class="row">
+
            <div class="col-sm-3 col-md-3">
+
<div class="wow fadeInLeft" data-wow-delay="0.2s">
+
                <div class="service-box">
+
<div class="service-icon">
+
<img src="img/icons/service-icon-1.png" alt="" />
+
</div>
+
<div class="service-desc">
+
<h5>Print</h5>
+
<p>Vestibulum tincidunt enim in pharetra malesuada. Duis semper magna metus electram accommodare.</p>
+
</div>
+
 
                 </div>
 
                 </div>
</div>
 
 
             </div>
 
             </div>
<div class="col-sm-3 col-md-3">
+
         </div>
<div class="wow fadeInUp" data-wow-delay="0.2s">
+
    </aside>
                <div class="service-box">
+
<div class="service-icon">
+
<img src="img/icons/service-icon-2.png" alt="" />
+
</div>
+
<div class="service-desc">
+
<h5>Web Design</h5>
+
<p>Vestibulum tincidunt enim in pharetra malesuada. Duis semper magna metus electram accommodare.</p>
+
</div>
+
                </div>
+
</div>
+
            </div>
+
<div class="col-sm-3 col-md-3">
+
<div class="wow fadeInUp" data-wow-delay="0.2s">
+
                <div class="service-box">
+
<div class="service-icon">
+
<img src="img/icons/service-icon-3.png" alt="" />
+
</div>
+
<div class="service-desc">
+
<h5>Photography</h5>
+
<p>Vestibulum tincidunt enim in pharetra malesuada. Duis semper magna metus electram accommodare.</p>
+
</div>
+
                </div>
+
</div>
+
            </div>
+
<div class="col-sm-3 col-md-3">
+
<div class="wow fadeInRight" data-wow-delay="0.2s">
+
                <div class="service-box">
+
<div class="service-icon">
+
<img src="img/icons/service-icon-4.png" alt="" />
+
</div>
+
<div class="service-desc">
+
<h5>Cloud System</h5>
+
<p>Vestibulum tincidunt enim in pharetra malesuada. Duis semper magna metus electram accommodare.</p>
+
</div>
+
                </div>
+
</div>
+
            </div>
+
         </div>
+
</div>
+
</section>
+
<!-- /Section: services -->
+
+
  
+
    <!-- Map -->
 +
    <section id="contact" class="map">
 +
        <iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;aq=0&amp;oq=twitter&amp;sll=28.659344,-81.187888&amp;sspn=0.128789,0.264187&amp;ie=UTF8&amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;t=m&amp;z=15&amp;iwloc=A&amp;output=embed"></iframe>
 +
        <br />
 +
        <small>
 +
            <a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;aq=0&amp;oq=twitter&amp;sll=28.659344,-81.187888&amp;sspn=0.128789,0.264187&amp;ie=UTF8&amp;hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&amp;t=m&amp;z=15&amp;iwloc=A"></a>
 +
        </small>
 +
        </iframe>
 +
    </section>
  
<!-- Section: contact -->
+
    <!-- Footer -->
     <section id="contact" class="home-section text-center">
+
     <footer>
<div class="heading-contact">
+
        <div class="container">
<div class="container">
+
            <div class="row">
<div class="row">
+
                <div class="col-lg-10 col-lg-offset-1 text-center">
<div class="col-lg-8 col-lg-offset-2">
+
                    <h4><strong>Contact</strong>
<div class="wow bounceInDown" data-wow-delay="0.4s">
+
                    </h4>
<div class="section-heading">
+
                    <p>66 rue Guy Moquet<br>94800 Villejuif, France</p>
<h2>Get in touch</h2>
+
                    <ul class="list-unstyled">
<i class="fa fa-2x fa-angle-down"></i>
+
                        <li><i class="fa fa-phone fa-fw"></i> (+336) 99 27 61 86</li>
 +
                        <li><i class="fa fa-envelope-o fa-fw"></i>  <a href="mailto:ionis.igem@gmail.com">ionis.igem@gmail.com</a>
 +
                        </li>
 +
                    </ul>
 +
                    <br>
 +
                    <ul class="list-inline">
 +
                        <li>
 +
                            <a href="https://twitter.com/IONIS_iGEM"><i class="fa fa-facebook fa-fw fa-3x"></i></a>
 +
                        </li>
 +
                        <li>
 +
                            <a href="https://www.facebook.com/ionisigem?fref=ts"><i class="fa fa-twitter fa-fw fa-3x"></i></a>
 +
                        </li>
  
</div>
+
                    </ul>
</div>
+
                    <hr class="small">
</div>
+
                     <p class="text-muted">Copyright &copy; Our Website 2015</p>
</div>
+
</div>
+
</div>
+
<div class="container">
+
 
+
<div class="row">
+
<div class="col-lg-2 col-lg-offset-5">
+
<hr class="marginbot-50">
+
</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>
 
                 </div>
                </form>
 
 
             </div>
 
             </div>
 
         </div>
 
         </div>
+
     </footer>
<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>
+
 
+
</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');
+
  ga('send', 'pageview');
+
  
</script>
 
  
 +
 
  
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 11:20, 27 July 2015

IONIS iGEM 2015

HOME

The Bio Console


More

Learn about our project!

Our Project


Bio Console

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Learn More

Mobile application

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Learn More

Human Practices

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Learn More

Modeling

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Learn More

Contact

66 rue Guy Moquet
94800 Villejuif, France



Copyright © Our Website 2015