Nuxt 4 base project
Híbrido.
Parallax encontra Grid — um arquivo markdown por idioma, todo o design na folha de estilo da página.
Role
01 — Grid dentro do parallax
Coluna Esquerda
Este conteúdo está dentro de um GridCell com size="6,4" — 6 colunas no desktop, 4 no mobile. O sistema de grid lida com o dimensionamento responsivo automaticamente.
Coluna Direita
Ambas as colunas estão dentro de um GridContainer, que também é um bloco MDC. O gutter e a centralização vêm dos mixins de grid — sem CSS customizado.
Sobre a autoria
Layout de grid e efeitos parallax em um único arquivo, escrito inteiramente em markdown.
— Este Arquivo Markdown
02 — Scroll horizontal
Painel de Duas Colunas
Esta é uma seção parallax que rola horizontalmente — e seu conteúdo respeita o sistema de grid. A prop wide remove a restrição de largura máxima.
Grid Dentro do Parallax
Cada coluna se alinha ao mesmo grid do restante da página. Redimensione a janela para ver o comportamento responsivo dentro do scroll horizontal.
04 — #background panorâmico · 01 / 03
O fundo desliza
Slide 1 — conteúdo na coluna esquerda sobre o fundo que pana.
04 — #background panorâmico · 02 / 03
O grid continua valendo
Slide 2 — coluna direita; o panorama continua deslizando por trás do texto.
04 — #background panorâmico · 03 / 03
Um vídeo, três slides
Slide 3 — bloco centralizado quando o panorama alcança a borda direita.
Fim
É isso
Seções parallax com layouts de grid, scroll horizontal e citações — tudo escrito em um único arquivo markdown por idioma.