I'd like to learn more about how to make this solution more accessible, as the rating options can't be selected with tab at the moment.
-se subió pero parece que la pagina de "Github" no carga el tipo de fuente
What specific areas of your project would you like help with?-¿como puedo hacer que la pagina de github cargue también las font family del proyecto?
Creo que el problema es que tu fuente está en input.css, pero no lo ligaste en el HTML
<link rel="stylesheet" href="src/output.css">
deja esa línea, pero abajo añade una donde enlaces input.css
Great job! I'd only recommend looking into css flexbox or css grid to align the card vertically.
Hi there! You did amazing, in fact, I actually learned something while looking at your code, you're going to save me so much time in the future, I didn't know you could establish variables! (I'll credit you in my next project, of course).
Accessibility
Landmarks are very important for people who use screen readers, so get used to applying them. They are your basic built in tags that specify the content within them , like <main>, <footer>, <header>, etc. All HTML must be contained by landmarks
I use <main> to encase the focus of the website (in this case, the QR code), and footer for the attribution:
<footer>
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="https://github.com/AlvaNeedsFood">Alvaro Alvarez P</a>.
</div>
</footer>
Centering vertically
Whenever I have issues with flexbox I use grid, it's very easy to understand. In this case, you just need to use:
display: grid;
place-items: center;
height:100vh;
Hope this helps!
Hey! I don't know much about React, but I think your images are not linked to the same folders as the ones referenced in the code, or at least I can't find any folders with those names.
Hi! To add hover, just take your element's class and start a new declaration in you stylesheet:
.image:hover {
background: grey;
cursor: pointer;
}
Those values are just an example, you can add whatever you like and it will show when you hover the element, the important part is the :hover after the element
You can also fix that border by rounding the corners of your container.
I would also recommend you to stop adding inline CSS because it will get messy once you get to work on bigger projects. Use a .css file or the <styles> tag instead.
As a last note, please use always use alt text for images and landmarks, it's important for accessibility!
