I used most of the CSS and HTML classes I took on Udemy.

Community feedback

• 

  Abd Ur Rehman•360

  @A-noob-in-CodingPosted 4 months ago

  To have a easy time working with custom fonts: if you have font files which are usually provided with the starter code in the assets/folder directory, you can use @font-face rule in CSS Type fontface and your ide would autocomplete it, now name the font you want to use (it could be anything) and provide the path of the font file, you need to provide the path of the .ttf files(these contains the font) if the directory is assets/font and the .ttf is inside the font folder the path would look like "/assets/font/fontname.ttf" HOPE IT HELPS 🙂

  1

  ---

  

  Napgolden•60

  @NapgoldenPosted 4 months ago

  I didn't really understand the whole font-face CSS rule stuff, if you could explain a bit further it would be greatly appreciated. @A-noob-in-Coding

  0

  

  Abd Ur Rehman•360

  @A-noob-in-CodingPosted 4 months ago

  The @font-face rule is used to include font files that are present in your project. That way, you don't need to rely on online fonts. The font files usually have a .ttf extension. For example, a font Poppins would be like Poppins.ttf.

  FEM challenges provide you with these font files to work with, and they are usually located in the assets/fonts/ directory.

  To use these files:

  @font-face {
      font-family: PoppinExtraBold;
      src: url("/assets/fonts/Poppins-ExtraBoldItalic.ttf");
  }
  

  the font-family is the name you want for the font you are retrieving from the .ttf file and scr: url() needs the path to that .ttf file

  Hope it helps 🥰

  1

  

  Napgolden•60

  @NapgoldenPosted 4 months ago

  Thanks so much the image helped me understand it more. @A-noob-in-Coding

  0

  

  Abd Ur Rehman•360

  @A-noob-in-CodingPosted 4 months ago

  @Napgolden 😊

  0
• 

  P

  Steven Stroud•11,910

  @StroudyPosted 4 months ago

  At different screen widths your card falls apart, I think its because you are using VW VH units, you can solve these issues using the correct REM / EM units and using @media Queries

  1

  ---

  

  Napgolden•60

  @NapgoldenPosted 4 months ago

  Thanks for the advice will update the code.@Stroudy

  0

  

  Napgolden•60

  @NapgoldenPosted 4 months ago

  I have pushed the updated CSS using rem scaling on the image helped fix the resizing on different sizes, Thank you so much for the tip.@Stroudy

  2