@vanzasetia
Posted
Hi, Sarah Soares! 👋
You can use hsla
or rgba
color format to only reduce the opacity of the cyan color. This way, the eye icon can have opacity: 1
.
I have a few suggestions for improving your solution.
- Replace the
<article class="card">
with<main>
. All the page content should live inside landmark elements.<article>
is not a landmark element. - Use interactive elements for any elements that have interactivity. Interactive elements can either be links or buttons.
- For your information, anchor tags are for navigation. The
<button>
element is for an action like opening a modal, submitting a form, toggling an element, etc. It is essential to use the correct elements. - Wrap the text with a meaningful element like a paragraph element. There should not be text in
<span>
and<div>
alone. - Use
rem
orem
instead ofpx
for font sizes. Never usepx
unit. Relative units such asrem
andem
can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSS
I recommend creating the overlay of the Equilibrium using pseudo-element and absolute positioning; use both of them. This way, the HTML can be simpler. You can see the solution from @IlnaraAckermann as your reference: Frontend Mentor | Css3, HTML5, flexbox, pseudo-class and pseudo-elements coding challenge solution
I hope you find this useful. Have fun coding! 😄