{% extends 'base.html.twig' %}

{% block title %}{{ parent() }}{% endblock %}

{% block body %}

    <div id="accueil" class="anchor-target" data-controller="typewriter">
        <div id="cdh" aria-description="L'acronyme CDH reste affiché en permanence, et les mots associés changent dynamiquement : Céline et Conception, Dubreuil et Développement, Herrada et Hébergement.">
            <h1 class="titre">C<span id="c"></span></h1>
            <h1 class="titre">D<span id="d"></span></h1>
            <h1 class="titre">H<span id="h"></span></h1>
        </div>
        <div id="slogan">
            <h2>Construire ENSEMBLE...</h2>
            <h2>Le site qui VOUS ressemble !</h2>
        </div>
    </div>

    <div class="banner anchor-target" id="pourquoi">
        <h1>Pourquoi ? ... Pourquoi pas !</h1>
    </div>

    <div class="content" id="pp">
        <p>Vous voudriez un site... mais vous ne savez pas par où commencer...</p>
        <p>Vous avez commencé à le faire vous-même... mais vous n'êtes pas satisfait...</p>
        <p>Sur l'ordinateur, ça va... mais sur le téléphone, c'est pas top...</p>
        <p>Il y a forcément une solution</p>
        <p>On peut le faire ENSEMBLE, pour un site qui VOUS ressemble vraiment !!!</p>
        <p>Trouver ENSEMBLE ce qui vous correspond : les couleurs, l'écriture, les animations...</p>
        <p>C'est POSSIBLE !!!</p>
        <p>La preuve</p>

    </div>

    <div class="banner anchor-target" id="rea">
        <h1>On a fait ça ensemble !</h1>
    </div>

    <div class="reals-container">
        <div class="reals">

            <h4>BelpheGorZ : un super groupe de Rock</h4>


            <div class="flip-box">
                <div class="flip-box-inner">
                    <div class="flip-box-front" id="front-belf">
                        <div class="flip-box-banner">
                            <a href="https://www.belphegorz.com" target="_blank" rel="noreferrer noopener">www.belphegorz.com</a>
                        </div>
                    </div>
                    <div class="flip-box-back" id="back-belf">
                        <div class="flip-box-banner">
                            <a href="https://www.belphegorz.com" target="_blank" rel="noreferrer noopener">www.belphegorz.com</a>
                        </div>
                    </div>
                </div>
            </div>

            <h4 class="pink" id="titre-orphos">Orphos : un talentueux photographe vidéaste</h4>

            <div class="flip-box">
                <div class="flip-box-inner">
                    <div class="flip-box-front" id="front-orphos">
                        <div class="flip-box-banner">
                            <a href="https://www.orphos.fr" target="_blank" rel="noreferrer noopener">www.orphos.fr</a>
                        </div>
                    </div>
                    <div class="flip-box-back" id="back-orphos">
                        <div class="flip-box-banner">
                            <a href="https://www.orphos.fr" target="_blank" rel="noreferrer noopener">www.orphos.fr</a>
                        </div>
                    </div>
                </div>
            </div>


            <h4 class="pink margin-top">René Wierschowski : un (p)artisan d'impossible</h4>


            <div class="flip-box">
                <div class="flip-box-inner">
                    <div class="flip-box-front" id="front-abvdl">
                        <div class="flip-box-banner">
                            <a href="https://www.auxbonsventsdelure.fr" target="_blank" rel="noreferrer noopener">www.auxbonsventsdelure.fr</a>
                        </div>
                    </div>
                    <div class="flip-box-back" id="back-abvdl">
                        <div class="flip-box-banner">
                            <a href="https://www.auxbonsventsdelure.fr" target="_blank" rel="noreferrer noopener">www.auxbonsventsdelure.fr</a>
                        </div>
                    </div>
                </div>
            </div>

            <h4 id="titre-sarah" class="margin-top">Un chemin vers soi : une chaleureuse asso de Yoga</h4>

            <div class="flip-box">
                <div class="flip-box-inner">
                    <div class="flip-box-front" id="front-yoga">
                        <div class="flip-box-banner">
                            <a href="https://www.unchemin.celinedubreuilherrada.com" target="_blank" rel="noreferrer noopener">www.unchemin04.fr</a>
                        </div>
                    </div>
                    <div class="flip-box-back" id="back-yoga">
                        <div class="flip-box-banner">
                            <a href="https://www.unchemin.celinedubreuilherrada.com" target="_blank" rel="noreferrer noopener">www.unchemin04.fr</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div id="encours" class="banner">
        <h1>Et bientôt, en exclusivité...</h1>
    </div>

    <div id="reals-container2" class="reals-container">
        <div id="reals2" class="reals">

            <h4 id="titre-vous" class="pink">Le nouveau site à ne pas manquer : le votre !</h4>
            <div class="flip-box">
                <div class="flip-box-inner">
                    <div class="flip-box-front" id="front-vous">
                        <div class="flip-box-banner">
                            <a>Bientôt en ligne</a>
                        </div>
                    </div>
                    <div class="flip-box-back" id="back-vous">
                        <div class="flip-box-banner">
                            <a>Bientôt en ligne</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>


    <div id="parallax-banner" class="banner">
        <h2>Et comme y'a pas que les sites internet dans la vie !</h2>
    </div>

    <div id="reals-container-autres" class="reals-container">
        <div class="reals-autres">
            <h4>Des flyers</h4>

            <div id="flyers" class="flip-box">
                <div class="flip-box-inner">
                    <div class="flip-box-front" id="front-flyer">
                        <div class="flip-box-banner">
                            <a href="https://www.facebook.com/profile.php?id=61556679314476" target="_blank" rel="noreferrer noopener">Jo R.</a>
                        </div>
                    </div>
                    <div class="flip-box-back" id="back-flyer">
                        <div class="flip-box-banner">
                            <a href="https://www.facebook.com/profile.php?id=61556679314476" target="_blank" rel="noreferrer noopener">Jo R.</a>
                        </div>
                    </div>
                </div>
            </div>
            <h4 id="carte_rene_titre" class="pink">Des cartes de visite</h4>
            <div id="carte_rene" class="flip-box">
                <div class="flip-box-inner">
                    <div class="flip-box-front" id="front-carterene">
                        <div class="flip-box-banner">
                            <a href="https://www.auxbonsventsdelure.fr" target="_blank" rel="noreferrer noopener">René Wierschowski</a>
                        </div>
                    </div>
                    <div class="flip-box-back" id="back-carterene">
                        <div class="flip-box-banner">
                            <a href="https://www.auxbonsventsdelure.fr" target="_blank" rel="noreferrer noopener">aux bons vents de Lure</a>
                        </div>
                    </div>
                </div>
            </div>
            <div id="qrcode-container">
                <h4>Des QR Codes</h4>

                <div id="qrcode">
                    <img src="{{ asset('img/qrcode.png') }}" alt="">

                    <ul>
                        <li>votre site</li>
                        <li>votre menu</li>
                        <li>vos réseaux sociaux</li>
                        <li>ce que vous voulez</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>




{% endblock %}