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
Oops! You need to be logged in to do that
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Fylo dark theme landing page

@moKabir

Desktop design screenshot for the Fylo dark theme landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison

SolutionDesign

Reports

Accessibility report (7)
error

Img element is the only content of the link, but is missing alt text. The alt text should describe the purpose of the link.

<a class="navbar-brand" href="#">
      <img class="nav-logo" sr...</a>
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img class="test-img" src="images\profile-1.jpg">
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img class="test-img" src="images\profile-2.jpg">
error

Img element missing an alt attribute. Use the alt attribute to specify a short text alternative.

<img class="test-img" src="images\profile-3.jpg">
error

Anchor element found with a valid href attribute, but no link content has been supplied.

<a href="#">  <i class="fab fa-twitter-squa...</a>
error

Anchor element found with a valid href attribute, but no link content has been supplied.

<a href="#">  <i class="fab fa-facebook-squ...</a>
error

Anchor element found with a valid href attribute, but no link content has been supplied.

<a href="#">  <i class="fab fa-instagram fa...</a>

patel mohammed sarhan’s questions for the community

If you would like to get feedback on my code

Community feedback

P
Jen 1,230

@En-Jen

Posted

Hey Patel, nice solution. Looks pretty close to the design :) I just have a few suggestions.

  1. Your images look a bit squashed (like the right and left sides have been squeezed together). You can avoid this by giving the width a value and setting height: auto;

  2. The features are not centered at all screen widths.

  3. In future projects, I would try to avoid using id names for CSS selectors and instead use class names. You can read more about the rationale for that here: https://paulcpederson.com/articles/css-for-people-who-hate-css/

  4. On screen widths below 1128px, the features section and the productive section could use more whitespace between them.

Keep it up! -Jen

1


@moKabir

Posted

@En-Jen i would like to contact you Can i get your contact details

0

P
Jen 1,230

@En-Jen

Posted

@moKabir feel free to drop me a message on the Frontend Mentor Slack channel. I think you should be able to find me if you search for “Jen Speak”

0

Please log in to post a comment

Log in with GitHub
Slack logo

Join our Slack community

Join over 180,000 people taking the challenges, talking about their code, helping each other, and chatting about all things front-end!