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 um elemento h1 com o texto Book Inventory. 1. Você deve ter um elemento table com colunas nomeadas Title, Author, Category, Status e Rate. 1. A tabela deve ter pelo menos quatro linhas, a primeira para os cabeçalhos das colunas e o restante preenchido com informações do livro. 1. Cada linha de tabela dentro do corpo da tabela deve ter a classe read, to-read ou in-progress. 1. Elementos td da coluna Status devem conter um elemento span com a class de status envolvendo o texto Read, To Read ou In Progress, dependendo da classe daquela linha. 1. Elementos td da coluna Rate devem conter um elemento span com a class de rate envolvendo três elementos span vazios. 1. Elementos .rate colocados dentro de linhas .read devem ter uma classe adicional com o valor de one, two ou three, dependendo da taxa pessoal. Esse valor deve vir após rate. 1. Você deve criar três seletores de atributo para direcionar os elementos com as classes read, to-read e in-progress, além de definir sua propriedade background-image para usar um linear-gradient de sua escolha. 1. Você deve definir a propriedade display de cada elemento span como inline-block. 1. Você deve usar um seletor de atributo para direcionar os elementos span com a classe status que são descendentes de elementos tr com a classe to-read e definir suas propriedades border e background-image. 1. Você deve usar um seletor de atributo para direcionar os elementos span com a classe status que são descendentes de elementos tr com a classe read e definir suas propriedades border e background-image. 1. Você deve usar um seletor de atributo para direcionar os elementos span com a classe status que são descendentes de elementos tr com a classe in-progress e definir suas propriedades border e background-image. 1. Você deve usar um seletor de atributo para direcionar os elementos span com a classe status e os elementos span com o valor da classe começando com rate e definir suas propriedades height, width e padding. 1. Você deve usar um seletor de atributo para direcionar os elementos span que são filhos diretos de elementos span com o valor da class começando com rate e definir suas propriedades border, border-radius, margin, height, width e background-color. 1. Você deve usar um seletor de atributo para direcionar o primeiro descendente dos elementos span que tenham a palavra one como parte do valor da sua class e definir a propriedade background-image para usar um linear-gradient. 1. Você deve usar um seletor de atributo para direcionar os dois primeiros descendentes de elementos span que tenham a palavra two como parte do valor de sua class e definir a propriedade background-image para usar um linear-gradient. 1. Você deve usar um seletor de atributo para direcionar os três elementos span que são descendentes de elementos span que possuem a palavra three como parte do valor de seu atributo class e definir a propriedade background-image deles para usar um linear-gradient.

Testes:

• Você deve ter um elemento `h1` com o texto `Book Inventory`.
• Você deve ter apenas um elemento `h1`.
• Você deve ter um elemento `table`.
• Você deve ter um elemento `thead` e um elemento `tbody` dentro de `table`.
• Dentro do `thead` deve haver um `tr` com 5 elementos `th`.
• A primeira coluna deve ter o texto `Title` como o cabeçalho.
• A segunda coluna deve ter o texto `Author` como o cabeçalho.
• A terceira coluna deve ter o texto `Category` como o cabeçalho.
• A quarta coluna deve ter o texto `Status` como o cabeçalho.
• A quinta coluna deve ter o texto `Rate` como o cabeçalho.
• A tabela deve ter pelo menos quatro linhas.
• Cada linha deve sempre ter 5 colunas.
• Cada linha da tabela, exceto a linha do cabeçalho, deve ter a classe `read`, `to-read` ou `in-progress`.
• Elementos `td` da coluna `Status` devem conter um elemento `span`.
• Cada elemento `span` da coluna `Status` deve ter a classe de `status`.
• Cada elemento `.status` deve ter o texto `Read`, `To Read` ou `In Progress`, dependendo da classe de sua linha.
• Elementos `td` da coluna `Rate` devem conter um elemento `span`.
• Cada elemento `span` que é filho direto de um elemento `td` da coluna `Rate` deve ter a classe de `rate` como a primeira classe.
• Cada elemento `.rate` deve conter três elementos `span` vazios.
• Elementos `.rate` colocados dentro de linhas `.read` devem ter uma classe adicional após a classe `rate` com o valor de `one`, `two` ou `three`, dependendo da classificação pessoal.
• Você deve ter um seletor de atributo para direcionar as linhas que têm a classe `read`.
• Você deve usar um seletor de atributo para direcionar as linhas que têm a classe `read` e definir sua propriedade `background-image` para um gradiente linear à sua escolha.
• Você deve ter um seletor de atributo para direcionar as linhas que têm a classe `to-read`.
• Você deve usar um seletor de atributo para direcionar as linhas que têm a classe `to-read` e definir sua propriedade `background-image` para um gradiente linear à sua escolha.
• Você deve ter um seletor de atributo para direcionar as linhas que têm a classe `in-progress`.
• Você deve usar um seletor de atributo para direcionar as linhas que têm a classe `in-progress` e definir sua propriedade `background-image` para um gradiente linear à sua escolha.
• Você deve definir a propriedade `display` de cada elemento `span` como `inline-block`.
• Você deve ter um seletor de atributo para direcionar os elementos `span` com a classe `status` que são descendentes de elementos `tr` com a classe `to-read`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` com a classe `status` que são descendentes de elementos `tr` com a classe `to-read` e definir sua propriedade `border`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` com a classe `status` que são descendentes de elementos `tr` com a classe `to-read` e definir sua propriedade `background-image`.
• Você deve ter um seletor de atributo para direcionar os elementos `span` com a classe `status` que são descendentes de elementos `tr` com a classe `read`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` com a classe `status` que são descendentes de elementos `tr` com a classe `read` e definir sua propriedade `border`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` com a classe `status` que são descendentes de elementos `tr` com a classe `read` e definir sua propriedade `background-image`.
• Você deve ter um seletor de atributo para direcionar os elementos `span` com a classe `status` que são descendentes de elementos `tr` com a classe `in-progress`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` com a classe `status` que são descendentes de elementos `tr` com a classe `in-progress` e definir sua propriedade `border`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` com a classe `status` que são descendentes de elementos `tr` com a classe `in-progress` e definir sua propriedade `background-image`.
• Você deve ter um seletor de atributo para direcionar os elementos `span` com a classe `status` e os elementos `span` com o valor da classe começando com `rate`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` com a classe `status` e os elementos `span` com o valor da classe começando com `rate` e definir sua propriedade `height`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` com a classe `status` e os elementos `span` com o valor da classe começando com `rate` e definir sua propriedade `width`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` com a classe `status` e os elementos `span` com o valor da classe começando com `rate` e definir sua propriedade `padding`.
• Você deve ter um seletor de atributo para direcionar os elementos `span` que são filhos diretos de elementos `span` com o valor da `class` começando com `rate`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` que são filhos diretos de elementos `span` com o valor da `class` começando com `rate` e definir sua propriedade `border`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` que são filhos diretos de elementos `span` com o valor da `class` começando com `rate` e definir sua propriedade `border-radius`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` que são filhos diretos de elementos `span` com o valor da `class` começando com `rate` e definir sua propriedade `margin`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` que são filhos diretos de elementos `span` com o valor da `class` começando com `rate` e definir sua propriedade `height`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` que são filhos diretos de elementos `span` com o valor da `class` começando com `rate` e definir sua propriedade `width`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` que são filhos diretos de elementos `span` com o valor da `class` começando com `rate` e definir sua propriedade `background-color`.
• Você deve ter um seletor de atributo para direcionar o primeiro descendente dos elementos `span` que possuem a palavra `one` como parte do valor de sua `class`.
• Você deve usar um seletor de atributo para direcionar o primeiro descendente dos elementos `span` que tenham a palavra `one` como parte do valor da sua `class` e definir a propriedade `background-image` para usar um `linear-gradient`.
• Você deve ter um seletor de atributo para direcionar os dois primeiros descendentes de elementos `span` que tenham a palavra `two` como parte do valor de sua `class`.
• Você deve usar um seletor de atributo para direcionar os dois primeiros descendentes de elementos `span` que tenham a palavra `two` como parte do valor de sua `class` e definir a propriedade `background-image` para usar um `linear-gradient`.
• Você deve ter um seletor de atributo para direcionar os elementos `span` que são descendentes de elementos `span` que possuem a palavra `three` como parte do valor de sua `class`.
• Você deve usar um seletor de atributo para direcionar os elementos `span` que são descendentes de elementos `span` que possuem a palavra `three` como parte do valor de sua `class` e definir a propriedade `background-image` deles para usar um `linear-gradient`.