Submitted about 2 years ago
the site is responsive and has links to other sites.
@Xlence1624
Design comparison
SolutionDesign
Community feedback
- @MelvinAguilarPosted about 2 years ago
Hi @Xlence1624 👋, good job on completing this challenge! 🎉
Here are some suggestions you might consider:
- Try to use semantic tags in your code. Click here for more information.:
With semantic tags:
<body> <main class="card"> . . . </main> <body>- The container isn't centered correctly. You can use flexbox to center elements:
body { width: 100%; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }Links with more information:
- The Complete Guide to Centering in CSS.
- A Complete Guide to Flexbox (CSS-Tricks).
- How TO - Center Elements Vertically (W3Schools).
- CSS Layout - Horizontal & Vertical Align (W3Schools).
.
- The music icon is for decoration purposes only, so it could be hidden from screen readers by adding aria-hidden="true" and leaving its alt attribute empty:
<img src="./images/icon-music.svg" alt aria-hidden="true">I hope those tips will help you.
Good job, and happy coding!
Marked as helpful2@Xlence1624Posted about 2 years ago@MelvinAguilar thank you so much. I appreciate your helpful comments. I'll ensure I get back and apply everything you pointed out.
Thanks for the links too.
1
Please log in to post a comment
Log in with GitHub
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