Non-responsive/Desktop solution for blog preview card

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 6 months ago

  Hi! It's a good work! Very interesting approach to create a greyish text by reducing opacity. Never saw that one, cool =)

  The only is that your card isn't centered as in the origin design. You could use a flex rule to achieve it.

  body {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  

  Oh, and I can give another tip. When you are using variable fonts it is not really necessary to use another font rules. That the trick with these var-fonts that you can customize them as you want. For example you need fonts with weights 300, 700 and 1000 for your work. You just add one rule:

  @font-face {
      font-family: "Figtree";
      src: url("../assets/fonts/Figtree-VariableFont_wght.ttf");
      font-weight: 300 1000;
  }
  

  And you have fonts with the range from 300 to 1000. So now you can just do stuff like this:

  .just-text {
      font-weight: 300;
  }
  .not-very-bold-text {
      font-weight: 700;
  }
  .very-bold-text {
      font-weight: 1000;
  }
  

  I don't want to say that your way is wrong, it's just a tip. Maybe I just too hyped with those variable fonts cos I learned about them just yesterday =)

  So, good luck!

  0
• 

  Heloisa Abrantes•50

  @heloabrantessbPosted 6 months ago

  Hey there! Your card was pretty much identical to the design, it is really good. My recommendation is to edit the README.md file to make it easier for people who will look at the repo to know what the project is about.

  I also looked at your CSS file and saw that you use px a lot, and maybe it would be better to use rem instead because rem is relative and adjusts to the font size of the user's browser.

  That is all, great project, hope that you make good progress!

  0