@Alex-Archer-I
Posted
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!