Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. User Stories: 1. Sua página deve ter um elemento h1 com o texto Pricing Plans. 2. Sua página deve ter um elemento div com a classe pricing-container abaixo do elemento h1.

• O seletor .pricing-container deve ter uma propriedade display com o valor flex e uma propriedade flex-wrap com o valor wrap.

3. Dentro do elemento .pricing-container, você deve ter três elementos div com a classe pricing-card para representar os planos de preços.

• Um dos elementos .pricing-card deve ter a classe basic-plan além da classe pricing-card.
• Um dos elementos .pricing-card deve ter a classe pro-plan além da classe pricing-card.
• Um dos elementos .pricing-card deve ter a classe premium-plan além da classe pricing-card.

4. Seu elemento .basic-plan deve ter um elemento h2 com o texto Basic. 5. Seu elemento .basic-plan deve ter um elemento p com o texto $9/month. 6. Seu elemento .pro-plan deve ter um elemento h2 com o texto Pro. 7. Seu elemento .pro-plan deve ter um elemento p com o texto $19/month. 8. Seu elemento .premium-plan deve ter um elemento h2 com o texto Premium. 9. Seu elemento .premium-plan deve ter um elemento p com o texto $29/month. 10. Cada um dos seus elementos .pricing-card deve:

• Use Flexbox para empilhar seu conteúdo em uma coluna e justificar o espaço entre os filhos usando space-between.
• Defina a propriedade flex para 0 0 200px para dar uma largura consistente e evitar que ela cresça ou encolha no layout.
• Defina a propriedade border para 2px solid black para ver como os diferentes cartões ocupam espaço.

11. O elemento .basic-plan deve aparecer primeiro no layout. Você deve usar a propriedade order para isso. 12. O elemento .pro-plan deve aparecer em segundo no layout. Você deve usar a propriedade order e definir sua propriedade flex-grow como 2 para que ocupe mais espaço do que os outros planos. 13. O elemento .premium-plan deve vir por último no layout. Você deve usar a propriedade order para isso. Nota: Certifique-se de vincular sua folha de estilos no seu HTML e aplicar seu CSS.

Testes:

• Você deve ter um elemento `h1`.
• Sua página deve ter um elemento `h1` com o texto `Pricing Plans`.
• Você deve ter um elemento `div` abaixo do elemento `h1`.
• Seu elemento `div` deve ter a classe `pricing-container`.
• Você deve ter um seletor `.pricing-container`.
• Seu seletor `pricing-container` deve ter a propriedade `display` com o valor `flex`.
• Seu seletor `.pricing-container` deve ter a propriedade `flex-wrap` com o valor `wrap`.
• Você deve ter três elementos `div` com a classe `pricing-card` dentro do elemento `.pricing-container`.
• Um dos seus elementos `.pricing-card` deve ter a classe `basic-plan`.
• Um dos seus elementos `.pricing-card` deve ter a classe `premium-plan`.
• Um dos seus elementos `.pricing-card` deve ter a classe `pro-plan`.
• Você deve ter um seletor `.pricing-card`.
• Seu seletor `.pricing-card` deve ter a propriedade `display` com o valor `flex`.
• Seu seletor `.pricing-card` deve ter a propriedade `flex-direction` com o valor `column`.
• Seu seletor `.pricing-card` deve ter a propriedade `justify-content` com o valor `space-between`.
• Seu seletor `.pricing-card` deve ter a propriedade `flex` com o valor `0 0 200px`.
• Seu seletor `.pricing-card` deve ter a propriedade `border` com um valor de `2px solid black`.
• Seu seletor `.basic-plan` deve ter a propriedade `order` com o valor `0`.
• Seu elemento `.basic-plan` deve ter um elemento `h2` com o texto `Basic`.
• Seu elemento `.basic-plan` deve ter um elemento `p` com o texto `$9/month`.
• Seu elemento `.pro-plan` deve ter um elemento `h2` com o texto `Pro`.
• Seu elemento `.pro-plan` deve ter um elemento `p` com o texto `$19/month`.
• Seu elemento `.pro-plan` deve ter a propriedade `order` com o valor `1`.
• Seu elemento `.pro-plan` deve ter a propriedade `flex-grow` com um valor de `2`.
• Seu elemento `.premium-plan` deve ter um elemento `h2` com o texto `Premium`.
• Seu elemento `.premium-plan` deve ter um elemento `p` com o texto `$29/month`.
• Seu elemento `premium-plan` deve ser o último elemento no layout e ter a propriedade `order` e o valor `2`.