index.pug

extends ./base

block append head
  - var current = "Cuento";
  title #{sitename} - Sergio Forés
  meta(name="description" content="Sergio Forés, arte, desarrollo web y conciencia holistica")

block pageheader
  main(title="covertitle")
    h1 !{page_index.titulo}
  header(title="sintesis")
    h2 !{page_index.subtitulo}
  aside(title="coverimg" class=(`${sitenav.name == current}`) ? `bgCover bgCover--special` : `bgCover` style='background-image: url('+`${baseUrl + page_index.galeria3[2]}`+');')
  //- a(href=link.url)= `${link.name}`
  //- img(src=`${baseUrl + page_index.galeria3[2]}` alt='Cover image')

block content
  article.grid-12.grid-md-6
    .slider--container
      .slider1.card
        h3 !{page_index.headings[0]}
        ul
          each frase in page_index.frases1
            li= `${frase}`

      .slider1.card
        h3 !{page_index.headings[5]}
        ul 
          each frase in page_index.frases2
            li= `${frase}`

      .slider1.card
        h3 !{page_index.headings[4]}
        ul 
          each frase in page_index.frases3
            li= `${frase}`

      .slider1.card
        h3 !{page_index.headings[3]}
        ul 
          each frase in page_index.frases4
            li= `${frase}`

      button.prev(onclick='plusDivs(-1, 0)') ❮
      button.next(onclick='plusDivs(1, 0)') ❯

  article.grid-12.grid-md-6
    .slider--container
      each imgUrl in page_index.galeria2
        .slider2.bgImg(style='background-image: url('+`${baseUrl + imgUrl}`+');')
      button.prev(onclick='plusDivs(-1, 1)') ❮
      button.next(onclick=`plusDivs(1, 1)`) ❯

  article.grid-12.grid-md-6.placeself
    .card
      h3 !{page_index.headings[2]}
      ul 
        each frase in page_index.frases5
          li= `${frase}`

  article.grid-12.grid-md-6
    .slider--container
      each imgUrl in page_index.galeria1
        .slider4.bgImg(style='background-image: url('+`${baseUrl + imgUrl}`+');')
      button.prev(onclick='plusDivs(-1, 3)') ❮
      button.next(onclick='plusDivs(1, 3)') ❯

  article.grid-12.grid-md-6
    .slider--container
      .slider5.card
        h3 !{page_index.headings[6]}
        ul 
          each frase in page_index.frases6
            li= `${frase}`
      .slider5.card
        h3 #{page_index.headings[1]}
        ul 
          each frase in page_index.frases7
            li= `${frase}`
      .slider5.card
        h3 #{page_index.headings[7]}
      .slider5.card
        h3 #{page_index.headings[8]}
      .slider5.card
        h3 #{page_index.headings[9]}
      button.prev(onclick='plusDivs(-1, 4)') ❮
      button.next(onclick='plusDivs(1, 4)') ❯
  
  article.grid-12.grid-md-6
    .slider--container
      each imgUrl in page_index.galeria3
        .slider6.bgImg(style='background-image: url('+`${baseUrl + imgUrl}`+');')
      button.prev(onclick='plusDivs(-1, 5)') ❮
      button.next(onclick='plusDivs(1, 5)') ❯

  article.grid-12
    .slider--container.jcc
      .slider3
        iframe(width='560' height='315' src='https://www.youtube-nocookie.com/embed/OU24gZs1urE?si=SqS0U9ILq7HFB511' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen='')
        //- video#video1(poster='./assets/img/bg1.jpg' controls='false' loop='true')
        //-   source(src='./assets/img/introweb.mp4' type='video/mp4')
        //-   | Your browser does not support the video tag. 
      .slider3
        iframe(width='560' height='315' src='https://www.youtube-nocookie.com/embed/hE3STRkMpBY?si=YfepWtsbW-dsk9j3' title='YouTube video player' frameborder='0' allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share' allowfullscreen='')
      button.prev(onclick='plusDivs(-1, 2)') ❮
      button.next(onclick='plusDivs(1, 2)') ❯

block foot

block append scripts
  script( type="module" src="./js/slider.js")
  //- script(type="module" src="/js/main.js")