Referencial de Atividades
Todas as atividades
Exibição Visual

Comparação de Imagens

Exibe duas versões de uma imagem lado a lado ou com slider, permitindo comparação visual direta. Ideal para mostrar antes/depois, certo/errado, ou diferenças entre abordagens.

Análise comparação antes depois slider comparison

Experimente

Recuperação de uma Área Degradada

❌ Antes

❌ Antes

Solo exposto e compactado, sem vegetação
Erosão visível nas encostas
Ausência de sombra e de vida animal
Nascente assoreada e sem proteção
✅ Depois

✅ Depois

Cobertura vegetal nativa replantada
Solo retido e recuperado pelas raízes
Fauna local retornando ao habitat
Nascente protegida por mata ciliar

Código-fonte

PHP

Dados de exemplo

Cada lado tem imagem, rótulo e uma lista de itens específicos — a imagem mostra a diferença, a lista explica o porquê de cada mudança. As duas imagens precisam ser do mesmo ângulo e enquadramento, senão a comparação não é justa.

1 <?php
2 $titulo = 'Restauração de uma Bicicleta Antiga';
3 $antes = [
4 'imagem' => 'bicicleta-antes.jpg',
5 'rotulo' => '❌ Antes',
6 'itens' => [
7 'Corrente enferrujada e travada',
8 'Pneus vazios e ressecados',
9 'Freios sem resposta',
10 'Pintura descascada e com ferrugem',
11 ],
12 ];
13 $depois = [
14 'imagem' => 'bicicleta-depois.jpg',
15 'rotulo' => '✅ Depois',
16 'itens' => [
17 'Corrente limpa, lubrificada e solta',
18 'Pneus calibrados e trocados',
19 'Freios ajustados e respondendo',
20 'Pintura restaurada, sem sinal de ferrugem',
21 ],
22 ];
23 ?>

Cabeçalho

Só o título, centralizado — não precisa de indicador de posição como o Carrossel, porque as duas versões ficam visíveis ao mesmo tempo, lado a lado.

1 <div class="comparacao">
2 <div class="cabecalho">
3 <p class="titulo"><?= htmlspecialchars($titulo) ?></p>
4 </div>

Coluna negativa (antes)

Imagem no topo, rótulo logo abaixo, lista de itens específicos por último. Cor vermelha percorre a coluna inteira (borda, faixa do rótulo, ícone) — a cor sozinha já sinaliza "problema" antes mesmo de ler o texto.

1 <div class="colunas">
2 <div class="lado lado-negativo">
3 <img class="imagem" src="<?= htmlspecialchars($antes['imagem']) ?>" alt="<?= htmlspecialchars($antes['rotulo']) ?>">
4 <p class="rotulo"><?= htmlspecialchars($antes['rotulo']) ?></p>
5 <ul class="itens">
6 <?php foreach ($antes['itens'] as $item): ?>
7 <li>✕ <?= htmlspecialchars($item) ?></li>
8 <?php endforeach; ?>
9 </ul>
10 </div>

Coluna positiva (depois)

Estrutura idêntica à coluna negativa, só trocando a paleta pra verde e o ícone pra check — reaproveitar a mesma estrutura nos dois lados é o que torna a comparação lado a lado imediata de ler.

1 <div class="lado lado-positivo">
2 <img class="imagem" src="<?= htmlspecialchars($depois['imagem']) ?>" alt="<?= htmlspecialchars($depois['rotulo']) ?>">
3 <p class="rotulo"><?= htmlspecialchars($depois['rotulo']) ?></p>
4 <ul class="itens">
5 <?php foreach ($depois['itens'] as $item): ?>
6 <li>✓ <?= htmlspecialchars($item) ?></li>
7 <?php endforeach; ?>
8 </ul>
9 </div>
10 </div>
11 </div>
CSS

Cartão e cabeçalho

O cabeçalho é uma caixa de título com fundo próprio, separada do conteúdo — o mesmo tratamento usado no Carrossel e na Colagem, pra manter o mesmo peso visual entre os componentes de exibição do site.

1 .comparacao {
2 border: 1px solid #e2e8f0;
3 border-radius: 16px;
4 overflow: hidden;
5 font-family: inherit;
6 }
7 .cabecalho {
8 padding: 20px 24px;
9 text-align: center;
10 background: #f1f5f9;
11 border-bottom: 1px solid #cbd5e1;
12 }
13 .titulo {
14 margin: 0;
15 font-size: 18px;
16 font-weight: 700;
17 color: #0f172a;
18 }

Colunas lado a lado

Duas colunas de largura igual, uma ao lado da outra — ao contrário do Carrossel (um item de cada vez), aqui as duas versões ficam visíveis juntas de propósito, porque a comparação depende de ver as duas ao mesmo tempo.

1 .colunas {
2 display: grid;
3 grid-template-columns: 1fr 1fr;
4 gap: 16px;
5 padding: 20px;
6 }
7 @media (max-width: 480px) {
8 .colunas {
9 grid-template-columns: 1fr;
10 }
11 }

Cor por lado

Duas classes praticamente idênticas (.lado-negativo/.lado-positivo), cada uma com sua própria cor completa — mais simples e mais seguro que uma única classe genérica alternando cor por variável, porque não existe chance de esquecer de trocar metade da cor ao editar uma das duas.

1 .lado {
2 border-radius: 12px;
3 overflow: hidden;
4 border-width: 1px;
5 border-style: solid;
6 }
7 .lado-negativo {
8 border-color: #fca5a5;
9 background: #fef2f2;
10 }
11 .lado-positivo {
12 border-color: #86efac;
13 background: #f0fdf4;
14 }
15 .imagem {
16 width: 100%;
17 aspect-ratio: 1 / 1;
18 object-fit: cover;
19 }
20 .rotulo {
21 margin: 0;
22 padding: 12px 16px;
23 font-weight: 700;
24 font-size: 14px;
25 }
26 .lado-negativo .rotulo {
27 color: #b91c1c;
28 background: rgba(185, 28, 28, 0.08);
29 }
30 .lado-positivo .rotulo {
31 color: #15803d;
32 background: rgba(21, 128, 61, 0.08);
33 }
34 .itens {
35 margin: 0;
36 padding: 12px 16px;
37 list-style: none;
38 font-size: 13px;
39 line-height: 1.7;
40 color: #475569;
41 }