Bonjour,
je réalise un portfolio grâce à un template html css et j'ai un problème avec les liens et ancrages.
La page index fonctionne bien, les liens du menu mènent bien aux parties des pages que je veut.
Toutefois, pour les autres pages présentant chaque projet, les liens du menu ne fonctionne pas. je souhaiterais que lorque l'on clique sur le logo on revienne sur la page index, lorsque l'on clique sur "A propos" on revienne sur la partie "A propos" de la page index.
Voici le code de la page index :
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <!-->
<html lang="fr">
<!--
<![endif]-->
<head>
<!-- TITLE OF SITE -->
<title>Stéphanie Reboul</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Fort Multipage Landing Page" />
<meta name="keywords" content="Fort, parallax, one page, multipage, responsive, landing, html template" />
<meta name="author" content="Theme View">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Favicons -->
<link rel="icon" type="image/png" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png">
<!-- CSS Begins
================================================== -->
<!-- Google Font And Custom Font Begins -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<!-- FONT ICONS -->
<!-- font-awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- IonIcons -->
<link href="icon/ionicons/css/ionicons.css" rel="stylesheet">
<!-- Elegant Icons -->
<link href="icon/elegant-icons/style.css" rel="stylesheet">
<!--/ FONT ICONS -->
<!--Animate Effect-->
<link href="css/animate.css" rel="stylesheet">
<link href="css/hover.css" rel="stylesheet" >
<!--lightbox-->
<link href="css/lightbox.css" rel="stylesheet">
<!--Owl Carousel -->
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<link href="css/owl.transitions.css" rel="stylesheet">
<!--BootStrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<link href="css/normalize.css" rel="stylesheet">
<!--Preloader -->
<link href="css/preloader.css" rel="stylesheet">
<!-- Main Style -->
<link href="css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<!--DEFAULT COLOR/ CURRENTLY USING , Replace Your Color-->
<link rel="stylesheet" href="css/colors/bleu.css">
<!--Replace Your Color Ends-->
<!-- Template Demo Color Examples -->
<!--Moderate Orange Color
<link rel="stylesheet" type="text/css" href="css/colors/moderate_orange.css"/>
-->
<!--Green Color
<link rel="stylesheet" type="text/css" href="css/colors/green.css"/>
-->
<!--Yellow Color
<link rel="stylesheet" type="text/css" href="css/colors/yellow.css"/>
-->
<!-- END Template Color Demo Examples -->
</head>
<body>
<!-- Start: Preloader section
==========================-->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- End: Preloader section
==========================-->
<!-- Start: Header Section
=============================================-->
<!-- nav -->
<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 class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
<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">
<!-- LOGO -->
<img class="logo" alt="logo" src="images/logo10.png">
</a>
</div><!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse single-page-nav" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#page-top">Home</a>
</li>
<li>
<a href="#about">A propos</a>
</li>
<li>
<a href="#work">Projets</a>
</li>
<li>
<a href="#contact">contact</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!-- /. nav -->
<!-- header -->
<header id="page-top">
<div class="container">
<div class="row">
<div class="col-lg-12 col-xs-12 col-sm-12 col-md-12 ban1_txt wow fadeInUp" data-wow-delay="0.5s">
<!-- Header Introduction -->
<h2>Monteuse Vidéo</h2>
<h3>( A la recherche d'un emploi ) </h3>
<a href="#contact" class="btn btn-chos hvr-shutter-in-horizontal">
Contact
</a><!--/.btn-->
<!-- /. Header Introduction -->
</div><!-- /. col-lg-12 -->
</div><!-- /. row -->
</div><!-- /. container -->
<div id="particles-js"></div><!-- header video -->
</header><!--/. header -->
<!-- End: Header Section
==================================================-->
<!-- Start:About Section
==================================================-->
<section class="about-section" id="about">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-4 col-sm-5">
<!--About Left-->
<div class="about-left">
<h3><small>Bienvenue</small>Sur Mon Portfolio</h3>
<p>
<br></br>
Originaire de Dijon et âgée de 21 ans, je suis fraîchement diplômée d'un Diplôme Universitaire d'Etudes Technologiques Internationales obtenu grâce à un stage de 8 mois en Floride, aux Etats-Unis.</p>
<p> C'est après l'obtention d'un DUT Métiers du Multimédia et d'Internet que je décide de poursuivre mon chemin à l'étranger en effectuant un stage de longue durée. </p>
<p>J'ai alors pu m'imprégner d'une nouvelle culture, d'un nouveau mode de vie et de travail tout en développant mes compétences dans le domaine de l'audiovisuel.</p>
<p> Grâce à ce stage dans une entreprise de Production vidéo (commercial, corporate, Broadcast...) à Tampa, j'ai pu développer ma passion pour le montage vidéo en acquérant chaque jour de nouvelles techniques.</p>
</div>
<!--/About Left-->
</div>
<!--/.col-lg-6 col-md-4 col-sm-5-->
<div class="col-lg-6 col-md-8 col-sm-7 col-xs-12">
<!--About right-->
<div class="about-right">
<br></br>
<img class="about-img_2" src="images/about/img_2.jpg" alt="about">
</div>
<!--/About right-->
</div>
<!--/.col-lg-6 col-md-8 col-md-7-->
</div>
<!--/.row-->
</div>
<!--/container-->
</section>
<!-- End:About Section
==================================================-->
<!-- Start:Our Work Section
==================================================-->
<section class="work-section" id="work">
<div class="container">
<!-- Title-->
<div class="base-header">
<h3><small> Projets </small> Projets récents</h3>
</div>
<!--/ Title -->
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-12">
<!-- Project Filter-->
<div class="project-filter">
<ul class="project_menu">
<li class="filter hvr-underline-from-center" data-filter="all"><i class="fa fa-database"></i> Tous les projets </li>
<li class="filter hvr-underline-from-center" data-filter=".category-4"><i class="fa fa-play-circle-o"></i> Démo Réels</li>
<li class="filter hvr-underline-from-center" data-filter=".category-2"><i class="fa fa-desktop"></i> Professionnel</li>
<li class="filter hvr-underline-from-center" data-filter=".category-1"><i class="fa fa-backward"></i> "Behind the Scene"</li>
<li class="filter hvr-underline-from-center" data-filter=".category-3"><i class="fa fa-plane"></i> Voyages</li>
</ul>
</div>
<!-- Project Filter End-->
</div>
<!-- col-md-10 col-sm-10 col-xs-12 -->
<div class="col-md-10 col-sm-10 col-xs-12">
<div class="row">
<div class="project-list">
<!-- Work Item 2 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-4" data-myorder="2">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-1.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>Demo Reel "Medical"</h4>
<p>Diamond View Studios</p>
<a href="single-work.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 2 -->
<!-- Work Item 3 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-4" data-myorder="3">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-3.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>Demor réel "Products"</h4>
<p>Diamond View Studios</p>
<a href="single-work2.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 3 -->
<!-- Work Item 1 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-4" data-myorder="1">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-1.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>Demo Reel</h4>
<p>Peronnel</p>
<a href="single-work0.tml"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 1-->
<!-- Work Item 4 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-2" data-myorder="4">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-4.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>United Way </h4>
<p>Diamond View Studios</p>
<a href="single-work3.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/Work Item 4 -->
<!-- Work Item 5 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-2" data-myorder="5">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-5.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>Maserati</h4>
<p>Diamond View Studios</p>
<a href="single-work4.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 5 -->
<!-- Work Item 6 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-2" data-myorder="6">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-ml.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>Mark Lauren</h4>
<p>Diamond View Studios</p>
<a href="single-work16.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 6 -->
<!-- Work Item 7 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-2" data-myorder="7">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-6.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>Expectation</h4>
<p>Diamond View Studios</p>
<a href="single-work5.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 7 -->
<!-- Work Item 8 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-2" data-myorder="8">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-7.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>Featured</h4>
<p>Diamond View Studios</p>
<a href="single-work6.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 8 -->
<!-- Work Item 9 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-1" data-myorder="9">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-8.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>Jackson Health Behind the scene</h4>
<p>Diamond View Studios</p>
<a href="single-work7.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 9 -->
<!-- Work Item 10 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-1" data-myorder="10">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-9.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>Ben Torres Behind the scene</h4>
<p>Diamond View Studios</p>
<a href="single-work8.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 10 -->
<!-- Work Item 11 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-1" data-myorder="11">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-10.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>NAB Show 2016</h4>
<p>Diamond View Studios</p>
<a href="single-work9.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 11 -->
<!-- Work Item 12 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-3" data-myorder="12">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-11.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>LA & Chicago</h4>
<p>Diamond View Studios</p>
<a href="single-work10.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 12 -->
<!-- Work Item 13 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-3" data-myorder="13">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-12.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>Hawaii</h4>
<p>Diamond View Studios</p>
<a href="single-work11.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 13 -->
<!-- Work Item 14 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-3" data-myorder="14">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-13.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>New York City & Chicago</h4>
<p>Personnel</p>
<a href="single-work12.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 14 -->
<!-- Work Item 15 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-3" data-myorder="15">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-14.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>TNCO Quincey (Ski nautique)</h4>
<p>Personnel</p>
<a href="single-work13.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 15 -->
<!-- Work Item 16 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-3" data-myorder="16">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-15.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>Road Trip Florida</h4>
<p>Personnel</p>
<a href="single-work14.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 16 -->
<!-- Work Item 17 -->
<div class="col-md-4 col-sm-4 col-xs-12 mix category-3" data-myorder="17">
<div class="work-item">
<div class="items"><img alt="" class="" src="images/work/work-16.png"></div>
<div class="mask2 hvr-shutter-out-horizontal">
<h4>Sicile</h4>
<p>Personnel</p>
<a href="single-work15.html"><i class="icon_zoom-in_alt"> </i></a>
</div>
</div>
</div>
<!--/ Work Item 17 -->
</div>
</div>
<!--/.row-->
</div>
<!--/.col-md-10 col-sm-10 col-xs-12-->
</div>
<!--/.row-->
</div>
<!--/.container-->
</section>
<!-- End:Our Work Section
==================================================-->
<!-- Start:Contact Section
==================================================-->
<section class="contact" id="contact">
<div class="container">
<!-- Title -->
<div class="base-header">
<h3><small>Besoin de plus d'informations ?</small>Contactez moi</h3>
</div>
<!--/ Title -->
<div class="row">
<!-- col-lg-6 -->
<div class="col-lg-6 col-md-6 contact_left">
<!-- contact FORM-->
<div class="contactForm">
<!--MAIN FORM-->
<form id="contactForm" name="sentMessage" action="mailer.php">
<div class="form-group">
<input aria-invalid="false" class="form-control" data-validation-required-message="Please enter your name." id="name" name="name" placeholder="Name* :" required="" type="text">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input class="form-control" data-validation-required-message="Please enter your email address." name="email" id="email" placeholder="E-mail* :" required="" type="email">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<input class="form-control" data-validation-required-message="Please enter your phone number." name="Subject" id="number" placeholder="Subject* :" required="" type="tel">
<p class="help-block text-danger"></p>
</div>
<div class="form-group">
<textarea class="form-control" cols="40" data-validation-required-message="Please enter a message." name="Message" id="message" placeholder="Message* :" required="" rows="3"></textarea>
<p class="help-block text-danger"></p>
</div>
<div id="success"></div>
<a href="#" class="btn btn-chos hvr-shutter-in-horizontal" title="Buy Now">submit</a>
</form>
<!--END Main form-->
</div>
<!-- END contact FORM-->
</div>
<!--/ .col-lg-6 -->
<!-- Address-->
<div class="col-lg-6 col-md-6 cont_right">
<div class="cont-details">
<h3></h3>
<p>Besoin d'informations, d'aide sur un projet ou avez un poste à me proposer ? </p>
<p>Je suis disponible ! </p>
<p><i class="icon_pin_alt"></i> 9 rue de la vigne, 21220 Saint-Philibert (Mobilité nationale et internationale)</p>
<p><i class="icon_mobile"></i> 06 04 04 75 93</p>
<p><i class="icon_mail_alt"></i> stephaniereboul@orange.fr</p>
</div>
</div>
<!--/.Address-->
</div>
<!--/.row-->
</div>
<!--/.container-->
</section>
<!-- End:Contact Section
==================================================-->
<!-- Start:Footer Section
==================================================-->
<footer class="footer bgc-dark text-white">
<div class="container">
<div class="footer-top text-center-sm">
<div class="row-columns row">
<div class="column col-lg-6 col-sm-6">
<div class="social_footer">
<a class="hvr-push" href="https://www.facebook.com/stephanie.reboul.92"><i class="fa fa-facebook"></i></a>
<a class="hvr-push" href="https://www.instagram.com/stephrbl/"><i class="fa fa-instagram"></i></a>
<a class="hvr-push" href="https://www.linkedin.com/in/st%C3%A9phanie-reboul-463669b2"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
</div>
<div class="copyright text-center">
<span class="text-primary">Stéphanie Reboul</span> © 2016. Tous droits réservés.
</div>
</div>
</footer>
<!-- End:Footer Section
========================================-->
<!-- Scripts
========================================-->
<!-- jquery -->
<script src="js/vendor/jquery-1.12.0.min.js" type="text/javascript" ></script>
<!-- Modernizer -->
<script src="js/modernizr.custom.js" type="text/javascript"></script>
<!-- plugins -->
<script src="js/plugins.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Use For Animation -->
<script src="js/wow.min.js"></script>
<!-- Use For Map -->
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7"></script>
<!-- Use For Map -->
<script src="js/maplace.js"></script>
<!-- Use For carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- Use For mixitup gallery -->
<script src="js/jquery.mixitup.min.js"></script>
<!-- Use For Animated Header -->
<script src="js/animatedheader.js"></script>
<!-- Use For Image Peview -->
<script src="js/lightbox.min.js"></script>
<!-- Use For single Page Nav -->
<script src="js/jquery.singlePageNav.min.js"></script>
<!-- Use For video -->
<script src="js/video.js"></script>
<!-- Custom Scripts
========================================-->
<script src="js/main.js"></script>
</body>
</html>
et la code d'une autre page :
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]> <!-->
<html lang="en">
<!--
<![endif]-->
<head>
<!-- TITLE OF SITE -->
<title>Stéphanie Reboul</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Fort Multipage Landing Page" />
<meta name="keywords" content="Fort, parallax, one page, multipage, responsive, landing, html template" />
<meta name="author" content="Theme View">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- Favicons -->
<link rel="icon" type="image/png" href="images/favicon.ico">
<link rel="apple-touch-icon" href="images/apple-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-icon-114x114.png">
<!-- CSS Begins
================================================== -->
<!-- Google Font And Custom Font Begins -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
<!-- FONT ICONS -->
<!-- font-awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- IonIcons -->
<link href="icon/ionicons/css/ionicons.css" rel="stylesheet">
<!-- Elegant Icons -->
<link href="icon/elegant-icons/style.css" rel="stylesheet">
<!--/ FONT ICONS -->
<!--Animate Effect-->
<link href="css/animate.css" rel="stylesheet">
<link href="css/hover.css" rel="stylesheet" >
<!--lightbox-->
<link href="css/lightbox.css" rel="stylesheet">
<!--Owl Carousel -->
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<link href="css/owl.transitions.css" rel="stylesheet">
<!--BootStrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<link href="css/normalize.css" rel="stylesheet">
<!-- Main Style -->
<link href="css/style.css" rel="stylesheet">
<link href="css/responsive.css" rel="stylesheet">
<!--DEFAULT COLOR/ CURRENTLY USING , Replace Your Color-->
<link rel="stylesheet" href="css/colors/bleu.css">
<!--Replace Your Color Ends-->
<!-- Template Demo Color Examples -->
<!--Moderate Orange Color
<link rel="stylesheet" type="text/css" href="css/colors/moderate_orange.css"/>
-->
<!--Green Color
<link rel="stylesheet" type="text/css" href="css/colors/green.css"/>
-->
<!--Yellow Color
<link rel="stylesheet" type="text/css" href="css/colors/yellow.css"/>
-->
<!-- END Template Color Demo Examples -->
</head>
<body>
<!-- Start: Header Section
=============================================-->
<!-- nav -->
<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 class="navbar-toggle" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button">
<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="index.html">
<!-- LOGO -->
<img class="logo" alt="logo" src="images/logo10.png">
</a>
</div><!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse single-page-nav" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="index.html#about-section">A propos</a>
</li>
<li>
<a href="index.html#work">Projets</a>
</li>
<li>
<a href="index.html#contact">contact</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav><!-- /. nav -->
<!-- header -->
<header id="page-top">
<div class="container">
<div class="row">
<div class="col-lg-12 col-xs-12 col-sm-12 col-md-12 ban1_txt wow fadeInUp" data-wow-delay="0.5s">
<!-- Header Introduction -->
<h2>Découvrez</h2>
<h3>Mon Travail </h3>
<!-- /. Header Introduction -->
</div><!-- /. col-lg-12 -->
</div><!-- /. row -->
</div><!-- /. container -->
<div id="particles-js"></div><!-- header video -->
</header><!--/. header -->
<!-- End: Header Section
==================================================-->
<!-- Single Portfolio
==================================================-->
<section class="container-fluid no-padding page-content">
<div class="container">
<div class="row">
<!-- portfolio item -->
<div class="col-lg-9 col-md-9 col-sm-8 col-xs-12">
<div class="portfolioitem">
<a href="#"><video controls src="video/sicile.mp4" iframe width="848" height="500"></a>
</div>
</div>
<!--/ portfolio item -->
<!-- Widget Area -->
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 itemPortfolioContent">
<div class="defaultProjectDetails">
<p></p>
<span><i class="fa fa-info"></i> </span>
<span>PROJET</span>
<h7>SICILE</h7>
</div>
<br></br>
<div class="defaultProjectDetails">
<span><i class="fa fa-clock-o"></i> </span>
<span>DATE</span>
<h6>2016</h6>
</div>
<div class="defaultProjectDetails">
<span><i class="fa fa-tag"></i> </span>
<span>CATEGORIE</span>
<h6>Vidéo </h6>
</div>
<div class="contectSec">
<p>Vidéo personnelle réalisée à la suite d'un voyage en Sicile.</p>
</div>
</div>
</div><!-- row /- -->
</div><!-- Container /- -->
</section>
<!-- End: Single Portfolio
==================================================-->
<!-- Other Works
==================================================-->
<div class="otherWorks text-center">
<div class="container">
<a href="index.html">Retour aux Projets précédents</a><a href="#dernieres-nouvelles">
</div>
</div>
<!-- End: Other Works
==================================================-->
<!-- Start:Footer Section
==================================================-->
<footer class="footer bgc-dark text-white">
<div class="container">
<div class="footer-top text-center-sm">
<div class="row-columns row">
<div class="column col-lg-6 col-sm-6">
<div class="social_footer">
<a class="hvr-push" href="https://www.facebook.com/stephanie.reboul.92"><i class="fa fa-facebook"></i></a>
<a class="hvr-push" href="https://www.instagram.com/stephrbl/"><i class="fa fa-instagram"></i></a>
<a class="hvr-push" href="https://www.linkedin.com/in/st%C3%A9phanie-reboul-463669b2"><i class="fa fa-linkedin"></i></a>
</div>
</div>
</div>
</div>
<div class="copyright text-center">
<span class="text-primary">Stéphanie Reboul</span> © 2016. Tous droits réservés.
</div>
</div>
</footer>
<!-- End:Footer Section
========================================-->
<!-- Scripts
========================================-->
<!-- jquery -->
<script src="js/vendor/jquery-1.12.0.min.js" type="text/javascript" ></script>
<!-- Modernizer -->
<script src="js/modernizr.custom.js" type="text/javascript"></script>
<!-- plugins -->
<script src="js/plugins.js"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<!-- Use For Animation -->
<script src="js/wow.min.js"></script>
<!-- Use For Map -->
<script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry&v=3.7"></script>
<!-- Use For Map -->
<script src="js/maplace.js"></script>
<!-- Use For carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- Use For mixitup gallery -->
<script src="js/jquery.mixitup.min.js"></script>
<!-- Use For Animated Header -->
<script src="js/animatedheader.js"></script>
<!-- Use For Image Peview -->
<script src="js/lightbox.min.js"></script>
<!-- Use For single Page Nav -->
<script src="js/jquery.singlePageNav.min.js"></script>
<!-- Custom Scripts
========================================-->
<script src="js/main.js"></script>
</body>
</html>
Merci d'avance de votre aide et bon dimanche !
