Template de site
Helios
Helios é um template de site HTML5 e CSS3 gratuito e totalmente responsivo do HTML5 UP.
Site · 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, contraste claro/escuro
- Paleta
fundo #fafbfd; superfícies [#dee0e3, #373d49, #e7746f, #676d79]; texto #676d79; texto suavizado #ffffff; primário #e7746f; acentos []
- Tipografia
títulos Source Sans Pro, 600, caixa de frase; corpo Source Sans Pro, 22px; escala h1 16px, h2 35px, h3 22px
- Forma e espaçamento
raio do botão 4px, sem bordas, sombras suaves, espaçamento entre seções 80px, largura do conteúdo 100% full-bleed
- Seções (de cima para baixo)
- Cabeçalho — barra de navegação horizontal com abas (Desktop, Tablet etc.), fundo cinza escuro, texto branco, posição fixa
- Hero — imagem arquitetônica em tons de cinza desfocada em largura total, título branco centralizado "Helios", subtítulo em texto branco menor abaixo, botão circular coral "Start" abaixo, separador horizontal fino
- Detalhes marcantes
- Hero full-bleed com imagens arquitetônicas desfocadas
- Botão CTA primário circular com sombra suave
- Layout vertical centralizado com amplo espaço negativo
- Cabeçalho escuro com texto claro e indicadores sutis de abas
- Hierarquia tipográfica minimalista usando família sans-serif consistente
- Outras páginas
- /dropdown: demonstração de menu suspenso
- /left-sidebar: layout com barra lateral alinhada à esquerda
- /right-sidebar: layout com barra lateral alinhada à direita
- /no-sidebar: conteúdo em largura total sem barras laterais
Detalhes do template
- Categoria
- Site
- Feito com
- HTML5
- Licença
- CC-BY-3.0
- Autor
- HTML5 UP
- Publicado em
- HTML5 UP
- Preço
- Grátis
- HTML5
- Responsive
Design original de HTML5 UP, publicado no HTML5 UP. 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 inspirado no template "Helios". Briefing de referência: Helios é um template de site HTML5 e CSS3 gratuito e totalmente responsivo do HTML5 UP. Estilo e recursos a refletir: HTML5, Responsivo. Use textos e imagens originais para 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.
