👒 One Piece - Semana do Zero ao Programador Contratado

Projeto desenvolvido para a Semana do Zero ao Programador Contratado, inspirado no anime One Piece. O objetivo é apresentar os personagens principais da tripulação dos Chapéu de Palha de forma interativa e responsiva.

🎥 Demonstração

Interface web que permite ao usuário visualizar informações dos personagens do anime One Piece, alternando entre eles por meio de botões com imagens.

📱 Versão Mobile	💻 Versão Desktop

📂 Estrutura do Projeto

index.html
src/
  css/
    reset.css
    style.css
  images/
    one-piece-logo.png
    personagem-monkey-d-luffy.png
    personagem-nami.png
    personagem-roronoa-zoro.png
    personagem-sanji.png
    personagem-tony-chopper.png
    tripulacao-chopper.png
    tripulacao-luffy.png
    tripulacao-nami.png
    tripulacao-sanji.png
    tripulacao-zoro.png
  js/
    script.js

🛠️ Tecnologias Utilizadas

• HTML5
• CSS3 (mobile-first, responsivo, reset)
• JavaScript (interatividade)
• Google Fonts (Rubik, Secular One)

✨ Funcionalidades

• Visualização dos personagens principais do anime One Piece
• Troca de personagem ao clicar nos botões da tripulação
• Layout responsivo (mobile-first, adapta para telas maiores)
• Imagens otimizadas e estilização moderna
• Efeitos visuais ao selecionar personagem

💡 Detalhes Técnicos

• O CSS foi desenvolvido com abordagem mobile-first, utilizando media queries para ampliar o layout em telas maiores.
• O JavaScript manipula as classes selected para alternar o personagem exibido e o botão ativo.
• O arquivo reset.css garante que o layout seja consistente entre navegadores.
• O layout e as imagens são totalmente adaptáveis, com destaque para a responsividade das seções de nome e descrição dos personagens.
• O script ajusta o min-height das descrições para manter o alinhamento visual em telas maiores e força alinhamento no topo em telas muito pequenas.

🚀 Como Executar

1. Clone ou baixe o projeto.
2. Abra o arquivo index.html em seu navegador.
3. Clique nos botões da tripulação para alternar entre os personagens.

🔗 Links

• GitHub: One Piece
• Site ao vivo: One Piece

🙌 Créditos

• Imagens e nomes dos personagens: One Piece (Toei Animation, Eiichiro Oda)
• Projeto educacional para DevQuest Starter

🧐 Observações

• Não há dependências externas além das fontes do Google Fonts.
• O projeto é totalmente estático, não requer backend.
• Para melhor experiência, utilize navegadores atualizados.

👨‍💻 Autor

• GitHub - @slayer-br
• LinkedIn - @slayer-br

📜 Licença

Este projeto está sob a Licença MIT. Consulte o arquivo LICENSE para mais detalhes.