Submitted over 1 year ago

Responsive product preview card using flexbox and sass

Abelardo Gomez Rodriguez• 30

@abelgmz

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Product preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I would like to know what would be the best option to work with downloaded fonts and use them...
- Option 1 - only one folder with all fonts
  - fonts-folder
    - font1.ttf
    - font2.ttf
- Option 2 - folder with subfolders for each font
  - fonts-folder
    - font1-folder
      - font1.ttf
    - font2-folder
      - font2.ttf

Recomendations are welcome, thanks :)

Community feedback

mrayala42(Angel)• 120

@coderboi559

Posted over 1 year ago

You can use google fonts and use the import css keyword. And import the url at the top of your css file.

Zeyad Mohamed• 320

@ZeyadMohamed1805

Posted over 1 year ago

Great work as always! 🔝

-About your font question, I agree with srayala42! Downloading the fonts would unnecessarily add more size to your folder! If you are new to this approach, this link shall help you with it: https://www.youtube.com/watch?v=qgmLDPLApBY

Can't wait to see more projects from you! Keep it up 😁

john• 90

@johnhaab

Posted over 1 year ago

I agree with srayala42 and, Zeyad Mohamed.

Use google fonts, its amazing also use Font Awesome. Font Awesome is the easy way to get great icons for free and they're SVG! (look up on Youtube to get them setup)

yishak abrham• 2,150

@yishak621

Posted over 1 year ago

Why do u have to download fonts since u can use Google fonts just by linking the url in the html

Please log in to post a comment

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