<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="format-detection" content="telephone=no">
<meta name="theme-color" content="#282828"/>
<title>Bleuoutremer | Une équipe engagé à vous emmener plus loin</title>
<meta name="author" content="Themezinho">
<meta name="description" content="Bleuoutremer | Une équipe engagé à vous emmener plus loin">
<meta name="keywords" content="Bleuoutremer, c'est du design pour l'imprimé et le Web, des logos, des publicités, de la photo, un service conseil en communication et stratégie de déploiement.">

<!-- SOCIAL MEDIA META -->
<meta property="og:description" content="Bleuoutremer | Une équipe engagé à vous emmener plus loin">
<meta property="og:image" content="#">
<meta property="og:site_name" content="Bleuoutremer">
<meta property="og:title" content="Bleuoutremer">
<meta property="og:type" content="website">
<meta property="og:url" content="https://bleuoutremer.qc.ca">



<!-- FAVICON FILES -->
<link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">

<!-- CSS FILES -->
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/odometer.min.css">
<link rel="stylesheet" href="css/fancybox.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>

<!-- pointer start -->
<?php include('content/pointer.php'); ?>
  <?php
  if (stripos($_SERVER['REQUEST_URI'], 'index.php')){ ?>
  
    <div class="preloader">
      <div class="inner">
      <figure class="logo"><img src="images/logo-light.png" alt="Image"></figure>
        <span class="percentage"></span>
      </div>
      <!-- end inner -->
    </div>
  <?php }
  else { ?>

  <div class="preloader" style="display:none !important;">
    <div class="inner">
    <figure class="logo"><img src="images/logo-light.png" alt="Image"></figure>
      <span class="percentage"></span>
    </div>
    <!-- end inner -->
  </div>
  <?php }?>


<div class="transition-overlay"></div>
<!-- end transition-overlay -->
<div class="navigation-menu">
	<div class="inner">
	<div class="side-menu">
      <ul>
        <li class="pointer-large"><a href="agence.php">L'agence</a></li>
        <li class="pointer-large"><a href="services.php">Services</a></li>
        <li class="pointer-large"><a href="portfolio.php">Réalisations</a></li>
        <li class="pointer-large"><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <!-- end side-menu -->
	<div class="sides">
	<div id="map">
	<!-- <iframe src="https://www.google.ca/maps/place/Bleuoutremer/@46.8132022,-71.2302803,17z/data=!3m1!4b1!4m5!3m4!1s0x4cb89671c1a1729d:0xa2532fabbc0db7f9!8m2!3d46.8131985!4d-71.2280916" width="600" height="450" style="border:0" allowfullscreen></iframe> -->
	</div>
	<!-- end map -->
		<figure><img src="images/ambiance-a-propos-01.jpg" alt="Image ambiance Bleuoutremer">
		<a href="https://www.google.ca/maps/place/Bleuoutremer/@46.8132022,-71.2302803,17z/data=!3m1!4b1!4m5!3m4!1s0x4cb89671c1a1729d:0xa2532fabbc0db7f9!8m2!3d46.8131985!4d-71.2280916" target="_BLANK"><img src="images/icon-map-marker.svg" alt="Image"></a>
		</figure>
	</div>
	<!-- end sides -->
	<div class="sides"><h2>Bleuoutremer, c'est du design pour l'imprimé et le Web, des logos, des publicités, de la photo, un service conseil en communication et stratégie de déploiement.</h2>
	<address>228, rue Saint-Joseph Est, #200<br>Québec(QC) G1K 2A9<br><a href="mailto:info@bleuoutremer.qc.ca" class="pointer-large">info@bleuoutremer.qc.ca</a><a href="tel:14186262792">(418) 626.2792</a>
  </address>
	</div>
	<!-- end sides -->
	</div>
	<!-- end inner -->
</div>
<!-- end navigation-menu -->
<aside class="left-side">
 <div class="logo">
 	<img src="images/logo-symbol-bo.png" alt="Image">
 </div>
  <ul>
    <li class="pointer-large"><a href="https://www.facebook.com/pages/category/Graphic-Designer/Bleuoutremer-181349450395/" target="_BLANK">FACEBOOK</a></li>
    <li class="pointer-large"><a href="https://ca.linkedin.com/organization-guest/company/bleu-outremer?challengeId=AQE94q8caoawOAAAAXKFTUjLOk6blTnL9m1EHhaqCTpkn5akwm_aEpNH1JQ5UE5nvmPfnUO9pXTxxtMqcYh_-Hv4HYd3YfWWqA&submissionId=4cd9a377-86b2-1516-55ef-1f22e78cd01c" target="_BLANK">LINKEDIN</a></li>
  </ul>
  <a href="#top" class="gotop pointer-large"><img src="images/icon-gotop.svg" alt="Image"></a> 
</aside>
<!-- end left-side -->
<header class="header">
  <nav class="navbar">
    <div class="logo"> <a href="index.php"><img src="images/logo.png" alt="Image"></a> </div>
    <!-- end logo -->
    <div class="phone pointer-small"><a href="tel:14186262792"> T: (418) 626.2792</a></div>
    <!-- end phone -->
    <div class="main-menu">
      <ul>
        <li class="pointer-large"><a href="agence.php">L'agence</a></li>
        <li class="pointer-large"><a href="services.php">Services</a></li>
        <li class="pointer-large"><a href="portfolio.php">Réalisations</a></li>
        <li class="pointer-large"><a href="#contact">Contact</a></li>
      </ul>
    </div>
    <!-- end main-menu -->
    <div class="hamburger-menu" id="hamburger-menu">
      <div class="burger pointer-large">
        <svg id="burger-svg" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
          <title>Show / Hide Navigation</title>
          <rect class="burger-svg__base" width="50" height="50"/>
          <g class="burger-svg__bars">
            <rect class="burger-svg__bar burger-svg__bar-1" x="14" y="18" width="22" height="2"/>
            <rect class="burger-svg__bar burger-svg__bar-2" x="14" y="24" width="22" height="2"/>
            <rect class="burger-svg__bar burger-svg__bar-3" x="14" y="30" width="22" height="2"/>
          </g>
        </svg>
      </div>
      <!-- end burger --> 
    </div>
    <!-- end hamburger-menu --> 
  </nav>
  <!-- end navbar -->


  <?php
  if (stripos($_SERVER['REQUEST_URI'], 'index.php')){ ?>
         <div class="headlines">
    <div class="container">
      <h1>Une équipe engagé à <br>
        vous emmener plus loin.</h1>
    </div>
    <!-- end container --> 
  </div>
  <!-- end headlines --> 
  <?php }
  else if (stripos($_SERVER['REQUEST_URI'], 'realisations.php')){ ?>
        <div class="page-title">
         <div class="container">
           <h2>Réalisations</h2>
           <h4>Voici quelques-uns de nos dernières réalisations</h4>
         </div>
       <!-- end container -->
        </div>
       <!-- end headlines --> 
  <?php }?>

</header>
<!-- end header -->