From a7b4113bf6cc7b054b31c8ab8ceb45245014d747 Mon Sep 17 00:00:00 2001 From: marlon passos Date: Thu, 30 Mar 2023 08:22:44 -0300 Subject: [PATCH] docs: atualiza os requesitos para a desafio html e css --- REQUISITOS.md | 137 ++++++++++---------------------------------------- 1 file changed, 26 insertions(+), 111 deletions(-) diff --git a/REQUISITOS.md b/REQUISITOS.md index 4f512f2..e3029f6 100644 --- a/REQUISITOS.md +++ b/REQUISITOS.md @@ -14,135 +14,50 @@ Aqui estão os requisitos que serão avaliados: - [ ] Os seletores de test-id deve estar nos elementos html que cotem o estilo e funcionalidade esperada (ex: se voce esta desenvolvendo um link, o test-id deve estar na tag `` e todos os estilos e funcionalidades devem ser aplicados nessa tag, se for um campo de formulario o test-id deve estar na tag `` e assim por diante) ## Header -![](https://i.imgur.com/TbG0PLi.png) +![](https://i.imgur.com/tYPxkEg.png) - [ ] todos os requisitos obrigatórios ### Header - Logo -![](https://i.imgur.com/Ev494Lm.png) +![](https://i.imgur.com/eMK5jb3.png) - [ ] todos os requisitos obrigatórios - [ ] deve conter textos alternativos para a logo - [ ] deve conter um link para a home ("/") -### Header - Search Bar +## Banner +![](https://i.imgur.com/qy6Uy8Q.png) - [ ] todos os requisitos obrigatórios -- [ ] texto de placeholder deve ser o mesmo do layout -- [ ] devo conseguir fazer a submissão do formulário clicando no o botão de busca ou com o apertando da tecla enter -- [ ] ao fazer a busca o usuário deve ser redirecionado para a página com o resultado da busca - - nao precisa implementar a pagina de resultado, apenas o redirecionar com a url correta - - para o termo _"iphone"_ deve redirecianar para a url `/search?q=iphone` - - para o termo _"iphone vermelho"_ deve redirecianar para a url `/search?q=iphone%20vermelho` - - esse padrão de url deve ser seguido para todos os termos de busca - - esse padrão e' conhecido como query string +- [ ] A imagem nao deve distorcer ou ficar cortada em nenhum tamanho de tela, deve manter a proporção. -### Header - Login -![](https://i.imgur.com/e0xzFTS.png) +## Texts 1 +![](https://i.imgur.com/f4KMK6D.png) - [ ] todos os requisitos obrigatórios -- [ ] deve conter um link para a página de login (`"/login"`) -### Header - Cart -![](https://i.imgur.com/MZNisFR.png) +## Cards 1 +![](https://i.imgur.com/HL6JBmS.png) - [ ] todos os requisitos obrigatórios -- [ ] ao clicar no botão de carrinho, deve redirecionar para a página de carrinho (`"/cart"`) +- [ ] A order dos cards deve ser alterada de acordo com o tamanho da tela -### Header - menuBottom -![](https://i.imgur.com/iYEk95u.png) -- [ ] todos os requisitos obrigatórios -- [ ] Os links devem conter efeitos de hover -- [ ] A url para os textos deve ser: - - [ ] "Cursos" -> "/Cursos" - - [ ] "Saiba mais" -> "/saiba-mais" - - [ ] "Institucional" -> "/institucional" - ## BreadCrumb - ![](https://i.imgur.com/fQ5IMGD.png) +## GAllery +![](https://i.imgur.com/n8oovYz.png) - [ ] todos os requisitos obrigatórios -- [ ] o link da home deve conter um link para a home ("/") -- [ ] o ultimo deve ser o nome da categoria atual ( ex: se estamos na pagina de contato, o ultimo link deve ser "Contato" ) +- [ ] A order das imagens deve ser alterada de acordo com o tamanho da tela +- [ ] As imagens nao devem distorcer ou ficar cortadas em nenhum tamanho de tela, deve manter a proporção. -## Titulo da pagina -![](https://i.imgur.com/muYCdak.png) +## Galery 2 +![](https://i.imgur.com/k3zP52x.png) - [ ] todos os requisitos obrigatórios -## Menu Lateral -![](https://i.imgur.com/Noj1NTU.png) -- [ ] todos os requisitos obrigatórios -- [ ] cada um dos links um link para cada pagina sendo: - - [ ] sobre -> "/institucional/sobre" - - [ ] Fomas de pagamento -> "/institucional/formas-de-pagamento" - - [ ] Entrega -> "/institucional/entrega" - - [ ] Trocas e devoluções -> "/institucional/trocas-e-devolucoes" - - [ ] Segurança e privacidade -> "/institucional/seguranca-e-privacidade" - - [ ] contato -> "/institucional/contato" -- [ ] deve ficar selecionado o link da pagina atual +- [ ] A order dos cards deve ser alterada de acordo com o tamanho da tela -## Textos das paginas -![](https://i.imgur.com/lfeVzDE.png) +## Texts 2 +![](https://i.imgur.com/8xdq7oO.png) - [ ] todos os requisitos obrigatórios -- [ ] o titulo deve se atualizar de acordo com a pagina -- [ ] o texto poder ser o lorem ipsum - -## Formulario de contato -![](https://i.imgur.com/FHRSDGx.png) -- [ ] todos os requisitos obrigatórios -- [ ] os placeholders devem ser os mesmos do layout -- [ ] deve validar para todos os campos serem obrigatórios -- [ ] deve existir algum tipo de mascara nos campos (cpf, data de nascimento, telefone, Instagram) onde a pessoa nao tenha que digitar os caracteres especiais -- [ ] Em caso de erro, deve exibir uma mensagem de erro como no layout -- [ ] Em caso de sucesso, deve limpar os campos e exibir uma mensagem de sucesso como no layout -- [ ] Deve escolher o melhor tipo de input para cada campo - -## Newsletter -![](https://i.imgur.com/saTmWFA.png) -- [ ] todos os requisitos obrigatórios -- [ ] ao submeter o formulário, deve exibir uma mensagem de sucesso como um alert -- [ ] deve validar para o campo ser obrigatório -- [ ] deve validar para o campo ser um email valido -- [ ] caso o email seja invalido, deve exibir uma mensagem de erro como no layout +- na versão mobile deve invertar a ordem do texto e da imagem ## Footer -![](https://i.imgur.com/Ik3mZBT.png) +![](https://i.imgur.com/GwOijzu.png) - [ ] todos os requisitos obrigatórios -### Footer - menu -![](https://i.imgur.com/VlbFKif.png) -- [ ] todos os requisitos obrigatórios -- [ ] os seguintes textos devem ter os seguintes links - - [ ] "Institucional" -> "/institucional" - - [ ] "Quem somos" -> "/institucional/quem-somos" - - [ ] "Política de privacidade" -> "/institucional/politica-de-privacidade" - - [ ] "Segurança" -> "/institucional/seguranca" - - [ ] "seja um vendedor" -> "/institucional/seja-um-vendedor" - - [ ] "Entrega" -> "/institucional/entrega" - - [ ] "Pagamento" -> "/institucional/pagamento" - - [ ] "Trocas e devoluções" -> "/institucional/trocas-e-devolucoes" - - [ ] "Dúvidas frequentes" -> "/institucional/duvidas-frequentes" -- [ ] Os dois números de telefone devem ter o link para num formato dinâmico. Sendo o numero Atendimento ao consumidor num formato de ligação e o numero de atendimento online num formato de link para o WhatsApp -- [ ] Na versão mobile deve transformar o menu em um toggle. Ao clicar no texto ou no icone, deve abrir o menu com as opções - -### Footer - social -![](https://i.imgur.com/UCT7dJW.png) -- [ ] todos os requisitos obrigatórios -- [ ] os links devem ser: - - [ ] "Facebook" -> "https://www.facebook.com/m3Academy" - - [ ] "Instagram" -> "https://www.instagram.com/m3Academy/" - - [ ] "Twitter" -> "https://twitter.com/m3Academy" - - [ ] "Youtube" -> "https://www.youtube.com/@m3academy392" - - [ ] "Linkedin" -> "https://www.linkedin.com/m3Academy" -- [ ] os site deve abrir em uma nova aba ao serem clicados -- [ ] cada um dos socialIcon deve ter a sua variacao de test id com o nome nome da rede social (ex: testid="footer_socialIcon--facebook", ou testid="footer_socialIcon--instagram") - -### Footer - Bottom -![](https://i.imgur.com/l4q3tBc.png) -- [ ] todos os requisitos obrigatórios - -### Footer - Bottom - CopyRight -![](https://i.imgur.com/3S2ZTUG.png) -- [ ] todos os requisitos obrigatórios - -### Footer - Bottom - Payment -![](https://i.imgur.com/cAKZOLs.png) -- [ ] todos os requisitos obrigatórios - -### Footer - Bottom - Autores -![](https://i.imgur.com/b9m7ZtX.png) -- [ ] todos os requisitos obrigatórios -- [ ] os links devem ser: - - [ ] "powered by vtex" -> "https://vtex.com/br-pt/" - - [ ] "Developed by m3" -> "https://m3ecommerce.com/" \ No newline at end of file +- [ ] cada icone deve conter um link para a pagina do icone + - [ ] [Youtube](https://www.youtube.com/@m3academy392) + - [ ] [Facebook](https://www.facebook.com/m3Academy) + - [ ] [Instagram](https://www.instagram.com/m3Academy) +- \ No newline at end of file