Vamos criar um cartão de blog. Precisamos alterar o comportamento padrão de posicionamento com a ajuda do flex.

A tarefa é:
- Identificar o elemento pai que contém tanto a imagem da postagem (tag `img` com o nome de classe `post-image`) quanto as informações da postagem (tag `div` com o nome de classe `post-info`).
- Aplicar propriedades flex ao elemento pai (tag `div` com o nome de classe `blog-card`).
- Centralizar horizontalmente os itens dentro do cartão.
- Garantir que os itens ocupem toda a altura do cartão.

PCFET0NUWVBFIGh0bWw+CjxodG1sPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGRpdiBjbGFzcz0iYmxvZy1jYXJkIj4KICAgICAgPGltZwogICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9hNWQ2ZWY1MC1jYmY1LTRhOTUtODlkNC00NzViNzA0Y2Q4MTEvc2VjdGlvbis0K0ZsZXhib3gvc3BhY2VzaGlwLnBuZyIKICAgICAgICB3aWR0aD0iMjAwcHgiCiAgICAgICAgYWx0PSJQb3N0IEltYWdlIgogICAgICAgIGNsYXNzPSJwb3N0LWltYWdlIgogICAgICAvPgogICAgICA8ZGl2IGNsYXNzPSJwb3N0LWluZm8iPgogICAgICAgIDxoMyBjbGFzcz0icG9zdC10aXRsZSI+U3BhY2VjcmFmdDwvaDM+CiAgICAgICAgPHAgY2xhc3M9InBvc3QtbWV0YSI+UG9zdGVkIG9uIEphbnVhcnkgMSwgMjAyMyBieSBQZXRlciBLZXlnZW48L3A+CiAgICAgICAgPHAgY2xhc3M9InBvc3QtZXhjZXJwdCI+U3BhY2UgdmVoaWNsZSBmb3IgY29sb25pemF0aW9uPC9wPgogICAgICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJyZWFkLW1vcmUiPlJlYWQgTW9yZTwvYT4KICAgICAgPC9kaXY+CiAgICA8L2Rpdj4KICA8L2JvZHk+CjwvaHRtbD4=

LmJsb2ctY2FyZCB7CiAgLyogQ2hhbmdlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgZGlzcGxheTogX19fOwogIGZsZXgtZGlyZWN0aW9uOiBfX187CiAgYWxpZ24taXRlbXM6IF9fXzsKICBqdXN0aWZ5LWNvbnRlbnQ6IF9fXzsKICAvKiBDaGFuZ2UgY29kZSBhYm92ZSB0aGlzIGxpbmUgKi8KICBoZWlnaHQ6IDQwMHB4OwogIHdpZHRoOiA0MDBweDsKICBib3JkZXI6IDFweCBzb2xpZCAjY2NjOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4OwogIG1hcmdpbjogMCBhdXRvOwp9CgoucG9zdC1pbWFnZSB7CiAgaGVpZ2h0OiBhdXRvOwogIG1heC13aWR0aDogMTAwJTsKICBkaXNwbGF5OiBibG9jazsKfQoKLnBvc3QtaW5mbyB7CiAgcGFkZGluZzogMjBweDsKfQoKLnBvc3QtdGl0bGUgewogIGZvbnQtc2l6ZTogMS41cmVtOwogIG1hcmdpbjogMCAwIDEwcHggMDsKfQoKLnBvc3QtbWV0YSB7CiAgZm9udC1zaXplOiAxcmVtOwogIGNvbG9yOiAjODg4OwogIG1hcmdpbjogMCAwIDEwcHggMDsKfQoKLnBvc3QtZXhjZXJwdCB7CiAgbWFyZ2luOiAwIDAgMjBweCAwOwp9CgoucmVhZC1tb3JlIHsKICBiYWNrZ3JvdW5kLWNvbG9yOiAjMDA3YmZmOwogIGNvbG9yOiAjZmZmOwogIGJvcmRlcjogbm9uZTsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgcGFkZGluZzogMTBweCAyMHB4OwogIHRleHQtZGVjb3JhdGlvbjogbm9uZTsKICB0ZXh0LWFsaWduOiBjZW50ZXI7Cn0=

- `display: flex;` só pode ser aplicado ao elemento pai.
- A direção padrão do flex é row, portanto, é necessário alterá-la utilizando a propriedade `flex-direction: column;`.
- Para centralizar os itens horizontalmente, utilize `align-items: center;`.
- Para espaçar os itens verticalmente, utilize `justify-content: space-between;`.

LmJsb2ctY2FyZCB7CiAgLyogQ2hhbmdlIGNvZGUgYmVsb3cgdGhpcyBsaW5lICovCiAgZGlzcGxheTogZmxleDsKICBmbGV4LWRpcmVjdGlvbjogY29sdW1uOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogIC8qIENoYW5nZSBjb2RlIGFib3ZlIHRoaXMgbGluZSAqLwogIGhlaWdodDogNDAwcHg7CiAgd2lkdGg6IDQwMHB4OwogIGJvcmRlcjogMXB4IHNvbGlkICNjY2M7CiAgYm9yZGVyLXJhZGl1czogNXB4OwogIHBhZGRpbmc6IDEwcHg7CiAgbWFyZ2luOiAwIGF1dG87Cn0KCi5wb3N0LWltYWdlIHsKICBoZWlnaHQ6IGF1dG87CiAgbWF4LXdpZHRoOiAxMDAlOwogIGRpc3BsYXk6IGJsb2NrOwp9CgoucG9zdC1pbmZvIHsKICBwYWRkaW5nOiAyMHB4Owp9CgoucG9zdC10aXRsZSB7CiAgZm9udC1zaXplOiAxLjVyZW07CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgoucG9zdC1tZXRhIHsKICBmb250LXNpemU6IDFyZW07CiAgY29sb3I6ICM4ODg7CiAgbWFyZ2luOiAwIDAgMTBweCAwOwp9CgoucG9zdC1leGNlcnB0IHsKICBtYXJnaW46IDAgMCAyMHB4IDA7Cn0KCi5yZWFkLW1vcmUgewogIGJhY2tncm91bmQtY29sb3I6ICMwMDdiZmY7CiAgY29sb3I6ICNmZmY7CiAgYm9yZGVyOiBub25lOwogIGJvcmRlci1yYWRpdXM6IDVweDsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwogIHRleHQtYWxpZ246IGNlbnRlcjsKfQ==

Domine os fundamentos do CSS, a linguagem de estilização que transforma a aparência e a experiência visual das páginas web. Explore conceitos essenciais como estilos de texto, cores, espaçamento, modelo de caixa, Flexbox e efeitos decorativos. Desenvolva habilidades para criar páginas web visualmente atraentes e bem estruturadas.

Compreenda como o CSS se conecta ao HTML e como os estilos são aplicados por meio de seletores. Aplicação de cores, estilização de texto e efeitos de hover para controlar a apresentação visual.

Aprimoramento da tipografia utilizando altura de linha, espaçamento, propriedades de fonte e fontes personalizadas. Controle de famílias tipográficas, peso, estilo e tamanho da fonte para melhor legibilidade.

Controle da estrutura do layout utilizando propriedades de margem, preenchimento, bordas e largura. Compreensão do comportamento do dimensionamento da caixa e dos tipos de exibição de elementos, como block, inline e inline-block.

Controle layouts horizontais e verticais utilizando propriedades do Flexbox. Ajuste direção, alinhamento e espaçamento para estruturar componentes de interface de usuário.

Aprimoramento de layouts utilizando cores de fundo, imagens, pseudo-elementos e sombras. Estilização de componentes visuais para profundidade e contraste.

Desafio: Construir um Cartão de Blog Vertical com Flexbox