Submitted 5 months ago

Flexbox and Nested Flexboxes CSS Blog Card

DF• 330

@FengDenny

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Blog preview card

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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');
}

Community feedback

Rupali• 780

@rupali317

Posted 5 months ago

Hello @FengDenny

Great work on the challenge!

To answer your question on why the @font-face was not working, is probably because you clubbed all the different font weight files under one @font-face definition.

You need to have separate @font-face definition for each font weight type

For instance,

@font-face {
   font-family: 'Figtree';
   src: url('/assets/fonts/static/Figtree-ExtraBold.ttf') format('truetype');
   font-weight: 800;
   font-display: swap;
}

@font-face {
   font-family: 'Figtree';
   src: url('/assets/fonts/static/Figtree-SemiBold.ttf) format('truetype');
   font-weight: 600;
   font-display: swap;
}
 and so on

Additionally, you can refer to the line 63 to 82 of this styling file for social proof section challenge

Hope this helps! Let me know if this works.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord