M3-Academy-Public/desafio-html-css
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
a7b4113bf6
desafio-html-css/REQUISITOS.md

2.5 KiB
Raw Blame History

Requisitos do projetos

Aqui estão os requisitos que serão avaliados:

Requisitos obrigatórios para todos os componentes:

  • Replicar os estilos do layout no Figma em cada breakpoint
    • ultra wide
    • desktop
    • tablet
    • mobile
  • deve manter a responsividade entre os breakpoints
  • os textos devem estar iguais ao layout
  • Se no layout conter algum efeito de hover ou focus, deve ser replicado. Porem qualquer elemento que seja interativo deve ter um efeito
  • 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 <a data-testid="link"> e todos os estilos e funcionalidades devem ser aplicados nessa tag, se for um campo de formulario o test-id deve estar na tag <input data-testid="input..."> e assim por diante)

Header

  • todos os requisitos obrigatórios

  • todos os requisitos obrigatórios
  • deve conter textos alternativos para a logo
  • deve conter um link para a home ("/")

Banner

  • todos os requisitos obrigatórios
  • A imagem nao deve distorcer ou ficar cortada em nenhum tamanho de tela, deve manter a proporção.

Texts 1

  • todos os requisitos obrigatórios

Cards 1

  • todos os requisitos obrigatórios
  • A order dos cards deve ser alterada de acordo com o tamanho da tela

GAllery

  • todos os requisitos obrigatórios
  • 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.

Galery 2

  • todos os requisitos obrigatórios
  • A order dos cards deve ser alterada de acordo com o tamanho da tela

Texts 2

  • todos os requisitos obrigatórios
  • na versão mobile deve invertar a ordem do texto e da imagem

Footer