Fylo landing page with two column layout using pure CSS.

Hey @Rohitgour03 - nice job here!! 👍

Here's a few small comments for you to consider:

1. I'd add curser: pointer to your buttons - this seems to be a common convention and what most people expect.

2. Do you have a label associated with your input elements? You should have, but the FEM accessibility linter isn't picking it up as an error. Here's a nice article that gives a good explanation of why this is: https://css-tricks.com/html-inputs-and-labels-a-love-story/ (you can always hide the label using CSS if you don't want people to see it)

3. I noted that you sent outline: none on everything. If you remove outline styles then it is important to add back in your own custom outline styles as otherwise it can make it very hard for keyboard users to navigate the page.

If you don’t like the default styles I have found the advice in this article very useful, and use it in pretty much all my projects: https://css-tricks.com/the-focus-visible-trick/

Here's the code I usually add:

/* Add styled focus states on tab not hover */

:focus-visible {
  outline: 3px dotted currentColor;
  outline-offset: 0.25rem;
}

:focus:not(:focus-visible) {
  outline: transparent;
}

1. Lastly, I think the links in your social icons also need an accessible name - if you don't want to add text adding aria-label: Facebook or whatever to the link itself should solve this problem and get rid of those errors.

2. Lastly I noted the logo in the footer's color wasn't changing. To do this you either need to inline the svg and change the fill setting, or make a copy of the file and change the fill setting. I find svgs super tricky, so this might not work but it's what I would try!

Great work and keep going!!

Cheers 👋

Dave

Hello there,

I suggest using this tool to change color of svg files. It works perfectly.

https://codepen.io/sosuke/pen/Pjoqqp