Skip to content
Submitted almost 3 years ago

3-column-card using Flexbox

Vishal Pal•320
@vishy312
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'm having trouble with the fonts. The fonts are not showing on the site. Can you help me get this? Thanks in advance

Community feedback

  • Gene•40
    @iamgenechuaPosted almost 3 years ago

    Hi there, nice work! Do also take note that the four corners of this component are rounded. You can make use of the border-radius property.

    Marked as helpful
    0
  • sunil-sharma-999•405
    @sunil-sharma-999Posted almost 3 years ago

    You can't use the google font directly like you did. You have to select the font weights which will open "selected family" box on the right side. It will contain <link> links and css import. You can choose any one of them to use the fonts.

    If you use link tag then add it before css file, so it will be available in css file

    Marked as helpful
    0
    Vishal Pal•320
    @vishy312Posted almost 3 years ago

    @sunil-sharma-999 Thanks, Brother

    0
  • Christian Holm•500
    @MadmandenPosted almost 3 years ago

    Hi @vishy312, when I add the font at Google Fonts, this is the code it gives me (that you should add to the <head> section of your index.html):

    <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=Lexend+Deca&display=swap" rel="stylesheet">
    Marked as helpful
    0
    Vishal Pal•320
    @vishy312Posted almost 3 years ago

    @Madmanden Thanks, man! I got that now.

    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