Blog Preview Card

Great job on completing this assignment!

• It is handy to have a fallback font in your CSS in case that the Google font doesn't work. You can just add a second font. Such as:

font-family: "Figtree", sans-serif;

• Accessibility is very important , especially for those how are using screen readers. Your page needs a <main> element which wraps your page content. As is says, it is the main content of the page. Wrap your .container in a <main> tag.
• There is a date on the card, HTML has also a special element for time. This is also very important for those who are not able to visually see the page. Wrap the date in a <time> element and give it the correct date. I used a <div> to wrap the content and it should look like this:

<div class="date">Published <time datetime="2023-12-21">21 Dec 2023</time></div>

• Give your .container a box-shadow. I used 10px on right and on the bottom.
• Your label needs some rounded corners.
• I also made a mistake by not giving the .container a hover. Add .container:hover and change the colour of the heading.

I strongly recommend to add the improvements to your project after feedback of others. There are very professional members on here which can provide good feedback. For me this is the best way learn and to improve my skills.

Good luck with your next projects!

• You have forgotten to implement the following:

  • Effect on hover card:
    • You only have this effect when u hover the card tittle but this effect should work on all the card.
  • Shadow on card + effect with bigger shadow.

• The profile picture is not aligned with the author, and author text is not in bold.

  • You can fix this with a div framing the profile picture and the author with the following style

  display: flex;
  align-items: center;
  gap: 0.5em;
  

• Also the main text have a different color in the design.

Anyway good job, keep going.