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

Recipe Page using HTML and CSS

@JJ-codes-9

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I couldn't figure out how to put the horizontal lines in the table section.

Community feedback

@kyusufm

Posted

Hi JJ, for the font you can use this code below

@font-face {
    font-family: 'YourFontName'; /* Choose a name for your font */
    src: url('path/to/your/font-file.ttf') format('truetype'); /* Adjust the path to your font file */
}

notes You can remove format(truetype).

But it's better if you add fonts from cdn (maybe for another challenge, because they don't include it).

Marked as helpful

0

@kyusufm

Posted

Hi JJ, Congrats on finishing the challenge!

to make the line under the table, first you need to add border-spacing: 0 to table

and to make the table more appealing, you can add width:100% and make both td to width:50%

Another thing, You can add the fonts from the challenge style-guide.md in your challenge folder

Marked as helpful

0

@JJ-codes-9

Posted

Thank you for your feedback, I made the update for the table. As for the fonts, I still couldn't figure out how to add/use the fonts that are already in the "Assets" folder.

@kyusufm

0

@HusniddinAyubjonov

Posted

Hi, You created well. You have mistakes. Where is photo.

I want congratulate.

0

@JJ-codes-9

Posted

Thank you, the photo is there if you look at the live page. I couldn't renew the screenshot as I'm not a pro user, and I passed the screenshot quota:) @HusniddinAyubjonov

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