Série da semana: Angular, API RESTful e Banco de Dados

Veja mais
O projeto está inativo

Hotsite com Bootstrap e jQuery

Crie um layout de um hotsite no modelo One Page (uma única página) utilizando HTML, CSS, Bootstrap e jQuery, além do iframe do Google Maps.

Como criar um Hotsite com Bootstrap e jQuery

Layout One Page com Bootstrap

Neste exemplo criaremos um Hotsite no layout One Page utilizando, além de HTML e CSS, os frameworks Bootstrap e jQuery. E ainda nesse exemplo iremos incorporar o iframe do Google Maps para exibir a nossa localização.

O layout One Page é um conceito de web design, que visa a exibição de todo o conteúdo do site em uma única página, removendo a necessidade de navegar entre múltiplas páginas, o que é excelente para sites de pequenos ou médio porte.

Esse modelo de layout difere do modelo Single Page, que também trabalha com uma única página, mas tem o seu conteúdo carregado dinamicamente, de acordo com a interação do usuário. No modelo One Page o conteúdo completo do site já está disponível desde o carregamento da página.

Na criação do layout utilizaremos os seguintes componentes do Bootstrap:

  • Navbar;
  • Tabs;
  • List Group;
  • Thumbnail;
  • Input Group;
  • Modal.

Além dos plugins nativos do framework:

  • Affix;
  • ScrollSpy;
  • Tooltip.

O resultado final do nosso exemplo pode ser visto a seguir:

Hotsite Bootstrap

Sugestão de conteúdo

Se você quiser aprofundar os seus estudos, recomendamos os seguintes posts:

Links úteis:

Suporte ao aluno - Deixe a sua dúvida.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrado através do seu cartão de crédito. *Tempo minimo de assinatura: 12 meses.
Assinatura Devmedia
Faça parte dessa comunidade 100% focada em programação e tenha acesso ilimitado. Nosso compromisso é tornar a sua experiência de estudo cada vez mais dinâmica e eficiente. Portanto, se você quer programar de verdade seu lugar é aqui. Junte-se a mais de...
+ 800 Mil programadores
Conheça agora!
,90* / mês
  • Séries
  • Projetos completos
  • Cursos
  • Guias de carreiras
  • DevCasts
  • Desafios
  • Artigos
  • App
  • Suporte em tempo real
A assinatura é cobrada através do seu cartão de crédito. *Tempo mínimo de assinatura: 12 meses.