Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
3
Comments
1
Lola Mure
@LolaMure

All comments

  • Oyindamola•280
    @Oyinalade
    Submitted about 3 years ago

    QR-CARD-COMPONENT

    1
    Lola Mure•30
    @LolaMure
    Posted about 3 years ago

    Hi! I just finished this challenge and I have some tips you may find helpful:

    First, talking about the colors, I had some trouble assigning them too, so maybe this guideline may help you with making your solution more alike to the design:

    • Background color of the page: hsl(212, 45%, 89%)
    • Background color of the card: hsl(0,0%,100%)
    • Color of the title: hsl(218, 44%, 22%)
    • Color of the subtitle: hsl(220, 15%, 55%)

    The other improvement to make your design more alike could be the font-family of the text. You should import it and use it like this:

    On the HTML header:

    • <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=Outfit:wght@400;700&display=swap" rel="stylesheet">

    On the CSS style:

    • font-family: 'Outfit', sans-serif;

    Hope you find it useful,

    Send you kind regards and good luck with your journey!

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub