Template de site
Simple Sidebar
Um modelo HTML Bootstrap com navegação por barra lateral fora da tela, criado pela Start Bootstrap
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
dashboard, limpo, baixa densidade, claro
- Paleta
fundo #ffffff; superfícies [#0d6efd]; texto #212529; texto suavizado #636464; primário #0d6efd; destaques [#d63384]
- Tipografia
títulos system-ui, 500, caixa-sentença; corpo system-ui, 16px; escala h1 40px
- Forma e espaçamento
raio do botão 6px, sem bordas, sem sombras, espaçamento entre seções 24px, largura do conteúdo 100% (móvel)
- Seções (de cima para baixo)
- Barra de navegação superior — layout horizontal, 3 itens alinhados à direita (Início, Link, Dropdown), botão azul de alternância alinhado à esquerda, fundo branco, borda superior fina
- Barra lateral — navegação vertical à esquerda, largura fixa, fundo cinza-claro, itens da lista empilhados com borda inferior de 1px, texto escuro, estado de passagem do mouse não visível
- Conteúdo principal — área de largura total com título grande, texto de parágrafo e trechos de código embutidos em roxo, fundo branco, alinhado à direita da barra lateral
- Detalhes marcantes
- Botão azul "Alternar Menu" com cantos arredondados
- Destaque sintático roxo para código embutido (#page-content-wrapper, #sidebarToggle)
- Comportamento de barra lateral recolhível indicado pelo design responsivo
- Layout minimalista com amplo espaço em branco
- Barra lateral com posição fixa e invólucro de conteúdo sem sobreposição
- Pilha de fontes System UI em todos os elementos
- Outras páginas
- /dashboard: mesma estrutura, conteúdo diferente
- /shortcuts: mesma estrutura, conteúdo diferente
- /overview: mesma estrutura, conteúdo diferente
- /events: mesma estrutura, conteúdo diferente
- /profile: mesma estrutura, conteúdo diferente
- /status: mesma estrutura, conteúdo diferente
Detalhes do template
- Categoria
- Site
- Feito com
- Bootstrap, HTML5
- Licença
- MIT
- Autor
- Start Bootstrap
- Publicado em
- Start Bootstrap
- Preço
- Grátis
- bootstrap
- bootstrap-4
- bootstrap-5
- bootstrap-5-template
- bootstrap-template
- bootstrap-theme
- bootstrap4
- bootstrap5
- bootstrap5-template
- css
- free
- html
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.
Crie um site inspirado no modelo "Simple Sidebar". Brief de referência: Um modelo HTML Bootstrap com navegação por barra lateral fora da tela, criado pela Start Bootstrap Estilos e recursos a refletir: bootstrap, bootstrap-4, bootstrap-5, bootstrap-5-template, bootstrap-template, bootstrap-theme. Utilize textos e imagens originais da minha marca em vez do conteúdo placeholder 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.
