Single News: Gutenberg

<div class="site single single-news">
    <div class="hero hero--single">

        <header class="main-header header--transparent">
            <div class="container">
                <div class="header__brand">
                    <a href="/">
                  <img src="../../images/brand/brand-white.svg" alt="" class="XXL Organisation brand" />
               </a>
                </div>

                <div class="header__nav js-nav-inside">
                    <!--
                * The primary subnav can have two different states:
                *
                * 1) By default, the subnav appear on hover from the trigger link.
                *
                * 2) With the 'js-dropdown--onclick' on the ul.primary-nav,
                *		the subnav appear on click from the trigger link.
                *
               -->

                    <nav class="main-nav">
                        <ul class="nav-primary" data-ui-component="primary-main">
                            <li>
                                <a href="#">Home</a>
                            </li>
                            <li>
                                <a href="https://google.com" class="js-dropdown-link">About</a>

                                <ul class="nav-primary__sub-nav js-dropdown-menu">
                                    <li><a href="#">Products</a></li>
                                    <li><a href="#">Company</a></li>
                                </ul>
                            </li>
                            <li>
                                <a href="#">Contact</a>
                            </li>
                            <li>
                                <a href="#" class="js-dropdown-link">Services</a>

                                <ul class="nav-primary__sub-nav js-dropdown-menu">
                                    <li><a href="#">Web</a></li>
                                    <li><a href="#">Data</a></li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>

                <div class="header__search header__tools">
                    <button class="button button--search js-open-search">
                  <i class="icon icon--search"></i>
                  <span>Rechercher</span>
               </button>
                </div>

                <div class="header__devis header__tools">
                    <a href="#" class="button button--devis">
                  <i class="icon icon--devis"></i>
                  <span>Finaliser mon devis</span>
               </a>

                    <div class="block-cart" id="cartSummary">
                        <ul class="lst__unstyled">
                            <li></li>
                            <li></li>
                            <li></li>

                            <span>et 7 autres produits...</span>
                        </ul>

                        <a href="#" class="button  button--rounded button--black button--full-width">Finaliser mon devis</a>

                    </div>
                </div>

                <div class="header__button">
                    <button class="button button--menu js-toggle-menu">
                  <svg width="15" height="12" xmlns="http://www.w3.org/2000/svg" id="menu-icon">
                     <defs>
                        <linearGradient x1=".615%" y1="50%" y2="50%" id="a">
                           <stop stop-color="#E3CB78" offset="0%"/>
                           <stop stop-color="#BDA450" offset="49.584%"/>
                           <stop stop-color="#A07C2A" offset="100%"/>
                        </linearGradient>
                     </defs>
                     
                     <g fill="url(#a)" fill-rule="evenodd">
                        <rect id="bars-1" width="15" height="2" rx="1"/>
                        <rect id="bars-2" y="5" width="15" height="2" rx="1"/>
                        <rect id="bars-3" y="10" width="15" height="2" rx="1"/>
                     </g>
                  </svg>
                  <span>Menu</span>
               </button>
                </div>
            </div>
        </header>
        <div class="container">
            <div class="hero--single__content">
                <h1>RCF NX15</h1>
                <nav class="breadcrumb">
                    <ol>
                        <li class="item-first">
                            <a href="/" title="Accueil">
                        Accueil
                     </a>
                        </li>

                        <li class="item-last">
                            <span>Current page</span>
                        </li>
                    </ol>
                </nav>
            </div>
        </div>

        <img src="https://source.unsplash.com/random" alt="" />
    </div>

    <div class="container container-m">

        <main id="main">

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae risus nulla. Sed pulvinar diam risus, id feugiat sem blandit non. Vestibulum fringilla lectus in mauris auctor congue. Nam lorem sem, finibus nec elit et, facilisis scelerisque est. Praesent
                sodales elementum tortor, in iaculis tortor viverra in. Maecenas ultricies nisi quis eros dictum luctus. Suspendisse vitae erat nec arcu tristique mollis.
            </p>

            <p>
                Praesent elementum pretium libero sed maximus. Nunc vel lectus a ligula accumsan venenatis id at tortor. Vivamus bibendum, nibh sit amet tristique consequat, mi ex blandit massa, nec commodo enim justo et libero. Ut at dui odio. Etiam lobortis sapien
                sed enim ultricies posuere. Nulla laoreet, velit et blandit tristique, nibh erat consequat arcu, non sollicitudin lacus arcu eget nunc. Proin aliquam suscipit eros, quis ullamcorper velit semper eget. Ut leo dui, consectetur in vulputate
                eget, varius nec nunc.
            </p>

            <figure class="wp-block-image size-large"><img src="http://xxl.local/wp-content/uploads/2019/11/croissant-matzZGQk4o4-unsplash-1280x853.jpg" alt="" class="wp-image-133102" srcset="http://xxl.local/wp-content/uploads/2019/11/croissant-matzZGQk4o4-unsplash-1280x853.jpg 1280w, http://xxl.local/wp-content/uploads/2019/11/croissant-matzZGQk4o4-unsplash-768x512.jpg 768w, http://xxl.local/wp-content/uploads/2019/11/croissant-matzZGQk4o4-unsplash-1536x1024.jpg 1536w, http://xxl.local/wp-content/uploads/2019/11/croissant-matzZGQk4o4-unsplash-240x160.jpg 240w, http://xxl.local/wp-content/uploads/2019/11/croissant-matzZGQk4o4-unsplash-1024x683.jpg 1024w, http://xxl.local/wp-content/uploads/2019/11/croissant-matzZGQk4o4-unsplash-960x640.jpg 960w, http://xxl.local/wp-content/uploads/2019/11/croissant-matzZGQk4o4-unsplash-480x320.jpg 480w, http://xxl.local/wp-content/uploads/2019/11/croissant-matzZGQk4o4-unsplash-350x233.jpg 350w, http://xxl.local/wp-content/uploads/2019/11/croissant-matzZGQk4o4-unsplash-600x400.jpg 600w, http://xxl.local/wp-content/uploads/2019/11/croissant-matzZGQk4o4-unsplash.jpg 1980w"
                    sizes="(max-width: 1280px) 100vw, 1280px">
                <figcaption>Ceci est une légende</figcaption>
            </figure>

            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae risus nulla. Sed pulvinar diam risus, id feugiat sem blandit non. Vestibulum fringilla lectus in mauris auctor congue. Nam lorem sem, finibus nec elit et, facilisis scelerisque
                est. Praesent sodales elementum tortor, in iaculis tortor viverra in. Maecenas ultricies nisi quis eros dictum luctus. Suspendisse vitae erat nec arcu tristique mollis. </p>

            <div class="wp-block-columns">
                <div class="wp-block-column">
                    <p>Colonne 1</p>
                </div>

                <div class="wp-block-column">
                    <p>Colonne 2</p>
                </div>
            </div>

            <div class="wp-block-columns">
                <div class="wp-block-column" style="flex-basis:33.33%">
                    <p>Colonne 1</p>
                </div>

                <div class="wp-block-column" style="flex-basis:66.66%">
                    <p>Colonne 2</p>
                </div>
            </div>

            <div class="wp-block-columns">
                <div class="wp-block-column" style="flex-basis:66.66%">
                    <p>Colonne 1</p>
                </div>

                <div class="wp-block-column" style="flex-basis:33.33%">
                    <p>Colonne 2</p>
                </div>
            </div>

            <div class="wp-block-columns">
                <div class="wp-block-column">
                    <p>Colonne 1</p>
                </div>

                <div class="wp-block-column">
                    <p>Colonne 2</p>
                </div>

                <div class="wp-block-column">
                    <p>Colonne 3</p>
                </div>
            </div>

            <div class="wp-block-columns">
                <div class="wp-block-column" style="flex-basis:25%">
                    <p>Colonne 1</p>
                </div>

                <div class="wp-block-column" style="flex-basis:50%">
                    <p>Colonne 2</p>
                </div>

                <div class="wp-block-column" style="flex-basis:25%">
                    <p>Colonne 3</p>
                </div>
            </div>

            <div class="wp-block-media-text alignwide">
                <figure class="wp-block-media-text__media"><img src="http://xxl.local/wp-content/uploads/2019/11/table1-1.jpg" alt="" class="wp-image-133103" srcset="http://xxl.local/wp-content/uploads/2019/11/table1-1.jpg 1050w, http://xxl.local/wp-content/uploads/2019/11/table1-1-768x513.jpg 768w, http://xxl.local/wp-content/uploads/2019/11/table1-1-240x160.jpg 240w, http://xxl.local/wp-content/uploads/2019/11/table1-1-1024x684.jpg 1024w, http://xxl.local/wp-content/uploads/2019/11/table1-1-960x641.jpg 960w, http://xxl.local/wp-content/uploads/2019/11/table1-1-480x320.jpg 480w, http://xxl.local/wp-content/uploads/2019/11/table1-1-350x234.jpg 350w, http://xxl.local/wp-content/uploads/2019/11/table1-1-600x401.jpg 600w"
                        sizes="(max-width: 1050px) 100vw, 1050px"></figure>
                <div class="wp-block-media-text__content">
                    <p class="has-large-font-size">Bonjour toi</p>

                    <p>Bibendum, nibh sit amet tristique consequat, mi ex blandit massa, nec commodo enim justo et libero.</p>
                </div>
            </div>

            <p> Praesent elementum pretium libero sed maximus. Nunc vel lectus a ligula accumsan venenatis id at tortor. Vivamus bibendum, nibh sit amet tristique consequat, mi ex blandit massa, nec commodo enim justo et libero. Ut at dui odio. Etiam lobortis
                sapien sed enim ultricies posuere. Nulla laoreet, velit et blandit tristique, nibh erat consequat arcu, non sollicitudin lacus arcu eget nunc. Proin aliquam suscipit eros, quis ullamcorper velit semper eget. Ut leo dui, consectetur in
                vulputate eget, varius nec nunc. </p>

            <div class="wp-block-button"><a class="wp-block-button__link">Un jolie bouton je l’espère</a></div>

            <div class="wp-block-button aligncenter"><a class="wp-block-button__link">Un bouton centré</a></div>

            <div class="wp-block-button alignright"><a class="wp-block-button__link">Un bouton à gauche !</a></div>

            <span class="meta-date">Le 21 janvier 2019</span>
        </main>

        <div class="tool-share">
            <p class="h6">Partager</p>

            <ul class="list--unstyled list--inline">
                <li><button class="button--unstyled" data-share-to="https://www.facebook.com/sharer/sharer.php?u=">Facebook</button></li>
                <li><button class="button--unstyled" data-share-to="http://twitter.com/home?status=+">Twitter</button></li>
                <li><button class="button--unstyled" data-share-to="https://www.linkedin.com/shareArticle?mini=true&url=&title=&summary=">LinkedIn</button></li>
            </ul>
        </div>
        <aside class="single__related">
            <h2>À découvrir aussi</h2>
            <article class="card card-news">
                <a href="#" title="RCF NX15">
                     <img src="https://source.unsplash.com/random" alt=""/>
               
                     <div class="card-news__content">
                        <h2>RCF NX15</h2>
                        <span>Lire cette actualité</span>
                     </div>
                  </a>
            </article>
            <article class="card card-news">
                <a href="#" title="RCF NX15">
                     <img src="https://source.unsplash.com/random" alt=""/>
               
                     <div class="card-news__content">
                        <h2>RCF NX15</h2>
                        <span>Lire cette actualité</span>
                     </div>
                  </a>
            </article>
            <article class="card card-news">
                <a href="#" title="RCF NX15">
                     <img src="https://source.unsplash.com/random" alt=""/>
               
                     <div class="card-news__content">
                        <h2>RCF NX15</h2>
                        <span>Lire cette actualité</span>
                     </div>
                  </a>
            </article>
        </aside>
    </div>

    <section class="section-last-news">
        <div class="container container--sidebar-right container--spaced">
            <div class="last-news">
            </div>

            <div class="follow-components">
                <div class="icons-social">
                    <h3>Suivez-nous</h3>
                    <div class="icons-social__list">
                        <div class="icon-social icon-social--facebook">
                            <a href="#" title="Facebook" target="_blank" class="outer-box">
                                <div class="inner-box"></div>
                            </a>
                        </div>
                        <div class="icon-social icon-social--youtube">
                            <a href="#" title="Youtube" target="_blank" class="outer-box">
                                <div class="inner-box"></div>
                            </a>
                        </div>
                        <div class="icon-social icon-social--twitter">
                            <a href="#" title="Twitter" target="_blank" class="outer-box">
                                <div class="inner-box"></div>
                            </a>
                        </div>
                        <div class="icon-social icon-social--instagram">
                            <a href="#" title="Instagram" target="_blank" class="outer-box">
                                <div class="inner-box"></div>
                            </a>
                        </div>
                        <div class="icon-social icon-social--linkedin">
                            <a href="#" title="LinkedIn" target="_blank" class="outer-box">
                                <div class="inner-box"></div>
                            </a>
                        </div>
                        <div class="icon-social icon-social--vimeo">
                            <a href="#" title="Vimeo" target="_blank" class="outer-box">
                                <div class="inner-box"></div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="block-search" id="modal-block-search">
        <button class="block-search__close button js-close-search">
         <i class="icon icon--close"></i>
         <span>Annuler ma recherche</span>
      </button>

        <form class="block-search__form container container-l form-search" action="#" method="POST">
            <label>Rechercher parmi nos 2000 produits</label>
            <span class="input-container">
            <input type="search" />
            <button type="submit"><i class="icon icon--search icon--search-black"></i></button>
         </span>
        </form>

        <div class="block-search__result">

            <div class="container cards-result">
                <p class="result-number">127 produits répondent à votre recherche</p>

                <div class="cards-result__listing">
                </div>
            </div>

        </div>
    </div>
    <footer>
        <div class="container">
            <div class="subfooter container container-m">
                <nav class="nav__footer">
                    <h6>Location</h6>
                    <button class="js-nav-toogle">Location</button>

                    <ul>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                    </ul>
                </nav>
                <nav class="nav__footer">
                    <h6>Mariages</h6>
                    <button class="js-nav-toogle">Mariages</button>

                    <ul>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                    </ul>
                </nav>
                <nav class="nav__footer">
                    <h6>Événements</h6>
                    <button class="js-nav-toogle">Événements</button>

                    <ul>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                    </ul>
                </nav>
                <nav class="nav__footer">
                    <h6>XXL Organisation</h6>
                    <button class="js-nav-toogle">XXL Organisation</button>

                    <ul>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                        <li><a href="">Lien</a></li>
                    </ul>
                </nav>
            </div>

            <div class="footer">
                <div class="logo">
                    <img src="/images/logo-label.png" alt="Logo Label des prestataires de service du spectacle vivant" />
                </div>

                <div class="copyright">
                    &copy XXL Organisation 2019

                    <ul class="lst__unstyled lst__inline">
                        <li><a href="#">Mentions légales</a></li>
                        <li><a href="#">Politique de confidentialité</a></li>
                    </ul>
                </div>

                <div class="animated-icons">
                    Réalisé avec
                    <div class="icons js-animate-icons">
                        <div class="icons-container">
                            <svg aria-hidden="true" data-prefix="fas" data-icon="cheeseburger" class="svg-inline--fa fa-cheeseburger fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 256h-48l-96 64-96-64H48a48 48 0 0 0 0 96h416a48 48 0 0 0 0-96zM58.6 224h394.7c34.6 0 54.6-43.9 34.8-75.9C448 83.2 359.5 32.1 256 32c-103.5.1-192 51.2-232.2 116.1-19.8 32 .3 75.9 34.8 75.9zM384 112a16 16 0 1 1-16 16 16 16 0 0 1 16-16zM256 80a16 16 0 1 1-16 16 16 16 0 0 1 16-16zm-128 32a16 16 0 1 1-16 16 16 16 0 0 1 16-16zm352 272H32a16 16 0 0 0-16 16v16a64.06 64.06 0 0 0 64 64h352a64.06 64.06 0 0 0 64-64v-16a16 16 0 0 0-16-16z"/></svg>
                            <svg aria-hidden="true" data-prefix="fas" data-icon="french-fries" class="svg-inline--fa fa-french-fries fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M432 224h-34c-6.92 0-13.7 4.27-15.19 11-8.6 39-62.09 69-126.79 69s-118.19-30-126.79-69c-1.49-6.76-8.27-11-15.19-11H80a16 16 0 0 0-15.62 19.47l54.1 243.47A32 32 0 0 0 149.73 512h212.54a32 32 0 0 0 31.24-25.06l54.1-243.47A16 16 0 0 0 432 224zm-80.45 4.14c.4-1.78 1.46-3.22 2.06-4.91l30.14-172.46a16 16 0 0 0-20.34-18.08l-34.28 10.25c-4.24 1.27-7.17 4.51-9.13 8.33v207.27c17.55-8.38 29.15-19.54 31.54-30.4zm79.9-36.14l16.3-93.23a16 16 0 0 0-20.34-18.08l-17.31 5.17-18.75 107.26c2.24-.32 4.33-1.12 6.63-1.12zM288 268.78V32a16 16 0 0 0-8.84-14.31l-32-16A16 16 0 0 0 224 16v252.78a160.62 160.62 0 0 0 64 0zM114 192c3.6 0 7 1 10.35 1.75l-20-107.16-19.74-5.9a16 16 0 0 0-20.36 18.08L80.55 192zm78 66.54V33.17l-3.76-20.1a16 16 0 0 0-25.39-9.81l-28.51 21.62a16 16 0 0 0-6.07 15.69l36.9 197.22c5.3 7.58 14.49 14.86 26.83 20.75z"/></svg>
                            <svg aria-hidden="true" data-prefix="fas" data-icon="beer" class="svg-inline--fa fa-beer fa-w-14" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M368 96h-48V56c0-13.255-10.745-24-24-24H24C10.745 32 0 42.745 0 56v400c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24v-42.11l80.606-35.977C429.396 365.063 448 336.388 448 304.86V176c0-44.112-35.888-80-80-80zm16 208.86a16.018 16.018 0 0 1-9.479 14.611L320 343.805V160h48c8.822 0 16 7.178 16 16v128.86zM208 384c-8.836 0-16-7.164-16-16V144c0-8.836 7.164-16 16-16s16 7.164 16 16v224c0 8.836-7.164 16-16 16zm-96 0c-8.836 0-16-7.164-16-16V144c0-8.836 7.164-16 16-16s16 7.164 16 16v224c0 8.836-7.164 16-16 16z"/></svg>
                            <svg aria-hidden="true" data-prefix="fas" data-icon="heart" class="svg-inline--fa fa-heart fa-w-16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"/></svg>
                        </div>
                    </div>
                    par
                    <a rel="noopener" href="http://www.mediakod.com" title="Mediakod" class="mycopy" target="_blank">
                  <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="30" height="30" viewBox="0 0 595.2 524.2"><path d="M528 409.5v-45.3V162.5c0 0-0.5-5.4-2.9-12.6 -1.8-6.7-5-12.8-9.4-18 -4.3-5.6-10.2-10.5-18-13.5 -5.8-2.5-12.2-3.9-19-3.9h-92.3c0.8 0-79 92-84.6 98.3L209.5 115h-0.3c-0.3-0.3-0.5-0.5-0.5-0.5 -47.6 0-82.3 0-82.3 0 -26.5 0-48 21.5-48 48v201.7 4.7c0 26.5 21.5 48 48 48h401.6M320.4 274.8l75-93.5h68.2l-81.8 92.4 83.8 90.5h-69L320.4 274.8z"></path></svg>
               </a>
                </div>
            </div>
        </div>
    </footer>
</div>