
    <?php 
/* 
Template Name: Page Parallax 2 
*/ 
?> 
 
<?php include('head.php') ; ?> 
 
<style> 
 
html { 
  height: 100%; 
  overflow: hidden; 
} 
 
body {  
  margin:0; 
  padding:0; 
  perspective: 1px; 
  transform-style: preserve-3d; 
  height: 100%; 
  overflow-y: scroll; 
  overflow-x: hidden; 
} 
 
 
.slide { 
  position: relative; 
  width: 100vw; 
  min-height: 45vw; 
  box-sizing: border-box; 
  box-shadow: 0 -1px 10px rgba(0, 0, 0, .7); 
  transform-style: inherit; 
} 
 
 
.slide:before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, .7); 
} 
 
 
.slide:nth-child(2n) .title { 
  margin-left: 0; 
  margin-right: auto; 
} 
 
.slide:nth-child(2n+1) .title { 
  margin-left: auto; 
  margin-right: 0; 
} 
 
.slide, .slide:before { 
  background: 50% 50% / cover;   
} 
 
#title { 
  background-color: white; 
  z-index:2; 
} 
 
#slide1:before { 
  background-image: url("<?php echo get_template_directory_uri(); ?>/css/img/random/ran2.jpg"); 
  transform: translateZ(-1px) scale(2); 
} 
 
#slide2 { 
  background-color: gray; 
  z-index:2; 
} 
 
#slide3:before { 
  background-image: url("<?php echo get_template_directory_uri(); ?>/css/img/random/ran1.jpg"); 
  transform: translateZ(-1px) scale(2); 
} 
 
#slide4 { 
  background: #222; 
} 

.slideFooter {
    position: relative;
    width: 100vw;
    min-height: 25vw;
    box-sizing: border-box;
    box-shadow: 0 -1px 10px rgba(0, 0, 0, .7);
    transform-style: inherit;
}
</style> 
 
<body <?php body_class(); ?>> 
 
<?php include('menu-top.php') ; ?> 
 
<div id="title" class="slide header"> 
 
    <section class="section"> 
    <div class="container has-text-centered"> 
        <h2 class="title">PiperNet Setup</h2> 
        <div class="columns is-multiline is-centered"> 
        <div class="column is-8 is-4-widescreen"> 
            <div class="block"><img src="https://bulma.dev/placeholder/pictures/bg_16-9.svg?primary=00d1b2" alt=""> 
            </div> 
            <h4 class="title"><small class="number">1</small> Move Data</h4> 
            <p>Using our Piper Assistant application, you can move your data to be stored our decentralized network with 
            simple drag & drop.</p> 
        </div> 
        <div class="column is-8 is-4-widescreen"> 
            <div class="block"><img src="https://bulma.dev/placeholder/pictures/bg_16-9.svg?primary=00d1b2" alt=""> 
            </div> 
            <h4 class="title"><small class="number">2</small> Integrate Software</h4> 
            <p>We want to make sure that you can keep using the software that you use to manage your business.</p> 
        </div> 
        <div class="column is-8 is-4-widescreen"> 
            <div class="block"><img src="https://bulma.dev/placeholder/pictures/bg_16-9.svg?primary=00d1b2" alt=""> 
            </div> 
            <h4 class="title"><small class="number">3</small> Ongoing Support</h4> 
            <p>As with all innovative technologies, sometimes unpredictable things will happen, and you can always count 
            on our support to solve issues for&nbsp;you.</p> 
        </div> 
        </div> 
        <div class="buttons is-centered"><a class="button is-primary" href="">Learn more</a></div> 
    </div> 
    </section> 
</div>
 
<div id="slide1" class="slide section"> 
 
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>	 
        <div class="content has-text-centered is-medium"> 
            <h1 class="title is-1"><?php the_title(); ?><?php edit_post_link(' &#9998;'); ?></h1>					 
            <?php the_content();?> 
        </div><!-- Texte --> 
    <?php endwhile;?> 
    <?php else: ?> 
        <div class="column is-8 is-offset-2"> 
            <h2><?php _e( 'Sorry, nothing to display.', 'emandarine' ); ?></h2> 
        </div> 
    <?php endif;?> 
</div> 
 
<div id="slide2" class="slide"> 
    <section class="section"> 
      <div class="container"> 
        <h2 class="title has-text-centered">PiperNet Setup</h2> 
        <div class="columns is-vcentered"> 
          <div class="column"> 
            <h2 class="title is-spaced">How to start</h2> 
            <p class="subtitle">Let's get you connected! We've designed a simple, efficient process for companies 
              migrating to PiperNet. Here's how it works.</p><a class="button is-primary" href="#">Start Setup!</a> 
          </div> 
          <div class="column"><img src="https://bulma.dev/placeholder/pictures/bg_16-9.svg?primary=00d1b2" alt=""></div> 
        </div> 
        <hr> 
        <div class="level"> 
          <div class="level-item"> 
            <div class="number has-background-primary">1</div> 
            <h4 class="title is-4">Move</h4> 
          </div> 
          <div class="level-item"> 
            <div class="number">2</div> 
            <h4 class="title is-4">Integrate</h4> 
          </div> 
          <div class="level-item"> 
            <div class="number">3</div> 
            <h4 class="title is-4">Support</h4> 
          </div> 
        </div> 
      </div> 
    </section> 
</div> 
 
<div id="slide3" class="slide"> 
    <section class="section"> 
      <div class="container has-text-centered"> 
        <h2 class="title is-spaced">PiperNet Setup</h2> 
        <div class="columns is-multiline"> 
          <div class="column is-6 is-3-widescreen"> 
            <div class="block"><img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></div> 
            <div class="block"> 
              <div class="number has-background-primary" style="margin-right: 0">1</div> 
            </div> 
            <h4 class="title is-4">Move Data</h4> 
            <p>Using our Piper Assistant application, you can move your data to be stored our decentralized network with 
              simple drag & drop.</p> 
          </div> 
          <div class="column is-6 is-3-widescreen"> 
            <div class="block"><img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></div> 
            <div class="block"> 
              <div class="number has-background-primary" style="margin-right: 0">2</div> 
            </div> 
            <h4 class="title is-4">Integrate Software</h4> 
            <p>We want to make sure that you can keep using the software that you use to manage your business.</p> 
          </div> 
          <div class="column is-6 is-3-widescreen"> 
            <div class="block"><img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></div> 
            <div class="block"> 
              <div class="number has-background-primary" style="margin-right: 0">3</div> 
            </div> 
            <h4 class="title is-4">Ongoing Support</h4> 
            <p>As with all innovative technologies, sometimes unpredictable things will happen, and you can always count 
              on our support to solve issues for you.</p> 
          </div> 
          <div class="column is-6 is-3-widescreen"> 
            <div class="block"><img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg?primary=00d1b2" alt=""></div> 
            <div class="block"> 
              <div class="number has-background-primary" style="margin-right: 0">4</div> 
            </div> 
            <h4 class="title is-4">Move Data</h4> 
            <p>Using our Piper Assistant application, you can move your data to be stored our decentralized network with 
              simple drag & drop.</p> 
          </div> 
        </div> 
      </div> 
    </section> 
</div> 
 
<div id="slide4" class="slide header"> 
    <?php include('footer.php') ; ?> 
</div>