Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Fylo landing page with two column layout using css flexbox and grid

@george5-star

Desktop design screenshot for the Fylo landing page with two column layout coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@Mennatallah-Hisham

Posted

Hi George, You did great 👍

here are some suggestions to improve your code:

** alt**

  • for the logo img , it is better to add the website name/ brand name
 <img src="./src/assets/images/logo.svg" alt="Fylo" class="logo" />
  • for decorative img / illustrations you can use alt="" and add aria-hidden="true", which will skip the image for screen reader users.

** Footer info **

 <p class="footer__info-list-item">
          <img src="./src/assets/images/icon-phone.svg" alt="phone icon">
          <span class="text">Phone:+1-543-1234567</span>
        </p>
        <p class="footer__info-list-item">
          <img src="./src/assets/images/icon-email.svg" alt="email icon">
          <span class="text">[email protected]</span>
        </p>
  • you can use Email link, it is a <a> which gives you the option to specify an email address to send an email.
<a href = "mailto: [email protected]">[email protected]</a>
  • you can also link to a telephone number using <a> by using tel:
<a href="tel:+4733378901">
  • don't forget to add aria-hidden="true" to icon images

Hope you find this helpful, Happy Coding

Marked as helpful

0

@george5-star

Posted

@Mennatallah-Hisham Thanks for the feedback.

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join 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