Kerby
@KeremBakanAll comments
- @palmettophoto@KeremBakan
You can use transition on button hovers.
You can use
mix-blend-mode: screen
in button class to make same color with background even you change background color it will be same color.The alt attribute should not contain the words "image", "photo", or "picture", because the image tag already conveys that information.
The alt attribute should explain the purpose of the image.
If you want to learn more about the alt attribute, you can read this article. 📘.
Happy Coding 😁
- @Eneyee@KeremBakan
Your
<img>
tags should have alt attribute.The alt attribute should explain the purpose of the image. Uppon scanning the QR code, the user will be redirected to the frontendmentor.io website, so a better alt attribute would be QR code to frontendmentor.io.
If you want to learn more about the alt attribute, you can read this article 📘.
Every page should have <h1> tag because it is important for screen readers. If you want to add <h1> tag but making it only visible for screen readers, you can use something like this.
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
Your page should have
<footer>
tag.You can use reset.css or normalize.css to reset default styling.
Happy Coding 😁
Marked as helpful - @mateorinland@KeremBakan
You don't have to reset default styling manually just use reset.css or normalize.css to reset default styling.
Your background is fine you don't have to worry about it.
Your font is not same with design I assume default styling causing it.Just reset styling and try again.
Sorry for bad english.
Other than that God Job.
Happy Coding 😁
Marked as helpful - @melisguclu@KeremBakan
Your page should have
<footer>
tag. Every page should have<h1>
tag because it is important for screen readers. If you want to add<h1>
tag but making it only visible for screen readers you can use something like this..sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
- @mbongoelvis@KeremBakan
You should use
<main>
tag it is semanticly important. Every page should have<h1>
tag because it is important for screen readers. If you want to add<h1>
tag but making it only visible for screen readers you can use something like this..sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
Happy Coding 😊
Marked as helpful - @brspkts@KeremBakan
You have to use header tags in order <h1> <h2> <h3> go on like this. You should use reset.css or normalize.css to reset browsers default styling. To center .container on the page you can also use this code snippet.
.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Other than that good job.
Happy Coding