Flexbox and Nested Flexboxes CSS Blog Card

What are you most proud of, and what would you do differently next time?

Creating this blog card was a great experience. It helped me deep dive the fundamentals of flexbox and simple animations. I would probably choose my own coloring scheme, so I can practice on color pairing.

What challenges did you encounter, and how did you overcome them?

Since, we were giving assets of the Figtree font, I wanted to use @font-face rule to load the font. However, there was issues of not loading the fonts correctly.

To fix this, I went to Google Fonts and simply copy and paste @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap"); onto my stylesheet and it worked!

What specific areas of your project would you like help with?

I wanted to know why @font-face rule didn't load correctly. Here is the code snippet:

@font-face {
    font-family: 'Figtree';
    src: url('/assets/fonts/static/Figtree-ExtraBold.ttf') format('truetype'),
         url('/assets/fonts/static/Figtree-SemiBold.ttf') format('truetype'),
         url('/assets/fonts/Figtree-Italic-VariableFont_wght.ttf') format('truetype'),
         url('/assets/fonts/Figtree-VariableFont_wght.ttf') format('truetype');
}