Códigos Prontos

Escolha, copie, transforme.

Encontre códigos para adaptar livremente ao seu projeto ou siga uma sequência guiada para aprender passo a passo.

</>

Explorar o Acervo Livre

Escolha qualquer recurso, copie o código e personalize do seu jeito.

Ver todos os códigos →
1→

Seguir um Projeto Guiado

Comece com um código-base e avance por upgrades, desafios e etapas.

Escolher um projeto →
106
conteúdos publicados
4
projetos para começar
116
arquivos disponíveis

Encontre seu próximo código

Acervo livre

Todos Acervo Projetos
106 resultado(s)
Código-base Destaque

Projeto Guiado 02 - Meu Mini Portfólio

Evolua a Tela de Perfil para um mini portfólio com menu, seções, cards de projetos, Flexbox e contato.

Nível: Iniciante
2 arquivo(s) · 9 etapa(s) relacionada(s)
HTML, CSS
Código-base Destaque

Projeto Guiado 01 - Tela de Perfil

Crie uma pagina de perfil pessoal usando HTML e CSS e evolua o projeto com personalizacoes e interacoes.

Nível: Iniciante
2 arquivo(s) · 6 etapa(s) relacionada(s)
HTML, CSS
Desafio

Desafio final - Um portfólio que é seu

Faça pelo menos duas escolhas autorais e explique como as diferentes partes do site se conectam.

Nível: Iniciante
0 arquivo(s)
Recurso

Etapa 1 - Cabeçalho e menu do portfólio

Crie o topo do site e um menu que leva o visitante até as seções da própria página.

Nível: Iniciante
2 arquivo(s) · 1 etapa(s) relacionada(s)
HTML, CSS
Recurso

Etapa 2 - Seção Sobre mim

Transforme a apresentação da antiga Tela de Perfil em uma seção completa do portfólio.

Nível: Iniciante
2 arquivo(s) · 1 etapa(s) relacionada(s)
HTML, CSS
Recurso

Etapa 3 - Crie os cards de projetos

Monte três cards reutilizando a mesma estrutura HTML para apresentar trabalhos diferentes.

Nível: Iniciante
2 arquivo(s) · 1 etapa(s) relacionada(s)
HTML, CSS
Recurso

Etapa 4 - Organize com Flexbox

Faça os cards ocuparem o espaço disponível e quebrarem de linha automaticamente em telas menores.

Nível: Iniciante
1 arquivo(s) · 1 etapa(s) relacionada(s)
CSS
Recurso

Etapa 5 - Contato, rodapé e revisão

Finalize a estrutura do site com contato, rodapé e uma revisão completa dos links e textos.

Nível: Iniciante
3 arquivo(s)
HTML, CSS
Upgrade

Upgrade - Cards com movimento

Faça os cards reagirem ao ponteiro usando transition, transform e box-shadow.

Nível: Iniciante
1 arquivo(s)
CSS
Upgrade

Upgrade - Imagem no projeto

Inclua uma imagem em um dos cards sem deixar o layout quebrar.

Nível: Iniciante
2 arquivo(s)
HTML, CSS
Upgrade

Upgrade - Mostrar detalhes com JavaScript

Adicione uma pequena interação para mostrar e ocultar informações extras no portfólio.

Nível: Iniciante
2 arquivo(s)
HTML, JavaScript
Recurso

Botão moderno

Transforme um link ou botão em um elemento com espaçamento, borda arredondada e destaque.

Nível: Iniciante Botão
1 arquivo(s)
CSS
Recurso

Cabeçalho com menu de navegação

Crie um cabeçalho simples com nome do site e links para seções da mesma página.

Nível: Iniciante Navegação
1 arquivo(s)
HTML
Recurso

Card com efeito ao passar o mouse

Adicione movimento suave a cards usando transition e transform.

Nível: Iniciante
1 arquivo(s)
CSS
Recurso

Card simples

Crie uma caixa organizada para agrupar informações de um projeto, produto ou perfil.

Nível: Iniciante Layout
1 arquivo(s)
CSS
Recurso

Cards lado a lado com Flexbox

Organize vários elementos lado a lado e permita que quebrem de linha em telas menores.

Nível: Iniciante Layout
1 arquivo(s)
CSS
Recurso

Contador de cliques

Pratique variável, evento e atualização de texto criando um contador.

Nível: Iniciante
1 arquivo(s)
JavaScript
Recurso

Efeito hover no botão

Faça o botão reagir quando o ponteiro passa sobre ele.

Nível: Iniciante
1 arquivo(s)
CSS
Recurso

Estrutura de card de projeto

Monte a estrutura HTML de um card com título, descrição e link.

Nível: Iniciante Layout
1 arquivo(s)
HTML
Recurso

Formulário de contato básico

Crie campos de nome, e-mail e mensagem para praticar formulários HTML.

Nível: Iniciante Formulário
1 arquivo(s)
HTML
Recurso

Galeria responsiva com Grid

Crie colunas que se adaptam automaticamente ao espaço disponível.

Nível: Iniciante Layout
1 arquivo(s)
CSS
Recurso

Imagem circular responsiva

Transforme uma foto quadrada em avatar circular sem deformá-la.

Nível: Iniciante
1 arquivo(s)
CSS
Recurso

Imagem com legenda

Adicione uma imagem acompanhada de uma legenda usando figure e figcaption.

Nível: Iniciante
1 arquivo(s)
HTML
Recurso

Imagem que respeita a tela

Evite que uma imagem ultrapasse a largura do elemento onde está inserida.

Nível: Iniciante
1 arquivo(s)
CSS
Recurso

Link que abre em nova aba

Crie um link para outro site sem fechar a página atual.

Nível: Iniciante Navegação
1 arquivo(s)
HTML
Recurso

Lista de habilidades

Mostre conhecimentos, características ou tecnologias usando uma lista HTML.

Nível: Iniciante
1 arquivo(s)
HTML
Recurso

Mensagem ao clicar no botão

Faça um botão executar uma ação simples com addEventListener.

Nível: Iniciante
1 arquivo(s)
JavaScript
Recurso

Menu horizontal com Flexbox

Organize links de navegação na horizontal com espaçamento uniforme.

Nível: Iniciante Navegação
1 arquivo(s)
CSS
Recurso

Mostrar e ocultar conteúdo

Controle a visibilidade de um elemento com JavaScript.

Nível: Iniciante
1 arquivo(s)
JavaScript
Recurso

Rodapé simples

Adicione uma área final com autoria e um link.

Nível: Iniciante Layout
1 arquivo(s)
HTML
Recurso

Saudação usando o nome digitado

Leia o valor de um input e use esse dado para criar uma mensagem personalizada.

Nível: Iniciante
1 arquivo(s)
JavaScript
Recurso

Seção Sobre mim

Estruture uma seção com título e parágrafo para apresentar uma pessoa, projeto ou empresa.

Nível: Iniciante
1 arquivo(s)
HTML
Recurso

Selecionar um card com clique

Use classList para adicionar e remover uma classe em cards.

Nível: Iniciante
1 arquivo(s)
JavaScript
Recurso

Sombra suave

Destaque um card ou caixa do fundo usando box-shadow.

Nível: Iniciante
1 arquivo(s)
CSS
Recurso

Trocar texto com JavaScript

Altere o conteúdo visível de um elemento depois de um clique.

Nível: Iniciante
1 arquivo(s)
JavaScript
Desafio

Desafio final - Seu perfil, suas escolhas

Finalize uma versao autoral do perfil e esteja pronto para explicar suas escolhas.

Nível: Iniciante
0 arquivo(s)
Recurso

Etapa 1 - Personalize as informacoes

Troque os dados do exemplo pelas informacoes do seu proprio perfil.

Nível: Iniciante
1 arquivo(s) · 1 etapa(s) relacionada(s)
HTML
Recurso

Etapa 2 - Crie sua identidade visual

Altere cores, bordas e detalhes do CSS para criar uma identidade visual propria.

Nível: Iniciante
1 arquivo(s) · 1 etapa(s) relacionada(s)
CSS
Recurso

Etapa 3 - Personalize links e habilidades

Transforme habilidades e botoes em elementos coerentes com o perfil escolhido.

Nível: Iniciante
1 arquivo(s)
HTML
Upgrade

Upgrade - Avatar com efeito

Adicione movimento ao avatar usando transition, transform e box-shadow.

Nível: Iniciante
1 arquivo(s)
CSS
Upgrade

Upgrade - Botao de tema

Use JavaScript para alternar a aparencia da pagina com um clique.

Nível: Iniciante
3 arquivo(s)
HTML, CSS, JavaScript
Recurso

Adicionar Imagem

Função: Exibe uma imagem na página.Atributos:src: caminho da imagemalt: texto alternativo (acessibilidade)width: define a largura da imagemUso comum: Inserir imagens ilustrativas, banners, fot

1 arquivo(s)
HTML
Recurso

Adicionar produto no carrinho

Java para carrinho de compras usar no final do arquivo HTML antes de body

1 arquivo(s)
JavaScript
Recurso

Atividade completa dia 25/06

Atividade completa dia 25/06

1 arquivo(s)
CSS
Recurso

Aula 31/03

O código está em erro, você deve completar as tags e colocar as partes que estão faltando.

Layout
1 arquivo(s)
CSS
Recurso

BLOCO 1 - ALUNO DESTAQUE

BLOCO 1 - ALUNO DESTAQUE

1 arquivo(s)
HTML
Recurso

BLOCO 2 - MEDALHISTA DA OBMEP

BLOCO 2 - MEDALHISTA DA OBMEP 

1 arquivo(s)
HTML
Recurso

BLOCO 3 - CONQUISTA DA SEMANA

BLOCO 3 - CONQUISTA DA SEMANA

1 arquivo(s)
HTML
Recurso

BLOCO 4 - GALERIA DE DESTAQUES

BLOCO 4 - GALERIA DE DESTAQUES

1 arquivo(s)
HTML
Recurso

BLOCO 5 - PROJETO PREMIADO

BLOCO 5 - PROJETO PREMIADO

1 arquivo(s)
HTML
Recurso

BLOCO 6 - PÓDIO DOS ALUNOS

BLOCO 6 - PÓDIO DOS ALUNOS

1 arquivo(s)
HTML
Recurso

BLOCO 7 - HISTÓRIA DE SUCESSO

BLOCO 7 - HISTÓRIA DE SUCESSO

1 arquivo(s)
HTML
Recurso

BLOCO 8 - EQUIPE DESTAQUE

BLOCO 8 - EQUIPE DESTAQUE

1 arquivo(s)
HTML
Recurso

BORDA DE MEDALHA

🥇🥈🥉 Borda inspirada nas medalhas.

1 arquivo(s)
CSS
Recurso

Botão Alerta Anti-Gaivota

Ao passar o mouse (hover), ele muda de cor e simula um efeito de "alerta" (tremidinha de clique) usando apenas CSS

Botão
1 arquivo(s)
HTML
Recurso

Botão Alerta css

Ao passar o mouse (hover), ele muda de cor e simula um efeito de "alerta" (tremidinha de clique) usando apenas CSS

1 arquivo(s)
CSS
Recurso

Botão com Efeito colorido (CSS)

Botão com Efeito colorido (CSS)

1 arquivo(s)
CSS
Recurso

Botão com Efeito colorido (CSS)

Botão Estilizado

Botão
1 arquivo(s)
HTML
Recurso

Botão que Muda Cor de Texto

Botão que Muda Cor de Texto

Botão
1 arquivo(s)
JavaScript
Recurso

Botão Simples

Função: Cria um botão básico sem nenhuma ação associada.Uso comum: Interface visual, aguardando que o JavaScript defina uma ação.Visual: Apenas o texto “Clique Aqui” dentro de um botão padrão do navegador

Botão
1 arquivo(s)
HTML
Recurso

CADASTRAR

Primeiro criar os campos HTML

Banco de dados
1 arquivo(s)
HTML
Recurso

Capturar java

Capturar os elementos

Banco de dados
1 arquivo(s)
JavaScript
Recurso

Card de Notificação Crítica de Praia

Card de aviso estático para mensagens de erro, alertas ou notificações do sistema. Utiliza uma borda esquerda de destaque (border-left) de 5px e uma animação infinita baseada em @keyframes que faz o emoji de sirene pulsar (alterando a propriedade transform: scale). 

1 arquivo(s)
HTML
Recurso

Card de Notificação Crítica de Praia CSS

Card de aviso estático para mensagens de erro, alertas ou notificações do sistema. Utiliza uma borda esquerda de destaque (border-left) de 5px e uma animação infinita baseada em @keyframes que faz o emoji de sirene pulsar (alterando a propriedade transform: scale).

1 arquivo(s)
CSS
Recurso

Card sobe quando o mouse passa.

Card sobe quando o mouse passa.

1 arquivo(s)
CSS
Recurso

carrinho

Carrinho de compras pode ser usado por qualquer umO nome deve sempre ser carrinho.html

Layout
1 arquivo(s)
CSS
Recurso

CSS BASE PARA O HTML BASE CODE PEN

CSS BASE PARA O HTML BASE CODE PEN

1 arquivo(s)
CSS
Recurso

Estrutura de Vitrine Deslizante (Product Slider)

Descrição: Este código cria um trilho horizontal para exibir produtos com foto, nome e preço. É perfeito para a página principal quando você tem muitos itens e pouco espaço vertical. O usuário pode deslizar para os lados para ver mais opções.O que este código faz:Cards Compactos: Organiza cada item dentro de um "card" padronizado.Flexibilidade: Você pode adicionar quantos itens quiser; o navegador criará a barra de rolagem lateral automaticamente.Botão Integrado: Cada produto já vem com um botão

Navegação
1 arquivo(s)
HTML
Recurso

Estrutura do Banner Rotativo

Descrição: Este código cria a "carcaça" do seu banner de destaque. Ele é composto por um trilho invisível (carousel-track) onde as imagens ficam enfileiradas lado a lado, prontas para deslizar. É o espaço ideal para colocar as promoções principais, lançamentos de motos ou avisos importantes do seu site.O que este código faz:Organização de Itens: Permite adicionar quantos banners você quiser usando a classe .carousel-item.Legendas Prontas: Já possui um espaço fixo (carousel-caption) para títulos

Navegação
1 arquivo(s)
HTML
Recurso

Estrutura do Banner Rotativo CSS

Descrição: Este bloco de CSS é o que transforma uma lista de imagens em um componente interativo e moderno. Ele utiliza uma tecnologia chamada Scroll Snap, que faz com que a imagem "prenda" magneticamente na tela quando o usuário desliza, garantindo que o banner nunca fique parado no meio do caminho.Destaques do Estilo:Efeito de Profundidade: Aplica automaticamente uma camada de escurecimento nas fotos para que os textos brancos fiquem sempre legíveis.Rolagem Suave: Ativa o scroll-behavior: smoo

1 arquivo(s)
CSS
Recurso

Faixa de luz passando sobre o card.

✨ Faixa de luz passando sobre o card.

1 arquivo(s)
CSS
Recurso

Faixa decorativa de estrelas.

Faixa decorativa de estrelas.

1 arquivo(s)
CSS
Recurso

Galeria - Grade com Zoom

Descrição: Este bloco de CSS transforma uma lista simples em uma vitrine profissional. Ele utiliza o CSS Grid para organizar os itens automaticamente, não importa quantos você adicione.Destaques do Código:Grid Responsivo: As fotos se ajustam sozinhas (lado a lado) dependendo do tamanho da tela do celular ou computador.Efeito Hover: O item aumenta levemente de tamanho quando o mouse passa por cima, indicando que é clicável.Lógica de Tela Cheia: Contém as regras de position: fixed que fazem a imag

1 arquivo(s)
CSS
Recurso

HTML BASE para o Code PEN

HTML BASE para o Code PEN

Layout
1 arquivo(s)
HTML
Recurso

Input de Denúncias com Foco Estilizado

Componente básico de formulário focado em usabilidade e design limpo. Demonstra o uso da pseudo-classe de estado :focus para aplicar transições suaves (transition) na cor da borda e na sombra projetada (box-shadow) quando o campo é selecionado pelo usuário.

Formulário
1 arquivo(s)
HTML
Recurso

Input de Denúncias com Foco Estilizado CSS

Componente básico de formulário focado em usabilidade e design limpo. Demonstra o uso da pseudo-classe de estado :focus para aplicar transições suaves (transition) na cor da borda e na sombra projetada (box-shadow) quando o campo é selecionado pelo usuário.

1 arquivo(s)
CSS
Recurso

Inteligência da Vitrine (Upgrade Slider Horizontal)

Descrição: Este upgrade transforma a lista vertical em uma linha horizontal inteligente. Ele garante que os cards tenham sempre o mesmo tamanho e que a rolagem seja suave e "magnética" (parando sempre no início de um card).Destaques do Estilo:Scroll Snap: Faz com que o card "grude" na tela ao ser deslizado.Responsividade Nativa: No computador mostra vários produtos; no celular mostra um e um pedaço do próximo, convidando o usuário a deslizar.Estilização de Cards: Adiciona bordas suaves e sombras

1 arquivo(s)
CSS
Recurso

Layout Hero Master

O que é:É a parte principal do site, tipo a “capa”. É a primeira coisa que aparece e chama a atenção.Para que serve:Mostrar um título, um texto e um botão logo no início da página.Como funciona:Tudo fica centralizado na tela (no meio), com um fundo colorido e organizado automaticamente.Diferencial:Tem um espaço pronto no meio onde você pode colocar botões ou textos depois.

Layout
1 arquivo(s)
CSS
Recurso

Linha do tempo das conquistas.

Linha do tempo das conquistas. Ideal para páginas de conquistas.

1 arquivo(s)
CSS
Recurso

lista de alunos conectada ao java

lista de alunos

1 arquivo(s)
HTML
Recurso

Loader Fluido Balanço Marítimo

Indicador de carregamento assíncrono criado puramente com CSS (sem JS). Estuda propriedades de animação como transform: translateY(), loops infinitos e o uso estratégico da propriedade animation-delay com valores negativos no segundo elemento para desencontrar o movimento e criar o efeito visual de onda fluida. Tem a parte CSS

1 arquivo(s)
HTML
Recurso

MUDANÇAS PARA O HERO MASTER 6#

Uso: Cria um efeito de elevação na caixa de conteúdo, fazendo-a parecer flutuar sobre o fundo.

1 arquivo(s)
CSS
Recurso

Parte 1 aula 27/03

Atividade avaliativa Complete o código! Valor 2 pontos

1 arquivo(s)
HTML
Recurso

Posicionar Imagem com position: absolute

Função: Posiciona a imagem em coordenadas exatas dentro de um contêinerUso comum: Sobreposição de elementos, layouts personalizadosImportante: O contêiner precisa ter position: relative

1 arquivo(s)
HTML
Recurso

Projeto empreendedorismo

Projeto para vendas

Layout
1 arquivo(s)
CSS
Recurso

Título com brilho neon.

Título com brilho neon.

1 arquivo(s)
CSS
Recurso

TITULO QUE MUDA DE COR (TITULO EM GRADIENTE)

Uso: Em vez de uma cor sólida no título, o próprio texto ganha as cores do gradiente.

1 arquivo(s)
CSS
Recurso

TITULO: UPGRADE GOLD - EFEITO CAMPEÃO

🥇 Texto dourado brilhante.

1 arquivo(s)
CSS
Recurso

UPGRADE Troféu

🏆 Adiciona um troféu no card principal.

1 arquivo(s)
CSS
Upgrade

Adicionar foto ao perfil

Título: Adicionar foto ao perfil Tipo: Upgrade Nível: Iniciante Resumo: Melhoria que adiciona uma foto à tela de perfil. Categorias: Layout e Cards Situação: Publicado

Nível: Iniciante Cards Layout
0 arquivo(s)
Código-base

a queda dos arturos

raaaaaaaaaaaaaa

Nível: Avançado Banco de dados Cards
1 arquivo(s) · 1 etapa(s) relacionada(s)
HTML
Código-base

Teste

Testea

Nível: Iniciante Animação e efeitos Estrutura de página
3 arquivo(s)
HTML, CSS, JavaScript