Skip to content
Submitted 6 months ago

Flexbox and Nested Flexboxes CSS Blog Card

DF•330
@FengDenny
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Blog preview card
  • HTML
  • CSS
1newbie

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
    @rupali317Posted 6 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.

    0

Please log in to post a comment

Log in with GitHub

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