logo

One Page

Code :

  1. <?php
  2. /*
  3. Template Name: Page Accueil One Page
  4. */
  5. ?>
  6. <style>
  7.  
  8. /* Fix page d'accueil one page */
  9. @media screen and (min-width:1088px){
  10.   .mainview .modal-card {
  11.     max-height: calc(100vh - 40px);
  12.     top: calc(-50vh + 20px);
  13.   }
  14. }
  15.  
  16. </style>
  17.  
  18.  
  19. <?php include('head.php') ; ?>
  20.  
  21. <body <?php body_class(); ?>>
  22.   <!-- menu-->
  23.   <?php include('menu-top.php') ; ?>
  24.   <main class="mainbag">
  25.  
  26.     <!-- header -->
  27.     <section vs-anchor="view-1" class="header-page-accueil mainview">
  28.       <header>
  29.  
  30.  
  31.          <!-- Carousel -->
  32.       <div class="slider-home">
  33.         <img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/mandarine1.jpg" alt="" />
  34.         <img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/mandarine2.jpg" alt="" />
  35.         <img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/mandarine3.jpg" alt="" />
  36.         <img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/mandarine4.jpg" alt="" />
  37.       </div>
  38.       <!-- / Carousel -->
  39.  
  40.         <!-- alerte-->
  41.         <div class="buttons has-addons is-centered">
  42.           <a class="button background-color-4 color-6" href="tel:+33xxxxxxxxx" title="Communication directe">
  43.             <span class="icon"><i class="fas fa-phone" aria-hidden="true" title="téléphone"></i></span>
  44.             <span>05 49 00 00 00</span>
  45.           </a>
  46.           <p> Contactez-nous !</p>
  47.         </div>
  48.       </header>
  49.     </section>
  50.  
  51.     <!--produits-->
  52.     <section vs-anchor="view-2" class="section mainview produits">
  53.       <div class="vs-center-wrap">
  54.         <div class="vs-center">
  55.           <div class="container has-text-left">
  56.           <h2 class="title is-2 has-text-centered"><a href="#">Nos produits</a></h2>
  57.           <div class="columns">
  58.             <div class="column">
  59.               <a href="">
  60.                 <div class="card shadow">
  61.                   <div class="card-image">
  62.                     <picture>
  63.                       <img src="<?php echo get_template_directory_uri(); ?>/css/img/logo.svg" alt="produit 1">
  64.                     </picture>
  65.                   </div>
  66.                   <div class="card-content">
  67.                     <h2 class="is-size-4">Produit 1</h2>
  68.                     <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia qui, odio ut culpa blanditiis alias optio impedit voluptatum est earum.</p>
  69.                   </div>
  70.                 </div>
  71.               </a>
  72.             </div>
  73.             <div class="column">
  74.               <a href="">
  75.                 <div class="card shadow">
  76.                   <div class="card-image">
  77.                     <picture>
  78.                       <img src="<?php echo get_template_directory_uri(); ?>/css/img/logo.svg" alt="produit 2">
  79.                     </picture>
  80.                   </div>
  81.                   <div class="card-content">
  82.                     <h2 class="is-size-4">Produit 2</h2>
  83.                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum eum consectetur dolore nobis dicta nam quia illum harum earum modi ut nesciunt, soluta doloremque voluptas, inventore architecto fuga quas doloribus.</p>
  84.                   </div>
  85.                 </div>
  86.               </a>
  87.             </div>
  88.             <div class="column">
  89.               <a href="">
  90.                 <div class="card shadow">
  91.                   <div class="card-image">
  92.                     <picture>
  93.                       <img src="<?php echo get_template_directory_uri(); ?>/css/img/logo.svg" alt="produit 3">
  94.                     </picture>
  95.                   </div>
  96.                   <div class="card-content">
  97.                     <h2 class="is-size-4">Produit 3</h2>
  98.                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error, ad vero exercitationem culpa doloribus consequatur rem distinctio vel blanditiis maiores, quasi ipsum, perferendis molestiae labore.</p>
  99.                   </div>
  100.                 </div>
  101.               </a>
  102.             </div>
  103.             <div class="column">
  104.               <a href="">
  105.                 <div class="card shadow">
  106.                   <div class="card-image">
  107.                     <picture>
  108.                       <img src="<?php echo get_template_directory_uri(); ?>/css/img/logo.svg" alt="produit 4">
  109.                     </picture>
  110.                   </div>
  111.                   <div class="card-content">
  112.                     <h2 class="is-size-4">Produit 4</h2>
  113.                     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis possimus ratione ipsa doloremque aliquid voluptatem qui provident nisi, delectus, quidem a, in architecto magni dolore saepe veritatis sunt blanditiis consequatur quos!</p>
  114.                   </div>
  115.                 </div>
  116.               </a>
  117.             </div>
  118.           </div>
  119.           </div>
  120.         </div>
  121.       </div>
  122.     </section>
  123.     <!--/ produits-->
  124.  
  125.     <!--activités-->
  126.     <section vs-anchor="view-3" class="mainview hero is-medium activites background-color-black">
  127.       <div class="vs-center-wrap">
  128.         <div class="vs-center">
  129.           <div class="hero-head">
  130.             <h2 class="title is-2 has-text-centered color-white"><a href="#">Nos prestations</a></h2>
  131.           </div>
  132.           <div class="hero-body has-text-left">
  133.             <div class="columns is-vcentered is-multiline">
  134.               <div class="liste-activites column is-3 is-offset-1">
  135.               <img class="image-activite image-fond" src="<?php echo get_template_directory_uri(); ?>/css/img/prestation4.jpg" alt="Prestation 4">
  136.                   <ul>
  137.                     <li>
  138.                       <a class="is-size-5 is-uppercase color-white" href="#">Prestation 1</a>
  139.                       <img class="image-activite" src="<?php echo get_template_directory_uri(); ?>/css/img/prestation1.jpg" alt="Prestation 1">
  140.                       <div class="detail-activite column is-8 color-white">
  141.                         <h3 class="title is-6 is-uppercase color-white">Prestation 1</h3>
  142.                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis debitis dolorum repellat inventore corporis facere deserunt expedita, nam officia nostrum beatae porro natus fugiat. Voluptatem.</p>
  143.                       </div>
  144.                     </li>
  145.                     <li>
  146.                       <a class="is-size-5 is-uppercase color-white" href="#">Prestation 2</a>
  147.                       <img class="image-activite" src="<?php echo get_template_directory_uri(); ?>/css/img/prestation2.jpg" alt="Prestation 2">
  148.                       <div class="detail-activite column is-8 color-white">
  149.                         <h3 class="title is-6 is-uppercase color-white">Prestation 2</h3>
  150.                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis debitis dolorum repellat inventore corporis facere deserunt expedita, nam officia nostrum beatae porro natus fugiat. Voluptatem.</p>
  151.                       </div>
  152.                     </li>
  153.                     <li>
  154.                       <a class="is-size-5 is-uppercase color-white" href="#">Prestation 3</a>
  155.                       <img class="image-activite" src="<?php echo get_template_directory_uri(); ?>/css/img/prestation3.jpg" alt="Prestation 3">
  156.                       <div class="detail-activite column is-8 color-white">
  157.                         <h3 class="title is-6 is-uppercase color-white">Prestation 3</h3>
  158.                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis debitis dolorum repellat inventore corporis facere deserunt expedita, nam officia nostrum beatae porro natus fugiat. Voluptatem.</p>
  159.                       </div>
  160.                     </li>
  161.                     <li>
  162.                       <a class="is-size-5 is-uppercase color-white" href="#">Prestation 4</a>
  163.                       <img class="image-activite" src="<?php echo get_template_directory_uri(); ?>/css/img/prestation4.jpg" alt="Prestation 4">
  164.                       <div class="detail-activite column is-8 color-white">
  165.                         <h3 class="title is-6 is-uppercase color-white">Prestation 4</h3>
  166.                         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis debitis dolorum repellat inventore corporis facere deserunt expedita, nam officia nostrum beatae porro natus fugiat. Voluptatem.</p>
  167.                       </div>
  168.                     </li>
  169.                   </ul>
  170.               </div>
  171.               <div class="affichage-detail-activite column is-8"></div>
  172.             </div>
  173.           </div>
  174.         </div>
  175.       </div>
  176.     </section>
  177.     <!--/activités-->
  178.  
  179.     <!--presentation-->
  180.     <section vs-anchor="view-4" class="presentation is-medium mainview">
  181.       <div class="vs-center-wrap">
  182.         <div class="vs-center">
  183.           <div class="container has-text-left">
  184.             <div class="column is-three-fifths is-offset-one-fifth">
  185.               <div class="is-presentation box">
  186.                 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  187.                 <h1 class="title is-1">
  188.                   <?php the_title(); ?>
  189.                   <?php edit_post_link(''); ?>
  190.                 </h1>
  191.                 <?php the_content();?>
  192.                 <?php endwhile;
  193.                                 else: ?>
  194.                 <?php endif;?>
  195.                 <br><br>
  196.                 <!-- Bouton d'ouverture -->
  197.                 <a href="#modalOpen" id="modalContentin" class="button background-color-4 color-6">En savoir plus</a>
  198.               </div>
  199.  
  200.               <!-- Conteneur modal -->
  201.               <div class="modal" id="modalOpen" role="dialog" aria-modal="true">
  202.                 <div class="modal-background"></div> <!-- Overlay arrière-plan -->
  203.                 <div class="modal-card">
  204.                   <header class="modal-card-head">
  205.                     <h2 class="modal-card-title">Titre du modal</h2>
  206.                     <!-- Bouton de fermeture -->
  207.                     <a href="#" id="modalContentout" title="Fermer la fenêtre">
  208.                       <i class="fas fa-times btn_close"></i>
  209.                     </a>
  210.                   </header>
  211.  
  212.                   <section class="modal-card-body">
  213.                     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  214.                     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  215.                     <img src="https://www.placecage.com/c/600/300" alt="">
  216.                   </section>
  217.  
  218.                   <footer class="modal-card-foot">
  219.                     <a href="" class="button background-color-4 color-6">En savoir plus</a> <!-- Bouton optionnel -->
  220.                   </footer>
  221.                 </div>
  222.               </div><!-- / Modal -->
  223.  
  224.               <!-- Ouvrir et fermer le modal automatiquement -->
  225.               <!-- <script>
  226.                      setTimeout("CallButton()",2000)
  227.                      function CallButton()
  228.                      {   document.getElementById("modalContentin").click();   }
  229.  
  230.                      setTimeout("CallButton2()",10000)
  231.                      function CallButton2()
  232.                      {   document.getElementById("modalContentout").click();   }
  233.                     </script> -->
  234.  
  235.             </div> <!-- / Column -->
  236.           </div> <!-- / Container -->
  237.         </div>
  238.       </div>
  239.     </section>
  240.     <!--/presentation-->
  241.  
  242.     <!-- Blog version 1-->
  243.     <section vs-anchor="view-5" class="section blog mainview">
  244.       <div class="vs-center-wrap">
  245.         <div class="vs-center">
  246.           <div class="container has-text-left">
  247.             <h1 class="title is-1"><a href="<?php echo home_url(); ?>/actualites">Actualités</a></h1>
  248.             <div class="tile is-ancestor">
  249.               <?php
  250.                             $special_cat_args = [
  251.                                 'posts_per_page' => 3,
  252.                                 //Add extra arguments here
  253.                             ];
  254.                             $art_posts = get_posts( $special_cat_args );
  255.                             // Setup a variable to store the post ID's so we can exclude them in the 'main' query
  256.                             $ids_array = [];
  257.                             // Check if we have posts before we continue
  258.                             if ( $art_posts ) {
  259.                                 // Start our counter
  260.                                 $counter = 0;
  261.                                 // Start the loop
  262.                                 foreach ( $art_posts as $post ) {
  263.                                     // Setup postdata, must use $post
  264.                                     setup_postdata( $post );
  265.                                     // Store the post id in an array to exclude in "main" query
  266.                                     $ids_array[] = $post->ID;
  267.                                     // Do something separate for every post
  268.                                     if ( 0 == $counter ) { // 1er article ?>
  269.               <div class="tile is-6 is-parent">
  270.                 <article class="tile is-child has-background-grey-light post">
  271.                   <h2 class="subtitle is-3">
  272.                     <?php the_title(); ?>
  273.                   </h2>
  274.                   <div class="post-content">
  275.                     <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
  276.                       <?php if ( has_post_thumbnail() ) {?>
  277.                       <?php the_post_thumbnail('medium'); ?>
  278.                       <!-- 620 / 800 -->
  279.                       <?php } else { ?>
  280.                       <?php
  281.                                                 $curdir=getcwd(); chdir(get_template_directory() . "/css/img/random/");
  282.                                                 $files=glob("*.{gif,png,jpg,gif}", GLOB_BRACE);
  283.                                                 chdir($curdir);
  284.                                                 $file=$files[array_rand($files)];
  285.                                                 ?>
  286.                       <img src="<?php echo(get_bloginfo('template_url')."/css/img/random/$file"); ?>" alt="
  287.                                             <?php bloginfo( 'name' ); ?>" />
  288.                       <?php } ?>
  289.                     </a>
  290.                     <?php the_excerpt();?>
  291.                     <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Plus d'info</a>
  292.                   </div>
  293.                 </article>
  294.               </div>
  295.               <div class="tile is-vertical is-parent">
  296.                 <?php  } elseif ( 1 == $counter ) { ?>
  297.                 <article class="tile is-child has-background-grey-lighter post">
  298.                   <h2 class="subtitle is-3">
  299.                     <?php the_title(); ?>
  300.                   </h2>
  301.                   <div class="post-content">
  302.                     <div class="columns">
  303.                       <div class="column is-half">
  304.                         <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
  305.                           <?php if ( has_post_thumbnail() ) {?>
  306.                           <?php the_post_thumbnail('thumbnail'); ?>
  307.                           <!-- 300/130 -->
  308.                           <?php } else { ?>
  309.                           <?php
  310.                                                         $curdir=getcwd(); chdir(get_template_directory() . "/css/img/random/");
  311.                                                         $files=glob("*.{gif,png,jpg,gif}", GLOB_BRACE);
  312.                                                         chdir($curdir);
  313.                                                         $file=$files[array_rand($files)];
  314.                                                         ?>
  315.                           <img src="<?php echo(get_bloginfo('template_url')."/css/img/random/$file"); ?>" alt="
  316.                                                     <?php bloginfo( 'name' ); ?>" />
  317.                           <?php } ?>
  318.                         </a>
  319.                       </div>
  320.                       <div class="column is-half">
  321.                         <?php the_excerpt();?>
  322.                       </div>
  323.                     </div>
  324.                     <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Plus d'info</a>
  325.                   </div>
  326.                 </article>
  327.                 <?php } elseif ( 2 == $counter ) { ?>
  328.                 <article class="tile is-child has-background-white-ter post">
  329.                   <h2 class="subtitle is-3">
  330.                     <?php the_title(); ?>
  331.                   </h2>
  332.                   <div class="post-content">
  333.                     <div class="columns">
  334.                       <div class="column is-half">
  335.                         <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
  336.                           <?php if ( has_post_thumbnail() ) {?>
  337.                           <?php the_post_thumbnail('thumbnail'); ?>
  338.                           <!-- 300 / 130 -->
  339.                           <?php } else { ?>
  340.                           <?php
  341.                                                         $curdir=getcwd(); chdir(get_template_directory() . "/css/img/random/");
  342.                                                         $files=glob("*.{gif,png,jpg,gif}", GLOB_BRACE);
  343.                                                         chdir($curdir);
  344.                                                         $file=$files[array_rand($files)];
  345.                                                         ?>
  346.                           <img src="<?php echo(get_bloginfo('template_url')."/css/img/random/$file"); ?>" alt="
  347.                                                     <?php bloginfo( 'name' ); ?>" />
  348.                           <?php } ?>
  349.                         </a>
  350.                       </div>
  351.                       <div class="column is-half">
  352.                         <?php the_excerpt();?>
  353.                       </div>
  354.                     </div>
  355.                     <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Plus d'info</a>
  356.                   </div>
  357.                 </article>
  358.                 <?php }
  359.                                 // Update the counter
  360.                                 $counter++;
  361.                                 } //endforeach $art_posts
  362.                                 wp_reset_postdata(); // VERY VERY IMPORTANT
  363.                                 } //endif $art_posts
  364.                                 // Now we can do our "main" query and exclude the three posts from the special category
  365.                                 $args = [
  366.                                     'post__not_in' => $ids_array, // Exclude the three post from previous query
  367.                                     // Rest of your arguments
  368.                                 ];
  369.                                 $q = get_posts( $args );// Run your loop ?>
  370.               </div>
  371.             </div><!-- /ancestor -->
  372.           </div><!-- /container -->
  373.         </div>
  374.       </div>
  375.     </section>
  376.     <!-- /blog -->
  377.  
  378.     <!-- Blog version 2-->
  379.     <section vs-anchor="view-6" class="section blog mainview">
  380.       <div class="vs-center-wrap">
  381.         <div class="vs-center">
  382.           <div class="container has-text-left">
  383.           <h2 class="title is-1"><a href="<?php echo home_url(); ?>/actualites">Actualités</a></h2>  
  384.           <div class="columns is-multiline">
  385.               <?php
  386.                 $args = array(
  387.                   'posts_per_page' => 3,
  388.                 );
  389.                 $recent = new WP_Query($args);
  390.                 while($recent->have_posts()) : $recent->the_post();
  391.               ?>
  392.               <div class="column is-one-third is-marge">
  393.                 <article>
  394.                   <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
  395.                     <div class="card shadow">
  396.                       <div class="card-image">
  397.                         <?php if (has_post_thumbnail() ) {?>
  398.                         <picture>
  399.                           <?php the_post_thumbnail('thumbnail'); ?>
  400.                         </picture>
  401.                         <?php } else { ?>
  402.                         <?php
  403.                           $curdir=getcwd(); chdir(get_template_directory() . "/css/img/random/");
  404.                           $files=glob("*.{gif,png,jpg,gif}", GLOB_BRACE);
  405.                           chdir($curdir);
  406.                           $file=$files[array_rand($files)];
  407.                         ?>
  408.                         <picture>
  409.                           <img src="<?php echo(get_bloginfo('template_url')."/css/img/random/$file"); ?>" alt="<?php bloginfo( 'name' ); ?>" />
  410.                         </picture>
  411.                         <?php } ?>
  412.                       </div>
  413.                       <div class="card-content">
  414.                         <h1 class="subtitle is-3">
  415.                           <?php the_title(); ?>
  416.                         </h1>
  417.                         <div class="content">
  418.                           <?php the_excerpt();?>
  419.                         </div>
  420.                       </div>
  421.                     </div>
  422.                   </a>
  423.                 </article>
  424.               </div><!-- /column -->
  425.               <?php endwhile; ?>
  426.             </div><!-- /columns -->
  427.           </div><!-- /container -->
  428.         </div>
  429.       </div>
  430.     </section>
  431.     <!-- /blog -->
  432.  
  433.     <!-- carousel marques, partenaires,... -->
  434.     <section vs-anchor="view-7" class="section partenaires mainview">
  435.       <div class="slider-partenaires">
  436.         <img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
  437.         <img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
  438.         <img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
  439.         <img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
  440.         <img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
  441.         <img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
  442.         <img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
  443.         <img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
  444.         <img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
  445.         <img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
  446.       </div>  
  447.     </section>
  448.  
  449.     <!-- footer -->
  450.     <section vs-anchor="view-8" class="footer mainview">
  451.       <div class="vs-center-wrap" >
  452.         <div class="vs-center">
  453.           <div class="container">
  454.             <div class="columns is-multiline">
  455.  
  456.               <!-- Logo -->
  457.               <div class="column is-3">
  458.                 <a class="" href="">
  459.                   <img src="<?php echo get_template_directory_uri(); ?>/css/img/logo.svg" alt="logo">
  460.                 </a>
  461.               </div>
  462.  
  463.               <!-- Adresse -->
  464.               <div class="column is-3">
  465.                 <div class="field has-addons">
  466.                   <div class="media">
  467.                     <p class="media-left is-size-5">
  468.                       <span class="icon"><i class="far fa-building" aria-hidden="true" title="Nom"></i></span>
  469.                     </p>
  470.                     <p class="media-content is-size-6">Entreprise</p>
  471.                   </div>
  472.                 </div>
  473.                 <div class="field has-addons">
  474.                   <div class="media">
  475.                     <p class="media-left is-size-5">
  476.                       <span class="icon"><i class="fas fa-road" aria-hidden="true" title="Adresse"></i></span>
  477.                     </p>
  478.                     <p class="media-content  is-size-6">Rue</p>
  479.                   </div>
  480.                 </div>
  481.                 <div class="field has-addons">
  482.                   <div class="media">
  483.                     <p class="media-left is-size-5">
  484.                       <span class="icon"><i class="fas fa-map-marker-alt" aria-hidden="true" title="Ville"></i></span>
  485.                     </p>
  486.                     <p class="media-content  is-size-6">xxxxx Ville</p>
  487.                   </div>
  488.                 </div>
  489.                 <div class="field has-addons">
  490.                   <div class="media">
  491.                     <p class="media-left is-size-5">
  492.                       <span class="icon"><i class="fas fa-phone" aria-hidden="true" title="téléphone"></i></span>
  493.                     </p>
  494.                     <p class="media-content is-size-6">
  495.                       <a href="tel:+33xxxxxxxxx" title="Communication directe"> 05 49 00 00 00</a><br><br>
  496.                     </p>
  497.                   </div>
  498.                 </div>
  499.                 <div class="field has-addons">
  500.                   <div class="media">
  501.                     <p class="media-content  is-size-6">
  502.                       <a href="https://www.facebook.com/B"><span class="icon is-medium"><i class="fab fa-facebook-f" aria-hidden="true"></i></span></a>
  503.                       <a href=""><span class="icon is-medium"><i class="fab fa-twitter" aria-hidden="true"></i></span></a>
  504.                       <a href=""><span class="icon is-medium"><i class="fab fa-youtube" aria-hidden="true"></i></span></a>
  505.                       <a href=""><span class="icon is-medium"><i class="fab fa-instagram" aria-hidden="true"></i></span></a>
  506.                       <a href=""><span class="icon is-medium"><i class="fas fa-map-marked-alt"></i></span></a>
  507.                     </p>
  508.                   </div>
  509.                 </div>
  510.               </div>
  511.  
  512.               <!-- Formulaire de contact -->
  513.               <div class="column is-6">
  514.                 <?php echo do_shortcode ('[contact-form-7 title="Formulaire-emandarine"]'); ?>
  515.               </div>
  516.             </div>
  517.  
  518.             <!-- Copyright -->
  519.             <p class="has-text-centered">
  520.               <?php echo date('Y'); ?> Copyright
  521.               <?php bloginfo('name'); ?> - <a href="<?php echo site_url(); ?>/mentions-legales/">Mentions légales</a> - <a href="<?php echo site_url(); ?>/politique-de-confidentialite/">Politique de confidentialité </a>
  522.             </p>
  523.           </div>
  524.  
  525.           <!-- crédit -->
  526.           <div class="credit onepage">
  527.             <div class="columns is-centered">
  528.               <a href="http://www.emandarine.com/" title="Agence Marketing Digital & Web emandarine">
  529.                 <article class="media">
  530.                   <figure class="media-left">
  531.                     <img src="<?php echo get_template_directory_uri(); ?>/css/img/logo-ariya.svg" alt="logo Ariya">
  532.                   </figure>
  533.                   <div class="media-content">
  534.                     <div class="content is-size-7">
  535.                       <p>Création web : ariya by emandarine</p>
  536.                       <p>Stratégie webmarketing : emandarine</p>
  537.                     </div>
  538.                   </div>
  539.                   <figure class="media-right">
  540.                     <img src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt="logo emandarine">
  541.                   </figure>
  542.                 </article>
  543.               </a>
  544.             </div>
  545.           </div>
  546.         </div>
  547.       </div>
  548.     </section>
  549.     </div>
  550.  
  551.     <footer>
  552.  
  553.        <!-- SCROLL TO TOP -->
  554.   <a href="#top" id="smoothup" title="Top"><i class="fas fa-arrow-up"></i></a>
  555.  
  556. <!-- JQUERY -->
  557. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  558.  
  559. <!-- SLICK CAROUSEL -->
  560. <script src="<?php bloginfo('template_url'); ?>/js/slick.min.js"></script>
  561.  
  562. <!-- FONT AWESOME -->
  563. <script src="https://kit.fontawesome.com/a5274d07c7.js"></script>
  564.  
  565. <!-- GOOGLE ANALYTICS -->
  566. <script>
  567. window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  568. ga('create', '<?php echo get_option('analytics'); ?>', 'auto');
  569. ga('send', 'pageview');
  570. </script>
  571. <script async src='https://www.google-analytics.com/analytics.js'></script>
  572.  
  573.       <!-- FICHIER JS PRINCIPAL -->
  574.       <script src="<?php bloginfo('template_url'); ?>/js.js"></script>
  575.  
  576.       <!-- VIEW SCROLLER -->
  577.  
  578.       <script src="<?php bloginfo('template_url'); ?>/js/jquery.easing.min.js"></script>
  579.       <script src="<?php bloginfo('template_url'); ?>/js/jquery.mousewheel.min.js"></script>
  580.       <script src="<?php bloginfo('template_url'); ?>/js/viewScroller.min.js"></script>
  581.       <script>
  582.         $(document).ready(function() {
  583.           if (window.matchMedia("(min-width: 1088px)").matches) {
  584.             // Sets viewScroller
  585.             $('.mainbag').viewScroller({
  586.               useScrollbar: false,
  587.               changeWhenAnim: false
  588.             });
  589.           } else {}
  590.         });
  591.       </script>
  592.  
  593.       <?php wp_footer(); ?>
  594.     </footer>
  595.  
  596. </body>
  597.  
  598. </html>
  599.  

CSS :

  1. /*! * ================================================= * viewScroller * Version: 2.1.1 * Copyright (c) 2016 Marcin Gierczak * http://www.viewdesic.com * ================================================= */
  2. .mainbag,html{
  3.     overflow-y:hidden
  4. }
  5. body,html{
  6.     margin:0;
  7.     height:100%
  8. }
  9. html{
  10.     overflow-x:hidden
  11. }
  12. .vs-center-wrap{
  13.     display:table;
  14.     width:100%;
  15.     height:100%
  16. }
  17. .vs-center{
  18.     display:table-cell;
  19.     vertical-align:middle;
  20.     text-align:center
  21. }
  22. .mainview,.subview{
  23.     position:relative;
  24.     height:100%;
  25.     width:100%;
  26.     vertical-align:bottom
  27. }
  28. .mainbag{
  29.     position:relative;
  30.     height:100%;
  31.     width:100%
  32. }
  33. .mainview{
  34.     font-size:16px;
  35.     white-space:normal
  36. }
  37. .subbag{
  38.     overflow:hidden;
  39.     height:100%;
  40.     white-space:nowrap;
  41.     font-size:0
  42. }
  43. .subview{
  44.     display:inline-block;
  45.     font-size:16px;
  46.     white-space:normal
  47. }