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

3-column-card using Flexbox

Vishal Pal 320

@vishy312

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@iamgenechua

Posted

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

Posted

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

@vishy312

Posted

@sunil-sharma-999 Thanks, Brother

0

@Madmanden

Posted

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

@vishy312

Posted

@Madmanden Thanks, man! I got that now.

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