Code :
<?php
/*
Template Name: Page Accueil One Page
*/
?>
<style>
/* Fix page d'accueil one page */
@media screen and (min-width:1088px){
.mainview .modal-card {
max-height: calc(100vh - 40px);
top: calc(-50vh + 20px);
}
}
</style>
<?php include('head.php') ; ?>
<body <?php body_class(); ?>>
<!-- menu-->
<?php include('menu-top.php') ; ?>
<main class="mainbag">
<!-- header -->
<section vs-anchor="view-1" class="header-page-accueil mainview">
<header>
<!-- Carousel -->
<div class="slider-home">
<img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/mandarine1.jpg" alt="" />
<img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/mandarine2.jpg" alt="" />
<img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/mandarine3.jpg" alt="" />
<img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/mandarine4.jpg" alt="" />
</div>
<!-- / Carousel -->
<!-- alerte-->
<div class="buttons has-addons is-centered">
<a class="button background-color-4 color-6" href="tel:+33xxxxxxxxx" title="Communication directe">
<span class="icon"><i class="fas fa-phone" aria-hidden="true" title="téléphone"></i></span>
<span>05 49 00 00 00</span>
</a>
<p> Contactez-nous !</p>
</div>
</header>
</section>
<!--produits-->
<section vs-anchor="view-2" class="section mainview produits">
<div class="vs-center-wrap">
<div class="vs-center">
<div class="container has-text-left">
<h2 class="title is-2 has-text-centered"><a href="#">Nos produits</a></h2>
<div class="columns">
<div class="column">
<a href="">
<div class="card shadow">
<div class="card-image">
<picture>
<img src="<?php echo get_template_directory_uri(); ?>/css/img/logo.svg" alt="produit 1">
</picture>
</div>
<div class="card-content">
<h2 class="is-size-4">Produit 1</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Officia qui, odio ut culpa blanditiis alias optio impedit voluptatum est earum.</p>
</div>
</div>
</a>
</div>
<div class="column">
<a href="">
<div class="card shadow">
<div class="card-image">
<picture>
<img src="<?php echo get_template_directory_uri(); ?>/css/img/logo.svg" alt="produit 2">
</picture>
</div>
<div class="card-content">
<h2 class="is-size-4">Produit 2</h2>
<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>
</div>
</div>
</a>
</div>
<div class="column">
<a href="">
<div class="card shadow">
<div class="card-image">
<picture>
<img src="<?php echo get_template_directory_uri(); ?>/css/img/logo.svg" alt="produit 3">
</picture>
</div>
<div class="card-content">
<h2 class="is-size-4">Produit 3</h2>
<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>
</div>
</div>
</a>
</div>
<div class="column">
<a href="">
<div class="card shadow">
<div class="card-image">
<picture>
<img src="<?php echo get_template_directory_uri(); ?>/css/img/logo.svg" alt="produit 4">
</picture>
</div>
<div class="card-content">
<h2 class="is-size-4">Produit 4</h2>
<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>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--/ produits-->
<!--activités-->
<section vs-anchor="view-3" class="mainview hero is-medium activites background-color-black">
<div class="vs-center-wrap">
<div class="vs-center">
<div class="hero-head">
<h2 class="title is-2 has-text-centered color-white"><a href="#">Nos prestations</a></h2>
</div>
<div class="hero-body has-text-left">
<div class="columns is-vcentered is-multiline">
<div class="liste-activites column is-3 is-offset-1">
<img class="image-activite image-fond" src="<?php echo get_template_directory_uri(); ?>/css/img/prestation4.jpg" alt="Prestation 4">
<ul>
<li>
<a class="is-size-5 is-uppercase color-white" href="#">Prestation 1</a>
<img class="image-activite" src="<?php echo get_template_directory_uri(); ?>/css/img/prestation1.jpg" alt="Prestation 1">
<div class="detail-activite column is-8 color-white">
<h3 class="title is-6 is-uppercase color-white">Prestation 1</h3>
<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>
</div>
</li>
<li>
<a class="is-size-5 is-uppercase color-white" href="#">Prestation 2</a>
<img class="image-activite" src="<?php echo get_template_directory_uri(); ?>/css/img/prestation2.jpg" alt="Prestation 2">
<div class="detail-activite column is-8 color-white">
<h3 class="title is-6 is-uppercase color-white">Prestation 2</h3>
<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>
</div>
</li>
<li>
<a class="is-size-5 is-uppercase color-white" href="#">Prestation 3</a>
<img class="image-activite" src="<?php echo get_template_directory_uri(); ?>/css/img/prestation3.jpg" alt="Prestation 3">
<div class="detail-activite column is-8 color-white">
<h3 class="title is-6 is-uppercase color-white">Prestation 3</h3>
<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>
</div>
</li>
<li>
<a class="is-size-5 is-uppercase color-white" href="#">Prestation 4</a>
<img class="image-activite" src="<?php echo get_template_directory_uri(); ?>/css/img/prestation4.jpg" alt="Prestation 4">
<div class="detail-activite column is-8 color-white">
<h3 class="title is-6 is-uppercase color-white">Prestation 4</h3>
<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>
</div>
</li>
</ul>
</div>
<div class="affichage-detail-activite column is-8"></div>
</div>
</div>
</div>
</div>
</section>
<!--/activités-->
<!--presentation-->
<section vs-anchor="view-4" class="presentation is-medium mainview">
<div class="vs-center-wrap">
<div class="vs-center">
<div class="container has-text-left">
<div class="column is-three-fifths is-offset-one-fifth">
<div class="is-presentation box">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<h1 class="title is-1">
<?php the_title(); ?>
<?php edit_post_link(''); ?>
</h1>
<?php the_content();?>
<?php endwhile;
else: ?>
<?php endif;?>
<br><br>
<!-- Bouton d'ouverture -->
<a href="#modalOpen" id="modalContentin" class="button background-color-4 color-6">En savoir plus</a>
</div>
<!-- Conteneur modal -->
<div class="modal" id="modalOpen" role="dialog" aria-modal="true">
<div class="modal-background"></div> <!-- Overlay arrière-plan -->
<div class="modal-card">
<header class="modal-card-head">
<h2 class="modal-card-title">Titre du modal</h2>
<!-- Bouton de fermeture -->
<a href="#" id="modalContentout" title="Fermer la fenêtre">
<i class="fas fa-times btn_close"></i>
</a>
</header>
<section class="modal-card-body">
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
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.
<img src="https://www.placecage.com/c/600/300" alt="">
</section>
<footer class="modal-card-foot">
<a href="" class="button background-color-4 color-6">En savoir plus</a> <!-- Bouton optionnel -->
</footer>
</div>
</div><!-- / Modal -->
<!-- Ouvrir et fermer le modal automatiquement -->
<!-- <script>
setTimeout("CallButton()",2000)
function CallButton()
{ document.getElementById("modalContentin").click(); }
setTimeout("CallButton2()",10000)
function CallButton2()
{ document.getElementById("modalContentout").click(); }
</script> -->
</div> <!-- / Column -->
</div> <!-- / Container -->
</div>
</div>
</section>
<!--/presentation-->
<!-- Blog version 1-->
<section vs-anchor="view-5" class="section blog mainview">
<div class="vs-center-wrap">
<div class="vs-center">
<div class="container has-text-left">
<h1 class="title is-1"><a href="<?php echo home_url(); ?>/actualites">Actualités</a></h1>
<div class="tile is-ancestor">
<?php
$special_cat_args = [
'posts_per_page' => 3,
//Add extra arguments here
];
$art_posts = get_posts( $special_cat_args );
// Setup a variable to store the post ID's so we can exclude them in the 'main' query
$ids_array = [];
// Check if we have posts before we continue
if ( $art_posts ) {
// Start our counter
$counter = 0;
// Start the loop
foreach ( $art_posts as $post ) {
// Setup postdata, must use $post
setup_postdata( $post );
// Store the post id in an array to exclude in "main" query
$ids_array[] = $post->ID;
// Do something separate for every post
if ( 0 == $counter ) { // 1er article ?>
<div class="tile is-6 is-parent">
<article class="tile is-child has-background-grey-light post">
<h2 class="subtitle is-3">
<?php the_title(); ?>
</h2>
<div class="post-content">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<?php if ( has_post_thumbnail() ) {?>
<?php the_post_thumbnail('medium'); ?>
<!-- 620 / 800 -->
<?php } else { ?>
<?php
$curdir=getcwd(); chdir(get_template_directory() . "/css/img/random/");
$files=glob("*.{gif,png,jpg,gif}", GLOB_BRACE);
chdir($curdir);
$file=$files[array_rand($files)];
?>
<img src="<?php echo(get_bloginfo('template_url')."/css/img/random/$file"); ?>" alt="
<?php bloginfo( 'name' ); ?>" />
<?php } ?>
</a>
<?php the_excerpt();?>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Plus d'info</a>
</div>
</article>
</div>
<div class="tile is-vertical is-parent">
<?php } elseif ( 1 == $counter ) { ?>
<article class="tile is-child has-background-grey-lighter post">
<h2 class="subtitle is-3">
<?php the_title(); ?>
</h2>
<div class="post-content">
<div class="columns">
<div class="column is-half">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<?php if ( has_post_thumbnail() ) {?>
<?php the_post_thumbnail('thumbnail'); ?>
<!-- 300/130 -->
<?php } else { ?>
<?php
$curdir=getcwd(); chdir(get_template_directory() . "/css/img/random/");
$files=glob("*.{gif,png,jpg,gif}", GLOB_BRACE);
chdir($curdir);
$file=$files[array_rand($files)];
?>
<img src="<?php echo(get_bloginfo('template_url')."/css/img/random/$file"); ?>" alt="
<?php bloginfo( 'name' ); ?>" />
<?php } ?>
</a>
</div>
<div class="column is-half">
<?php the_excerpt();?>
</div>
</div>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Plus d'info</a>
</div>
</article>
<?php } elseif ( 2 == $counter ) { ?>
<article class="tile is-child has-background-white-ter post">
<h2 class="subtitle is-3">
<?php the_title(); ?>
</h2>
<div class="post-content">
<div class="columns">
<div class="column is-half">
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<?php if ( has_post_thumbnail() ) {?>
<?php the_post_thumbnail('thumbnail'); ?>
<!-- 300 / 130 -->
<?php } else { ?>
<?php
$curdir=getcwd(); chdir(get_template_directory() . "/css/img/random/");
$files=glob("*.{gif,png,jpg,gif}", GLOB_BRACE);
chdir($curdir);
$file=$files[array_rand($files)];
?>
<img src="<?php echo(get_bloginfo('template_url')."/css/img/random/$file"); ?>" alt="
<?php bloginfo( 'name' ); ?>" />
<?php } ?>
</a>
</div>
<div class="column is-half">
<?php the_excerpt();?>
</div>
</div>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">Plus d'info</a>
</div>
</article>
<?php }
// Update the counter
$counter++;
} //endforeach $art_posts
wp_reset_postdata(); // VERY VERY IMPORTANT
} //endif $art_posts
// Now we can do our "main" query and exclude the three posts from the special category
$args = [
'post__not_in' => $ids_array, // Exclude the three post from previous query
// Rest of your arguments
];
$q = get_posts( $args );// Run your loop ?>
</div>
</div><!-- /ancestor -->
</div><!-- /container -->
</div>
</div>
</section>
<!-- /blog -->
<!-- Blog version 2-->
<section vs-anchor="view-6" class="section blog mainview">
<div class="vs-center-wrap">
<div class="vs-center">
<div class="container has-text-left">
<h2 class="title is-1"><a href="<?php echo home_url(); ?>/actualites">Actualités</a></h2>
<div class="columns is-multiline">
<?php
$args = array(
'posts_per_page' => 3,
);
$recent = new WP_Query($args);
while($recent->have_posts()) : $recent->the_post();
?>
<div class="column is-one-third is-marge">
<article>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<div class="card shadow">
<div class="card-image">
<?php if (has_post_thumbnail() ) {?>
<picture>
<?php the_post_thumbnail('thumbnail'); ?>
</picture>
<?php } else { ?>
<?php
$curdir=getcwd(); chdir(get_template_directory() . "/css/img/random/");
$files=glob("*.{gif,png,jpg,gif}", GLOB_BRACE);
chdir($curdir);
$file=$files[array_rand($files)];
?>
<picture>
<img src="<?php echo(get_bloginfo('template_url')."/css/img/random/$file"); ?>" alt="<?php bloginfo( 'name' ); ?>" />
</picture>
<?php } ?>
</div>
<div class="card-content">
<h1 class="subtitle is-3">
<?php the_title(); ?>
</h1>
<div class="content">
<?php the_excerpt();?>
</div>
</div>
</div>
</a>
</article>
</div><!-- /column -->
<?php endwhile; ?>
</div><!-- /columns -->
</div><!-- /container -->
</div>
</div>
</section>
<!-- /blog -->
<!-- carousel marques, partenaires,... -->
<section vs-anchor="view-7" class="section partenaires mainview">
<div class="slider-partenaires">
<img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
<img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
<img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
<img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
<img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
<img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
<img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
<img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
<img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
<img class="" src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt=""/>
</div>
</section>
<!-- footer -->
<section vs-anchor="view-8" class="footer mainview">
<div class="vs-center-wrap" >
<div class="vs-center">
<div class="container">
<div class="columns is-multiline">
<!-- Logo -->
<div class="column is-3">
<a class="" href="">
<img src="<?php echo get_template_directory_uri(); ?>/css/img/logo.svg" alt="logo">
</a>
</div>
<!-- Adresse -->
<div class="column is-3">
<div class="field has-addons">
<div class="media">
<p class="media-left is-size-5">
<span class="icon"><i class="far fa-building" aria-hidden="true" title="Nom"></i></span>
</p>
<p class="media-content is-size-6">Entreprise</p>
</div>
</div>
<div class="field has-addons">
<div class="media">
<p class="media-left is-size-5">
<span class="icon"><i class="fas fa-road" aria-hidden="true" title="Adresse"></i></span>
</p>
<p class="media-content is-size-6">Rue</p>
</div>
</div>
<div class="field has-addons">
<div class="media">
<p class="media-left is-size-5">
<span class="icon"><i class="fas fa-map-marker-alt" aria-hidden="true" title="Ville"></i></span>
</p>
<p class="media-content is-size-6">xxxxx Ville</p>
</div>
</div>
<div class="field has-addons">
<div class="media">
<p class="media-left is-size-5">
<span class="icon"><i class="fas fa-phone" aria-hidden="true" title="téléphone"></i></span>
</p>
<p class="media-content is-size-6">
<a href="tel:+33xxxxxxxxx" title="Communication directe"> 05 49 00 00 00</a><br><br>
</p>
</div>
</div>
<div class="field has-addons">
<div class="media">
<p class="media-content is-size-6">
<a href="https://www.facebook.com/B"><span class="icon is-medium"><i class="fab fa-facebook-f" aria-hidden="true"></i></span></a>
<a href=""><span class="icon is-medium"><i class="fab fa-twitter" aria-hidden="true"></i></span></a>
<a href=""><span class="icon is-medium"><i class="fab fa-youtube" aria-hidden="true"></i></span></a>
<a href=""><span class="icon is-medium"><i class="fab fa-instagram" aria-hidden="true"></i></span></a>
<a href=""><span class="icon is-medium"><i class="fas fa-map-marked-alt"></i></span></a>
</p>
</div>
</div>
</div>
<!-- Formulaire de contact -->
<div class="column is-6">
<?php echo do_shortcode ('[contact-form-7 title="Formulaire-emandarine"]'); ?>
</div>
</div>
<!-- Copyright -->
<p class="has-text-centered">
<?php echo date('Y'); ?> Copyright
<?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>
</p>
</div>
<!-- crédit -->
<div class="credit onepage">
<div class="columns is-centered">
<a href="http://www.emandarine.com/" title="Agence Marketing Digital & Web emandarine">
<article class="media">
<figure class="media-left">
<img src="<?php echo get_template_directory_uri(); ?>/css/img/logo-ariya.svg" alt="logo Ariya">
</figure>
<div class="media-content">
<div class="content is-size-7">
<p>Création web : ariya by emandarine</p>
<p>Stratégie webmarketing : emandarine</p>
</div>
</div>
<figure class="media-right">
<img src="<?php echo get_template_directory_uri(); ?>/css/img/logo-emandarine.svg" alt="logo emandarine">
</figure>
</article>
</a>
</div>
</div>
</div>
</div>
</section>
</div>
<footer>
<!-- SCROLL TO TOP -->
<a href="#top" id="smoothup" title="Top"><i class="fas fa-arrow-up"></i></a>
<!-- JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- SLICK CAROUSEL -->
<script src="<?php bloginfo('template_url'); ?>/js/slick.min.js"></script>
<!-- FONT AWESOME -->
<script src="https://kit.fontawesome.com/a5274d07c7.js"></script>
<!-- GOOGLE ANALYTICS -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', '<?php echo get_option('analytics'); ?>', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- FICHIER JS PRINCIPAL -->
<script src="<?php bloginfo('template_url'); ?>/js.js"></script>
<!-- VIEW SCROLLER -->
<script src="<?php bloginfo('template_url'); ?>/js/jquery.easing.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.mousewheel.min.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/viewScroller.min.js"></script>
<script>
$(document).ready(function() {
if (window.matchMedia("(min-width: 1088px)").matches) {
// Sets viewScroller
$('.mainbag').viewScroller({
useScrollbar: false,
changeWhenAnim: false
});
} else {}
});
</script>
<?php wp_footer(); ?>
</footer>
</body>
</html>
CSS :
/*! * ================================================= * viewScroller * Version: 2.1.1 * Copyright (c) 2016 Marcin Gierczak * http://www.viewdesic.com * ================================================= */
.mainbag,html{
overflow-y:hidden
}
body,html{
margin:0;
height:100%
}
html{
overflow-x:hidden
}
.vs-center-wrap{
display:table;
width:100%;
height:100%
}
.vs-center{
display:table-cell;
vertical-align:middle;
text-align:center
}
.mainview,.subview{
position:relative;
height:100%;
width:100%;
vertical-align:bottom
}
.mainbag{
position:relative;
height:100%;
width:100%
}
.mainview{
font-size:16px;
white-space:normal
}
.subbag{
overflow:hidden;
height:100%;
white-space:nowrap;
font-size:0
}
.subview{
display:inline-block;
font-size:16px;
white-space:normal
}