Neste laboratório, você praticará como estilizar fundos e *bordas* criando um cartão de postagem de blog. 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 div com uma classe blog-post-card para conter todos os seus elementos de cartão. 2. Dentro do elemento .blog-post-card, você deve ter um elemento de imagem com um atributo alt válido e texto, e uma classe post-img. Você pode usar https://cdn.G.E.A.R ACADEMY.org/curriculum/labs/cover-photo.jpg para o atributo src da imagem. 3. Você deve ter um div com uma classe post-content dentro do elemento .blog-post-card com o seguinte:

• Um elemento h2 com uma classe post-title e texto para o título do seu post no blog.
• Um elemento p com uma classe post-excerpt e texto para resumir seu post no blog.
• Um elemento a com uma classe read-more com o texto Read More.

4. Você deve definir a cor de fundo do elemento body para um valor diferente de branco. 5. Você deve aplicar os seguintes estilos ao elemento .blog-post-card:

• Um fundo branco.
• Cantos arredondados.
• Uma largura de sua escolha.
• O alinhamento de texto da sua escolha.

6. O elemento .post-img deve ser estilizado para que a imagem preencha toda a largura do cartão e tenha uma borda inferior. 7. O elemento .post-content deve ser estilizado para que haja espaçamento interno dentro do cartão. 8. Os elementos .post-title e .post-excerpt devem ter uma cor de texto diferente da padrão e margens em todos os lados. 9. O elemento .read-more deve ser estilizado como um botão e possuir:

• Uma cor de texto diferente da padrão.
• Uma cor de fundo.
• Margens em todos os lados.
• Preenchimento em todos os lados.
• Cantos arredondados.
• Uma propriedade display definida como inline-block.
• Um efeito hover que altera sua cor de fundo.

Nota: Certifique-se de vincular sua folha de estilos no seu HTML e aplicar seu CSS.

Testes:

• Você deve ter um `div` com uma classe `blog-post-card`.
• Você deve ter um elemento `img` com uma `class` de `post-img`. Certifique-se de que sua imagem possua um atributo `alt` com texto e um atributo `src` com um valor.
• Você deve ter um `div` com a classe `post-content`.
• Você deve ter um elemento `h2` com uma classe `post-title`. Certifique-se de que contenha algum conteúdo de texto para o título do seu post no blog.
• Você deve ter um `p` com uma classe `post-excerpt`. Certifique-se de que ele contenha algum conteúdo de texto para resumir sua postagem no blog.
• Você deve ter um elemento `a` com uma `class` de `read-more`.
• Seu elemento `.read-more` deve conter o texto `Leia Mais`.
• Seu elemento `.blog-post-card` deve ter uma propriedade `border-radius` com um valor (não deve ser `0` nem um valor negativo).
• Seu elemento `.blog-post-card` deve ter um fundo branco.
• Seu elemento `body` deve ter uma cor de fundo diferente de branco.
• Você deve direcionar `.blog-post-card` e definir sua propriedade `width`.
• Você deve direcionar `.blog-post-card` e definir sua propriedade `text-align`.
• Você deve direcionar `.post-content` e definir sua propriedade `padding`.
• Seu elemento `.read-more` deve ter um efeito de hover.
• Você deve direcionar `.read-more` e definir sua propriedade `color`.
• Você deve direcionar `.read-more` e definir sua propriedade `background-color`.
• Você deve direcionar `.read-more` e definir sua propriedade `margin`.
• Você deve direcionar `.read-more` e definir sua propriedade `display`.
• Você deve direcionar `.read-more` e definir sua propriedade `border-radius`.
• Você deve direcionar `.read-more` e definir sua propriedade `padding`.
• Seu elemento `.post-img` deve preencher a `width` do cartão.
• Seu elemento `.post-img` deve ter um valor de `border-bottom`.
• Seus elementos `.post-title` e `.post-excerpt` devem ter margens e cores de texto não padrão.