Blog-preview-card

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 5 months ago

  Congratulations on completing this challenge. It looks great and is responsive. Your project is also well organized with the folder structure. I do have a few suggestions.

  First, the font is all wrong; it displays in the Chrome browser with a default serif font, but the design calls for a sans-serif called "Figtree". I notice that your project hosts the font locally in the "assets" folder, but there is no reference to it in the CSS. You need to call the font with an @font-face after the root in the CSS. Try this:

  @font-face {
      font-family: Figtree;
      src: url(../fonts/Figtree-VariableFont_wght.ttf);
      font-weight: normal;
      font-style: normal;
    }
  @font-face {
      font-family: Figtree;
      src:url(../fonts/Figtree-VariableFont_wght.ttf);
      font-weight: bold;
      font-style: normal;
    }
  

  Then you add the font-family to the body:

  font-family: Figtree;
  

  Also, the design calls for the h1 to change text color when you hover over it.

  .text h1:hover
  {
      color: rgb(241, 198, 118);
  }
  

  Lastly, the "container" needs a dark box-shadow. If you google "box-shadow examples" there is a website with box-shadows you can copy. Hope this helps! And keep on coding.

  0

  ---

  

  ATTAHIRU AHMAD ALKALI•240

  @AlqalisPosted 5 months ago

  @beowulf1958 thank you sir

  0