Difference between revisions of "Team:Aix-Marseille"

Line 1: Line 1:
−
{{Aix-Marseille/architecturePageCSS}}
+
<!DOCTYPE html>
 +
<html lang="en">
  
−
<html>  
+
<head>
  
−
<script type="text/javascript" src="https://2015.igem.org/Team:Aix-Marseille/JS_2015/automatic_slide?
+
    <meta charset="utf-8">
−
action=raw&ctype=text/javascript"></script>
+
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
−
<script type="text/javascript" src="https://2015.igem.org/Team:Aix-Marseille/JS_2015/logo_animation?
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
−
action=raw&ctype=text/javascript"></script>
+
    <meta name="description" content="">
 +
    <meta name="author" content="">
  
−
<!-- PAGE WEB ICI -->
+
    <title>Titre de la page</title>
  
−
<div id="wiki_wrapper">
+
    <!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
−
<!-- BANNIERE / MENU  AVEC IMAGE DE FOND 1-->
+
    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/flatly/bootstrap.min.css" rel="stylesheet" >
−
<div id="background_pic1">
+
 
−
<div id="banniere"> Aix-Marseille IGEM team present it's project: Chew Fight
+
    <!-- Custom CSS -->
−
<div id="animation_header">
+
    <link href="http://ironsummitmedia.github.io/startbootstrap-freelancer/css/freelancer.css" rel="stylesheet">
−
<div id="mascotte">
+
 
−
<img src="https://static.igem.org/mediawiki/2015/e/e9/Aix-Marseille_Mascotte-statique.png"></img>
+
    <!-- Custom Fonts -->
−
</div>
+
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-k2/8zcNbxVIh5mnQ52A0r3a6jAgMGxFJFE2707UxGCk= sha512-ZV9KawG2Legkwp3nAlxLIVFudTauWuBpC10uEafMHYL0Sarrz5A7G79kXh5+5+woxQ5HM559XX2UZjMJ36Wplg==" crossorigin="anonymous">
−
</div>
+
    <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
−
</div>
+
    <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
−
<div id="menu" align="center">
+
 
−
<ul id="menu_ul">
+
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
−
<li><a id="Ong1" href="https://2015.igem.org/Team:Aix-Marseille"> Home </a></li>
+
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
−
<li><a id="Ong2" href="https://2015.igem.org/Team:Aix-Marseille/Project"> Project </a></li>
+
    <!--[if lt IE 9]>
−
<li><a id="Ong3" href="https://2015.igem.org/Team:Aix-Marseille/Team"> Team </a></li>
+
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
−
<li><a id="Ong4" href="https://2015.igem.org/Team:Aix-Marseille/Notebook"> Notebook </a></li>
+
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
−
<li><a id="Ong5" href="https://2015.igem.org/Team:Aix-Marseille/Safety"> Safety </a></li>
+
    <![endif]-->
−
<li><a id="Ong6" href="https://2015.igem.org/Team:Aix-Marseille/Interlab Study"> Interlab Study </a></li>
+
 
−
                                                <li><a id="Ong7" href="https://2015.igem.org/Team:Aix-Marseille/Modeling"> Modeling </a></li>
+
    <!-- wow CSS -->
−
                                                <li><a id="Ong8" href="https://2015.igem.org/Team:Aix-Marseille/Software"> Software </a></li>
+
    <link rel="stylesheet" type="text/css" href="http://mynameismatthieu.com/WOW/css/libs/animate.css">
−
                                                <li><a id="Ong9" href="https://2015.igem.org/Team:Aix-Marseille/Judging"> Judging </a></li>
+
 
−
</ul>
+
</head>
−
</div>
+
 
−
</div>
+
<body id="page-top" class="index">
 +
 
 +
    <!-- Navigation -->
 +
    <nav class="navbar navbar-default navbar-fixed-top">
 +
        <div class="container">
 +
            <!-- Brand and toggle get grouped for better mobile display -->
 +
            <div class="navbar-header page-scroll">
 +
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
 +
                    <span class="sr-only">Toggle navigation</span>
 +
                    <span class="icon-bar"></span>
 +
                    <span class="icon-bar"></span>
 +
                    <span class="icon-bar"></span>
 +
                </button>
 +
                <a class="navbar-brand" href="#page-top">IGEM</a>
 +
            </div>
 +
 
 +
            <!-- Collect the nav links, forms, and other content for toggling -->
 +
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
                <ul id="pagesMenu" class="nav navbar-nav navbar-right">
 +
                    <li class="hidden">
 +
                        <a href="#page-top"></a>
 +
                    </li>
 +
                    <li class="page-scroll">
 +
                        <a href="#pageHome" data-id="pageHome">Home</a>
 +
                    </li>
 +
                    <li class="page-scroll">
 +
                        <a href="#pageAbout" data-id="pageAbout">Projet</a>
 +
                    </li>
 +
                    <li class="page-scroll">
 +
                        <a href="#pageFoo" data-id="pageFoo">Exemple</a>
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
            <!-- /.navbar-collapse -->
 +
        </div>
 +
        <!-- /.container-fluid -->
 +
    </nav>
 +
 
 +
    <!-- SECTION EN TETE, TOUJOURS VISIBLE -->
 +
    <header>
 +
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-lg-12">
 +
                    <img class="img-responsive" src="http://i.imgur.com/Ya0O2yU.png" alt="">
 +
                    <div class="intro-text">
 +
                        <span class="name">IGEM project!</span>
 +
                        <hr class="star-light">
 +
                        <span class="skills">Polytech Marseille</span>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </header>
 +
 
 +
 
 +
<!-- A PARTIR D'ICI ON GERE LES DIFFERENTS PAGE DU SITE -->
 +
    <!-- DANS UNE DIV, METTRE l'EQUIVALENT d'une page -->
 +
    <div class="page" data-page="pageHome" id="pageHome">
 +
        <!-- Header -->
 +
        <section class="wow fadeIn">
 +
            <!-- <p>
 +
                <img name="usaMap" src="http://davidjbradshaw.com/imagemap-resizer/example/images/ex1.gif" usemap="#m_usaMap" border="0" width="100%">
 +
            </p>
 +
            <map name="m_usaMap">
 +
                <area href="http://en.wikipedia.org/wiki/California" shape="poly" coords="82,262,53,259,52,253,50,247,47,242,45,239,41,235,39,235,36,233,32,228,22,224,20,220,22,214,13,196,12,192,16,192,17,191,16,188,12,182,11,180,10,174,7,167,6,161,3,154,5,144,3,139,2,133,5,127,8,122,10,112,51,121,41,164,87,228,87,232,89,237,90,239,90,242,87,244,84,251,83,252,82,254,82,257,84,261,82,262" title="California">
 +
                <area href="http://en.wikipedia.org/wiki/Colorado" shape="poly" coords="171,152,195,154,223,156,244,159,244,171,242,191,241,214,228,214,163,207,171,152" title="Colorado">
 +
                <area href="http://en.wikipedia.org/wiki/Connecticut" shape="rect" coords="542,94,568,111" title="Connecticut">
 +
            </map> -->
 +
 
 +
            <p>
 +
                <img src="img/home.png" alt="" usemap="#Map" border="0" width="100%" />
 +
            </p>
 +
            <map name="Map" id="Map">
 +
                <area alt="" title="" href="#pageHome" shape="poly" coords="573,665,613,666,627,643,637,615,630,592,607,579,570,576,554,607,554,635" />
 +
                <area alt="" title="" href="#pageAbout" shape="poly" coords="141,613,177,631,193,666,180,694,151,702,120,711,83,681,88,630,122,606,149,611" />
 +
                <area alt="" title="" href="#" shape="poly" coords="250,444,273,403,272,365,241,350,209,340,176,359,171,388,177,429,213,448" />
 +
                <area alt="" title="" href="#" shape="poly" coords="201,311,243,296,249,235,220,208,148,214,126,263,161,299,196,311" />
 +
                <area alt="" title="" href="#" shape="poly" coords="743,429,745,536,849,540,851,433" />
 +
                <area alt="" title="" href="#" shape="poly" coords="895,252,900,350,1001,356,1008,258,898,251" />
 +
                <area alt="" title="" href="#" shape="poly" coords="527,308,617,330,710,278,693,191,705,144,681,72,547,93" />
 +
                <area alt="" title="" href="#" shape="poly" coords="980,124,973,184,1010,234,1085,206,1089,156,1054,120" />
 +
                <area alt="" title="" href="#" shape="poly" coords="802,34,800,97,841,106,905,107,912,70,910,29,874,10,824,11" />
 +
                <area alt="" title="" href="#" shape="poly" coords="354,113,373,45,334,22,293,21,256,49,255,89,277,105,300,129" />
 +
            </map>
 +
       
 +
        </section>
 +
 
 +
        <!-- About Section -->
 +
        <section class="success" id="about">
 +
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-lg-12 text-center wow bounceInUp">
 +
                    <h2>About</h2>
 +
                    <hr class="star-light">
 +
                </div>
 +
            </div>
 +
            <div class="row">
 +
                <div class="col-lg-4 col-lg-offset-2">
 +
                    <p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
 +
                </div>
 +
                <div class="col-lg-4">
 +
                    <p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
 +
                </div>
 +
                <div class="col-lg-8 col-lg-offset-2 text-center">
 +
                    <a href="#" class="btn btn-lg btn-outline">
 +
                        <i class="fa fa-download"></i> Download Theme
 +
                    </a>
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </section>
 +
 
 +
        <!-- Portfolio Grid Section -->
 +
        <section id="portfolio">
 +
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-lg-12 text-center">
 +
                    <h2>Portfolio</h2>
 +
                    <hr class="star-primary">
 +
                </div>
 +
            </div>
 +
            <div class="row">
 +
                <div class="col-sm-4 portfolio-item wow fadeInLeft">
 +
                    <a href="#portfolioModal1" class="portfolio-link" data-toggle="modal">
 +
                        <div class="caption">
 +
                            <div class="caption-content">
 +
                                <i class="fa fa-search-plus fa-3x"></i>
 +
                            </div>
 +
                        </div>
 +
                        <img src="http://i.imgur.com/BSjAzFR.png" class="img-responsive" alt="">
 +
                    </a>
 +
                </div>
 +
                <div class="col-sm-4 portfolio-item">
 +
                    <a href="#portfolioModal2" class="portfolio-link" data-toggle="modal">
 +
                        <div class="caption">
 +
                            <div class="caption-content">
 +
                                <i class="fa fa-search-plus fa-3x"></i>
 +
                            </div>
 +
                        </div>
 +
                        <img src="http://i.imgur.com/bB0RWAU.png" class="img-responsive" alt="">
 +
                    </a>
 +
                </div>
 +
                <div class="col-sm-4 portfolio-item">
 +
                    <a href="#portfolioModal3" class="portfolio-link" data-toggle="modal">
 +
                        <div class="caption">
 +
                            <div class="caption-content">
 +
                                <i class="fa fa-search-plus fa-3x"></i>
 +
                            </div>
 +
                        </div>
 +
                        <img src="http://i.imgur.com/AcOMK2A.png" class="img-responsive" alt="">
 +
                    </a>
 +
                </div>
 +
                <div class="col-sm-4 portfolio-item">
 +
                    <a href="#portfolioModal4" class="portfolio-link" data-toggle="modal">
 +
                        <div class="caption">
 +
                            <div class="caption-content">
 +
                                <i class="fa fa-search-plus fa-3x"></i>
 +
                            </div>
 +
                        </div>
 +
                        <img src="http://i.imgur.com/h59amgM.png" class="img-responsive" alt="">
 +
                    </a>
 +
                </div>
 +
                <div class="col-sm-4 portfolio-item">
 +
                    <a href="#portfolioModal5" class="portfolio-link" data-toggle="modal">
 +
                        <div class="caption">
 +
                            <div class="caption-content">
 +
                                <i class="fa fa-search-plus fa-3x"></i>
 +
                            </div>
 +
                        </div>
 +
                        <img src="http://i.imgur.com/ldC0doB.png" class="img-responsive" alt="">
 +
                    </a>
 +
                </div>
 +
                <div class="col-sm-4 portfolio-item">
 +
                    <a href="#portfolioModal6" class="portfolio-link" data-toggle="modal">
 +
                        <div class="caption">
 +
                            <div class="caption-content">
 +
                                <i class="fa fa-search-plus fa-3x"></i>
 +
                            </div>
 +
                        </div>
 +
                        <img src="http://i.imgur.com/5vlHFHk.png" class="img-responsive" alt="">
 +
                    </a>
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </section>
 +
    </div>
 +
 
 +
    <!-- UNE SECONDE PAGE, CACHEE PAR DEFAULT -->
 +
    <div style="display:none" class="page" data-page="pageAbout" id="pageAbout">
 +
        <!-- About 2 Section -->
 +
        <section class="success" id="about2">
 +
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-lg-12 text-center wow bounceInUp">
 +
                    <h2>About 2</h2>
 +
                    <hr class="star-light">
 +
                </div>
 +
            </div>
 +
            <div class="row">
 +
                <div class="col-lg-4 col-lg-offset-2">
 +
                    <p>Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.</p>
 +
                </div>
 +
                <div class="col-lg-4">
 +
                    <p>Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!</p>
 +
                </div>
 +
                <div class="col-lg-8 col-lg-offset-2 text-center">
 +
                    <a href="#" class="btn btn-lg btn-outline">
 +
                        <i class="fa fa-download"></i> Download Theme
 +
                    </a>
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </section>
 +
    </div>
 +
 
 +
    <!-- UNE TROISIEME PAGE, CACHEE PAR DEFAULT -->
 +
    <div class="page" data-page="pageFoo" id="pageFoo">
 +
        <!-- About 2 Section -->
 +
        <section class="success" id="about2">
 +
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-lg-12 text-center wow bounceInUp">
 +
                    <h2>TITRE EXEMPLE</h2>
 +
                    <hr class="star-light">
 +
                </div>
 +
            </div>
 +
            <div class="row">
 +
                <div class="col-lg-4 col-lg-offset-2">
 +
                    <p>DU TEXTE</p>
 +
                </div>
 +
                <div class="col-lg-4">
 +
                    <p>ENCORE DU TEXTE</p>
 +
                </div>
 +
                <div class="col-lg-8 col-lg-offset-2 text-center">
 +
                    <a href="#" class="btn btn-lg btn-outline">
 +
                        <i class="fa fa-link"></i> UN LIEN VERS QQCH
 +
                    </a>
 +
                </div>
 +
            </div>
 +
        </div>
 +
        </section>
 +
    </div>
 +
 
 +
    <!-- Footer -->
 +
    <footer class="text-center">
 +
        <div class="footer-above">
 +
            <div class="container">
 +
                <div class="row">
 +
                    <div class="footer-col col-md-4">
 +
                        <h3>Location</h3>
 +
                        <p>3481 Melrose Place<br>Beverly Hills, CA 90210</p>
 +
                    </div>
 +
                    <div class="footer-col col-md-4">
 +
                        <h3>Around the Web</h3>
 +
                        <ul class="list-inline">
 +
                            <li>
 +
                                <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-facebook"></i></a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-google-plus"></i></a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-twitter"></i></a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-linkedin"></i></a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#" class="btn-social btn-outline"><i class="fa fa-fw fa-dribbble"></i></a>
 +
                            </li>
 +
                        </ul>
 +
                    </div>
 +
                    <div class="footer-col col-md-4">
 +
                        <h3>About Freelancer</h3>
 +
                        <p>Freelance is a free to use, open source Bootstrap theme created by <a href="http://startbootstrap.com">Start Bootstrap</a>.</p>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
        <div class="footer-below">
 +
            <div class="container">
 +
                <div class="row">
 +
                    <div class="col-lg-12">
 +
                        Copyright &copy; Your Website 2014
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </footer>
 +
 
 +
    <!-- Scroll to Top Button (Only visible on small and extra-small screen sizes) -->
 +
    <div class="scroll-top page-scroll visible-xs visible-sm">
 +
        <a class="btn btn-primary" href="#page-top">
 +
            <i class="fa fa-chevron-up"></i>
 +
        </a>
 +
    </div>
 +
 
 +
 
 +
    <!-- LES BOXS QUI VONT S'OUVRIR QUAND ON CLIQUE SUR LES IMAGES DU PORTFOLIO -->
 +
    <!-- Portfolio Modals -->
 +
    <div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
 +
        <div class="modal-content">
 +
            <div class="close-modal" data-dismiss="modal">
 +
                <div class="lr">
 +
                    <div class="rl">
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="container">
 +
                <div class="row">
 +
                    <div class="col-lg-8 col-lg-offset-2">
 +
                        <div class="modal-body">
 +
                            <h2>Project Title</h2>
 +
                            <hr class="star-primary">
 +
                            <img src="img/portfolio/cabin.png" class="img-responsive img-centered" alt="">
 +
                            <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
 +
                            <ul class="list-inline item-details">
 +
                                <li>Client:
 +
                                    <strong><a href="http://startbootstrap.com">Start Bootstrap</a>
 +
                                    </strong>
 +
                                </li>
 +
                                <li>Date:
 +
                                    <strong><a href="http://startbootstrap.com">April 2014</a>
 +
                                    </strong>
 +
                                </li>
 +
                                <li>Service:
 +
                                    <strong><a href="http://startbootstrap.com">Web Development</a>
 +
                                    </strong>
 +
                                </li>
 +
                            </ul>
 +
                            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
 +
    <div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
 +
        <div class="modal-content">
 +
            <div class="close-modal" data-dismiss="modal">
 +
                <div class="lr">
 +
                    <div class="rl">
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="container">
 +
                <div class="row">
 +
                    <div class="col-lg-8 col-lg-offset-2">
 +
                        <div class="modal-body">
 +
                            <h2>Project Title</h2>
 +
                            <hr class="star-primary">
 +
                            <img src="img/portfolio/cake.png" class="img-responsive img-centered" alt="">
 +
                            <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
 +
                            <ul class="list-inline item-details">
 +
                                <li>Client:
 +
                                    <strong><a href="http://startbootstrap.com">Start Bootstrap</a>
 +
                                    </strong>
 +
                                </li>
 +
                                <li>Date:
 +
                                    <strong><a href="http://startbootstrap.com">April 2014</a>
 +
                                    </strong>
 +
                                </li>
 +
                                <li>Service:
 +
                                    <strong><a href="http://startbootstrap.com">Web Development</a>
 +
                                    </strong>
 +
                                </li>
 +
                            </ul>
 +
                            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
 +
    <div class="portfolio-modal modal fade" id="portfolioModal3" tabindex="-1" role="dialog" aria-hidden="true">
 +
        <div class="modal-content">
 +
            <div class="close-modal" data-dismiss="modal">
 +
                <div class="lr">
 +
                    <div class="rl">
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="container">
 +
                <div class="row">
 +
                    <div class="col-lg-8 col-lg-offset-2">
 +
                        <div class="modal-body">
 +
                            <h2>Project Title</h2>
 +
                            <hr class="star-primary">
 +
                            <img src="img/portfolio/circus.png" class="img-responsive img-centered" alt="">
 +
                            <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
 +
                            <ul class="list-inline item-details">
 +
                                <li>Client:
 +
                                    <strong><a href="http://startbootstrap.com">Start Bootstrap</a>
 +
                                    </strong>
 +
                                </li>
 +
                                <li>Date:
 +
                                    <strong><a href="http://startbootstrap.com">April 2014</a>
 +
                                    </strong>
 +
                                </li>
 +
                                <li>Service:
 +
                                    <strong><a href="http://startbootstrap.com">Web Development</a>
 +
                                    </strong>
 +
                                </li>
 +
                            </ul>
 +
                            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
 +
    <div class="portfolio-modal modal fade" id="portfolioModal4" tabindex="-1" role="dialog" aria-hidden="true">
 +
        <div class="modal-content">
 +
            <div class="close-modal" data-dismiss="modal">
 +
                <div class="lr">
 +
                    <div class="rl">
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="container">
 +
                <div class="row">
 +
                    <div class="col-lg-8 col-lg-offset-2">
 +
                        <div class="modal-body">
 +
                            <h2>Project Title</h2>
 +
                            <hr class="star-primary">
 +
                            <img src="img/portfolio/game.png" class="img-responsive img-centered" alt="">
 +
                            <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
 +
                            <ul class="list-inline item-details">
 +
                                <li>Client:
 +
                                    <strong><a href="http://startbootstrap.com">Start Bootstrap</a>
 +
                                    </strong>
 +
                                </li>
 +
                                <li>Date:
 +
                                    <strong><a href="http://startbootstrap.com">April 2014</a>
 +
                                    </strong>
 +
                                </li>
 +
                                <li>Service:
 +
                                    <strong><a href="http://startbootstrap.com">Web Development</a>
 +
                                    </strong>
 +
                                </li>
 +
                            </ul>
 +
                            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
 +
    <div class="portfolio-modal modal fade" id="portfolioModal5" tabindex="-1" role="dialog" aria-hidden="true">
 +
        <div class="modal-content">
 +
            <div class="close-modal" data-dismiss="modal">
 +
                <div class="lr">
 +
                    <div class="rl">
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="container">
 +
                <div class="row">
 +
                    <div class="col-lg-8 col-lg-offset-2">
 +
                        <div class="modal-body">
 +
                            <h2>Project Title</h2>
 +
                            <hr class="star-primary">
 +
                            <img src="img/portfolio/safe.png" class="img-responsive img-centered" alt="">
 +
                            <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
 +
                            <ul class="list-inline item-details">
 +
                                <li>Client:
 +
                                    <strong><a href="http://startbootstrap.com">Start Bootstrap</a>
 +
                                    </strong>
 +
                                </li>
 +
                                <li>Date:
 +
                                    <strong><a href="http://startbootstrap.com">April 2014</a>
 +
                                    </strong>
 +
                                </li>
 +
                                <li>Service:
 +
                                    <strong><a href="http://startbootstrap.com">Web Development</a>
 +
                                    </strong>
 +
                                </li>
 +
                            </ul>
 +
                            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
 +
    <div class="portfolio-modal modal fade" id="portfolioModal6" tabindex="-1" role="dialog" aria-hidden="true">
 +
        <div class="modal-content">
 +
            <div class="close-modal" data-dismiss="modal">
 +
                <div class="lr">
 +
                    <div class="rl">
 +
                    </div>
 +
                </div>
 +
            </div>
 +
            <div class="container">
 +
                <div class="row">
 +
                    <div class="col-lg-8 col-lg-offset-2">
 +
                        <div class="modal-body">
 +
                            <h2>Project Title</h2>
 +
                            <hr class="star-primary">
 +
                            <img src="img/portfolio/submarine.png" class="img-responsive img-centered" alt="">
 +
                            <p>Use this area of the page to describe your project. The icon above is part of a free icon set by <a href="https://sellfy.com/p/8Q9P/jV3VZ/">Flat Icons</a>. On their website, you can download their free set with 16 icons, or you can purchase the entire set with 146 icons for only $12!</p>
 +
                            <ul class="list-inline item-details">
 +
                                <li>Client:
 +
                                    <strong><a href="http://startbootstrap.com">Start Bootstrap</a>
 +
                                    </strong>
 +
                                </li>
 +
                                <li>Date:
 +
                                    <strong><a href="http://startbootstrap.com">April 2014</a>
 +
                                    </strong>
 +
                                </li>
 +
                                <li>Service:
 +
                                    <strong><a href="http://startbootstrap.com">Web Development</a>
 +
                                    </strong>
 +
                                </li>
 +
                            </ul>
 +
                            <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
 +
                        </div>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </div>
 +
 
 +
 
 +
    <!-- ON NE TOUCHE SURTOUT A RIEN DANS CE CODE A PARTIR D'ICI !!! -->
 +
    <!-- Scripts -->
 +
 
 +
    <!-- jQuery -->
 +
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
 +
 
 +
    <!-- Bootstrap Core JavaScript -->
 +
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha256-Sk3nkD6mLTMOF0EOpNtsIry+s1CsaqQC1rVLTAy+0yc= sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
 +
 
 +
    <!-- Plugin JavaScript -->
 +
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
 +
    <script src="http://ironsummitmedia.github.io/startbootstrap-freelancer/js/classie.js"></script>
 +
    <script src="http://ironsummitmedia.github.io/startbootstrap-freelancer/js/cbpAnimatedHeader.js"></script>
 +
 
 +
    <!-- Contact Form JavaScript -->
 +
    <script src="http://ironsummitmedia.github.io/startbootstrap-freelancer/js/jqBootstrapValidation.js"></script>
 +
    <script src="http://ironsummitmedia.github.io/startbootstrap-freelancer/js/contact_me.js"></script>
 +
 
 +
 
 +
    <!-- Map resize -->
 +
    <script type="text/javascript">
 +
        !function(){"use strict";function a(){function a(){function a(a){function c(a){return a*b[1===(d=1-d)?"width":"height"]}var d=0;return a.split(",").map(Number).map(c).map(Math.floor).join(",")}for(var b={width:i.width/j.width,height:i.height/j.height},c=0;g>c;c++)f[c].coords=a(h[c])}function b(){j.onload=function(){(i.width!==j.width||i.height!==j.height)&&a()},j.src=i.src}function c(){function b(){clearTimeout(k),k=setTimeout(a,250)}window.addEventListener?window.addEventListener("resize",b,!1):window.attachEvent&&window.attachEvent("onresize",b)}function d(a){return a.coords.replace(/ *, */g,",").replace(/ +/g,",")}var e=this,f=e.getElementsByTagName("area"),g=f.length,h=Array.prototype.map.call(f,d),i=document.querySelector('img[usemap="#'+e.name+'"]'),j=new Image,k=null;b(),c()}function b(){function b(b){if(!b.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==b.tagName.toUpperCase())throw new TypeError("Expected <MAP> tag, found <"+b.tagName+">.");a.call(b)}return function(a){switch(typeof a){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(a||"map"),b);break;case"object":b(a);break;default:throw new TypeError("Unexpected data type ("+typeof a+").")}}}"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():window.imageMapResize=b(),"jQuery"in window&&(jQuery.fn.imageMapResize=function(){return this.filter("map").each(a).end()})}();
 +
    </script>
 +
    <script type="text/javascript">
 +
        $('map').imageMapResize();
 +
    </script>
 +
 
 +
    <!-- Custom Theme JavaScript -->
 +
    <script>
 +
        $(function(){$("body").on("click",".page-scroll a",function(o){var l=$(this);$("html, body").stop().animate({scrollTop:$(l.attr("href")).offset().top},1500,"easeInOutExpo"),o.preventDefault()})}),$(function(){$("body").on("input propertychange",".floating-label-form-group",function(o){$(this).toggleClass("floating-label-form-group-with-value",!!$(o.target).val())}).on("focus",".floating-label-form-group",function(){$(this).addClass("floating-label-form-group-with-focus")}).on("blur",".floating-label-form-group",function(){$(this).removeClass("floating-label-form-group-with-focus")})}),$("body").scrollspy({target:".navbar-fixed-top"}),$(".navbar-collapse ul li a").click(function(){$(".navbar-toggle:visible").click()});
 +
    </script>
 +
 
 +
    <script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
 +
    <script>
 +
        new WOW().init(); //pour creer les animations
 +
    </script>
 +
 
 +
    <script>
 +
        //Simuler un changement de page
 +
        $( "#pagesMenu a" ).click(function() {
 +
            $('.page').not($(this).attr('href')).hide();
 +
            $($(this).attr('href')).show();
 +
            new WOW().init();
 +
        });
 +
    </script>
 +
 
 +
</body>
  
−
<!-- CADRE AVEC IMAGE DE FOND 2 -->
 
−
<div id="background_pic2">
 
−
<div id="bloc1" align="center">
 
−
<a class="slide_button" href="#bloc2">DOWN</a>
 
−
</div>
 
−
</div>
 
−
 
−
<!-- CADRE AVEC IMAGE DE FOND 3 -->
 
−
<div id="background_pic3">
 
−
<div id="bloc2" align="center">
 
−
<a class="slide_button" href="#bloc3">DOWN</a>
 
−
</div>
 
−
</div>
 
−
 
−
<!-- PIEDS DE PAGE -->
 
−
<div id="bloc3" align="center"></div>
 
−
</div>
 
−
 
−
   
 
 
</html>
 
</html>

Revision as of 08:00, 1 September 2015

<!DOCTYPE html> Titre de la page

IGEM project!
Polytech Marseille

About

Freelancer is a free bootstrap theme created by Start Bootstrap. The download includes the complete source files including HTML, CSS, and JavaScript as well as optional LESS stylesheets for easy customization.

Whether you're a student looking to showcase your work, a professional looking to attract clients, or a graphic artist looking to share your projects, this template is the perfect starting point!

Download Theme

Portfolio

TITRE EXEMPLE

DU TEXTE

ENCORE DU TEXTE

UN LIEN VERS QQCH

Location

3481 Melrose Place
Beverly Hills, CA 90210

Around the Web

About Freelancer

Freelance is a free to use, open source Bootstrap theme created by Start Bootstrap.

Copyright © Your Website 2014