Template de site
Beautiful Hugo
Uma adaptação do tema Beautiful Jekyll
Portfólio · Blog · Grátis
Páginas
Capturas da demonstração, página por página. Role dentro de cada página para vê-la inteira.
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
blog, limpo e minimalista, baixa densidade, claro
- Paleta
fundo #ffffff; superfícies [#f5f5f5]; texto #404040; texto suavizado #808080; primário #2a6ea1; acentos []
- Tipografia
títulos Open Sans, 800, caixa de título; corpo Lora, 18px; escala h1 80px / h2 30px / h3 24px
- Forma e espaçamento
raio do cartão 4px, sem bordas, sombra rgba(0,0,0,0.05) 0px 1px 1px 0px interna, espaçamento entre seções 40px, largura do conteúdo 750px
- Seções (de cima para baixo)
- Cabeçalho — barra superior fixa com logotipo centralizado, links de navegação alinhados à direita, fundo branco
- Hero — título centralizado grande com subtítulo, banner de imagem em largura total opcional acima do conteúdo
- Conteúdo — lista vertical de postagens, cada uma com título, subtítulo, linha de metadados (data/hora/palavras/autor), trecho, tags e link [Leia mais]; os cartões têm preenchimento sutil e borda inferior cinza-clara
- Rodapé — duas linhas de ícones sociais circulares (cinza-escuro sobre cinza-claro), crédito do autor e informações sobre o tema centralizados
- Detalhes marcantes
- Grade de ícones sociais circulares no rodapé com espaçamento consistente e preenchimento escuro
- Sombra interna sutil nos cartões para profundidade
- Blocos de código monoespaçados com realce de sintaxe
- Banners de cabeçalho "bigimg" rotativos com legenda sobreposta
- Emparelhamento tipográfico minimalista com corpo serifado e títulos sem serifa
- Uso consistente de divisórias cinza-claro entre seções
- Outras páginas
- /post/2017-03-07-bigimg-sample: banner de imagem em largura total rotativo, exemplos de código YAML, renderização de fórmulas matemáticas embutidas, botões de compartilhamento social
- /page/about/: título centralizado com sublinhado, lista com marcadores, link embutido, ícones sociais menores acima do rodapé
Detalhes do template
- Categoria
- Portfólio, Blog, Agência, Kit inicial
- Feito com
- Hugo
- Licença
- MIT
- Autor
- halogenica
- Publicado em
- Hugo Themes
- Preço
- Grátis
- blog
- bootstrap
- company
- light
- minimal
- multilingual
- portfolio
Design original de halogenica, publicado no Hugo Themes. 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.
Crie um site de portfólio inspirado no template "Beautiful Hugo". Briefing de referência: Uma adaptação do tema Beautiful Jekyll Estilo e recursos a refletir: blog, bootstrap, empresa, leve, minimalista, multilíngue. Use copy e imagens originais da minha marca em vez do conteúdo placeholder da referência.
Como usar este template
- 1
Clique em “Usar este template” para abri-lo no Ottermind Studio com o briefing preenchido.
- 2
Acrescente ao briefing sua marca, público, páginas e conteúdo.
- 3
O Ottermind cria um site novo inspirado neste design — continue ajustando pelo chat.
