index.jade

extends layouts/default.jade
block content
  .row(style="height:50px;")
  .row.text-center.animated.fadeInUp
    h1
      b Tirado's Ultimate Front-End Starter Project
    h3 for modern web development
    b Powered By:
    p Jade / Sass / Foundation 6.2 / Motion Ui / Owl Slider / FontAwesome / Animate.css / Matthew Wagerfield's Parallax.js / Pixelcog's Parallax.js / Wow.js / scrollSpeed.js
  .row(style="height:20px;").animated.fadeInUp
    .hcenter.vcenter and <i class="fa-2x fa fa-heart animated pulse infinite" style="color:tomato;"></i> by Eric Tirado
  .row(style="height:40px;")
  hr  
  .row(style="height:50px;")
  
  .row
    ul.menu.expanded.text-center.toggles
      li
        a(href="https://github.com/iamtirado/foundation6-jade-sass-plus")
          button.button.success
            <i class="fa fa-github"></i>
            | Download 
            b .sass 
            | Version
            //- Add modals in the partial/modals.jade file
      li
        a(href="https://github.com/iamtirado/foundation6-jade-scss-plus")
          button.button.success
            <i class="fa fa-github"></i>
            | Download 
            b .scss 
            | Version
            //- Add modals in the partial/modals.jade file
      li
        button.button(data-toggle='animatedModal10')
          | Modal Reveal Toggle
          //- Add modals in the partial/modals.jade file	
      li
        button.button(data-toggle="motion-toggle" )
          | Motion Ui Toggle
    .small-12.small-centered
      #main
        section#motion-toggle(style='background-color: #f1c40f;' data-toggler data-animate="fade-in fade-out")
  .row
    hr
    h2.wow.fadeInLeft(data-wow-duration='2s' )
      button(type='button', data-toggle='offCanvas')
        a
          i.fa.fa-chevron-left 
           | Offcanvas Ready
    hr
  .row
    
    h2.wow.fadeInLeft(data-wow-duration='2s' data-wow-delay='.2s')
      i.fa.fa-arrows-h 
        | Owl Slider 
    .owl-carousel
      div
        img(src="http://placehold.it/1200x300")
      div
        img(src="http://placehold.it/1200x300")
      div
        img(src="http://placehold.it/1200x300")
      div
        img(src="http://placehold.it/1200x300")
      div
        img(src="http://placehold.it/1200x300")
      div
        img(src="http://placehold.it/1200x300")
      div
        img(src="http://placehold.it/1200x300")
      div
        img(src="http://placehold.it/1200x300")
    p
    p Go to <a href="#">js/app.js</a> in folder directory to manage options
    p visit <a href="http://www.owlcarousel.owlgraphic.com/docs/api-options.html" target="_blank">OwlSlider</a> to see list of options.
  .row
    hr
    h2.wow.fadeInLeft(data-wow-duration='2s' data-wow-delay='.4s')
      i.fa.fa-check 
        | Font-awesome
    p
      i.fa.fa-link 
        | Visit <a href="https://fortawesome.github.io/Font-Awesome/cheatsheet/" target="_blank">FontAwesome</a> to find class for icons.

   
  .row
    hr
    h2.wow.fadeInLeft(data-wow-duration='2s')
      i.fa.fa-rocket 
       | Parallax.js
    p Move the mouse and see the magic
    #container.container
      ul#scene.scene.border.fill.small-12
        li.layer.expand-width(data-depth='1.00' style="height:500px; width: 100%;")
          img(src='http://placehold.it/500x500' style="display: block; margin:0 auto; border: solid 5px #eee;")
        li.layer.expand-width(data-depth='0.80' style="height:500px; width: 100%;")
          img(src='http://placehold.it/450x450'  style="display: block; margin:25px auto 0; border: solid 5px #eee;")
        li.layer.expand-width(data-depth='0.60' style="height:500px; width: 100%;")
          img(src='http://placehold.it/400x400'  style="display: block; margin:50px auto 0; border: solid 5px #eee;")
            
  

  .row(style="height:100px;")
  hr
  .row
    .small-12.small-centered
      h2.wow.fadeInRight(data-wow-duration='2s')
        i.fa.fa-heart
          |  WOW.js  
      p Scroll-Initiated Intro Animations
    .small-6.small-centered
      #main
        section.wow.fadeInDown(style='background-color: #f1c40f;')
        section.wow.pulse(style='background-color: #e74c3c;', data-wow-iteration='infinite', data-wow-duration='1500ms')
        section.section--purple.wow.slideInRight(data-wow-delay='1s')
        section.section--blue.wow.bounceInLeft(data-wow-offset='300')
        section.section--green.wow.slideInLeft(data-wow-duration='4s')
        button#moar.button.large
          b LOAD MORE!!!
  .row(style="height:200px;")