Outiref
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="description" content="La chouette agence est une agence de web design située à Lyon qui aide les entreprises à devenir attractives et visibles sur Internet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <link rel="shortcut icon" type="image/png" href="favicon.jpg">
    
	<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<link rel="stylesheet" type="text/css" href="./css/font-awesome.css">
	<link rel="stylesheet" type="text/css" href="./css/et-line.css">
	
    
	<script src="./js/jquery-2.1.0.js"></script>
	<script src="./js/bootstrap.js"></script>
	<script src="./js/blocs.js"></script>
	<script src="./js/jquery.touchSwipe.js" defer></script>
	<script src="./js/gmaps.js"></script>

    <title>La chouette agence - Entreprise web design à Lyon</title>

    
<!-- Analytics -->
 
<!-- Analytics END -->
    
</head>
<body>
<!-- Principal conteneur -->
<div class="page-container">
    
<!-- bloc-0 -->
<header class="bloc bgc-white l-bloc" id="bloc-0">
	<div class="container bloc-sm">
		<nav class="navbar row">
			<div class="navbar-header">
				<a class="navbar-brand" href="index.html"><img src="img/la-chouette-agence.png" alt="banniere avec le logo de la chouette agence" height="40"></a>
				<button id="nav-toggle" type="button" class="ui-navbar-toggle navbar-toggle" data-toggle="collapse" data-target=".navbar-1">
					<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
				</button>
			</div>
			<div class="collapse navbar-collapse navbar-1 special-dropdown-nav">
				<ul class="site-navigation nav navbar-nav">
					<li>
						<a href="index.html">Accueil</a>
					</li>
					<li>
						<a href="contact.html">Contact</a>
					</li>
				</ul>
			</div>
		</nav>
	</div>
</header>
<!-- bloc-0 END -->

<!-- bloc-1-presentation -->
<main>
<section class="bloc bgc-dark-slate-blue bg-banniere d-bloc bg-t-edge bloc-bg-texture texture-paper b-parallax" id="bloc-1-hero">
	<div class="container bloc-lg">
		<div class="row tight-width-whitespace">
			<div class="col-sm-12">
				<img src="img/logo.png" class="center-block image-resize-mode" width="100" alt="logo de la chouette agence">
				<h1 class="text-center hero-bloc-text tc-white">
					La chouette agence.
				</h1>
				<div class="text-center">
					<a href="contact.html" class="btn btn-lg btn-clean btn-rd cta-hero btn-atomic-tangerine" id="cta-hero">Contact</a>
				</div>
			</div>
		</div>
	</div>
</section>
<!-- bloc-1-presentation END -->

<!-- bloc-2-services -->
<section class="bloc bgc-white l-bloc" id="bloc-2-services">
	<div class="container bloc-md">
		<div class="row">
			<div class="col-sm-12 text-center">
				<h2>La chouette agence est une agence de web design qui aide les entreprises à devenir attractives et visibles sur Internet.</h2>
			</div>
		</div>
		<div class="row voffset-lg med-width-whitespace">
			<div class="col-sm-4">
				<div class="text-center">
					<span class="et-icon-browser sm-shadow icon-dark-slate-blue icons icon-lg"></span>
				</div>
				<h3 class="mg-md text-center">
					Web design
				</h3>
				<p class="text-center">
					Que vous ayez un site web qui a besoin d&rsquo;un rafraîchissement ou que vous partiez de zéro, laissez-nous vous réaliser un design dont vous serez fier.
				</p>
			</div>
			<div class="col-sm-4">
				<div class="text-center">
					<span class="et-icon-presentation sm-shadow icon-dark-slate-blue icons icon-lg"></span>
				</div>
				<h3 class="mg-md text-center">
					&nbsp;Stratégie
				</h3>
				<p class="text-center">
					Plutôt que de suggérer des designs à la mode, nous travaillerons avec vous pour comprendre vos objectifs commerciaux afin de vous proposer le meilleur design possible.<br>
				</p>
			</div>
			<div class="col-sm-4">
				<div class="text-center">
					<span class="et-icon-edit sm-shadow icon-dark-slate-blue icons icon-lg"></span>
				</div>
				<h3 class="mg-md text-center">
					Illustrations
				</h3>
				<p class="text-center">
					Un bon design n'est rien sans de bonnes illustrations. Laissez faire notre équipe de graphistes talentueux pour donner à vos pages une touche finale d'élégance.
				</p>
			</div>
		</div>
		<div class="row voffset-lg voffset">
			<div class="col-xs-12 col-md-8 col-md-offset-2 text-center">
			 <p class="citation">"La chouette agence est une excellente agence web ! Les web designers ont réussi à capturer l'essence de notre entreprise et à l'intégrer à notre site. Cela nous a aidé à doubler nos ventes en ligne à Lyon"</p>
			 <p class="citation_auteur">Maxime Guibard, PDG de À vos fourchettes</p>
			</div>
		</div>
	</div>
</section>
<!-- bloc-2-services END -->

<!-- bloc-3-what-i-do -->
<section class="bloc tc-white bgc-atomic-tangerine bg-presentation d-bloc bloc-bg-texture texture-paper b-parallax" id="bloc-3-what-i-do">
	<div class="container bloc-lg">
		<div class="row tight-width-whitespace black-background">
			<div class="col-sm-12">
				<h2 class="mg-md text-center tc-white">
					Nous souhaitons aider les entreprises de la région Lyonnaise à se développer et à connaître le succès. Nous travaillons pour aider les entreprises locales à attirer de nouveaux clients .<br>
				</h2>
				<p class="text-center white">
					Nous aimons collaborer avec des entrepreneurs créatifs et des entreprises locale, qu’elles aient besoin de créer un site de A à Z ou de donner un coup de jeune à leur site. Que vous ayez besoin d’une identité visuelle complète ou d’une refonte de votre site, n’hésitez pas à nous contacter. Nous travaillerons ensemble pour créer des sites beau et bien structurés, qui seront facilement trouvable sur les moteurs de recherche. <br>
				</p>
			</div>
		</div>
	</div>
</section>
<!-- bloc-3-what-i-do END -->

<!-- bloc-4-portfolio -->
<section class="bloc bgc-white bg-lines-h2-bg bg-repeat l-bloc" id="bloc-4-portfolio">
	<div class="container bloc-lg">
		<div class="row">
			<div class="col-sm-12 text-center">
			 <h2>Nous travaillons avec beaucoup de clients, voici nos réalisations.</h2>
			</div>
		</div>
		<div class="row tight-width-whitespace portfolio-row">
			<div class="col-sm-6">
				<a href="#" data-lightbox="img/1.jpg" data-gallery-id="gallery-1" data-caption="Refonte d'un site web pour un journal local" data-frame="snapshot-lb"><img src="img/1.jpg" alt="image de journaux" class="img-responsive portfolio-thumb"></a>
				<h3 class="mg-md text-center">
					Refonte d'un site web pour un journal local
				</h3>
				<p class="text-center">
					Nous avons créé une nouvelle identité visuelle pour un journal lyonnais.
				</p>
			</div>
			<div class="col-sm-6">
				<a href="#" data-lightbox="img/2.jpg" data-gallery-id="gallery-1" data-caption="Création d'un site web pour photographes" data-frame="snapshot-lb"><img src="img/2.jpg" class="img-responsive portfolio-thumb" alt="image d'une photographe"></a>
				<h3 class="mg-md text-center">
					Création d'un site web pour photographes
				</h3>
				<p class="text-center">
					Nous avons conçu la plateforme idéale pour laisser place aux clichés des photographes.
				</p>
			</div>
		</div>
		<div class="row tight-width-whitespace portfolio-row">
			<div class="col-sm-6">
				<a href="#" data-lightbox="img/3.jpg" data-gallery-id="gallery-1" data-caption="Création d'un site internet pour un voyageur" data-frame="snapshot-lb"><img src="img/3.jpg" class="img-responsive portfolio-thumb" alt="image de matériel photographique"></a>
				<h3 class="mg-md text-center">
					Création d'un site internet pour un voyageur
				</h3>
				<p class="text-center">
					Nous avons élaboré un site internet et des illustrations pour sublimer les vidéos et les articles de ce voyageur.
				</p>
			</div>
			<div class="col-sm-6">
				<a href="#" data-lightbox="img/4.jpg" data-gallery-id="gallery-1" data-caption="Conception d'un site pour une agence de mariage" data-frame="snapshot-lb"><img src="img/4.jpg" class="img-responsive portfolio-thumb" alt="image d'une personne travaillant sur ordinateur"></a>
				<h3 class="mg-md text-center">
					Conception d'un site pour une agence de mariage
				</h3>
				<p class="text-center">
					Nous avons travaillé avec cette agence pour créer un site internet permettant la présentation détaillée de leurs prestations.
				</p>
			</div>
		</div>
	</div>
</section>
<!-- bloc-4-portfolio END -->

<!-- bloc-5-cta -->
<section class="bloc bgc-dark-slate-blue bg-banniere d-bloc bloc-bg-texture texture-paper" id="bloc-5-cta">
	<div class="container bloc-lg">
		<div class="row">
			<h2 class="mg-md text-center tc-white">
				Prêt pour redonner vie à votre projet ?<br>Contactez notre équipe !
			</h2>
			<div class="col-sm-12 text-center">
				<a href="contact.html" class="btn btn-atomic-tangerine btn-clean btn-rd btn-lg cta-hero">Contact</a>
			</div>
		</div>
	</div>
</section>
</main>
<!-- bloc-5-cta END -->

<!-- Footer - bloc-8 -->
<footer class="bloc bgc-atomic-tangerine d-bloc" id="bloc-8">
	<div class="container bloc-sm">
		<div class="row">
			<div class="col-sm-12">
				<p class="text-center white">
					La chouette agence - Agence web basée à Lyon.<br>
				</p>
				<div class="row row-no-gutters social">
					<div class="col-sm-3">
						<div class="text-center">
							<a class="social" title="Twitter" href="#"><span class="fa fa-twitter icon-md"></span></a>
						</div>
					</div>
					<div class="col-sm-3">
						<div class="text-center">
							<a class="social" title="Facebook"  href="#"><span class="fa fa-facebook icon-md"></span></a>
						</div>
					</div>
					<div class="col-sm-3">
						<div class="text-center">
							<a class="social" title="Dribble" href="#"><span class="fa fa-dribbble icon-md"></span></a>
						</div>
					</div>
					<div class="col-sm-3">
						<div class="text-center">
							<a class="social" title="Instagram" href="#"><span class="fa fa-instagram icon-md"></span></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</footer>
<!-- Footer - bloc-8 END -->

</div>
<!-- Principal conteneur END -->
    
</body>
</html>