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 com um id chamado shopping-cart-container. 2. Seu elemento #shopping-cart-container deve usar a classe utilitária correta para definir o elemento como um layout Flexbox. 3. Seu elemento #shopping-cart-container deve definir a direção dos itens flex para coluna em dispositivos menores e linha em dispositivos maiores. Lembre-se de que o Tailwind CSS utiliza a abordagem mobile first e você usará o prefixo de breakpoint lg: para direcionar dispositivos maiores. 4. Dentro do seu elemento #shopping-cart-container, você deve ter um elemento com um id chamado products-container. 5. Seu elemento #products-container deve ter pelo menos dois elementos filhos, cada um com uma classe chamada card. 6. Cada elemento .card deve conter os seguintes elementos aninhados:

• Um elemento h2 com texto representando o nome do produto e uma classe utilitária que define o tamanho da fonte usando apenas classes de tamanho predefinidas como text-sm, text-md, text-lg, text-xl, text-2xl, etc.
• Um elemento com uma classe chamada quantity e texto para o número de itens do carrinho para esse produto.
• Um elemento com uma classe chamada price e texto para o preço.
• Um button com uma classe chamada remove-button e texto Remove. Seu button deve ter classes utilitárias para uma cor de fundo vermelha pré-definida de sua escolha e uma cor de fundo vermelha pré-definida diferente para o estado de hover. Exemplos de cores de fundo vermelhas pré-definidas incluem bg-red-500, bg-red-600, etc. Exemplos de cores de fundo vermelhas de hover pré-definidas incluem hover:bg-red-500, hover:bg-red-600, etc.

7. Dentro do seu elemento #shopping-cart-container, você deve ter um elemento com um id chamado order-summary-container. 8. Seu elemento #order-summary-container deve ter os seguintes estilos:

• Uma classe utilitária de sua escolha para cantos arredondados predefinidos. Exemplos incluem rounded, rounded-lg, rounded-full, etc.
• Uma classe utilitária de sua escolha para definir a largura da borda em todos os lados.

9. Seu elemento #order-summary-container deve conter os seguintes elementos aninhados:

• Um elemento h2 com o texto Order Summary e uma classe utilitária de sua escolha que define o tamanho da fonte.
• Um elemento com o texto Total: e id definido como total. Este elemento também deve usar classes utilitárias para definir o peso da fonte para um peso de fonte Tailwind CSS predefinido e o tamanho da fonte de sua escolha para o elemento.
• Um elemento com um id definido como total-amount para exibir o total de todos os itens no carrinho.
• Um link com o texto Checkout e a classe utilitária correta para centralizar o texto. O valor de href deve ser definido como #. Seu link também deve ter uma classe utilitária para definir a cor de fundo para uma cor azul predefinida do Tailwind CSS de sua escolha e uma cor de fundo azul diferente para o estado de hover.

Testes:

• Você deve ter um elemento com um `id` definido como `shopping-cart-container`.
• Seu elemento `#shopping-cart-container` deve usar a classe utilitária `flex` para definir o elemento como um layout Flexbox.
• Seu elemento `#shopping-cart-container` deve usar a classe utilitária correta para definir a direção dos itens flexíveis como coluna.
• Seu elemento `#shopping-cart-container` deve usar o prefixo de breakpoint `lg:` seguido pela classe utilitária correta para definir a direção dos itens flexíveis como row em dispositivos maiores.
• Você deve ter um elemento com um `id` definido como `products-container` dentro do seu elemento `#shopping-cart-container`.
• Seu elemento `#products-container` deve ter pelo menos dois elementos filhos, cada um com uma classe chamada `card`.
• Cada elemento `.card` deve conter um elemento `h2` com o texto que representa o nome do produto.
• Cada elemento `h2` dentro do elemento `.card` deve usar uma classe utilitária que define o tamanho da fonte usando apenas classes de tamanho predefinidas, como `text-sm`, `text-base`, `text-lg`, `text-xl`, `text-2xl`, etc.
• Cada elemento `.card` deve conter um elemento com uma classe chamada `quantity`.
• Cada elemento `.quantity` deve conter um texto que represente o número de itens no carrinho para esse produto.
• Cada elemento `.card` deve conter um elemento com uma classe chamada `price`.
• Cada elemento `.price` deve conter texto que represente o preço.
• Cada elemento `.card` deve conter um elemento `button` com uma classe chamada `remove-button` e o texto `Remover`.
• Cada elemento `button` deve ter uma classe utilitária para uma cor de fundo vermelha de sua escolha.
• Cada elemento `button` deve ter uma cor de fundo vermelha diferente para o estado de hover.
• Você deve ter um elemento com um `id` chamado `order-summary-container` dentro do seu elemento `#shopping-cart-container`.
• Seu elemento `#order-summary-container` deve ter uma classe utilitária de sua escolha para definir os cantos arredondados.
• Seu elemento `#order-summary-container` deve ter uma classe utilitária de sua escolha para definir a largura da borda em todos os lados.
• Seu elemento `#order-summary-container` deve conter um elemento `h2` com o texto `Resumo do Pedido`.
• Seu `h2` dentro do elemento `#order-summary-container` deve usar uma classe utilitária de sua escolha que defina o tamanho da fonte.
• Seu elemento `#order-summary-container` deve conter um elemento com o texto `Total:` e `id` definido como `total`.
• Seu elemento `#total` deve usar uma classe utilitária para definir o peso da fonte.
• Seu elemento `#total` deve usar uma classe utilitária para definir o tamanho da fonte.
• Seu elemento `#order-summary-container` deve conter um elemento com o `id` definido como `total-amount` para exibir o total de todos os itens no carrinho.
• Seu elemento `#order-summary-container` deve conter um link com o texto `Checkout` e um `#` como valor do `href`.
• Seu link `Checkout` deve ter uma classe utilitária para centralizar o texto.
• Seu link `Checkout` deve ter uma classe utilitária para definir a cor de fundo para uma cor azul pré-definida do Tailwind CSS de sua escolha.
• Seu link `Checkout` deve ter uma cor de fundo azul diferente para o estado de hover.