Développeur web, les artisans de nos réalisations

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="csrf-token" content="4WjFhcXp3n68pOydRnCI4Tb91CehO0KfG5i18hNc"> <link rel="shortcut icon" href="https://www.novius.com/build/assets/favicon-DWrYNGcS.ico"> <link rel="canonical" href="https://www.novius.com/metiers/developpeur-web"> <meta name="google-site-verification" content="4da_w5a1BKxzTh_Kw4hps6k0fIMVsN0fNLYRJX2b4uM">  <meta name="p:domain_verify" content="46b542d7fc501b448c4909e7bf7a8c1b" /> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Organization","name":"Novius","url":"https:\/\/www.novius.com","logo":{"@type":"ImageObject","url":"https:\/\/www.novius.com\/img\/logo-novius-cox.svg"},"address":[{"@type":"PostalAddress","addressLocality":"Paris, France","postalCode":"F-75002","streetAddress":"16 rue Saint Nicolas"},{"@type":"PostalAddress","addressLocality":"Lyon, France","postalCode":"F-69100","streetAddress":"55 avenue Galline"}]}</script> <title>Développeur web, les artisans de nos réalisations</title> <meta name="description" content="En agence web, on distingue ainsi 3 grandes catégories de développeurs : les développeurs front-end, les développeurs back-end et les développeurs full-stack.">  <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@NoviusInfo"> <meta name="twitter:creator" content="@NoviusInfo"> <meta property="og:locale" content="fr"> <meta property="og:type" content="article"> <meta property="og:title" content="Développeur web, les artisans de nos réalisations"> <meta name="twitter:title" content="Développeur web, les artisans de nos réalisations"> <meta property="og:description" content="En agence web, on distingue ainsi 3 grandes catégories de développeurs : les développeurs front-end, les développeurs back-end et les développeurs full-stack."> <meta name="twitter:description" content="En agence web, on distingue ainsi 3 grandes catégories de développeurs : les développeurs front-end, les développeurs back-end et les développeurs full-stack."> <meta property="og:url" content="https://www.novius.com/metiers/developpeur-web"> <meta property="og:site_name" content="Novius Site 2023">  <link rel="preload" as="style" href="https://www.novius.com/build/assets/app-Ck4CoZEg.css" /><link rel="preload" as="style" href="https://www.novius.com/build/assets/app-BXcpSXUv.css" /><link rel="modulepreload" href="https://www.novius.com/build/assets/app-3fcnewvy.js" /><link rel="stylesheet" href="https://www.novius.com/build/assets/app-Ck4CoZEg.css" data-navigate-track="reload" /><link rel="stylesheet" href="https://www.novius.com/build/assets/app-BXcpSXUv.css" data-navigate-track="reload" /><script type="module" src="https://www.novius.com/build/assets/app-3fcnewvy.js" data-navigate-track="reload"></script> <script> (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PSLR74B'); </script>  <script> var _paq = window._paq = window._paq || []; _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//novius.matomo.cloud/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', '1']); // Add this code below within the Matomo JavaScript tracker code // Important: the tracker url includes the /matomo.php var secondaryTrackerUrl = 'https://t.novius.net/matomo.php'; var secondaryWebsiteId = 1; // Also send all of the tracking data to this other Matomo server, in website ID 77 _paq.push(['addTracker', secondaryTrackerUrl, secondaryWebsiteId]); // That's it! var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.setAttribute('rel', 'dns-prefetch'); g.type='text/javascript'; g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script>  </head> <body class="relative antialiased text-primary font-base bg-white "> <nav role="navigation" aria-label="Accès rapide" class="-translate-y-full focus-within:translate-y-2 px-4 md:px-0 py-2 fixed left-0 md:left-4 top-0 z-[105] bg-primary w-[95%]" > <div class="container"> <ul class="flex items-center gap-4 text-white text-sm"> <li> <a class="js-no-smooth-scroll underline underline-offset-2 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-primary rounded-sm" href="#main-content" > Contenu </a> </li> <li> <a class="js-no-smooth-scroll underline underline-offset-2 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-primary rounded-sm" href="#main-menu" > Menu </a> </li> <li> <a class="js-no-smooth-scroll underline underline-offset-2 outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1 focus-visible:ring-offset-primary rounded-sm" href="#main-footer" > Pied de page </a> </li> </ul> </div> </nav> <div id="top-bar" class="hidden py-2 bg-primary lg:block sticky w-full top-0 left-0 right-0 h-[50px] z-100 transition-[top] duration-300"> <div class="container"> <div class="flex items-center justify-between"> <div class="flex items-center gap-4 "> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 fb" href="https://www.facebook.com/noviusfr/" rel="nofollow" target="_blank"> <svg width="20" class="svg-icon" aria-hidden="true" viewBox="0 0 20 20"> <path fill="currentColor" d="M11.344,5.71c0-0.73,0.074-1.122,1.199-1.122h1.502V1.871h-2.404c-2.886,0-3.903,1.36-3.903,3.646v1.765h-1.8V10h1.8v8.128h3.601V10h2.403l0.32-2.718h-2.724L11.344,5.71z"></path> </svg> <span class="sr-only">Facebook de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 twitter" href="https://twitter.com/NoviusInfo" rel="nofollow" target="_blank"> <svg width="20" class="svg-icon" aria-hidden="true" viewBox="0 0 20 20"> <path fill="currentColor" d="M18.258,3.266c-0.693,0.405-1.46,0.698-2.277,0.857c-0.653-0.686-1.586-1.115-2.618-1.115c-1.98,0-3.586,1.581-3.586,3.53c0,0.276,0.031,0.545,0.092,0.805C6.888,7.195,4.245,5.79,2.476,3.654C2.167,4.176,1.99,4.781,1.99,5.429c0,1.224,0.633,2.305,1.596,2.938C2.999,8.349,2.445,8.19,1.961,7.925C1.96,7.94,1.96,7.954,1.96,7.97c0,1.71,1.237,3.138,2.877,3.462c-0.301,0.08-0.617,0.123-0.945,0.123c-0.23,0-0.456-0.021-0.674-0.062c0.456,1.402,1.781,2.422,3.35,2.451c-1.228,0.947-2.773,1.512-4.454,1.512c-0.291,0-0.575-0.016-0.855-0.049c1.588,1,3.473,1.586,5.498,1.586c6.598,0,10.205-5.379,10.205-10.045c0-0.153-0.003-0.305-0.01-0.456c0.7-0.499,1.308-1.12,1.789-1.827c-0.644,0.28-1.334,0.469-2.06,0.555C17.422,4.782,17.99,4.091,18.258,3.266"></path> </svg> <span class="sr-only">Twitter de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 linkedin" href="https://www.linkedin.com/company/novius_3/" rel="nofollow" target="_blank"> <svg width="20" class="svg-icon" aria-hidden="true" viewBox="0 0 32 32"> <path fill="currentColor" d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z"></path> <path fill="currentColor" d="M2 12h6v18h-6v-18z"></path> <path fill="currentColor" d="M8 7c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z"></path> </svg> <span class="sr-only">LinkedIn de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 instagram" href="https://www.instagram.com/agencenovius/" rel="nofollow" target="_blank"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="svg-icon" aria-hidden="true" viewBox="0 0 512 512"> <path fill="currentColor" d="M256 46.1c68.4 0 76.5 0.3 103.4 1.5 25 1.1 38.5 5.3 47.5 8.8 11.9 4.6 20.5 10.2 29.4 19.1 9 9 14.5 17.5 19.2 29.4 3.5 9 7.7 22.6 8.8 47.5 1.2 27 1.5 35.1 1.5 103.4s-0.3 76.5-1.5 103.4c-1.1 25-5.3 38.5-8.8 47.5-4.6 11.9-10.2 20.5-19.1 29.4-9 9-17.5 14.5-29.4 19.2-9 3.5-22.6 7.7-47.5 8.8-27 1.2-35.1 1.5-103.4 1.5s-76.5-0.3-103.4-1.5c-25-1.1-38.5-5.3-47.5-8.8-11.9-4.6-20.5-10.2-29.4-19.1-9-9-14.5-17.5-19.2-29.4-3.5-9-7.7-22.6-8.8-47.5-1.2-27-1.5-35.1-1.5-103.4s0.3-76.5 1.5-103.4c1.1-25 5.3-38.5 8.8-47.5 4.6-11.9 10.2-20.5 19.1-29.4 9-9 17.5-14.5 29.4-19.2 9-3.5 22.6-7.7 47.5-8.8 26.9-1.2 35-1.5 103.4-1.5zM256 0c-69.5 0-78.2 0.3-105.5 1.5-27.2 1.2-45.9 5.6-62.1 11.9-16.9 6.6-31.2 15.3-45.4 29.6-14.3 14.2-23 28.5-29.6 45.3-6.3 16.3-10.7 34.9-11.9 62.1-1.2 27.4-1.5 36.1-1.5 105.6s0.3 78.2 1.5 105.5c1.2 27.2 5.6 45.9 11.9 62.1 6.6 16.9 15.3 31.2 29.6 45.4 14.2 14.2 28.5 23 45.3 29.5 16.3 6.3 34.9 10.7 62.1 11.9 27.3 1.2 36 1.5 105.5 1.5s78.2-0.3 105.5-1.5c27.2-1.2 45.9-5.6 62.1-11.9 16.8-6.5 31.1-15.3 45.3-29.5s23-28.5 29.5-45.3c6.3-16.3 10.7-34.9 11.9-62.1 1.2-27.3 1.5-36 1.5-105.5s-0.3-78.2-1.5-105.5c-1.2-27.2-5.6-45.9-11.9-62.1-6.3-17-15-31.3-29.3-45.5-14.2-14.2-28.5-23-45.3-29.5-16.3-6.3-34.9-10.7-62.1-11.9-27.4-1.3-36.1-1.6-105.6-1.6v0z"></path> <path fill="currentColor" d="M256 124.5c-72.6 0-131.5 58.9-131.5 131.5s58.9 131.5 131.5 131.5 131.5-58.9 131.5-131.5c0-72.6-58.9-131.5-131.5-131.5zM256 341.3c-47.1 0-85.3-38.2-85.3-85.3s38.2-85.3 85.3-85.3c47.1 0 85.3 38.2 85.3 85.3s-38.2 85.3-85.3 85.3z"></path> <path fill="currentColor" d="M423.4 119.3c0 16.955-13.745 30.7-30.7 30.7s-30.7-13.745-30.7-30.7c0-16.955 13.745-30.7 30.7-30.7s30.7 13.745 30.7 30.7z"></path> </svg> <span class="sr-only">Instagram de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 youtube" href="https://www.youtube.com/user/noviusTV" rel="nofollow" target="_blank"> <svg width="20" height="20" viewBox="0 0 26 18" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill="currentColor" d="M12.5258 17.7575H12.5008C12.4233 17.7575 4.66957 17.7425 2.71332 17.2112C1.63759 16.9214 0.797502 16.0809 0.508316 15.005C0.156539 13.0204 -0.0133328 11.0079 0.000816017 8.99249C-0.00827256 6.97376 0.166196 4.95838 0.522066 2.97124C0.8192 1.89438 1.6556 1.04993 2.72957 0.742493C4.63207 0.242493 12.1721 0.242493 12.4921 0.242493H12.5183C12.5971 0.242493 20.3708 0.257493 22.3071 0.788743C23.3805 1.08 24.2189 1.91886 24.5096 2.99249C24.8725 4.98442 25.0429 7.00666 25.0183 9.03124C25.0271 11.0475 24.8522 13.0604 24.4958 15.045C24.2029 16.1195 23.3623 16.9583 22.2871 17.2487C20.3871 17.7525 12.8458 17.7575 12.5258 17.7575ZM10.0258 5.24874L10.0196 12.7487L16.5346 8.99874L10.0258 5.24874Z"/> </svg> <span class="sr-only">YouTube de Novius</span> </a> </div> <div class="flex items-center gap-6"> <div class="flex items-center gap-2 text-sm text-white"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span> <a aria-label="Visitez la page de l'agence de Lyon" class="hover:underline" href="/contact/novius-lyon">Lyon</a> - <a class="hover:underline" aria-label="Appeler l'agence de Lyon au 04 27 46 20 00" href="tel:0427462000">04 27 46 20 00</a> </span> </div> <div class="flex items-center gap-2 text-sm text-white"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="22" height="22"> <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" /> </svg> <span> <a aria-label="Visitez la page de l'agence de Paris" class="hover:underline" href="/contact/novius-paris">Paris</a> - <a class="hover:underline" aria-label="Appeler l'agence de Paris au 01 77 45 49 00" href="tel:0177454900">01 77 45 49 00</a> </span> </div> <a href="https://www.novius.com/contact" class=" button-link inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent py-[10px] px-5 text-xs leading-none"> Contact </a> </div> </div> </div> </div> <header role="banner" id="main-header" class="bg-white sticky top-0 lg:top-[50px] shadow-header z-100"> <div class=" container px-4 xl:px-16"> <div id="main-menu" class="flex items-center justify-between py-4"> <a class="block" href="https://www.novius.com"> <img width="193" height="50" loading="lazy" src="https://www.novius.com/build/assets/logo-novius-DfcwGqTB.svg" alt="Agence Web Novius (retour à l'accueil)"> </a>  <div x-data="menu()" @keydown.window.escape="openMenu = false"> <div> <nav role="navigation" aria-label="Menu principal" class="hidden pointer-events-auto lg:block"> <ul id="menu-list" class="flex"> <li> <a href="https://www.novius.com/etude-de-cas" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Réalisations </a> </li> <li> <a href="https://www.novius.com/service" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Services </a> </li> <li> <a href="https://www.novius.com/actualites" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Blog </a> </li> <li> <a href="https://www.novius.com/atelier" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Ateliers </a> </li> <li> <a href="https://www.novius.com/novius-agence-digitale" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Agence </a> </li> <li> <a href="https://www.novius.com/recrutement" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Jobs </a> </li> <li> <a href="https://www.novius.com/contact/novius-paris" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Novius - Paris </a> </li> <li> <a href="https://www.novius.com/contact" class="inline-block relative text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 text-primary after:scale-x-0 " > Contact </a> </li> </ul> </nav> <div class="relative z-10" x-show="openMenu"> <div class="fixed inset-0 overflow-hidden"> <div class="absolute inset-0 overflow-hidden"> <div x-show="openMenu" x-cloak class="bg-neutral-200/50 absolute inset-0"></div> <div class="fixed inset-y-0 right-0 flex max-w-full pointer-events-none"> <div x-show="openMenu" x-cloak x-trap="openMenu" x-transition:enter="transform transition ease-in-out duration-500" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition ease-in-out duration-500" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="pointer-events-auto w-screen max-w-full sm:max-w-md shadow-xl"> <div class="flex h-full flex-col overflow-y-scroll bg-white py-4 menu-wrapper" x-ref="menuList"> <div class="px-[0.938rem] sm:px-6 mb-4"> <div class="flex items-start justify-between"> <div class="block sm:hidden"> <svg aria-label="Agence Web Novius (retour à l'accueil)" width="48" height="48" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M151.66 130.31C152.45 130.02 153.23 129.76 153.99 129.52H154.08C156.211 128.868 158.396 128.413 160.61 128.16H160.69C162.623 127.948 164.572 127.922 166.51 128.08C167.807 128.188 169.094 128.392 170.36 128.69C170.36 128.69 171.22 32.86 64.0601 17C64.0601 17 53.4201 38.31 64.9901 70.08C103.5 68.71 132.82 100.64 151.66 130.31Z" fill="#4FA8AA" /> <path d="M47.6202 72.9C94.7402 59.37 130.14 96.32 151.67 130.31C156.069 128.609 160.768 127.823 165.48 128C150.4 92.42 109.87 28.92 13.8602 34.63C13.8602 34.63 5.86023 65.48 11.6302 93.43C13.8502 91.43 15.9902 89.66 16.9502 88.94C26.0603 81.6913 36.4697 76.2472 47.6202 72.9Z" fill="#143659" /> <path d="M141.28 135.58L141.41 135.49C143.424 134.192 145.518 133.023 147.68 131.99C123.26 93.72 96.2302 74.3 67.3202 74.3H67.2602C35.6102 74.3 11.9102 98 9.01021 102.11C5.69021 125.42 10.5602 143.98 23.5202 157.31C32.4002 166.44 50.1402 178 84.4102 181.44C96.4754 182.607 108.621 182.683 120.7 181.67C119.2 174.35 117.52 153.39 141.28 135.58Z" fill="#F05100" /> <path d="M176.27 135.58C167.13 130.17 155.89 131.4 143.77 139.09C120.36 156.62 123.71 176.6 125.04 181.72C153.7 185.72 176.56 183.39 186.34 175.45C187.774 174.386 188.962 173.026 189.824 171.463C190.687 169.9 191.204 168.17 191.34 166.39C192.04 155.88 187.06 141.92 176.27 135.58Z" fill="#143659" /> <path d="M175.42 106C171.585 96.0935 165.617 87.1522 157.94 79.8101C170.6 105.33 170.42 128.63 170.42 128.65C174.168 129.51 177.699 131.133 180.79 133.42C180.613 124.037 178.796 114.757 175.42 106Z" fill="#F05100" /> </svg> </div> <button class="flex items-center ml-auto text-primary" type="button" x-show="openMenu" x-on:click="openMenu = false"> <span class="mr-1 text-sm font-semibold">Fermer le menu</span> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> </div> <div class="menu flex flex-col px-0 sm:px-6"> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 75ms;"> <a href="https://www.novius.com/etude-de-cas" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Réalisations </a> </div> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 150ms;"> <a href="https://www.novius.com/service" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Services </a> </div> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 225ms;"> <a href="https://www.novius.com/actualites" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Blog </a> </div> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 300ms;"> <a href="https://www.novius.com/atelier" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Ateliers </a> </div> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 375ms;"> <a href="https://www.novius.com/novius-agence-digitale" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Agence </a> </div> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 450ms;"> <a href="https://www.novius.com/recrutement" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Jobs </a> </div> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 525ms;"> <a href="https://www.novius.com/contact/novius-paris" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Novius - Paris </a> </div> <div x-show="openMenu" x-cloak @click.away="openMenu = false" x-transition:enter="duration-mobileMenu transition-mobileMenu" x-transition:enter-start="opacity-0 translate-x-[30px]" x-transition:enter-end="opacity-1 translate-x-0" style="transition-delay: 600ms;"> <a href="https://www.novius.com/contact" class="inline-block relative text-primary text-2xl lg:text-base p-[0.938rem] font-bold lg:font-semibold uppercase lg:normal-case hover:text-accent transition-colors duration-300 after:content-[''] after:bottom-0 after:bg-accent after:h-[2px] after:left-0 after:absolute after:w-full after:origin-[100%_0] after:scale-x-0 hover:after:scale-x-100 hover:after:origin-[0_0] after:transition-transform after:duration-300 "> Contact </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="flex items-center gap-3 lg:hidden"> <div class="flex items-center gap-[10px]"> <a href="tel:0427462000" target="_blank"> <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24"> <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z" /> </svg> <span class="sr-only">Appelez-nous au 04 27 46 20 00</span> </a> <a href="https://www.novius.com/contact"> <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="24" height="24"> <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" /> </svg> <span class="sr-only">Contact</span> </a> </div> <button class="flex flex-col items-end" type="button" x-show="! openMenu" x-on:click="openMenu = true" :aria-label="openMenu ? 'Fermer le menu' : 'Ouvrir le menu'" aria-controls="menu-list" x-ref="burgerMenuButton" > <span class="w-[18px] bg-primary block h-[2px] mb-[6px] origin-[100%_0]" aria-hidden="true"></span> <span class="w-[18px] bg-primary block h-[2px] mb-[6px] scale-x-[0.8] origin-[100%_0]" aria-hidden="true"></span> <span class="w-[9px] bg-primary block h-[2px] scale-x-[0.6] origin-[100%_0]" aria-hidden="true"></span> </button> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('menu', () => ({ openMenu: false, init() { this.$watch('openMenu', () => { if (this.openMenu) { document.body.style.overflow = 'hidden'; } else { document.body.style.overflow = null; setTimeout(() => { this.$refs.burgerMenuButton.focus(); }, 250); } }); } })); }); </script> </div> </div> </header> <main id="main-content" role="main"> <div class=" w-full max-w-[750px] lg:max-w-[914px] px-4 mx-auto"> <div class="py-12 md:py-20"> <div class="mb-9"> <a class="inline-flex items-center text-sm text-primary underline underline-offset-4 hover:text-accent hover:underline-offset-8 transition-all duration-200" href="https://www.novius.com/metiers" > <svg class="w-6 h-6 mr-2 text-accent" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18" /> </svg> Retour aux métiers </a> </div> <p class="animated-intro-title font-base text-xl font-normal text-center text-primary mb-6 md:mb-10"> Novius, agence web à Lyon, Paris et Annecy </p> <h1 class="animated-title font-prompt text-primary font-bold text-3xl md:text-4xl lg:text-6xl text-center"> Développeur web </h1> <h2 class="animated-subtitle mt-4 md:mt-2 lg:mt-4 font-prompt text-primary font-medium text-xl md:text-3xl text-center"> Un métier aux multiples spécialités </h2> </div> </div> <div class="vc-block block-one-wysiwyg mb-14" > <div class="container"> <div class=" w-full max-w-[750px] lg:max-w-[914px] px-4 mx-auto"> <div class="flex flex-col items-center justify-center"> <div class="prose prose-primary prose-lg max-w-none js-wysiwyg-cleaner"> <p><a id="devfront" name="devfront"></a>Le métier de développeur web est divisé en plusieurs spécialités en fonction des compétences, des intérêts et des parcours de chaque personne. En agence web, on distingue ainsi 3 grandes catégories de développeurs : les développeurs front-end, les développeurs back-end et les développeurs full-stack.</p> <h2>Développeur Front-End</h2> <h3>Un métier technique et graphique</h3> <p>Le développeur front-end programme la partie visible du site internet ou de l'application web. Le développement front-end est l’une des compétences indispensables au développement d’applications web. Le Front-End correspond à toute la partie du code qui va s’exécuter dans le navigateur web, à savoir l’ensemble de l’interface et de ses fonctionnalités.</p> <p>Le développeur Front-End aura en charge de programmer toute la partie responsive du site internet, de réaliser les animations graphiques que le site affichera et d'implémenter toutes les interactions prévues.</p> <h3>Les compétences du développeur Front-End</h3> <p>Expert de l’intégration HTML / CSS, ils savent intelligemment utiliser les frameworks front (Tailwind CSS, Bootstrap ou autre). Ils maitrisent le Javascript sur le bout des doigts. Ils connaissent les bonnes pratiques de l'accessibilité et des performances.</p> <p><a id="integrateur" name="integrateur"></a>Le développeur Front-end doit être doté d'une sensibilité UX/UI forte qui lui permettront de voir tous les détails qui feront la différence. C'est un développeur minutieux dans sa réalisation qui sait être force de proposition.</p> <p>Le développeur Front-end confirmé dispose en sus, de bonnes bases en PHP, SQL, bases de données et dans certains CMS.</p> <h3>Intégrateur web : une autre vision du développement front-end</h3> <p><a id="devback" name="devback"></a>L'intégrateur web a pour mission de monter les pages d'un site en réunissant l'ensemble des éléments décidés par le chef de projet ou le webmaster : textes, images, liens hypertextes, tableaux, etc. Son travail se situe entre celui du webdesigner et celui du développeur web. Au contraire du développeur front-end, l'intégrateur web ne fait pas ou peu de programmation. Il possède en revanche un sens artistique important. L'intégrateur web peut utiliser des solutions no-code ou low-code où il produira son travail en n'écrivant qu'un minimum de lignes de code.</p> </div> </div> </div> </div> </div> <div class="vc-block block-left-text-right-image mb-9" > <div class="bg-grayBackground"> <div class=" w-full max-w-[750px] lg:max-w-[914px] px-4 mx-auto"> <div class="flex flex-col md:flex-row"> <div class="pt-4 md:pt-16 w-full md:w-1/2 pl-3 md:pl-3 pr-3 md:pr-9"> <h2 class="text-2xl mb-5 md:mb-6 font-semibold font-base text-primary"> Ce qu'en pense Jessica </h2> <div class="prose prose-lg js-wysiwyg-cleaner prose-primary"> <p>« Développeur Front est un beau métier. À la lisière entre la technique et le design, on évolue toujours dans des domaines différents. Au final, on fait ce qui se voit. Il faut que ce soit efficace, rapide à afficher et beau. »</p> </div> </div> <div class="w-full md:w-1/2 flex flex-col items-center self-end justify-center md:pl-9"> <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw" data-src="https://www.novius.com/storage/file_manager_files/vc-blocs/YCl68kcMmvJWgVD52msBRYycoiukWqLTii5icBCR.png" alt=""> </div> </div> </div> </div> </div> <div class="vc-block block-one-wysiwyg mb-14" > <div class="container"> <div class=" w-full max-w-[750px] lg:max-w-[914px] px-4 mx-auto"> <div class="flex flex-col items-center justify-center"> <div class="prose prose-primary prose-lg max-w-none js-wysiwyg-cleaner"> <h2>Développeur Back-End</h2> <h3>Le développeur informatique</h3> <p>Le développeur back-end est responsable du développement des fonctionnalités cachées d'une application web ou d'un site internet. Il est le complément indispensable du développeur front-end.</p> <p>Le développeur back-end a pour mission de concevoir tous les éléments techniques indispensables au fonctionnement d’un site internet. Il doit donc avoir de fortes compétences en informatique tant dans les langages que dans l'aanalyse. Il est aussi en charge de la gestion des bases de données. Il doit impérativement être familier des systèmes SQL Serveur et MySQL.</p> <h3>Les compétences du développeur back-end</h3> <p><a id="devfs" name="devfs"></a>Amoureux du défi technique, le développeur back maitrise le PHP 8 et un ou plusieurs grands frameworks web (Laravel, Symfony, FuelPHP, ...) et des CMS (Wordpress, Magento, PrestaShop, …). Il est à l’aise avec les bases de données, et les requêtes SQL alambiquées. S'il est amené à développer des sites vitrines, c'est dans les projets complexes aux multiples enjeux (application métier, API REST, ...) qu'il s'épanouit.</p> <h2>Développeur full-stack</h2> <h3>Le couteau suisse du développement web</h3> <p>Le développeur full-stack est le couteau suisse du développement web. Il est en même temps développeur front-end et développeur pack-end. Véritable touche à tout du web, ses missions sont très variées. Il intervient indifféremment en front ou en back. Polyvalent, Il doit être aussi créatif que rigoureux et maîtriser la programmation et les langages informatiques comme Javascript, PHP, CSS, HTML, etc. Le développeur full-stack alterne mise en pages complexes et lignes de code.</p> <h3>Les compétences du développeur full-stack</h3> <p>Les compétences du développeur full-stack regroupent celles du développeur Front et du développeur back. HTML/CSS et javascript d'un coté, Php, MySQL et bases de données de l'autre.</p> <p> </p> <h2>Quelles études pour devenir développeur ?</h2> <p>De nombreuses formations permettent de se préparer aux métiers de développeur web. Si les formations traditionnelles, écoles d'ingénieur, masters, DUT ou BTS préparent idéalement les futurs développeurs informatiques, depuis quelques années, les formations dites courtes ou accélérées ont un franc succès, en particulier pour les reconversions. Il existe en outre un grand nombre de développeurs web autodidactes  ; le métier de développeur web est un métier de passion.</p> <h2>Quelles sont les qualités requises pour devenir développeur web ?</h2> <p>Le métier de développeur informatique ou de développeur web est en constante évolution. Le développeur web doit être passionné par les nouvelles technologies, aimer apprendre continuellement, apprécier la logique, avoir un sens du design, savoir communiquer et travailler en équipe.</p> </div> </div> </div> </div> </div> <div class="vc-block block-bg-color mb-14" > <div class="!w-full max-w-[750px] lg:max-w-[914px] px-4 w-full md:w-[65%] xl:w-[54%] 2xl:w-[45%] mx-auto"> <div class="py-8 px-4 md:py-20 md:px-24 rounded-cards lg:max-w-[800px] mx-auto" style="background-color:#143659; color: #fff;" > <h2 class="text-center font-prompt text-2xl md:text-4xl font-extrabold mb-8 text-primary" style="color: #fff;"> Nos offres d'emploi </h2> <div class="prose prose-lg max-w-none js-wysiwyg-cleaner prose-white mb-8" style="background-color:#143659; text-align: left" > <p>Nous proposons plusieurs postes de développeur web ouverts à tous les développeurs informatiques et à ceux qui souhaitent écrire des lignes de codes une bonne partie de la journée.</p> </div> <div class="flex flex-col items-center justify-center"> <a href="https://www.novius.com/recrutement" class=" button-link inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent px-6 py-[1.075rem] text-base leading-6"> Voir nos offres d'emploi </a> </div> </div> </div> </div> <div class="vc-block block-separator !mb-0" > <div class="container"> <div class="bg-white py-[2.375rem] md:py-[3.25rem]"></div> </div> </div> </main> <div class="fixed bg-accent rounded-md right-5 w-[42px] h-[42px] border border-transparent hover:bg-white hover:border-accent text-white hover:text-accent transition-all duration-300 ease-in-out" :class="{ 'bottom-5': show, 'bottom-[-100px]': !show }" x-ref="backToTop" x-data="handleBackButton()" > <button type="button" class="flex items-center justify-center w-[42px] h-[42px] cursor-pointer" aria-label="Retour en haut de la page" x-on:click.prevent="scrollToTop()" > <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" width="24" height="24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 15.75l7.5-7.5 7.5 7.5" /> </svg> </button> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('handleBackButton', () => ({ show: false, isScrolling: false, init() { window.addEventListener('scroll', () => { if (!this.isScrolling) { window.requestAnimationFrame(() => { this.show = window.scrollY > 400; this.isScrolling = false; }); this.isScrolling = true; } }); }, scrollToTop() { window.scrollTo({top: 0, behavior: 'smooth'}); } })); }) </script> <footer id="main-footer" role="contentinfo"> <div class="container px-0"> <img src="https://www.novius.com/build/assets/footer-city-Be-HLhA-.svg" alt="" class="w-full"> </div> <div class="bg-primary py-8 lg:py-12"> <div class="container px-4 md:px-0"> <div class="footer-contact-informations lg:flex pb-12 border-b border-b-secondary">  <div class="w-full md:w-[30%] lg:w-[35%] mb-[30px] md:mb-0"> <p class="flex items-baseline justify-center md:justify-start text-3xl lg:text-5xl font-semibold text-white font-prompt before:content-[''] before:bottom-0 before:max-w-[50px] before:w-[10%] before:h-[2px] before:bg-white before:block before:mr-[10px]"> Contacts </p> <div class="mt-4"> <div class="flex items-center gap-4 hidden lg:flex"> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 fb" href="https://www.facebook.com/noviusfr/" rel="nofollow" target="_blank"> <svg width="24" class="svg-icon" aria-hidden="true" viewBox="0 0 20 20"> <path fill="currentColor" d="M11.344,5.71c0-0.73,0.074-1.122,1.199-1.122h1.502V1.871h-2.404c-2.886,0-3.903,1.36-3.903,3.646v1.765h-1.8V10h1.8v8.128h3.601V10h2.403l0.32-2.718h-2.724L11.344,5.71z"></path> </svg> <span class="sr-only">Facebook de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 twitter" href="https://twitter.com/NoviusInfo" rel="nofollow" target="_blank"> <svg width="24" class="svg-icon" aria-hidden="true" viewBox="0 0 20 20"> <path fill="currentColor" d="M18.258,3.266c-0.693,0.405-1.46,0.698-2.277,0.857c-0.653-0.686-1.586-1.115-2.618-1.115c-1.98,0-3.586,1.581-3.586,3.53c0,0.276,0.031,0.545,0.092,0.805C6.888,7.195,4.245,5.79,2.476,3.654C2.167,4.176,1.99,4.781,1.99,5.429c0,1.224,0.633,2.305,1.596,2.938C2.999,8.349,2.445,8.19,1.961,7.925C1.96,7.94,1.96,7.954,1.96,7.97c0,1.71,1.237,3.138,2.877,3.462c-0.301,0.08-0.617,0.123-0.945,0.123c-0.23,0-0.456-0.021-0.674-0.062c0.456,1.402,1.781,2.422,3.35,2.451c-1.228,0.947-2.773,1.512-4.454,1.512c-0.291,0-0.575-0.016-0.855-0.049c1.588,1,3.473,1.586,5.498,1.586c6.598,0,10.205-5.379,10.205-10.045c0-0.153-0.003-0.305-0.01-0.456c0.7-0.499,1.308-1.12,1.789-1.827c-0.644,0.28-1.334,0.469-2.06,0.555C17.422,4.782,17.99,4.091,18.258,3.266"></path> </svg> <span class="sr-only">Twitter de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 linkedin" href="https://www.linkedin.com/company/novius_3/" rel="nofollow" target="_blank"> <svg width="24" class="svg-icon" aria-hidden="true" viewBox="0 0 32 32"> <path fill="currentColor" d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z"></path> <path fill="currentColor" d="M2 12h6v18h-6v-18z"></path> <path fill="currentColor" d="M8 7c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z"></path> </svg> <span class="sr-only">LinkedIn de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 instagram" href="https://www.instagram.com/agencenovius/" rel="nofollow" target="_blank"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="svg-icon" aria-hidden="true" viewBox="0 0 512 512"> <path fill="currentColor" d="M256 46.1c68.4 0 76.5 0.3 103.4 1.5 25 1.1 38.5 5.3 47.5 8.8 11.9 4.6 20.5 10.2 29.4 19.1 9 9 14.5 17.5 19.2 29.4 3.5 9 7.7 22.6 8.8 47.5 1.2 27 1.5 35.1 1.5 103.4s-0.3 76.5-1.5 103.4c-1.1 25-5.3 38.5-8.8 47.5-4.6 11.9-10.2 20.5-19.1 29.4-9 9-17.5 14.5-29.4 19.2-9 3.5-22.6 7.7-47.5 8.8-27 1.2-35.1 1.5-103.4 1.5s-76.5-0.3-103.4-1.5c-25-1.1-38.5-5.3-47.5-8.8-11.9-4.6-20.5-10.2-29.4-19.1-9-9-14.5-17.5-19.2-29.4-3.5-9-7.7-22.6-8.8-47.5-1.2-27-1.5-35.1-1.5-103.4s0.3-76.5 1.5-103.4c1.1-25 5.3-38.5 8.8-47.5 4.6-11.9 10.2-20.5 19.1-29.4 9-9 17.5-14.5 29.4-19.2 9-3.5 22.6-7.7 47.5-8.8 26.9-1.2 35-1.5 103.4-1.5zM256 0c-69.5 0-78.2 0.3-105.5 1.5-27.2 1.2-45.9 5.6-62.1 11.9-16.9 6.6-31.2 15.3-45.4 29.6-14.3 14.2-23 28.5-29.6 45.3-6.3 16.3-10.7 34.9-11.9 62.1-1.2 27.4-1.5 36.1-1.5 105.6s0.3 78.2 1.5 105.5c1.2 27.2 5.6 45.9 11.9 62.1 6.6 16.9 15.3 31.2 29.6 45.4 14.2 14.2 28.5 23 45.3 29.5 16.3 6.3 34.9 10.7 62.1 11.9 27.3 1.2 36 1.5 105.5 1.5s78.2-0.3 105.5-1.5c27.2-1.2 45.9-5.6 62.1-11.9 16.8-6.5 31.1-15.3 45.3-29.5s23-28.5 29.5-45.3c6.3-16.3 10.7-34.9 11.9-62.1 1.2-27.3 1.5-36 1.5-105.5s-0.3-78.2-1.5-105.5c-1.2-27.2-5.6-45.9-11.9-62.1-6.3-17-15-31.3-29.3-45.5-14.2-14.2-28.5-23-45.3-29.5-16.3-6.3-34.9-10.7-62.1-11.9-27.4-1.3-36.1-1.6-105.6-1.6v0z"></path> <path fill="currentColor" d="M256 124.5c-72.6 0-131.5 58.9-131.5 131.5s58.9 131.5 131.5 131.5 131.5-58.9 131.5-131.5c0-72.6-58.9-131.5-131.5-131.5zM256 341.3c-47.1 0-85.3-38.2-85.3-85.3s38.2-85.3 85.3-85.3c47.1 0 85.3 38.2 85.3 85.3s-38.2 85.3-85.3 85.3z"></path> <path fill="currentColor" d="M423.4 119.3c0 16.955-13.745 30.7-30.7 30.7s-30.7-13.745-30.7-30.7c0-16.955 13.745-30.7 30.7-30.7s30.7 13.745 30.7 30.7z"></path> </svg> <span class="sr-only">Instagram de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 youtube" href="https://www.youtube.com/user/noviusTV" rel="nofollow" target="_blank"> <svg width="24" height="24" viewBox="0 0 26 18" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill="currentColor" d="M12.5258 17.7575H12.5008C12.4233 17.7575 4.66957 17.7425 2.71332 17.2112C1.63759 16.9214 0.797502 16.0809 0.508316 15.005C0.156539 13.0204 -0.0133328 11.0079 0.000816017 8.99249C-0.00827256 6.97376 0.166196 4.95838 0.522066 2.97124C0.8192 1.89438 1.6556 1.04993 2.72957 0.742493C4.63207 0.242493 12.1721 0.242493 12.4921 0.242493H12.5183C12.5971 0.242493 20.3708 0.257493 22.3071 0.788743C23.3805 1.08 24.2189 1.91886 24.5096 2.99249C24.8725 4.98442 25.0429 7.00666 25.0183 9.03124C25.0271 11.0475 24.8522 13.0604 24.4958 15.045C24.2029 16.1195 23.3623 16.9583 22.2871 17.2487C20.3871 17.7525 12.8458 17.7575 12.5258 17.7575ZM10.0258 5.24874L10.0196 12.7487L16.5346 8.99874L10.0258 5.24874Z"/> </svg> <span class="sr-only">YouTube de Novius</span> </a> </div> </div> </div>  <div class="w-full lg:w-[70%] xl:w-[65%] block md:flex text-center md:text-left justify-between lg:justify-around text-[15px]"> <div class="footer-contact-infos text-white text-center lg:text-left"> <div class="mb-8"> <a class="hover:text-yellow hover:underline transition-colors duration-200 block mb-[2px] font-semibold" href="/contact/novius-paris">Agence web Paris</a> <p class="font-normal">2 rue de la Roquette<br /> 75011 Paris</p> </div> <a class="hover:text-yellow hover:underline transition-colors duration-200 block font-semibold" href="tel:0177454900" rel="nofollow"> 01 77 45 49 00 </a> <a class="hover:text-yellow hover:underline transition-colors duration-200 block font-semibold" href="mailto:paris@novius.com" rel="nofollow"> paris@novius.com </a> </div> <div class="footer-contact-infos text-white text-center lg:text-left"> <div class="mb-8"> <a class="hover:text-yellow hover:underline transition-colors duration-200 block mb-[2px] font-semibold" href="/contact/novius-lyon">Agence web Lyon</a> <p class="font-normal">55 avenue Galline<br /> 69100 Villeurbanne</p> </div> <a class="hover:text-yellow hover:underline transition-colors duration-200 block font-semibold" href="tel:0427462000" rel="nofollow"> 04 27 46 20 00 </a> <a class="hover:text-yellow hover:underline transition-colors duration-200 block font-semibold" href="mailto:lyon@novius.com" rel="nofollow"> lyon@novius.com </a> </div> <div class="footer-contact-infos text-white text-center lg:text-left"> <div class="mb-8"> <a class="hover:text-yellow hover:underline transition-colors duration-200 block mb-[2px] font-semibold" href="/contact-la-societe-secrete">Agence de communication Annecy</a> <p class="font-normal">5 avenue du Pré Félin<br /> 74940 Annecy</p> </div> <a class="hover:text-yellow hover:underline transition-colors duration-200 block font-semibold" href="tel:0983741160" rel="nofollow"> +33 (0)9 83 74 11 60 </a> <a class="hover:text-yellow hover:underline transition-colors duration-200 block font-semibold" href="mailto:annecy@novius.com" rel="nofollow"> annecy@novius.com </a> </div> </div> <div class="mt-8 flex justify-center lg:hidden"> <div class="flex items-center gap-4 items-center justify-center md:justify-start"> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 fb" href="https://www.facebook.com/noviusfr/" rel="nofollow" target="_blank"> <svg width="24" class="svg-icon" aria-hidden="true" viewBox="0 0 20 20"> <path fill="currentColor" d="M11.344,5.71c0-0.73,0.074-1.122,1.199-1.122h1.502V1.871h-2.404c-2.886,0-3.903,1.36-3.903,3.646v1.765h-1.8V10h1.8v8.128h3.601V10h2.403l0.32-2.718h-2.724L11.344,5.71z"></path> </svg> <span class="sr-only">Facebook de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 twitter" href="https://twitter.com/NoviusInfo" rel="nofollow" target="_blank"> <svg width="24" class="svg-icon" aria-hidden="true" viewBox="0 0 20 20"> <path fill="currentColor" d="M18.258,3.266c-0.693,0.405-1.46,0.698-2.277,0.857c-0.653-0.686-1.586-1.115-2.618-1.115c-1.98,0-3.586,1.581-3.586,3.53c0,0.276,0.031,0.545,0.092,0.805C6.888,7.195,4.245,5.79,2.476,3.654C2.167,4.176,1.99,4.781,1.99,5.429c0,1.224,0.633,2.305,1.596,2.938C2.999,8.349,2.445,8.19,1.961,7.925C1.96,7.94,1.96,7.954,1.96,7.97c0,1.71,1.237,3.138,2.877,3.462c-0.301,0.08-0.617,0.123-0.945,0.123c-0.23,0-0.456-0.021-0.674-0.062c0.456,1.402,1.781,2.422,3.35,2.451c-1.228,0.947-2.773,1.512-4.454,1.512c-0.291,0-0.575-0.016-0.855-0.049c1.588,1,3.473,1.586,5.498,1.586c6.598,0,10.205-5.379,10.205-10.045c0-0.153-0.003-0.305-0.01-0.456c0.7-0.499,1.308-1.12,1.789-1.827c-0.644,0.28-1.334,0.469-2.06,0.555C17.422,4.782,17.99,4.091,18.258,3.266"></path> </svg> <span class="sr-only">Twitter de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 linkedin" href="https://www.linkedin.com/company/novius_3/" rel="nofollow" target="_blank"> <svg width="24" class="svg-icon" aria-hidden="true" viewBox="0 0 32 32"> <path fill="currentColor" d="M12 12h5.535v2.837h0.079c0.77-1.381 2.655-2.837 5.464-2.837 5.842 0 6.922 3.637 6.922 8.367v9.633h-5.769v-8.54c0-2.037-0.042-4.657-3.001-4.657-3.005 0-3.463 2.218-3.463 4.509v8.688h-5.767v-18z"></path> <path fill="currentColor" d="M2 12h6v18h-6v-18z"></path> <path fill="currentColor" d="M8 7c0 1.657-1.343 3-3 3s-3-1.343-3-3c0-1.657 1.343-3 3-3s3 1.343 3 3z"></path> </svg> <span class="sr-only">LinkedIn de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 instagram" href="https://www.instagram.com/agencenovius/" rel="nofollow" target="_blank"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="svg-icon" aria-hidden="true" viewBox="0 0 512 512"> <path fill="currentColor" d="M256 46.1c68.4 0 76.5 0.3 103.4 1.5 25 1.1 38.5 5.3 47.5 8.8 11.9 4.6 20.5 10.2 29.4 19.1 9 9 14.5 17.5 19.2 29.4 3.5 9 7.7 22.6 8.8 47.5 1.2 27 1.5 35.1 1.5 103.4s-0.3 76.5-1.5 103.4c-1.1 25-5.3 38.5-8.8 47.5-4.6 11.9-10.2 20.5-19.1 29.4-9 9-17.5 14.5-29.4 19.2-9 3.5-22.6 7.7-47.5 8.8-27 1.2-35.1 1.5-103.4 1.5s-76.5-0.3-103.4-1.5c-25-1.1-38.5-5.3-47.5-8.8-11.9-4.6-20.5-10.2-29.4-19.1-9-9-14.5-17.5-19.2-29.4-3.5-9-7.7-22.6-8.8-47.5-1.2-27-1.5-35.1-1.5-103.4s0.3-76.5 1.5-103.4c1.1-25 5.3-38.5 8.8-47.5 4.6-11.9 10.2-20.5 19.1-29.4 9-9 17.5-14.5 29.4-19.2 9-3.5 22.6-7.7 47.5-8.8 26.9-1.2 35-1.5 103.4-1.5zM256 0c-69.5 0-78.2 0.3-105.5 1.5-27.2 1.2-45.9 5.6-62.1 11.9-16.9 6.6-31.2 15.3-45.4 29.6-14.3 14.2-23 28.5-29.6 45.3-6.3 16.3-10.7 34.9-11.9 62.1-1.2 27.4-1.5 36.1-1.5 105.6s0.3 78.2 1.5 105.5c1.2 27.2 5.6 45.9 11.9 62.1 6.6 16.9 15.3 31.2 29.6 45.4 14.2 14.2 28.5 23 45.3 29.5 16.3 6.3 34.9 10.7 62.1 11.9 27.3 1.2 36 1.5 105.5 1.5s78.2-0.3 105.5-1.5c27.2-1.2 45.9-5.6 62.1-11.9 16.8-6.5 31.1-15.3 45.3-29.5s23-28.5 29.5-45.3c6.3-16.3 10.7-34.9 11.9-62.1 1.2-27.3 1.5-36 1.5-105.5s-0.3-78.2-1.5-105.5c-1.2-27.2-5.6-45.9-11.9-62.1-6.3-17-15-31.3-29.3-45.5-14.2-14.2-28.5-23-45.3-29.5-16.3-6.3-34.9-10.7-62.1-11.9-27.4-1.3-36.1-1.6-105.6-1.6v0z"></path> <path fill="currentColor" d="M256 124.5c-72.6 0-131.5 58.9-131.5 131.5s58.9 131.5 131.5 131.5 131.5-58.9 131.5-131.5c0-72.6-58.9-131.5-131.5-131.5zM256 341.3c-47.1 0-85.3-38.2-85.3-85.3s38.2-85.3 85.3-85.3c47.1 0 85.3 38.2 85.3 85.3s-38.2 85.3-85.3 85.3z"></path> <path fill="currentColor" d="M423.4 119.3c0 16.955-13.745 30.7-30.7 30.7s-30.7-13.745-30.7-30.7c0-16.955 13.745-30.7 30.7-30.7s30.7 13.745 30.7 30.7z"></path> </svg> <span class="sr-only">Instagram de Novius</span> </a> <a class="text-white hover:text-yellow focus:text-yellow hover:underline transition-colors duration-200 youtube" href="https://www.youtube.com/user/noviusTV" rel="nofollow" target="_blank"> <svg width="24" height="24" viewBox="0 0 26 18" aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill="currentColor" d="M12.5258 17.7575H12.5008C12.4233 17.7575 4.66957 17.7425 2.71332 17.2112C1.63759 16.9214 0.797502 16.0809 0.508316 15.005C0.156539 13.0204 -0.0133328 11.0079 0.000816017 8.99249C-0.00827256 6.97376 0.166196 4.95838 0.522066 2.97124C0.8192 1.89438 1.6556 1.04993 2.72957 0.742493C4.63207 0.242493 12.1721 0.242493 12.4921 0.242493H12.5183C12.5971 0.242493 20.3708 0.257493 22.3071 0.788743C23.3805 1.08 24.2189 1.91886 24.5096 2.99249C24.8725 4.98442 25.0429 7.00666 25.0183 9.03124C25.0271 11.0475 24.8522 13.0604 24.4958 15.045C24.2029 16.1195 23.3623 16.9583 22.2871 17.2487C20.3871 17.7525 12.8458 17.7575 12.5258 17.7575ZM10.0258 5.24874L10.0196 12.7487L16.5346 8.99874L10.0258 5.24874Z"/> </svg> <span class="sr-only">YouTube de Novius</span> </a> </div> </div> </div> <div class="footer-contact-form block lg:flex gap-14 lg:justify-between"> <div id="contact" aria-hidden="true"></div> <div class="w-full md:mx-auto lg:mx-0 md:w-[70%] lg:w-[45%]"> <div class="bg-primary flex flex-col justify-start sm:justify-center w-full rounded-cards max-w-[800px] py-12 lg:pb-0 justify-center max-w-none" > <form method="POST" x-data="handleForm" data-action="https://www.novius.com/contact-form" x-ref="mainForm" @submit.prevent="submitForm" class="w-full, relative" > <input type="hidden" name="_token" value="4WjFhcXp3n68pOydRnCI4Tb91CehO0KfG5i18hNc" autocomplete="off"> <div id="my_name_w7iX4rUrk0xgFWx5_wrap" style="display: none" aria-hidden="true"> <input id="my_name_w7iX4rUrk0xgFWx5" name="my_name_w7iX4rUrk0xgFWx5" type="text" value="" autocomplete="nope" tabindex="-1"> <input name="valid_from" type="text" value="eyJpdiI6IjVqbnA4RjFJS1dkYU1wR0Y0K1BDSFE9PSIsInZhbHVlIjoic0FaNlRvOGE2aUdoN3BLT3M2QU9XZz09IiwibWFjIjoiZWYwMDUzZDIzMzJiZjM3YjZiZTRiMGI4NDkxNWRmOTc2ZDNiNzU3M2JhYmEwOGRkNDY1NzliZGY5OWM1YjJhOCIsInRhZyI6IiJ9" autocomplete="off" tabindex="-1"> </div>  <div x-show="isLoading" class="absolute backdrop-blur-sm inset-0 flex items-center justify-center w-full h-full bg-white/60 z-40 sm:rounded-lg" x-cloak> <div role="status" x-show="isLoading"> <svg aria-hidden="true" class="w-12 h-12 text-gray-200 animate-spin fill-accent z-50" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"/> <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"/> </svg> <span class="sr-only">Chargement...</span> </div> </div> <div class="my-4 text-white text-sm text"> <p>* ces champs sont obligatoires.</p> </div>  <fieldset class="mb-8"> <legend class="text-white text-sm mb-4 font-semibold">Je vous contacte pour :</legend> <div class="flex flex-wrap gap-x-7 gap-y-1"> <div class="flex items-center gap-x-3"> <input id="footer-form-67d5dffdb33c21" name="subject" type="radio" class="js-subject h-4 w-4 border-white text-yellow ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary focus:text-primary checked:text-primary checked:ring-yellow" value="1" x-ref="subject"> <label for="footer-form-67d5dffdb33c21" class="block text-sm font-medium leading-6 text-white"> Un projet </label> </div> <div class="flex items-center gap-x-3"> <input id="footer-form-67d5dffdb33c22" name="subject" type="radio" class="js-subject h-4 w-4 border-white text-yellow ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary focus:text-primary checked:text-primary checked:ring-yellow" value="2" x-ref="subject"> <label for="footer-form-67d5dffdb33c22" class="block text-sm font-medium leading-6 text-white"> Une candidature </label> </div> <div class="flex items-center gap-x-3"> <input id="footer-form-67d5dffdb33c23" name="subject" type="radio" class="js-subject h-4 w-4 border-white text-yellow ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary focus:text-primary checked:text-primary checked:ring-yellow" value="3" x-ref="subject"> <label for="footer-form-67d5dffdb33c23" class="block text-sm font-medium leading-6 text-white"> Un partenariat </label> </div> <div class="flex items-center gap-x-3"> <input id="footer-form-67d5dffdb33c24" name="subject" type="radio" class="js-subject h-4 w-4 border-white text-yellow ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary focus:text-primary checked:text-primary checked:ring-yellow" value="4" x-ref="subject"> <label for="footer-form-67d5dffdb33c24" class="block text-sm font-medium leading-6 text-white"> Vous dire bonjour </label> </div> </div> <p x-text="formErrors.subject ? formErrors.subject[0] : ''" class="mt-2 text-yellow text-sm"></p> </fieldset>  <div class="grid gap-x-6 gap-y-3 md:grid-cols-6"> <div class="md:col-span-3"> <label for="footer-form-67d5dffdb33c2contact-lastname-input" class=" block text-sm leading-6 hover:cursor-pointer text-white font-semibold" > Nom * </label> <div class="mt-2"> <input type="text" name="lastname" required id="footer-form-67d5dffdb33c2contact-lastname-input" autocomplete="family-name" class="block w-full rounded-md py-2.5 border-0 text-primary sm:text-sm sm:leading-6 ring-1 focus:ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary" maxlength="30" :aria-describedby="formErrors && formErrors.lastname ? 'footer-form-67d5dffdb33c2contact-lastname-input-error' : ''" x-ref="lastname" > </div> <p x-show="formErrors.lastname" id="footer-form-67d5dffdb33c2contact-lastname-input-error" x-text="formErrors.lastname ? formErrors.lastname[0] : ''" class="mt-2 text-yellow text-sm"></p> </div> <div class="md:col-span-3"> <label for="footer-form-67d5dffdb33c2contact-firstname-input" class=" block text-sm leading-6 hover:cursor-pointer text-white font-semibold" > Prénom * </label> <div class="mt-2"> <input type="text" name="firstname" required id="footer-form-67d5dffdb33c2contact-firstname-input" autocomplete="given-name" class="block w-full rounded-md py-2.5 border-0 text-primary sm:text-sm sm:leading-6 ring-1 focus:ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary" maxlength="30" :aria-describedby="formErrors && formErrors.firstname ? 'footer-form-67d5dffdb33c2contact-firstname-input-error' : ''" x-ref="firstname" > </div> <p x-show="formErrors.firstname" id="footer-form-67d5dffdb33c2contact-firstname-input-error" x-text="formErrors.firstname ? formErrors.firstname[0] : ''" class="mt-2 text-yellow text-sm"></p> </div> <div class="md:col-span-6"> <label for="footer-form-67d5dffdb33c2contact-form-company-input" class=" block text-sm leading-6 hover:cursor-pointer text-white font-semibold" > Société </label> <div class="mt-2"> <input type="text" name="company" id="footer-form-67d5dffdb33c2contact-form-company-input" autocomplete="organization" class="block w-full rounded-md py-2.5 border-0 text-primary sm:text-sm sm:leading-6 ring-1 focus:ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary" maxlength="50" :aria-describedby="formErrors && formErrors.company ? 'footer-form-67d5dffdb33c2contact-company-input-error' : ''" x-ref="company" > </div> <p x-show="formErrors.company" id="footer-form-67d5dffdb33c2contact-company-input-error" x-text="formErrors.company ? formErrors.company[0] : ''" class="mt-2 text-yellow text-sm"></p> </div> <div class="md:col-span-3"> <label for="footer-form-67d5dffdb33c2contact-form-phone-input" class=" block text-sm leading-6 hover:cursor-pointer text-white font-semibold" > Téléphone </label> <div class="mt-2"> <input type="tel" name="phone" id="footer-form-67d5dffdb33c2contact-form-phone-input" autocomplete="tel" class="block w-full rounded-md py-2.5 border-0 text-primary sm:text-sm sm:leading-6 ring-1 focus:ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary" maxlength="20" :aria-describedby="formErrors && formErrors.phone ? 'footer-form-67d5dffdb33c2contact-form-phone-input-error' : ''" x-ref="phone" > </div> <p x-show="formErrors.phone" id="footer-form-67d5dffdb33c2contact-form-phone-input-error" x-text="formErrors.phone ? formErrors.phone[0] : ''" class="mt-2 text-yellow text-sm"></p> </div> <div class="md:col-span-3"> <label for="footer-form-67d5dffdb33c2contact-form-email-input" class=" block text-sm leading-6 hover:cursor-pointer text-white font-semibold" > E-mail * </label> <div class="mt-2"> <input type="email" name="email" required id="footer-form-67d5dffdb33c2contact-form-email-input" autocomplete="email" class="block w-full rounded-md py-2.5 border-0 text-primary sm:text-sm sm:leading-6 ring-1 focus:ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary" maxlength="50" :aria-describedby="formErrors && formErrors.email ? 'footer-form-67d5dffdb33c2contact-form-email-input-error' : ''" x-ref="email" > </div> <template x-if="formErrors.email"> <template x-for="error in formErrors.email"> <p id="footer-form-67d5dffdb33c2contact-form-email-input-error" x-show="error" x-cloak x-text="error" class="mt-2 text-yellow text-sm"></p> </template> </template> </div> <div class="md:col-span-6"> <label for="footer-form-67d5dffdb33c2contact-form-message-input" class=" block text-sm leading-6 hover:cursor-pointer text-white font-semibold" > Mon message * <br aria-hidden="true"> <span class="font-normal text-sm text-white"> (minimum 10 caractères, maximum 1000 caractères) </span> </label> <div class="mt-2"> <textarea id="footer-form-67d5dffdb33c2contact-form-message-input" name="message" rows="3" required class="block w-full rounded-md py-2.5 border-0 text-primary sm:text-sm sm:leading-6 ring-1 focus:ring-2 focus:ring-offset-2 ring-transparent focus:ring-yellow focus:ring-offset-primary" minlength="10" maxlength="1000" :aria-describedby="formErrors && formErrors.message ? 'footer-form-67d5dffdb33c2contact-form-message-input-error' : ''" x-ref="message" ></textarea> </div> <template x-if="formErrors.message"> <template x-for="error in formErrors.message"> <p id="footer-form-67d5dffdb33c2contact-form-message-input-error" x-show="error" x-cloak x-text="error" class="mt-2 text-yellow text-sm"></p> </template> </template> </div> <div class="md:col-span-6"> <p class="block text-sm font-semibold leading-6 text-white hover:cursor-pointer"> Fichier joint <br><span class="text-sm text-white font-normal">(pdf, png, jpg, gif - maximum 6mo)</span> </p> <div class="mt-2"> <div class="relative w-full bg-white rounded-md"> <input type="file" name="attachment" id="footer-form-67d5dffdb33c2file" tabindex="-1" class="sr-only" :aria-describedby="formErrors && formErrors.attachment ? 'footer-form-67d5dffdb33c2file-error' : ''"> <label tabindex="0" class="js-form-file-focus block text-sm rounded-md hover:cursor-pointer py-[14px] px-3 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-yellow" for="footer-form-67d5dffdb33c2file" x-ref="attachment" onkeypress="if (event.keyCode === 13 || event.keyCode === 32) document.querySelector('.js-form-file-focus').click();" > Télécharger un fichier <span class="absolute block top-[11px] right-3 border-b border-b-accent" aria-hidden="true"> <span class="flex items-center text-accent text-sm"> <svg aria-hidden="true" focusable="false" class="mr-1" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"> <path fill="currentColor" d="M234.667 209.707l-76.587 76.374-30.080-30.080 128-128 128 128-30.080 30.080-76.587-76.374v259.627h-42.666v-259.627zM405.334 85.334v-42.666h-298.666v42.666h298.666z"></path> </svg> </span> </span> </label> </div> </div> <template x-if="formErrors.attachment"> <template x-for="error in formErrors.attachment"> <p id="footer-form-67d5dffdb33c2file-error" x-show="error" x-cloak x-text="error" class="mt-2 text-yellow text-sm"></p> </template> </template> </div> <div class="md:col-span-6"> <div class="flex gap-x-3"> <div class="flex h-6 items-center"> <input id="footer-form-67d5dffdb33c2newsletter-checkbox" name="newsletter" type="checkbox" value="1" x-ref="newsletter" aria-labelledby="footer-form-67d5dffdb33c2newsletter-checkbox" class="h-4 w-4 rounded ring-offset-2 border-gray-300 text-yellow focus:ring-yellow focus:ring-offset-primary" > </div> <div class="text-sm leading-6"> <label for="footer-form-67d5dffdb33c2newsletter-checkbox" class="font-medium hover:cursor-pointer text-white" > J'accepte de recevoir la newsletter de Novius chaque mois </label> </div> </div> </div> <div class="md:col-span-6"> <div class="flex gap-x-3"> <div class="flex h-6 items-center"> <input id="footer-form-67d5dffdb33c2consent-checkbox" name="consent" type="checkbox" value="1" x-ref="consent" aria-labelledby="footer-form-67d5dffdb33c2consent-checkbox" required class="h-4 w-4 rounded ring-offset-2 border-gray-300 text-yellow focus:ring-yellow focus:ring-offset-primary" :aria-describedby="formErrors && formErrors.consent ? 'footer-form-67d5dffdb33c2consent-checkbox-error' : ''"> </div> <div class="text-sm leading-6"> <label for="footer-form-67d5dffdb33c2consent-checkbox" class="font-medium hover:cursor-pointer text-white" > En soumettant ce formulaire, j'accepte que les informations saisies soient exploitées dans le cadre de ma demande initiale * </label> </div> </div> <p x-show="formErrors.consent" id="footer-form-67d5dffdb33c2consent-checkbox-error" x-text="formErrors.consent ? formErrors.consent[0] : ''" class="mt-2 text-yellow text-sm"></p> </div> </div> <div class="mt-4"> <button type="submit" class="button inline-block overflow-hidden bg-accent text-white rounded-button font-semibold border border-accent cursor-pointer relative text-center transition-colors duration-300 hover:text-accent hover:border-accent z-[1] before:content-[''] before:absolute before:bottom-0 before:-left-px before:w-full before:h-full before:bg-white before:rounded-button before:-translate-x-full before:-z-[2] before:transition-all before:duration-300 hover:before:translate-x-px hover:before:transition-all hover:before:duration-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent px-6 py-[1.075rem] text-base leading-6 " x-ref="submitBtn" > Envoyer </button> </div> </form> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('handleForm', () => ({ hasErrors: false, formErrors: [], isLoading: false, submitForm() { const formUrl = this.$refs.mainForm.dataset.action; const formData = new FormData(this.$refs.mainForm); this.isLoading = true; fetch(formUrl, { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest', 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'), }, body: formData, }) .then((response) => response.json()) .then((data) => { if (!data.success && data.errors) { this.formErrors = data.errors; this.isLoading = false; // Uncheck the rgpd consent checkbox if (this.$refs.consent) { this.$refs.consent.checked = false; } throw new Error('Oups, quelque chose s\'est mal passé !'); } if (data.responseSaved && data.htmlSuccess) { this.isLoading = false; this.$refs.mainForm.innerHTML = data.htmlSuccess; } }) .catch((error) => { this.hasErrors = true; this.isLoading = false; // Focus the first input with error const firstErrorKey = Object.keys(this.formErrors)[0]; if (this.$refs[firstErrorKey]) { this.$refs[firstErrorKey].focus(); } }); } })); }) </script> </div> <div class="w-full md:mx-auto lg:mx-0 md:w-[70%] lg:w-[55%]"> <div class="lg:py-[60px] lg:pb-0 flex flex-col gap-3 md:gap-4"> <div x-data="collapse()"> <button type="button" x-on:click="expanded = ! expanded" class="text-white text-base md:text-lg font-semibold inline-flex items-centrer md:hidden" > <span>Création de site web / Refonte de site</span> <svg class="w-6 h-6 ml-1 transition-transform duration-300" :class="{'rotate-180': expanded}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> </svg> </button> <p class="text-white text-base md:text-lg font-semibold hidden md:inline-block"> <a class="hover:underline hover:text-yellow transition-colors duration-200" href="/service/sites-internet"> Création de site web / Refonte de site </a> </p> <div x-show="expanded" x-collapse x-cloak class="pl-4 md:pl-0 py-1 md:py-0"> <ul class="block md:flex flex-wrap"> <li> <a href="https://www.novius.com/service/sites-internet#surmesure" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Dispositifs web sur-mesure </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/sites-internet#surmesure" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Développement E-Commerce </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://wordpress.novius.com" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Développement Site Vitrine </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/agence-wordpress" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Agence WordPress </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/sites-internet#webdesign" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Webdesign </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/sites-internet#cahierdescharges" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Cahier des charges </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/hebergement" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Hébergement </a> </li> </ul> </div> </div> <div x-data="collapse()"> <button type="button" x-on:click="expanded = ! expanded" class="text-white text-base md:text-lg font-semibold inline-flex items-centrer md:hidden" > <span>Conseil & Accompagnement</span> <svg class="w-6 h-6 ml-1 transition-transform duration-300" :class="{'rotate-180': expanded}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> </svg> </button> <p class="text-white text-base md:text-lg font-semibold hidden md:inline-block"> Conseil & Accompagnement </p> <div x-show="expanded" x-collapse x-cloak class="pl-4 md:pl-0 py-1 md:py-0"> <ul class="block md:flex flex-wrap"> <li> <a href="https://www.novius.com/service/audits-de-sites" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Audits de sites </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/strategies-digitales" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Stratégies digitales </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/strategies-de-communication" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Stratégies de communication </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/community-management" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Réseaux Sociaux </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/redaction-de-contenus-et-seo" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Rédactions de contenus / SEO </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/audits-de-sites#ergo" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > UX Design </a> </li> </ul> </div> </div> <div x-data="collapse()"> <button type="button" x-on:click="expanded = ! expanded" class="text-white text-base md:text-lg font-semibold inline-flex items-centrer md:hidden" > <span>Amélioration continue</span> <svg class="w-6 h-6 ml-1 transition-transform duration-300" :class="{'rotate-180': expanded}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> </svg> </button> <p class="text-white text-base md:text-lg font-semibold hidden md:inline-block"> Amélioration continue </p> <div x-show="expanded" x-collapse x-cloak class="pl-4 md:pl-0 py-1 md:py-0"> <ul class="block md:flex flex-wrap"> <li> <a href="https://www.novius.com/service/amelioration-continue" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > TMA </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/amelioration-continue#kpi" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Suivi et analyse des résultats </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/audits-de-sites#stats" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Analyse des statistiques </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/service/redaction-de-contenus-et-seo" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Optimisation SEO </a> </li> </ul> </div> </div> <hr class="my-10 border-secondary hidden md:block"> <div class="flex flex-col md:flex-row gap-3 md:gap-4 footer-nav-columns"> <div x-data="collapse()"> <button type="button" x-on:click="expanded = ! expanded" class="text-white text-base md:text-lg font-semibold inline-flex items-centrer md:hidden" > <span>Novius</span> <svg class="w-6 h-6 ml-1 transition-transform duration-300" :class="{'rotate-180': expanded}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> </svg> </button> <p class="text-white text-base md:text-lg font-semibold hidden md:inline-block"> <a class="hover:underline hover:text-yellow transition-colors duration-200" href="/novius-agence-digitale"> Novius </a> </p> <div x-show="expanded" x-collapse x-cloak class="pl-4 md:pl-0 py-1 md:py-0"> <ul class="block md:flex flex-wrap"> <li> <a href="https://www.novius.com/histoire" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Notre Histoire </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/team-novius" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > L'équipe </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/chiffres" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Le web par les chiffres </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/actualites" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Nos actualités </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/recrutement" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Novius recrute </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/contact-la-societe-secrete" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > La Société Secrète </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/mentions-legales" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Mentions légales </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/politique-de-confidentialite" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Confidentialité </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/declaration-accessibilite-site-novius" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Accessibilité : partiellement conforme </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/plan-du-site" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Plan du site </a> </li> </ul> </div> </div> <div x-data="collapse()"> <button type="button" x-on:click="expanded = ! expanded" class="text-white text-base md:text-lg font-semibold inline-flex items-centrer md:hidden" > <span>Nos métiers</span> <svg class="w-6 h-6 ml-1 transition-transform duration-300" :class="{'rotate-180': expanded}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> </svg> </button> <p class="text-white text-base md:text-lg font-semibold hidden md:inline-block"> <a class="hover:underline hover:text-yellow transition-colors duration-200" href="/metiers"> Nos métiers </a> </p> <div x-show="expanded" x-collapse x-cloak class="pl-4 md:pl-0 py-1 md:py-0"> <ul class="block md:flex flex-wrap"> <li> <a href="https://www.novius.com/metiers/developpeur-web#devfs" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Développeur Full Stack </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/developpeur-web#devfront" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Développeur Front End </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/developpeur-web#devback" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Développeur Back End </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/developpeur-web#integrateur" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Intégrateur </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/consultants-chefs-de-projets-web-et-directeur-artistique#CP" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Chef de projet </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/consultants-chefs-de-projets-web-et-directeur-artistique#DA" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Directeur Artistique </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/consultants-chefs-de-projets-web-et-directeur-artistique#SEO" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Consultant SEO </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/consultants-chefs-de-projets-web-et-directeur-artistique#stats" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Consultant Analytics </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/metiers/consultants-chefs-de-projets-web-et-directeur-artistique#UX" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Consultant UX </a> </li> </ul> </div> </div> <div x-data="collapse()"> <button type="button" x-on:click="expanded = ! expanded" class="text-white text-base md:text-lg font-semibold inline-flex items-centrer md:hidden" > <span>Nos technologies</span> <svg class="w-6 h-6 ml-1 transition-transform duration-300" :class="{'rotate-180': expanded}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" > <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" /> </svg> </button> <p class="text-white text-base md:text-lg font-semibold hidden md:inline-block"> <a class="hover:underline hover:text-yellow transition-colors duration-200" href="/techno"> Nos technologies </a> </p> <div x-show="expanded" x-collapse x-cloak class="pl-4 md:pl-0 py-1 md:py-0"> <ul class="block md:flex flex-wrap"> <li> <a href="https://www.novius.com/techno/laravel" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Laravel </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/techno/wordpress" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > WordPress </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/techno/prestashop" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Prestashop </a> <span aria-hidden="true" class="text-white text-sm ml-[2px] mr-[6px] hidden md:inline-block">-</span> </li> <li> <a href="https://www.novius.com/techno/sylius" class="text-white text-sm py-1 hover:underline inline-block hover:text-yellow transition-colors duration-200 " > Sylius </a> </li> </ul> </div> </div> </div> </div> <script> document.addEventListener('alpine:init', () => { Alpine.data('collapse', () => ({ expanded: false, mediaQuery: window.matchMedia('(min-width: 768px)'), init() { this.expanded = this.mediaQuery.matches this.mediaQuery.addEventListener('change', this.onMediaQueryChange.bind(this)) }, onMediaQueryChange() { this.expanded = this.mediaQuery.matches }, })); }); </script> </div> </div> </div> </div> </footer> <script> function cdnNoviusPunctuationBeautifierLoaded() { PunctuationBeautifier.beautify('.js-dynamic-content-wrapper'); } </script> <script async src="https://cdn.novius.net/novius-punctuation-beautifier/punctuation-beautifier-1.0.x.js"></script> </body> </html>

CINXE.COM

Développeur web, les artisans de nos réalisations