Intro component with input validation

Hello Jason, congrats on finishing the challenge, almost pixel perfect, great job!

If you don't mind, I will try to do my best to answer your questions.

1. Perfectly fine if you find your code more readable and organized, in popular frameworks for example, you will have all your code separated in a lot of files wich makes the code a lot more readable if it has a good organization.

2. This is cause because you are adding those two extra pixels that push the other items down, you can get and easy work around with box-shadow instead of border, for this particular case try with: box-shadow: 0 0 0 2px rgb(255, 122, 122);

3. Try selecting more things at once and loop at them, for example you could have selected all of your inputs and identify throw id's to use diferent validations on the same function but for diferent inputs, is a bit tricky to refactor, but using forEach() can help you a lot to refactor your code and make it more clear.

4. I don't see that you are lacking that much on accessibility, you could for example use a section on the left div that is semantically related. Just don't forget to add alt tags to your images and structure well your document, so screen readers can have a better time.

Hope my answers help you, if you have anymore questions don't hesitate to ask!