Projeto final do curso de Bootstrap da Origamid.
O site foi desenvolvido utilizando apenas componentes estilizados do framework Bootstrap, na sua versão 4.0.0. Os principais componentes usados foram:
A barra de navegação possui um menu que dá acesso aos locais de viagem, aos planos de pacote de viagem, à página de contatos, à página de inscrição e um modal para fazer login.
A página incial tem um carrossel com imagens dos locais de viagem e uma seção com os benefícios do pacote de viagem. Logo abaixo temos um acordeon de perguntas frequentes (FAQ - Frequently Asked Questions) e o rodapé do site, com alguns links de atalho.
Caso você seja um desenvolvedor, use as instruções abaixo para instalar as dependências e sugerir alterações para a aplicação.
É possível verificar o conteúdo estudado durante o curso, selecionando o histórico de commits.
Não é necessária a instalação de dependências de desenvolvimento para esse projeto, então você pode simplesmente abrir o seu editor de código (ex.: VSCode) e clonar o repositório.
git clone https://github.com/PedroPaivaDev/study-origamid-bootstrap
É recomendada a instalação da extensão live-server, para que a página seja recarregada a cada alteração feita no código.
A lista abaixo mostra o desenvolvimento do projeto ao longo do curso.
Aula | Conteúdo desenvolvido |
---|---|
aula 3.1 | Preparação do ambiente de desenvolvimento |
aula 3.2 | Início da barra de navegação |
aula 3.3 | Dropdown na opção "Local" da barra de navegação |
aula 3.4 | Container do carrossel |
aula 3.5 | Carrossel de imagens |
aula 3.6 | ìcones organizados pelo Bootstrap Grid |
aula 3.7 | Bloco de citação |
aula 3.8 | Accordion de perguntas frequentes |
aula 3.9 | Seção de contatos e rodapé da home |
aula 3.10 | Modal para efetuar Login |
aula 4.1 | Página do local Dublin |
aula 4.2 | Tabela de eventos na cidade |
aula 4.3 | Página de planos Gold e Platinum |
aula 4.4 | Página de contatos |
aula 4.5 | Início do formulário da página de inscrição |
aula 4.6 | Formulário de pagamento da página de inscrição |
aula 4.7 | Tooltip no plano Gold da página planos |