Blog preview card using flexbox

Great job on this project! Looks great in desktop and mobile versions. I do have a suggestion; the card needs a hover state where the title turns yellow. Also, the hover on the footer is so subtle I can't even see it change; use a contrasting color like pink to make it stand out.

When it comes to DRY code, the key is to pull out anything repeated and create a utility class. For example, both your body and .container similar flex properties. Create a class:

.flex-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

Now you add the utility class to the body tag, as well as the container div. You just saved yourself 4 lines of code! Also, eliminate unnecessary code: flexbox is direction "row" by default, so no need to declare it unless you are changing the flex-direction back to row from column.

Lastly, DRY code does the most impactful styles first. So, instead of all the margin-top, margin-bottom, etc, put some padding on the .container and a flex gap on left-content. I have forked your repo on github if you want to check it all out. Reduces the code almost a third.

Hope this helps! And keep on coding.