Neste laboratório, você praticará os diferentes estilos que podem ser aplicados aos links quando passado o mouse por cima, quando ele for focado, clicado e visitado. Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve ter uma lista não ordenada com a classe todo-list. 2. Dentro da lista não ordenada, você deve ter quatro itens de lista. 3. Dentro de cada item de lista, deve haver:

• Um elemento input com o tipo checkbox e id definido para um valor único.
• Um elemento label com o atributo for definido para o id do elemento input correspondente.
• Uma lista não ordenada com a classe sub-item.
• Um item de lista com um elemento de âncora nele. A âncora deve ter a classe sub-item-link, um valor href válido e um valor target, que faça o link abrir em uma nova aba.

4. Seus elementos a não devem ter nenhuma decoração de texto. 5. Você deve definir a cor do texto dos links não visitados para uma cor de sua escolha. 6. Quando os links são visitados, a cor deve mudar para outra cor de sua escolha. 7. Quando os links são passados o mouse por cima, a cor deve mudar para outra cor de sua escolha. 8. Quando os links são focados, deve haver um contorno colorido em torno do link. 9. Quando os links são clicados, a cor deve mudar para outra cor de sua escolha. Nota: Certifique-se de vincular sua folha de estilos no seu HTML e aplicar seu CSS.

Testes:

• Você deve ter uma lista não ordenada com a classe `todo-list`.
• Você deve ter quatro itens de lista dentro da lista não ordenada.
• O `li` dentro do `ul` com a classe `todo-list` deve conter um elemento `input` com o `type` `checkbox`.
• O `li` dentro do `ul` com a classe `todo-list` deve conter um elemento `label`.
• Todos os elementos `input` devem ter um `id`.
• Todos os elementos `label` devem possuir um atributo `for`.
• Todos os elementos `label` devem conter algum texto.
• Os atributos `id` e `for` dos pares dos elementos `input` e `label` devem ter valores correspondentes.
• Após os elementos `label`, deve haver uma lista não ordenada com a classe `sub-item`.
• O `li` dentro do `ul` com a classe `sub-item` deve ter um elemento de âncora com a classe `sub-item-link`.
• Todos os elementos de âncora devem ter um atributo `href` válido.
• Todos os elementos de âncora devem conter texto.
• Cada elemento `a` deve ter um atributo `target` com o valor `_blank`.
• Seus elementos `a` não devem ter nenhuma decoração de texto.
• Links não visitados devem ter a cor do texto definida para uma cor de sua escolha.
• Os links devem mudar de cor quando passado o mouse por cima.
• Os links devem mudar de cor quando estão sendo clicados.
• Os links devem ter um contorno quando focados.
• Os links devem mudar de cor ao serem visitados.