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.

Deploy vercel

Clique aqui para visitar o projeto

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/seu-usuario/nome-do-repositorio.git](https://github.com/gbxventuraedu/site-apple-html-css-js](https://github.com/gbxventuraedu/site-apple-html-css-js)

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: Gabriel
• E-mail: [email protected]
• GitHub: gbxventuraedu