Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive layout using a mix of CSS Grid, Flexbox and Tables

@anuraggcoder

Desktop design screenshot for the Results summary component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I have tried my best to match the given design, however, font design is not applied to the style sheet. Need help on fixing the font issue. For rest, please provide your feedback.

Community feedback

Samoina 220

@samoina

Posted

Hi @anuraggcoder,

I fumbled a little with the font as well and finally figured out to import it into my style sheet from Google Fonts: I included the regular style in the body styling, and created two extra classes for the bold and extra bold styles (which i used for the '76' value in the circle on the results side. )

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap');

body {
font-family: 'Hanken Grotesk', sans-serif;
font-weight: 500;
}

.bold {
font-weight: 700;
}

.extra-bold {
font-weight: 800;
}

I hope this is helpful for you as well. All the best and Happy Coding!

Marked as helpful

1

@anuraggcoder

Posted

@samoina Thanks for your help. It just completely slipped from my mind to search the font on Google Fonts. However, I want to know if we can use the fonts provided to us in the assets folder?

0
Samoina 220

@samoina

Posted

@anuraggcoder welcome.

I was reading up about it, the variable fonts right? Honestly, haven't quite understood that bit so I was unable to incorporate it that way from the assets folder. Will make time and look it up though :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

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