EstruturaIniciante
Damas — duas fileiras corretas
Prévia das 16 primeiras casas com peças encaixadas nas casas escuras.
ACERVO REUTILIZÁVEL
Códigos prontos
Pesquise, visualize e adapte recursos para construir seus próprios projetos.
32recursos disponíveis
CHEGARAM AGORA
Códigos recentes
Interação JavaScriptIniciante
LÓGICA — Uma seleção por vez
Remove a marcação anterior antes de selecionar uma nova peça.
Interação JavaScriptIniciante
INTERAÇÃO — Clique em um elemento
Localiza as peças e executa uma ação quando uma delas recebe um clique.
OutrosIniciante
ESTADO — Peça selecionada
Cria uma indicação visual para mostrar qual peça foi escolhida.
EXPLORE O ACERVO
32 resultado(s)Todos os códigos
InterfaceIniciante
Badge com ponto — Status badge
Apresenta uma informação acompanhada por um ponto colorido de situação.
InterfaceIniciante
Badge contornado — Outline badge
Identifica o modelo do delivery usando borda colorida e fundo transparente.
InterfaceIniciante
Badge do modelo de delivery
Identificação visual simples para destacar o tipo do projeto.
InterfaceIniciante
Badge em degradê — Gradient badge
Combina duas cores no fundo do badge para criar maior destaque visual.
InterfaceIntermediário
Badge em faixa — Ribbon badge
Cria um selo com pontas recortadas semelhantes a uma pequena faixa.
InterfaceIniciante
Badge preenchido — Solid badge
Cria um selo compacto com fundo sólido para identificar o modelo do delivery.
EstruturaIniciante
BASE — Tabuleiro incompleto
Fornece uma estrutura HTML organizada com apenas oito blocos para o estudante continuar.
InterfaceIniciante
Bloco de destaque do delivery
Seção reutilizável para apresentar o principal diferencial do projeto.
LayoutIntermediário
Blocos adaptáveis — Grid responsivo com minmax()
Distribui vários blocos automaticamente conforme o espaço disponível na tela.
InterfaceIniciante
Botão ilustrativo de pedido
Botão visual para representar a futura ação de fazer um pedido.
InterfaceIniciante
Card de informação do delivery
Card reutilizável para apresentar uma decisão do projeto.
LayoutIniciante
Colunas com larguras diferentes — Grid com fr
Cria uma área principal maior e uma área lateral menor, com medidas fáceis de editar.