flyo-landing- page-with-two-column

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  Hi, Anitanuamh! 👋

  First, you need to use <header> element to wrap the logo and the navigation links. Then, wrap the navigation list with the <nav> element.

  I recommend moving the logo outside the <nav> element. Then, you should remove <div class="log">. You do not need a wrapper for the logo.

  Add alternative text to the logo. Logo is an important content of the page. It is not decorative, and not the one with blank alternative text. Without that information, a screen reader user or a search engine will not know what the site or the project is called.

  For images containing text, make sure the alternative text includes the image's text. In this case, the Fylo logo should have an alt value of “Fylo”. Reference: Checklist - The A11Y Project #for-images-containing-text-make-sure-the-alt-description-includes-the-images-text

  Next, you can have a <div class="container"> inside the <header>.

  Once the HTML markup is correct, we can move on to the styling.

  For the styling, the <div class="container"> that wraps the logo and the <nav> element should be a flex container. Then, you can use justify-content: space-between to push the <nav> to the right side of the page.

  I hope this helps. Happy coding! 😄

  Marked as helpful

  1

  ---

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  @Anitanuamh

  Let me know if you have any questions. 🙂

  0

  

  Anitanuamh•210

  @AnitanuamhPosted over 1 year ago

  @vanzasetia sure! thanks.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 1 year ago

  @Anitanuamh

  You are welcome! 👍

  0