@vanzasetia
Posted
Hello, CharlieeLuna! 👋
For the hover effect of the button, you can specify each property to have its own transition duration.
.btn {;
/* transition: 0.2s ease-in; */
transition: box-shadow 0.1s ease-in-out, background-color 0.2s ease-in-out;
}
So, what the above code will do is to set transition duration for the box-shadow is 100ms while the background-color is set to 200ms.
I recommend adding rel="noopener" to any anchor tags that have target="_blank". This is a security essential for external links. I suggest reading the web.dev article to learn more about this.
Lastly, I suggest using the actual dollar sign ($) instead of using character references. UTF-8 support almost all characters (including Emoji) which means they can be written directly.
Hope this helps. 🙂
Marked as helpful
@CharlieeLuna23
Posted
@vanzasetia Thanks a lot, that did it for the transition!
Regarding the $ sign I will change it too, it's just that that's how it was by default in the file so I didn't think too much about it.
And I don't think I have any dead links in this project but going to consider it for future ones.
@vanzasetia
Posted
@CharlieeLuna23 You're welcome! 😊
I notice one anchor tag that has target="_blank" (the Frontend Mentor link).
<footer>
<p class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://www.frontendmentor.io/profile/CharlieeLuna23">CharlieeLuna</a>.
</p>
</footer>
@CharlieeLuna23
Posted
@vanzasetia Oh, you're right, my bad, that's just a copy-paste from a previous project so I didn't really looked into it.
@vanzasetia
Posted
@CharlieeLuna23 No worries at all! 👍
