E-commerce product page

Solution retrospective
Any feedback is welcome. Happy coding!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @fazzaamiarso
Hello Carolina! Great work!
There are some improvements you can make to this code.
<div onMouseEnter={()=>setHoverContact(true)} onMouseLeave={()=>setHoverContact(false)} className='w-auto cursor-default'> <h1 className='relative text-ec-dark-grayishblue font-16 '>Contact</h1> <hr className={hoverContact ? 'relative top-12 border-2 border-ec-orange':'relative border-2 top-12 border-transparent '} /> </div>
- You don't need to use state and
onMouse
handler to have the children styled based on parent state. Tailwind have agroup
class that you can use. Tailwind's docs on group - You mustn't have multiple h1 on a page. Why? because
h1
means it's the title of the page. You can replace it with other tags such ash2
Here is the improved version.
<div className=' group w-auto cursor-default'> <h2 className='relative text-ec-dark-grayishblue font-16 '>Contact</h2> <hr className= 'relative top-12 border-2 border-transparent group-hover:border-ec-orange ' /> </div>
I hope it helps! Cheers!
- You don't need to use state and
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord