timeline
05/05/2020
Página com linha temporal

Você já deve ter visto sites com diferentes modelos básicos de exibição: três colunas, duas colunas, uma coluna e o responsivo (que muda de acordo com o tamanho do dispositivo). O uso de um desses modelos depende da aplicação para qual o site está sendo desenvolvido.

O modelo de página única, com apenas uma coluna, é muito utilizado para fazer páginas com linha temporal. Existem diversos exemplos que você pode pesquisar e utilizar, mas se quiser fazer o seu próprio modelo, o site w3schools tem um exemplo simples e excelente de como começar.

Caso queira uma linha temporal que use os elementos disponíveis no Materialize, você pode usar o modelo disponível no GitHub. E, é claro, ele é responsivo, ou seja, você vai conseguir acessar em seu navegador web e em seu Smartphone.

Versão web do modelo.
Versão móvel do modelo.

Foi usado como base para este projeto o seguinte exemplo.

Gostou das imagens usadas no exemplo? Você pode encontrar aqui. Caso queira ler mais sobre essa questão de responsividade, veja aqui.

Você pode mudar as cores usadas no modelo seguindo o padrão do Materialize ou, se quiser inspiração para outras cores legais, acesse o Colorinspo.

Veja o exemplo funcionando.