Biblia | Antigo Testamento

Projeto front-end estatico feito com HTML, SCSS e JavaScript. A pagina apresenta somente os livros do Antigo Testamento, organizados por blocos literarios e com filtros interativos.

Tecnologias

• HTML5 para a estrutura da pagina.
• SCSS para a organizacao dos estilos.
• CSS compilado em style.css para abrir direto no navegador.
• JavaScript puro para renderizar e filtrar os livros.

Organizacao BEM

O projeto usa a metodologia BEM para deixar as classes mais claras e organizadas.

• Bloco: componente principal, exemplo hero, book-grid, filters.
• Elemento: parte interna do bloco, exemplo hero__title, book-grid__card, filters__button.
• Modificador: variacao de estado ou estilo, exemplo filters__button--active.

Blocos Da Pagina

• site-header: cabecalho fixo com navegacao.
• hero: area principal de apresentacao.
• summary: resumo com quantidade de livros, blocos e capitulos.
• testament: secao com os livros do Antigo Testamento.
• filters: botoes para filtrar os livros por bloco.
• book-grid: grade de cards criada pelo JavaScript.
• groups: explicacao dos blocos literarios.
• verse: versiculo em destaque.
• site-footer: rodape do projeto.

Blocos Do Antigo Testamento

• Pentateuco: Genesis, Exodo, Levitico, Numeros e Deuteronomio.
• Historicos: Josue ate Ester.
• Poeticos: Jo ate Canticos.
• Profetas Maiores: Isaias ate Daniel.
• Profetas Menores: Oseias ate Malaquias.

Como Executar

Abra o arquivo index.html no navegador. Nao e necessario instalar dependencias.

Se quiser editar os estilos, altere o arquivo style.scss e depois compile para style.css usando uma ferramenta Sass.

Exemplo:

sass style.scss style.css

Arquivos

• index.html: estrutura semantica da pagina.
• style.scss: estilos organizados em SCSS com BEM.
• style.css: CSS final usado pelo navegador.
• script.js: dados dos livros e filtros interativos.
• biblia.jpeg e pexels-eva-bronzini-7599717.jpg: imagens usadas no layout.