Responsive Flyo Landing Page With Two Column Layout
Design comparison
Solution retrospective
Hello guys. I just completed the 'Flyo Landing Page With Two Column Layouts'. It was a pretty great experience for me whilst building the project. I had just a few challenges though; here goes:
-
The link that says 'See how flyo works', what's the best solution to make it underlined all through to the image?
-
Initially, I made the div container carry the borderline for link and hover state. When it is hovered and the borderline moves up, the rest of the page also moves up. Please, what's the solution to get this done right?
-
When the CTAs are focused, how do I get it to give user feedback if no email is entered when submit button is pressed?
Community feedback
- @vanzasetiaPosted almost 3 years ago
👋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 helpful1 - What I did to make the underline goes through the image, is by using
- @TzienomPosted over 2 years ago
Hey, sir. I was away for a pretty long time, but I'm grateful for your feedback. It was helpful.
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