Ectaclick

Prelude-menu-responsive

Jan 26th, 2022 (edited)
804
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <pfe-navigation>
  2.         <pfe-navigation-item>
  3.             <img src="http://placehold.it/118x50" alt="Logo Prelude">
  4.         </pfe-navigation-item>
  5.         <pfe-navigation-main id="js-deploy-mobile">
  6.             <ul>
  7.                 <li class="js-deploy">
  8.                     <a href="#">Solutions</a>
  9.                     <div class="submenu-icon">&#8744;</div>
  10.                     <div class="pfe-navigation-item__container" aria-expanded="false">
  11.                         <div class="pfe-navigation-item-grid" style="--column-count: 5;">
  12.                             <div class="pfe-navigation-grid__column">
  13.                                 <div class="pfe-link-list">
  14.                                     <div class="pfe-link-list__header">
  15.                                         <p>E-Commerce</p>
  16.                                     </div>
  17.                                     <ul class="pfe-link-list__group">
  18.                                         <li class="pfe-link-list__group-item">
  19.                                             <a href="https://preludeconseil.com/e-commerce/shopify">Shopify</a>
  20.                                         </li>
  21.                                         <li class="pfe-link-list__group-item">
  22.                                             <a href="https://preludeconseil.com/solution/e-commerce/maintenance">Maintenance</a>
  23.                                         </li>
  24.                                         <li class="pfe-link-list__group-item">
  25.                                             <a href="https://preludeconseil.com/hebergement">Hébergement</a>
  26.                                         </li>
  27.                                     </ul>
  28.                                 </div>
  29.                             </div>
  30.                             <div class="pfe-navigation-grid__column">
  31.                                 <div class="pfe-link-list">
  32.                                     <div class="pfe-link-list__header">Marketing Digital</div>
  33.                                     <ul class="pfe-link-list__group">
  34.                                         <li class="pfe-link-list__group-item">
  35.                                             <a href="https://preludeconseil.com/marketing-digital/seo">SEO</a>
  36.                                         </li>
  37.                                         <li class="pfe-link-list__group-item">
  38.                                             <a href="https://preludeconseil.com/marketing-digital/sea">SEA</a>
  39.                                         </li>
  40.                                         <li class="pfe-link-list__group-item">
  41.                                             <a href="https://preludeconseil.com/marketing-digital/social-media">Social
  42.                                                 Media</a>
  43.                                         </li>
  44.                                         <li class="pfe-link-list__group-item">
  45.                                             <a href="https://preludeconseil.com/marketing-digital/animation-commerciale">Animation
  46.                                                 Commerciale</a>
  47.                                         </li>
  48.                                     </ul>
  49.                                 </div>
  50.                             </div>
  51.                             <div class="pfe-navigation-grid__column">
  52.                                 <div class="pfe-link-list">
  53.                                     <div class="pfe-link-list__header">Création de sites web</div>
  54.                                     <ul class="pfe-link-list__group">
  55.                                         <li class="pfe-link-list__group-item">
  56.                                             <a>Wordpress</a>
  57.                                         </li>
  58.                                         <li class="pfe-link-list__group-item">
  59.                                             <a>Hébergement</a>
  60.                                         </li>
  61.                                     </ul>
  62.                                 </div>
  63.                             </div>
  64.                             <div class="pfe-navigation-grid__column">
  65.                                 <div class="pfe-link-list">
  66.                                     <div class="pfe-link-list__header">Direction Artistique</div>
  67.                                     <ul class="pfe-link-list__group">
  68.                                         <li class="pfe-link-list__group-item">
  69.                                             <a href="">Design UI/UX</a>
  70.                                         </li>
  71.                                         <li class="pfe-link-list__group-item">
  72.                                             <a>Motion Design</a>
  73.                                         </li>
  74.                                         <li class="pfe-link-list__group-item">
  75.                                             <a>Realité Augmentée AR</a>
  76.                                         </li>
  77.                                         <li class="pfe-link-list__group-item">
  78.                                             <a>Merchandising</a>
  79.                                         </li>
  80.                                     </ul>
  81.                                 </div>
  82.                             </div>
  83.                             <div class="pfe-navigation-grid__column">
  84.                                 <div class="pfe-link-list">
  85.                                     <!-- E-Retail - SSI -> image -->
  86.                                     <div class="pfe-link-list__header">E-Retail - SSI</div>
  87.                                     <ul class="pfe-link-list__group">
  88.                                         <li class="pfe-link-list__group-item">
  89.                                             <a>Point De Vente - POS</a>
  90.                                         </li>
  91.                                         <li class="pfe-link-list__group-item">
  92.                                             <a>Dévs Spécifiques</a>
  93.                                         </li>
  94.                                         <li class="pfe-link-list__group-item">
  95.                                             <a>Gestion Entrepôts - WMS</a>
  96.                                         </li>
  97.                                         <li class="pfe-link-list__group-item">
  98.                                             <a>Gestion Commandse - OMS</a>
  99.                                         </li>
  100.                                         <li class="pfe-link-list__group-item">
  101.                                             <a>Hardware</a>
  102.                                         </li>
  103.                                         <li class="pfe-link-list__group-item">
  104.                                             <a>Partenaires Techniques</a>
  105.                                         </li>
  106.                                     </ul>
  107.                                 </div>
  108.                             </div>
  109.                         </div>
  110.                         <div class="pfe-navigation-item__footer" id="estimate">
  111.                             <a href="#">
  112.                                 <button id="new-button">Nouveau</button>
  113.                             </a>
  114.                             <p>Estimez vos coûts mensuels avec la solution Shopify, Plus et POS &#8594;</p>
  115.                         </div>
  116.                     </div>
  117.                 </li>
  118.                 <li><a href="#">A propos de nous</a>
  119.                 </li>
  120.                 <li><a href="#">Références</a>
  121.                 </li>
  122.                 <li><a href="#">Blog</a>
  123.                 </li>
  124.                 <li><a href="#">Nous rejoindre</a>
  125.                 </li>
  126.             </ul>
  127.         </pfe-navigation-main>
  128.         <pfe-navigation-item>
  129.             <button id="contact-button">Contact</button>
  130.             <div id="mobile-icon-open" class="mobile-icon">&#9776;</div>
  131.             <div id="mobile-icon-close" class="mobile-icon">&#128473;</div>
  132.         </pfe-navigation-item>
  133.     </pfe-navigation>
RAW Paste Data Copied