Instruções

Projetar uma Página de Seleção de Recursos

Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Sua página deve ter um elemento h1 com o texto Feature Selection. 2. Sua página deve ter um elemento div com a classe feature-card-container. 3. Sua página deve ter pelo menos dois elementos label cada um com a classe feature-card dentro do div. 4. Cada um dos seus elementos label deve conter texto de rótulo e um elemento input do tipo checkbox. 5. Crie um seletor que aponte para as caixas de seleção e aplique o seguinte estilo:
  • Todos os seus elementos de checkbox devem estar configurados com appearance: none; no seu CSS.
  • Todos os seus elementos de checkbox devem ter uma largura, cor e estilo de borda de sua escolha.
6. Quando a caixa de seleção estiver marcada, ela deve exibir uma marca de seleção no centro da caixa de seleção. 7. Quando a caixa de seleção estiver marcada, a cor de fundo da caixa de seleção deve mudar para uma cor de sua escolha. 8. Quando a caixa de seleção estiver marcada, a cor da borda da caixa de seleção deve mudar para uma cor de sua escolha. Nota: Certifique-se de vincular seu arquivo CSS no seu HTML.

O que fazer:

Testes:

  • Você deve ter um elemento `h1`.
  • Seu `h1` deve ter um texto de `Feature Selection`.
  • Você deve ter um elemento `div` com a classe `feature-card-container`.
  • Você deve ter pelo menos dois elementos `label` dentro de `.feature-card-container`.
  • Cada elemento `label` dentro de `.feature-card-container` deve ter a classe `feature-card`.
  • Dentro de cada elemento `label` você deve ter o texto do rótulo.
  • Dentro de cada elemento label deve haver um elemento `input` do tipo `checkbox`.
  • Você deve ter um seletor para as caixas de seleção.
  • Suas caixas de seleção devem estar configuradas para `appearance: none`.
  • Suas caixas de seleção devem ter uma largura de borda de sua escolha.
  • Suas caixas de seleção devem ter uma cor de borda de sua escolha.
  • Suas caixas de seleção devem ter um estilo de borda de sua escolha.
  • Quando as caixas de seleção estiverem marcadas, deve haver uma marca de seleção `✓` no centro da caixa de seleção.
  • Quando a caixa de seleção estiver marcada, a cor de fundo da caixa de seleção deve mudar para uma cor de sua escolha.
  • Quando a caixa de seleção estiver marcada, a cor da borda da caixa de seleção deve mudar para uma cor de sua escolha.

Preview