Outiref
<!doctype html>
<html lang="fr">
    <head> 
        <meta charset="utf-8"> 
        <meta name="keywords" content="">
        <meta name="description" content="Agence web design à Lyon, offrez à votre site le meilleur graphisme et des illustrations élégantes."> 
        <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.min.css">
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
        <link rel="stylesheet" type="text/css" href="./css/et-line.min.css"> 
        
        <script defer src="./js/jquery-2.1.0.min.js"></script>
        <script defer src="./js/bootstrap.min.js"></script>
        <script defer src="./js/blocs.min.js"></script>
        <script defer src="./js/jquery.touchSwipe.min.js" ></script>
        <script defer src="./js/gmaps.min.js"></script> 
        
        <title>La Chouette Agence,entreprise webdesign Lyon </title> 
    
    </head>
    
    <body>
        <div class="page-container"> 
            <div class="bloc bgc-white l-bloc" id="bloc-0">
                <div class="container bloc-sm">
                    <nav class="navbar row" aria-label="fil-d'arianne" > 
                        <div class="navbar-header">
                            <a class="navbar-brand" href="index.html">
                                <img src="img/la-chouette-agence.png" alt="Logo d'entête du site" 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>
                        <ul class="fil-arianne"> 
                            <li class="fil-arianne-item active" aria-current="page">Accueil
                            </li> 
                            <li>>
                            </li> 
                            <li class="fil-arianne-item"> 
                                <a href="#">Contact
                                </a> 
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <div class="bloc bgc-dark-slate-blue bg-banniere d-bloc 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 l'agence representé avec une chouette."/>
                            <h1 class="text-center hero-bloc-text tc-white" >La chouette agence.<br>
                                <span>Fournisseur de graphismes et d'illustrations pour votre site web.
                                </span>
                            </h1>
                            <div class="text-center">
                                <a href="contact.html" target="_blank" class="btn btn-lg btn-clean btn-rd cta-hero btn-atomic-tangerine" id="cta-hero" role="button">Contact
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div 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" role="article"> 
                            <p role="article">La chouette agence est une agence de web design qui aide les entreprises à devenir attractives et visibles sur internet
                            </p>
                        </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" role="article">Que vous ayez un site web qui a besoin d'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"> 
                            <h3>"La chouette agence est une excellente agence web! Les web designers ont reussi à capturer l'essence de notre entreprise et à l'integrer à notre site. Cela nous a aidé à doubler nos ventes en ligne à Lyon."
                            </h3> 
                            <p>Maxime Guibard, PDG de A vos fourchettes
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div 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">
                            <h3 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>
                            </h3>
                            <p class="text-center white" role="article">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><br>
                                <a class="ltc-white bold-link" href="contact.html"  target="_blank" role="button">Contactez notre équipe
                                </a>
                                <br>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div 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"> 
                            <h3>Nous travaillons avec beaucoup de clients, voici nos réalisations.
                            </h3>
                        </div>
                    </div>
                    <div class="row tight-width-whitespace portfolio-row">
                        <div class="col-sm-6">
                            <a href="#" data-lightbox="img/photo-site-de-journal-local.jpg" data-gallery-id="gallery-1" data-caption="Refonte d'un site web pour un journal local" data-frame="snapshot-lb">
                                <img src="img/photo-site-de-journal-local.jpg" alt="Photo d'un site de journal que nous avons refonté." 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" role="article">Nous avons créé une nouvelle identité visuelle pour un journal lyonnais.
                            </p>
                        </div>
                        <div class="col-sm-6">
                            <a href="#" data-lightbox="img/photo-site-de-photographes.jpg" data-gallery-id="gallery-1" data-caption="Création d'un site web pour photographes" data-frame="snapshot-lb">
                                <img src="img/photo-site-de-photographes.jpg" class="img-responsive portfolio-thumb" alt="Photo d'un site pour photographe que nous avons crée."/>
                            </a>
                            <h3 class="mg-md text-center" >Création d'un site web pour photographes
                            </h3>
                            <p class="text-center" role="article">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/photo-site-pour-voyageurs-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/photo-site-pour-voyageurs-3.jpg" class="img-responsive portfolio-thumb" alt="Photo d'un site web pour voyageur que nous avons réalisé illustrant des appareils numériques comme des appareils photos à emporter lors de ses deplacements"/>
                            </a>
                            <h3 class="mg-md text-center">Création d'un site internet pour un voyageur
                            </h3>
                            <p class="text-center" role="article" >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/photo-site-d'agence-de-mariage-3.jpg" data-gallery-id="gallery-1" data-caption="Conception d'un site pour une agence de mariage" data-frame="snapshot-lb">
                                <img src="img/photo-site-d'agence-de-mariage-3.jpg" class="img-responsive portfolio-thumb" alt="Photo d'un site web pour agence de mariage que nous avons conçu"/>
                            </a>
                            <h3 class="mg-md text-center">Conception d'un site pour une agence de mariage
                            </h3>
                            <p class="text-center" role="article">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>
            </div>
            <div 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">
                        <h3 class="mg-md text-center tc-white">Prêt pour redonner vie à votre projet ?<br>Contactez notre équipe !
                        </h3>
                        <div class="col-sm-12 text-center">
                            <a href="contact.html" target="_blank" class="btn btn-atomic-tangerine btn-clean btn-rd btn-lg cta-hero" role="button">Contact
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <footer> 
                <div 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" href="index.html" target="_blank">
                                                <span class="fa fa-twitter icon-md">
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="text-center">
                                            <a class="social" href="index.html"  target="_blank">
                                                <span class="fa fa-facebook icon-md">
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="text-center">
                                            <a class="social" href="index.html" target="_blank">
                                                <span class="fa fa-dribbble icon-md">
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-sm-3">
                                        <div class="text-center">
                                            <a class="social" href="index.html" target="_blank">
                                                <span class="fa fa-instagram icon-md">
                                                </span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
    </body>
</html>