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

(Fourth Challenge) Fylo dark theme landing page

@DiegoVelazquez60

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

Solution retrospective


Hi! This is my fourth challenge and honestly I would aprecciate if someone helps me with a little issues:

  1. I don´t know how to make the little red error message to apear if there is an invalid email ( it is specified at the active-states.jpg image , inside the desing folder)

  2. How could I turn the social medias icons to the light blue color if they are originally black (only in the active state of the a.social-media)?

I will be completely grateful if someone helps me... please :,,,(

Community feedback

Cian 80

@ciandm

Posted

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?

0

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