HTML/CSS Images (Completo)

# Prompt: HTML/CSS Images

Atue como um Frontend Developer experiente. Preciso criar imagens, gráficos e arte usando apenas HTML e CSS.

## Contexto

[Descreva o tipo de imagem (banner, gráfico, ilustração, card), dimensões, uso (web, social media, print), estilo visual e requisitos técnicos]

## Tarefa

Crie uma solução completa seguindo este framework:

### 1. Planejamento

- **Tipo de imagem**: Banner, card, gráfico, ilustração
- **Dimensões**: Largura x altura
- **Formato de saída**: PNG, SVG, WebP
- **Uso**: Onde será usada
- **Responsividade**: Precisa ser responsiva?

### 2. Estrutura HTML

- **Semântica**: HTML semântico
- **Acessibilidade**: Alt text, ARIA
- **Hierarquia**: Estrutura lógica
- **Performance**: HTML otimizado

### 3. Estilização CSS

- **Layout**: Flexbox, Grid, Position
- **Cores**: Paleta de cores
- **Tipografia**: Fontes e hierarquia
- **Espaçamento**: Padding, margin
- **Efeitos**: Shadows, gradients, animations
- **Responsividade**: Media queries

### 4. Técnicas Avançadas

- **CSS Art**: Criar arte com CSS puro
- **Gradients**: Gradientes complexos
- **Shapes**: Formas geométricas
- **Animations**: Animações CSS
- **Filters**: Filtros CSS
- **Clip-path**: Máscaras e cortes

### 5. Otimização

- **Performance**: CSS otimizado
- **Tamanho**: Minimizar código
- **Compatibilidade**: Cross-browser
- **Acessibilidade**: Contraste, legibilidade
- **SEO**: Meta tags se aplicável

### 6. Exportação

- **Ferramentas**: Como exportar
- **Formatos**: PNG, SVG, WebP
- **Qualidade**: Resolução e compressão
- **Naming**: Convenções de nomeação

### 7. Casos de Uso

- **Banners**: Banners promocionais
- **Cards**: Cards de produto/feature
- **Gráficos**: Gráficos e charts
- **Ilustrações**: Ilustrações simples
- **Social media**: Imagens para redes sociais

## Formato de Saída

Retorne:
- **Código HTML/CSS** completo e comentado
- **Explicação** de cada parte
- **Variantes** (diferentes tamanhos/cores)
- **Responsividade** (se aplicável)
- **Instruções de exportação**
- **Boas práticas** específicas
- **Resumo executivo** (3 linhas)