Esse projeto foi desenvolvido com o Framework Bootstrap em um dos módulos da Formação CSS Web Developer da DIO. Ele possui elementos disponibilizados pelo Framework.
Foram utilizadas linguagens que são as tecnologias fundamentais para a construção de páginas da Web modernas e responsivas, permitindo que desenvolvedores criem interfaces atraentes e funcionais para usuários em uma ampla variedade de dispositivos e plataformas. São elas:
HTML
- Linguagem de marcação para definir a estrutura básica de uma página da Web, incluindo títulos, parágrafos, links, imagens e outros elementos visuais e interativos.CSS
- Linguagem de estilização para criar a aparência visual de uma página da Web, controlar o estilo, o layout, a tipografia, entre outros elementos de uma página, permitindo que as páginas sejam apresentadas de maneira mais atraente e coerente, além de disponibilizar recursos que tornam a página responsiva.
Além disso, foi utilizado um Framework a fim de criar rapidamente interfaces de usuário responsivas e consistentes, sem precisar escrever todo o código do zero:
Bootstrap
- é um framework de código aberto para desenvolvimento front-end de sites e aplicações web. Ele inclui uma série de ferramentas e recursos, como bibliotecas CSS e JavaScript, que tem alguns benefícios, dentre eles, responsividade, consistência, rápida personalização e uma grande comunidade de usuários.
O site foi composto pelos seguintes recursos disponibilizados pelo Framework:
Navbar
- Recurso para a criação de um menu de navegação responsivo e fizado no topo da página.Carousel
- Recurso para a criação do carrossel de imagens, que contém três imagens e frases sobre o serviço da empresa.Blockquotes
- Recurso para demonstrar uma citação com autor.Grid
- Recurso para a criação de Layout em grade na seção de cards sobre a empresa.Cards
- Recurso para a criação de cards sobre a empresa e para o menu de cardápio.Nav and tabs
- Recurso para a criação da navegação do cardápio, em formato de abas.Modal
- Recurso para a criação de uma janela que é aberta, ao clicar em um botão, e se sobrepõe ao conteúdo site para mostrar endereço da empresa, juntamente com um iframe do Google Maps do local onde está situada.
Por último foi criado o Rodapé com nome e telefone da empresa, porém foram utilizadas apenas classes de formatação oferecidas pelo Bootstrap.
Vale ressaltar que ao longo do projeto também foram utilizados alguns recursos que o Framework possui como recursos de: margem
, espaçamento
, alinhamento
e cores
. Além de estilização personalizada, que o framework não oferece, para melhorar a visibilidade das frases no carrossel.