(Fourth Challenge) Fylo dark theme landing page

Hi Diego,

1. For the little red error message, you're going to need to use JavaScript to implement it. You would add the error message under your input and hide it with CSS (or add it to the DOM using JavaScript, your choice). You would then add an onsubmit event listener to your form which runs a function that checks if what they submit is a valid email (you can use regex here to determine this). If it is invalid, you would show the error message to the user and return out of the function to prevent it from finishing. If it is valid, you can continue to POST their message to wherever your endpoint is. Presumably, for this challenge, there is no endpoint so you could just console.log out their message for the sake of the challenge.

If you don't want to implement JavaScript, consider implementing a pattern on the input element, seen here

As well, I notice on your <form> element in your index.html file, you have method=get on it. GET is used to request information from a resource, for example in a URL you might see user=Diego which means you can pull in information from there, and typically you would not use it for a form like this. Instead, the method would be POST. See here

1. For the social media icons, you could consider implementing them as inline svg rather than using the img tag. In your GitHub repo, if you click into images/facebook.svg it will display the rendered SVG. However, if you click the icon (which is two chevron symbols) that says Display the source blob it should show you the SVG in HTML format. You can then replace this with your img tags for the icons. You should also be able to see the source for the SVG in your code editor too. Then, you can set the fill CSS rule on the SVGs. So in your case it might be something like this:

.social-media > svg { 
fill: white 
}

.social-media:hover > svg {
fill: blue
}

Hope that helps?