<html>
  <head>
    <title>Net'n Dev</title>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.2.1/dist/css/splide.min.css"> <!-- for devs, check this website:  https://splidejs.com/ -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.2.1/dist/css/themes/splide-skyblue.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.14.0/css/mdb.min.css" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="https://code.jquery.com/jquery-3.4.1.slim.js" integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI=" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.2.1/dist/js/splide.min.js"></script>
  </head>
  <body class="secondary-color-bg">
    <div id="main-bg" class="container-fluid">
      <nav class="navbar navbar-expand-lg navbar-dark secondary-color-bg fixed-top" style="box-shadow:none">
        <div class="container">
          <div class="col-12 d-flex justify-content-center">
            <div class="col-12 row d-flex justify-content-between">
              <a class="navbar-brand" href="#">Net'n Dev</a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link" href="services.html">Services</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#A_propos">À propos</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link " href="#" data-toggle="modal" data-target="#ModalContact">Contact</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </nav>
      <div class="container d-flex align-items-center" style="height: 100vh">
        <div class="col-xl-6 col-md-12">
          <p id="title" class="index.html">Net'n Dev</p>
          <p id="sub-title" class="text-white">Un collaborateur à l'écoute de l'évolution du marché, qui sait analyser et proposer des solutions adaptées à votre structure afin de créer une dynamique numérique.</p>
        </div>
      </div>
    </div>
    <div class="container-fluid primary-color-bg" id="A_propos">
      <div class="container">
        <div class="space-1"></div>
        <div class="col-12 d-flex justify-content-center">
          <div class="row mt-5 mb-5 d-flex justify-content-center align-items-center">
            <div class="col-lg-4 col-xs-12">
              <img class="img-fluid desktop-img" src="ressources/images/description_img.jpg" alt="Nos idées">
              <img class="img-fluid mobile-img" src="ressources/images/description_image.jpg" alt="Nos idées">
            </div>
            <div class="col-lg-6 col-xs-12">
              <div>
                <h3 class="text-title">À propos</h3>
                <p class="text-content">Net'n Dev est le produit de deux équipes, le développement et l'infogérance qui travaille en symbiose pour aller toujours plus loin. Cette grande équipe s'investit dans la recherche et l'innovation tout en gardant à l'esprit les relations humaines. Nous sommes prêts à répondre à vos exigences et vos défis !</p>
              </div>
                <div class="space-2"></div>
              <div>
                <h3 class="text-title">Nos objectifs</h3>
                <p class="text-content text-justify">Nous voulons garder une proximité et une confiance avec nos partenaires, qu'ils soient clients, fournisseurs ou acteurs tiers du marché. Pour ce faire, nous exigeons <bold>transparence et réactivité.</bold><br><br>Net'n Dev contribue à l'évolution et à l'accompagnement du monde de demain.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
        <div class="space-1"></div>
    </div>
    <div class="container-fluid secondary-color-bg" id="services">
      <div id="particles-js" style="position:absolute;"></div>
      <div class="container">
        <div class="space-1"></div>
        <div class="col-12">
          <div class="col-12 text-center">
            <h3 class="text-title">Nos services</h3>
            <h1 class="text-subtitle">Services les plus demandés</h1>
            <div class="space-1"></div>
          </div>
          <div class="row d-flex justify-content-center">
            <div class="col-lg-4 col-sm-6 mt-4">
              <div class="card">
                <div class="view overlay">
                  <img class="card-img-top" src="ressources/images/serveur_img.jpg"
                    alt="Card image réseaux et sécurité">
                  <a>
                    <div class="mask rgba-white-slight"></div>
                  </a>
                </div>
                <div class="card-body dark-blue-color white-text rounded-bottom">
                  <a class="activator waves-effect mr-4"><i class="fas fa-share-alt white-text"></i></a>
                  <h4 class="card-title">Réseaux et Sécurité</h4>

                  <p class="card-text white-text mb-4 text-justify">Répartition de charge, intégrité de vos données, redondance de vos réseaux. Faites déléguer l'évolution et la maintenance de vos infrastructures informatique.</p>
                  <a href="#!" class="white-text d-flex justify-content-end">
                    <h5><i class="fas fa-angle-double-right"></i></h5>
                  </a>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-sm-6 mt-4">
              <div class="card">
                <div class="view overlay">
                  <img class="card-img-top" src="ressources/images/site_img.jpg"
                    alt="Card image site">
                  <a>
                    <div class="mask rgba-white-slight"></div>
                  </a>
                </div>
                <div class="card-body dark-blue-color white-text rounded-bottom">
                  <a class="activator waves-effect mr-4"><i class="fas fa-share-alt white-text"></i></a>
                  <h4 class="card-title">Site Web</h4>

                  <p class="card-text white-text mb-4 text-justify">Création sur mesure ou reprise de vos anciennes solutions Web. Suivi personnalisé lors de la réalisation. Pour tous types de sites (vitrine, e-commerce, intranet, ...).</p>
                  <a href="#!" class="white-text d-flex justify-content-end">
                    <h5><i class="fas fa-angle-double-right"></i></h5>
                  </a>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-sm-6 mt-4" id="card3">
                <div class="card">
                  <div class="view overlay">
                    <img class="card-img-top" src="ressources/images/supervision_img.jpg"
                      alt="Card image supervision et métrologie">
                    <a>
                      <div class="mask rgba-white-slight"></div>
                    </a>
                  </div>
                  <div class="card-body dark-blue-color white-text rounded-bottom">
                    <a class="activator waves-effect mr-4"><i class="fas fa-share-alt white-text"></i></a>
                    <h4 class="card-title">Supervision et Métrologie</h4>

                    <p class="card-text white-text mb-4 text-justify">Anticiper, prévenir et être averti de vos besoins futurs. Graphiques, tendances, alertes vous garantiront le fonctionnement de votre SI sur le long terme.</p>
                    <a href="#!" class="white-text d-flex justify-content-end">
                      <h5><i class="fas fa-angle-double-right"></i></h5>
                    </a>
                  </div>
                </div>
            </div>
          </div>
          <div class="space-1"></div>
          <div class="d-flex justify-content-center">
            <a type="button" href="services.html" class="btn blue-color">Tous les services</a>
          </div>
          <div class="space-1"></div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="modal fade" id="ModalContact" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true" style="overflow:hidden;">
        <div class="modal-dialog modal-dialog-centered" role="document" style="overflow:hidden;">
          <div class="modal-content">
            <div class="modal-body elegant-color">
              <section>
                 <h2 class="h1-responsive font-weight-bold text-center my-4 text-white">Nous contacter</h2>
                 <p class="text-center w-responsive mx-auto mb-5 text-white">Vous pouvez nous joindre au <a href="tel:+33681996472">+33 681 996 472</a> ou par mail : <a href="mailto:contact@net-n-dev.fr">contact@net-n-dev.fr</a></p>
             </section>
           </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade bottom" id="modalCookie1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true" data-backdrop="true">
      <div class="modal-dialog modal-frame modal-bottom modal-notify modal-info" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <div class="row d-flex justify-content-center align-items-center">
              <p class="pt-3 pr-2">Nous utilisons des cookies afin d'améliorer votre experience sur notre site :)</p>
              <a type="button" class="btn btn-primary">En savoir plus
                <i class="fas fa-book ml-1"></i>
              </a>
              <a type="button" class="btn btn-outline-primary waves-effect" data-dismiss="modal">Pas de soucis</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer class="page-footer primary-color-bg" style="z-index:99999">
      <div class="container">
        <div class="footer-copyright text-center py-3" style="color: grey">
          <a href="https://net-n-dev.fr/" style="color: grey"> Net'n Dev</a>
        </div>
      </div>
    </footer>
  </body>
  <script src="js/particles.js"></script>
  <script src="js/app.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
</html>
