@vanzasetia
Posted
👋Hi Gabriel!
Regarding your questions:
- What I did to make the underline goes through the image, is by using
background-image
andwidth
. I set thewidth: 19ch;
to make sure that it will underline the background image. You might want to see my solution on this challenge to understand how it works. - Could explain more about your second question, which container are you talking about? There are two containers on your page. Are you still talking about the same link?
- You can give the alert or error message to the user without any JavaScript. Read this CSS Tricks article.
Feedback:
- Accessibility
- Don't change the root (
html
) font size. Keep it as default. Changing the root font size, especially usingpx
can cause a lot of issues. Here what an accessibility expert has said about it. Remember that users use different technology and zoom settings to make the text larger or smaller. Changing root font size can break all sorts for them. - You don't need to put the word
logo
on the alternative text. The user who uses screen reader already know that it is a logo the same as we see the Fylo image. Another reason for it, since you have already used theimg
tag, the screen reader will automatically tell that it is an image 😉. - For any decorative images, each
img
tag should have emptyalt=""
andaria-hidden="true"
attributes to make all web assistive technologies such as screen reader ignore those images. In this case, all illustration images, phone and email icons are decorative only. - You might want to read this article from W3C WAI about images.
- I would recommend wrapping each section inside the
main
tag withsection
tag for more semantic markup. - Wrap the
input
and thebutton
with aform
tag and also addtype="submit"
to the button, since if this is a "real website" then it will submit the user email.
- Don't change the root (
- Other
- This chunk of HTML code should be lived inside the main landmark, since this is a hero section or similar like that.
<div class="header-text">
<h1>
All your files in one secure location, accessible
anywhere.
</h1>
<p>
Flyo stores your most important files in one secure location.
Access them wherever you need, share and collaborate with friends,
family, and co-workers.
</p>
<div class="header-cta">
<input type="email" name="email" placeholder="Enter your email...">
</div>
<div class="header-button">
<button>Get Started</button>
</div>
</div>
<div class="header-image container">
<img src="images/illustration-1.svg" alt="illustration-1">
</div>
That's it! Hopefully, this is helpful!
Marked as helpful