Template de site

Agency

Um tema HTML de uma página para agências criado pela Start Bootstrap

Landing page · Agência · Grátis

Agency

Páginas

Capturas da demonstração, página por página. Role dentro de cada página para vê-la inteira.

/startbootstrap-agency/Agency - Start Bootstrap Theme
Template de site Agency, página /startbootstrap-agency/, parte 1Template de site Agency, página /startbootstrap-agency/, parte 2Template de site Agency, página /startbootstrap-agency/, parte 3Template de site Agency, página /startbootstrap-agency/, parte 4

Análise do design

Uma leitura feita por IA do design deste template: cores, tipografia, espaçamento, seções e detalhes marcantes. O Ottermind parte dela quando você usa o template.

Visão geral

página de destino, profissional, densidade média, contraste claro/escuro

Paleta

fundo #ffffff; superfícies [#f8f9fa, #212529, #ffc800]; texto #212529; texto suavizado #6c757d; primário #ffc800; acentos []

Tipografia

títulos Montserrat, 700, maiúsculas; corpo Roboto Slab, 16px; escala h1/h2/h3: 40/40/16px

Forma e espaçamento

raio do botão 6px, raio do cartão 50px, sem bordas, sombras sutis nos cartões, espaçamento entre seções 80px, largura do conteúdo 1296px

Seções (de cima para baixo)
  • Hero — sobreposição escura em toda a largura sobre imagem de produto em plano aberto, título centralizado "IT'S NICE TO MEET YOU" em branco grande e maiúsculo, subtítulo em caixa de frase, botão CTA amarelo "TELL ME MORE", barra de navegação no topo com logotipo e links
  • Serviços — layout de três colunas em fundo branco, cada coluna possui um ícone circular amarelo (carrinho de compras, laptop, cadeado), título em negrito abaixo, parágrafo curto de texto fictício
  • Portfólio — grade de seis itens com imagens quadradas, títulos e categorias abaixo, fundos alternados branco e cinza-claro nas linhas
  • Sobre — linha do tempo vertical com imagens circulares alinhadas à direita, datas e títulos alinhados à esquerda, conectadas por uma linha vertical fina, finalizando com círculo amarelo de chamada para ação
  • Equipe — layout de três colunas com fotos de rosto circulares, nomes em negrito, funções em texto menor, ícones sociais abaixo de cada um
  • Clientes — linha horizontal de logotipos de marcas (Microsoft, Google, Facebook, IBM) em fundo cinza-claro
  • Contato — fundo escuro com padrão de mapa-múndi, formulário com três campos de entrada (nome, e-mail, telefone) e uma área de texto, botão amarelo "SEND MESSAGE", rodapé com direitos autorais, ícones sociais e links legais
Detalhes marcantes
  • Ícones circulares amarelos com símbolos em linha branca
  • Imagens de perfil circulares da equipe e da linha do tempo com sombra suave
  • Imagem hero em plano aberto com arranjo de produtos vistos de cima
  • Linha do tempo vertical com linha de conexão e círculo final de chamada para ação
  • Uso consistente do Roboto Slab para o corpo e do Montserrat para os títulos
  • Seção de contato em modo escuro com textura pixelada de mapa-múndi
Outras páginas
  • /services: não exibido
  • /portfolio: não exibido
  • /about: não exibido
  • /team: não exibido
  • /contact: não exibido

Detalhes do template

Categoria
Landing page, Agência
Feito com
Bootstrap, HTML5
Licença
MIT
Autor
Start Bootstrap
Publicado em
Start Bootstrap
Preço
Grátis
  • bootstrap
  • bootstrap-4
  • bootstrap-template
  • bootstrap-theme
  • bootstrap4
  • bootstrap5
  • bootstrap5-template
  • css
  • free
  • html
  • open-source
  • theme

Design original de Start Bootstrap, publicado no Start Bootstrap. O Ottermind não copia o código do template: ele cria um site novo a partir do briefing.

O briefing de onde o Ottermind parte

Ele abre no Studio como rascunho — acrescente sua marca, público e páginas antes de enviar.

Construa um site de landing page inspirado no template "Agency". Briefing de referência: Um tema HTML de uma página para agências criado pela Start Bootstrap Estilo e recursos a refletir: bootstrap, bootstrap-4, bootstrap-template, bootstrap-theme, bootstrap4, bootstrap5. Use textos e imagens originais para minha marca em vez do conteúdo de placeholder da referência.

Como usar este template

  1. 1

    Clique em “Usar este template” para abri-lo no Ottermind Studio com o briefing preenchido.

  2. 2

    Acrescente ao briefing sua marca, público, páginas e conteúdo.

  3. 3

    O Ottermind cria um site novo inspirado neste design — continue ajustando pelo chat.