@lukasriha
Posted
Hi Xyzeez!
Very nice attempt, I love the animations, the fact that you used BEM and the usage of :is and :has in css is also very nice!
Couple of small hints:
You do not have to use translate3d for your animations if you're animating in one direction only. You can use this:
transform: translateX(4px);
When loading fonts, I recommend loading them in the <head> element in your html like this:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,400;1,800&display=swap" rel="stylesheet">
Overall there are three ways to import fonts:
- Static (like you did)
- @import() in css
- Using links (my suggested approach)
Using the <link> approach has some benefits such as caching etc.
If you insist on using the @font-face approach, I recommend using a format other than ttf - ideally woff2. It stands for web open font format 2. This format is optimized for web browsers, will look best and load the fastest on web sites :)
Other than that, very well done! Keep hacking :)
Marked as helpful
@xyzeez
Posted
@lukasriha thank you for your feedback and for taking the time to review my submission, I really appreciate you.
I've immediately corrected the shake animation on the inputs. As regards the fonts, I'd ensure to have them fixed as soon as I get the recommended format, I went ahead with the given resource and I want to practice more on using static fonts.
@lukasriha
Posted
Happy to help :)
@xyzeez
