Template de site
TailBliss
TailBliss é um Hugo Starter com Tailwind CSS 4.1 e Alpine.js com modos claro e escuro. Enviado para o Hacktoberfest 2022.
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
página de destino, moderna, minimalista, clara/escura
- Paleta
fundo #f9fafb; superfícies [#e5e7eb, #615fff, #101828, #030712]; texto #101828; texto suavizado #6a7282; primário #615fff; destaques [#615fff]
- Tipografia
títulos ui-sans-serif, 800, caixa de frase; corpo ui-sans-serif, 16px; escala h1 60px / h2 36px / h3 24px
- Forma e espaçamento
raio de botões/cartões 6px, sem bordas, sombras sutis, espaçamento entre seções 80px, largura do conteúdo 1248px
- Seções (de cima para baixo)
- Cabeçalho — navegação fixa preta com texto branco, logotipo à esquerda, itens de menu à direita, alternador de modo escuro
- Hero — layout em duas colunas, lado esquerdo com título "TailBliss", subtítulo, selos e descrição; lado direito com cartão arredondado contendo ilustração de foguete e frase de marca em gradiente roxo
- Missão — seção em largura total com imagem de astronauta à esquerda, texto da missão em três parágrafos à direita, ambos os lados alinhados com sobreposição de padrão de pontos
- Bloco de recursos — título centralizado "Just in time for Hacktoberfest with JIT Tailwind" acima do texto em parágrafo, seguido por "Backed by world-renowned investors" com link
- Pré-visualização de blog — fundo cinza, título "From the blog" em roxo, três cartões de largura igual com títulos, trechos, tags, datas e metadados
- Newsletter — cartão centralizado com gradiente azul contendo título "Stay Up to Date", campo de entrada e botão "Notify me"
- Rodapé — fundo azul-marinho escuro, links centralizados, ícones sociais, linha de direitos autorais com emoji de coração
- Detalhes marcantes
- Cartão hero com gradiente roxo e ilustração de foguete
- Sobreposição de padrão de pontos atrás dos blocos de texto
- Cantos arredondados em todos os cartões e botões
- Uso consistente do destaque roxo (#615fff) para títulos e CTAs
- Efeito de sombra flutuante no cartão de newsletter
- Tipografia minimalista com títulos em negrito e espaçamento limpo
- Outras páginas
- /about: breve visão geral da empresa com foto da equipe
- /blog: lista de publicações com imagem em destaque, título, trecho e data
- /contact: formulário com campos de nome, e-mail, mensagem e botão de envio
Detalhes do template
- Categoria
- Portfólio, Blog, Agência, Kit inicial
- Feito com
- Hugo
- Licença
- Apache-2.0
- Autor
- Jeremy Nusser
- Publicado em
- Hugo Themes
- Preço
- Grátis
- blog
- company
- dark
- gallery
- light
- minimal
- personal
- portfolio
- tailwind
Design original de Jeremy Nusser, 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.
Construa um site de portfólio inspirado no template "TailBliss". Brief de referência: TailBliss é um Hugo Starter com Tailwind CSS 4.1 e Alpine.js com modos claro e escuro. Enviado para o Hacktoberfest 2022. Estilos e funcionalidades a refletir: blog, empresa, escuro, galeria, claro, minimalista. Use textos e imagens originais da minha marca em vez do conteúdo place holder do 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.
