ldc-jeusselin/integration/whoweare.php

<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="icon" href="./assets/images/favicon.png" type="image/png">
    <link rel="icon" sizes="32x32" href="./assets/images/favicon-32.png" type="image/png">
    <link rel="icon" sizes="64x64" href="./assets/images/favicon-64.png" type="image/png">
    <link rel="icon" sizes="96x96" href="./assets/images/favicon-96.png" type="image/png">
    <link rel="icon" sizes="196x196" href="./assets/images/favicon-196.png" type="image/png">
    <link rel="apple-touch-icon" sizes="152x152" href="./assets/images/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="60x60" href="./assets/images/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="76x76" href="./assets/images/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="./assets/images/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="./assets/images/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="./assets/images/apple-touch-icon-144x144.png">
    <meta name="msapplication-TileImage" content="./assets/images/favicon-144.png">
    <meta name="msapplication-TileColor" content="#FFFFFF">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css">
    <!-- <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> -->
    <link rel="stylesheet" href="./node_modules/swiper/swiper-bundle.css">
    <link rel="stylesheet" href="./node_modules/swiper/swiper-bundle.min.css">
    <link rel='stylesheet' id='style-css'  href='./assets/css/style.css' type='text/css' media='all'/>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <title>Jeusselin</title>
</head>

<body>
    <div class="container">
        <header class="grid bandeau">
            <div class="toggle-menu flex"><span></span></div>
            <div class="logo flex">
                <a href="./index.php"></a>
            </div>
            <nav>
                <ul class="flex">
                    <li><a href="./whoweare.php">Qui sommes nous&nbsp;?</a></li>
                    <li><a href="./work.php">Nos métiers</a></li>
                    <li><a href="./rse.php">RSE</a></li>
                    <li><a href="./actus.php">Actualités</a></li>
                    <li><a href="./contact.php">Nous contacter</a></li>
                </ul>
            </nav>
            <div class="right-menu">
                <div class="connect-contain flex">
                    <p class="login">Bienvenue Charles-Henry</p>
                    <div class="connect login"><a href="#" class="first-btn">&nbsp;</a></div>
                    <div class="disconnect login">
                        <a href="#">
                            <!-- <svg version="1.1" id="svg-disconnect" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                                <g>
                                    <g>
                                        <path d="M257,0C116.39,0,0,114.39,0,255s116.39,257,257,257s255-116.39,255-257S397.61,0,257,0z M383.22,338.79
                                            c11.7,11.7,11.7,30.73,0,42.44c-11.61,11.6-30.64,11.79-42.44,0L257,297.42l-85.79,83.82c-11.7,11.7-30.73,11.7-42.44,0
                                            c-11.7-11.7-11.7-30.73,0-42.44l83.8-83.8l-83.8-83.8c-11.7-11.71-11.7-30.74,0-42.44c11.71-11.7,30.74-11.7,42.44,0L257,212.58
                                            l83.78-83.82c11.68-11.68,30.71-11.72,42.44,0c11.7,11.7,11.7,30.73,0,42.44l-83.8,83.8L383.22,338.79z"/>
                                    </g>
                                </g>
                            </svg> -->
                            <img src="./assets/images/stop.png" alt="Déconnexion">
                        </a>
                    </div>
                </div>
                <form action="./search.php" method="post" class="search flex">
                    <input type="text" name="txt_search" id="txt_search" placeholder="Rechercher" required>
                    <input type="hidden" name="token" value="777799999defrsz">
                    <button type="submit" class="second-btn">OK</button>
                </form>
            </div>
            <div class="right-menu-mobile flex">
                <div class="connect-contain flex">
                    <a href="#" class="mobile-connect picto-item login" aria-label="Espace client">
                        <svg version="1.1" id="svg-connect" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="510px" height="510px" viewBox="0 0 510 510" style="enable-background:new 0 0 510 510;" xml:space="preserve">
                            <g>
                                <g id="account-circle">
                                    <path d="M255,0C114.75,0,0,114.75,0,255s114.75,255,255,255s255-114.75,255-255S395.25,0,255,0z M255,76.5
                                        c43.35,0,76.5,33.15,76.5,76.5s-33.15,76.5-76.5,76.5c-43.35,0-76.5-33.15-76.5-76.5S211.65,76.5,255,76.5z M255,438.6
                                        c-63.75,0-119.85-33.149-153-81.6c0-51,102-79.05,153-79.05S408,306,408,357C374.85,405.45,318.75,438.6,255,438.6z"/>
                                </g>
                            </g>
                        </svg>
                    </a>
                    <a href="#" class="mobile-disconnect login">
                        <img src="./assets/images/stop.png" alt="Déconnexion">
                    </a>
                </div>
                <p class="login">Bienvenue Charles-Henry</p>
                <a href="./search.php" class="mobile-search">
                    <svg version="1.1" id="svg-search" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="590.556px" height="590.556px" viewBox="0 0 590.556 590.556" style="enable-background:new 0 0 590.556 590.556;" xml:space="preserve">
                        <g>
                            <g>
                                <path d="M574.099,469.235L437.61,353.434c-3.248-2.709-7.227-4.171-11.266-4.171c-5.643,0-11.018,2.843-14.373,7.606
                                    c-15.533,22.029-34.578,41.087-56.611,56.635c-4.1,2.895-6.816,7.319-7.449,12.143c-0.635,4.828,0.775,9.602,3.975,13.439
                                    l115.873,136.61c7.852,9.422,19.252,14.859,31.23,14.859c10.768,0,21.021-4.324,28.877-12.179l48.98-48.981
                                    c8.346-8.348,12.656-19.241,12.137-30.68C588.46,487.269,583.175,476.8,574.099,469.235z"/>
                                <path d="M218.399,433.743c57.923,0,112.385-22.559,153.348-63.522c40.965-40.965,63.523-95.423,63.523-153.349
                                    C435.271,97.29,337.983,0,218.399,0C98.814,0,1.53,97.29,1.53,216.872S98.817,433.743,218.399,433.743z M71.81,216.872
                                    c0-80.83,65.759-146.589,146.589-146.589c80.831,0,146.588,65.759,146.588,146.589c0,39.091-15.262,75.885-42.982,103.602
                                    c-27.721,27.718-64.515,42.984-103.606,42.984C137.569,363.461,71.81,297.701,71.81,216.872z"/>
                            </g>
                        </g>
                    </svg>
                </a>
            </div>
        </header>
    </div>

    <div class="main-container who">
        <div class="bg-opacity"></div>
        <div class="header-bloc"></div>
        
        <section class="chrono flex container">
            <div class="txt-chrono flex">
                <h1 class="post-title">Jeusselin, c'est toute une histoire&nbsp;!</h1>
                <h2 class="post-subtitle">Qui sommes nous&nbsp;?</h2>
            </div>
            <div class="frise flex">
                <div class="fils"></div>
                <div class="event-container">
                    <span class="txt-event">1950</span>
                    <div class="event">
                        <img src="./assets/images/1950.png" alt="1950">
                        <img src="./assets/images/more.png" alt="" class="img-more">
                    </div>
                </div>
                <div class="fils"></div>
                <div class="event-container">
                    <span class="txt-event">1968</span>
                    <div class="event">
                        <img src="./assets/images/1968.png" alt="1968">
                        <img src="./assets/images/more.png" alt="" class="img-more">
                    </div>
                </div>
                <div class="fils"></div>
                <div class="event-container">
                    <span class="txt-event">1978 à 1982</span>
                    <div class="event">
                        <img src="./assets/images/more.png" alt="" class="img-more">
                        <img src="./assets/images/1978-1982.png" alt="1978 à 1982">
                    </div>
                </div>
                <div class="fils"></div>
                <div class="event-container">
                    <span class="txt-event">1987 à 1989</span>
                    <div class="event">
                        <img src="./assets/images/more.png" alt="" class="img-more">
                        <img src="./assets/images/1987-1989.png" alt="1987 à 1989">
                    </div>
                </div>
                <div class="fils"></div>
                <div class="event-container">
                    <span class="txt-event">2001</span>
                    <div class="event">
                        <img src="./assets/images/more.png" alt="" class="img-more">
                        <img src="./assets/images/2001.png" alt="2001">
                    </div>
                </div>
                <div class="fils"></div>
                <div class="event-container">
                    <span class="txt-event">2010</span>
                    <div class="event">
                        <img src="./assets/images/more.png" alt="" class="img-more">
                        <img src="./assets/images/2010.png" alt="2010">
                    </div>
                </div>
                <div class="fils"></div>
                <div class="event-container">
                    <span class="txt-event">2016</span>
                    <div class="event">
                        <img src="./assets/images/more.png" alt="" class="img-more">
                        <img src="./assets/images/2016.png" alt="2016">
                        </div>
                    </div>
                <div class="fils"></div>
                <div class="event-container">
                    <span class="txt-event">2020</span>
                    <div class="event">
                        <img src="./assets/images/more.png" alt="" class="img-more">
                        <img src="./assets/images/2020.png" alt="2020">
                        </div>
                    </div>
                <div class="fils"></div>
                <div class="popup-detail flex">
                    <img src="./assets/images/1960-1970.jpg" alt="">
                    <h2 class="post-chapter">1978 à 1982</h2>
                    <h3 class="paragraph-title">Arrivée de Luc Hubert et Gilles Jeusselin</h3>
                    <p>Morbi ornare malesuada dolor. Aenean non eleifend lacus, egestas posuere nibh. Nunc dui lectus, rutrum vitae condimentum sit amet, iaculis nec purus. Donec quis suscipit lorem, ac rutrum neque. Duis tincidunt tempor rutrum. Aenean quam urna, ultricies non ultrices sit amet, dignissim vel ligula.</p>
                    <svg id="close-cross" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 237 237">
                        <defs>
                            <style>.cls-1{fill:#f9b00e;}.cls-2{fill:#fff;stroke:#fff;stroke-miterlimit:10;stroke-width:20px;}</style>
                        </defs>
                        <circle class="cls-1" cx="118.5" cy="118.5" r="118.5"/>
                        <line class="cls-2" x1="63.61" y1="60.38" x2="173.39" y2="177.15"/>
                        <line class="cls-2" x1="65.08" y1="176.62" x2="171.92" y2="59.85"/>
                    </svg>
                </div>
            </div>
        </section>

        <section class="values container">
            <h2 class="post-subtitle">Nos valeurs</h2>
            <div class="blocs-values grid">
                <div class="bloc flex">
                    <img src="./assets/images/travail.png" alt="Le travail">
                    <h3 class="post-chapter">Le travail</h3>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. e ullam quos dicta laborum nesciunt, dolores reprehenderit modi. Aliquid quam quasi ad quidem? Dolores, error nesciunt?</p>
                </div>
                <div class="bloc flex">
                    <img src="./assets/images/innovation.png" alt="L'innovation">
                    <h3 class="post-chapter">L'innovation</h3>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur nostrum iste voluptatem fugit. Ullam eos dolorem officia et iure veniam enim pariatur quos iusto sint excepturi ex, assumenda cumque saepe.</p>
                </div>
                <div class="bloc flex">
                    <img src="./assets/images/responsability.png" alt="La responsabilité">
                    <h3 class="post-chapter">La responsabilité</h3>
                    <p>Liente excepturi sit porro in distinctio enim nisi placeat. Est provident tenetur optio corrupti praesentium magni minima.</p>
                </div>
                <div class="bloc flex">
                    <img src="./assets/images/respect.png" alt="Le respect">
                    <h3 class="post-chapter">Le respect</h3>
                    <p>Lorem ipsum dolor sit. Accusantium eveniet vel fugit ex nobis, impedit a praesentium vero cum? Eius necessitatibus laboriosam placeat. Sed nisi corrupti exercitationem odit reiciendis ab.</p>
                </div>
                <div class="bloc flex">
                    <img src="./assets/images/performance.png" alt="La performance">
                    <h3 class="post-chapter">La performance</h3>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Magni expedita est quidem rm vel cumque? Consequatur totam vero beatae asperiores vitae repellendus nihil?</p>
                </div>
                <div class="bloc flex">
                    <img src="./assets/images/simplicity.png" alt="La simplicité">
                    <h3 class="post-chapter">La simplicité</h3>
                    <p>Lorem ipsum dolor sit am hic totam! Delectus, culpa rerum.</p>
                </div>
            </div>
        </section>
    </div>
    
    <div class="main-container">
        <footer>
            <div class="logo-footer">
                <a href="#"><img src="./assets/images/logo-jeusselin.png" alt="Jeusselin"></a>
            </div>
            <div class="txt-footer flex">
                <a href="#">Contact</a>
                <a href="#">Mentions légales</a>
                <a href="#">Politique de confidentialité</a>
            </div>
        </footer>
		<div class="pageup"><a href="#"><i class="fas fa-arrow-circle-up"></i></a></div>
    </div>
</body>
<script src="./node_modules/swiper/swiper-bundle.min.js"></script>
<!-- <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> -->
<script type="text/javascript" src="./assets/js/main.js"></script>
</html>