Submitted 7 months ago
Users hover and focus states for all interactive elements on the page
@AlhassanMariam
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I'm proud I didn't spend decades on this design
What specific areas of your project would you like help with?I would like suggestions on how to make the 'button and 'a' tags sync
Community feedback
- @DR-KSP-VIRUSPosted 7 months ago
Hi @AlhassanMariam congratulation.
So I have noticed you have not added
CSS
code for responsiveness. Try to learn about media queries to help you improve on your designs.Hope this helps.
0 - @VickyAzolaPosted 7 months ago
Hi there! 👋 Awesome job completing this challenge.
So, <button> and <a> are not meant to be together since they have different purposes:
- button should be used when you want something to take action on the same page.
- a is used when you have links that take you away from the page.
In this case the more semantically appropriate tag is <a>
<main> ..... <a href="">GitHub</a> <a href="">Frontend Mentor</a> <a href="">LinkedIn</a> <a href="">Twitter</a> <a href="">Instagram</a> </main>
Take the style on the button and add it to the a:
a { text-decoration: none; color: hsl(0, 0%, 100%); background-color: hsl(0, 0%, 20%); width: 230px; height: 30px; margin: 5px; border-radius: 5px; } a:hover{ color: hsl(0, 0%, 8%); background-color: hsl(75, 94%, 57%); }
Hope this helps!
0
Please log in to post a comment
Log in with GitHubJoin 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