Skip to content
Submitted 11 months ago

Result Summary Component Solution

wahidullahsharify•20
@wahidullahsharify
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Che Fernandez•170
    @CheFernandez99Posted 11 months ago

    your design looks great, however it is clippping at the top of the page on mobile devices, id recommend adding a margin to the top. Great work!!

    0
  • Dean•480
    @DeanogitPosted 11 months ago

    Hi @wahidullahsharify,

    Well done for completing this challenge and submitting your solution

    I noticed something that you might be interested in, it is concerning the use of the correct font in your project.

    I see you're using TailwindCSS in your project so its possible to add the font in the tailwind.config.js file in your repository.

    • Inside the tailwind.config.js file, look for the theme: {}

    • Inside the theme: {} add a new object called fontFamily: {},

    • Inside fontFamily: {} add sans: [ ' " Hanken Grotesk " , sans-serif ' ]

    This will add the Hanken Grotesk as the first font to render, if the browser can download this font from the Google Fonts API or links to a file in the repository.

    In this example, we can connect to the Google Fonts API, by going to Google Fonts Webpage,

    • search for the font we need

    • select which weights we need

    • and copy the link provided

    Now paste these links inside the <head></head> element. These will be loaded by the browser when the page loads, making them available to be rendered.

    It should end up looking something like this

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap"
      rel="stylesheet"
    />

    I hope this all makes sense, if you have any questions please let me know

    Above all, great job building your solution to this challenge!

    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