Skip to content
Submitted over 2 years ago

Responsive 3-column card using HTML and CSS Flexbox.

Dipe Anthonia•20
@dipeanthonia
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...3-column preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I always have issues with importing my fonts, I would really appreciate if anyoone can look into my code and tell me where the problem lies, also if there is any sort of correction, pls let me know. Thanks.

Community feedback

  • ethan•120
    @EthanL06Posted over 2 years ago

    Hi Dipe!

    Try importing the fonts through your HTML file instead of through CSS. In between your <head> tags, add the following snippet:

    <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=Big+Shoulders+Display:wght@700&family=Lexend+Deca&display=swap" rel="stylesheet">

    Also, you have a mistake in your CSS rule for the h1 tag. The rule for its font family should be: font-family: 'Big Shoulders Display', sans-serif;

    Marked as helpful
    1
  • Vanza Setia•27,775
    @vanzasetiaPosted over 2 years ago

    Hi there! 👋

    I took a look at the CSS and notice something wrong with the @import rule.

    • First, there should not be a space after the https:. It's not a valid URL.
    • Second, even if you have fixed it, it still won't work because it is not the correct link to get the font family.
    @import url("https: //fonts.google.com/specimen/Lexend+Deca");
@import url("https: //fonts.google.com/specimen/Big+Shoulders+Display");

    So, what you want to do is to visit the URLs and then get the @import tag or the link tags from the Google Fonts website.

    For your information, you can import both font families at the same time as @EthanL06 has done it for you.

    That's it! I hope this information is useful! 😊

    2
    Dipe Anthonia•20
    @dipeanthoniaPosted about 2 years ago

    @vanzasetia Thanks, This was really helpful.

    0
    Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    @dipeanthonia Happy to hear that was helpful! 😊

    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