Página do Produto iPhone 13 Pro

Este projeto consiste em uma página de produto para o iPhone 13 Pro, onde os usuários podem selecionar diferentes cores do iPhone e visualizar a imagem correspondente.

Funcionalidades

• Os usuários podem selecionar diferentes cores do iPhone clicando nos botões de seleção de cores.
• A cor selecionada é destacada visualmente.
• A imagem do produto é atualizada dinamicamente para exibir a imagem correspondente à cor selecionada.
• A troca de imagem é acompanhada por uma animação suave.

Tecnologias utilizadas

• HTML5: para estruturar a página.
• CSS3: para estilizar a página e criar uma experiência visual atraente.
• JavaScript: para adicionar interatividade aos botões de seleção de cores e atualizar a imagem do produto.

Pré-requisitos

• Navegador da web atualizado.

Como executar o projeto

1. Clone o repositório para o seu ambiente local: git clone https://github.com/Eduxplorer/iPhone-13-clone.git

2. Navegue até o diretório do projeto: cd nome-do-repositorio

3. Abra o arquivo index.html em um navegador da web.

Agora você pode interagir com a página, clicando nos botões de seleção de cores para ver a imagem do produto atualizada.

Personalização

Se você deseja adicionar mais cores ou modificar as imagens do produto, siga estas etapas:

1. Adicione um novo botão de seleção de cor no arquivo HTML, dentro da lista <ul> com o id image-picker. Certifique-se de atribuir um ID exclusivo ao botão e inclua um elemento <span> com a classe color para exibir a cor.
2. Adicione a imagem correspondente à nova cor no diretório img. Certifique-se de nomear a imagem corretamente usando o padrão iphone_cor.jpg, onde "cor" corresponde ao ID do botão de seleção de cor.

Não é necessário modificar o JavaScript, pois ele adicionará a funcionalidade de forma dinâmica com base na estrutura HTML e nas imagens existentes.

Contribuição

Contribuições são bem-vindas! Se você tiver sugestões ou melhorias para o projeto, sinta-se à vontade para fazer um fork do repositório, criar uma branch com suas alterações e enviar um pull request.

Licença

Este projeto está licenciado sob a MIT License. Sinta-se à vontade para usar, modificar e distribuir o código conforme necessário.

Contato

Se você tiver alguma dúvida, entre em contato:

• Nome: Eduardo dos Santos Silva
• E-mail: eduardods.silva@outlook.com
• GitHub: Eduxplorer