Social Links Profile plain HTML/CSS

Community feedback

• 

  Bernardo Poggioni•5,360

  @R3ygoskiPosted 7 months ago

  Hello Kristina, first of all, congratulations, your project is very good, and almost similar to the proposed project.

  The first tip I'm going to give you is, try using the Perfect Pixel extension, it helps a lot to make your project more closer to the proposed design.

  Second tip, it's about importing fonts, it's not difficult and you don't need to worry about it, if you're importing from Google Fonts, just take the embed code and paste it into the head of your HTML.

  Now, about font-face, this part may be a little more difficult and I believe this is where you are having difficulty, correct? Well, I'll put the font-face you wrote here and break it down.

  @font-face {
      font-family:"Inter", sans-serif;
      src: url('https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap');
    font-weight: 400, 600,700;
    font-style: normal;
  }
  

  • font-family: You are setting the font family that you want to use, here's basically the name of your font, like "Inter-SemiBold", "Inter-Regular" and so on.
  • src: Here you pass the directory to your font or an url (as you did) .
  • font-weight: Here you are using 3 values, but you cannot do this, you need to create other 3 @font-face to use each of those weights. Shorting, font-weight just accept 1 value.
  • font-style: Here you define the Font Style, if it's italic, oblique or normal.

  Here's a link about @font-face: W3School - Font-face.

  Again, congrats for conclude this project, if something I said was unclear, please, comment below and I will try to help.

  Marked as helpful

  1
• 

  kristinakasalova•90

  @kristinakasalovaPosted 7 months ago

  Hello, Bernardo,

  Thank you very much for your kind words. I got the Perfect Pixel extension, will test it in my next assignment (or even this one actually, and redo the screens).

  As for the @font-face, I do follow the W3School examples, though usually get swayed by the Google fonts' copy code/embed section, that show it differently... :) Need to remember not to get fooled!

  1