Responsive Flyo Landing Page With Two Column Layout

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted over 3 years ago

  👋Hi Gabriel!

  Regarding your questions:

  • What I did to make the underline goes through the image, is by using background-image and width. I set the width: 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 using px 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 the img tag, the screen reader will automatically tell that it is an image 😉.
    • For any decorative images, each img tag should have empty alt="" and aria-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 with section tag for more semantic markup.
    • Wrap the input and the button with a form tag and also add type="submit" to the button, since if this is a "real website" then it will submit the user email.
  • 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!

  10

  Marked as helpful
• 

  Gabriel Ayuba•270

  @Tzienom

  Posted about 3 years ago

  Hey, sir. I was away for a pretty long time, but I'm grateful for your feedback. It was helpful.

  00