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

Fylo Website

@KevinSalina

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


Had a lot of trouble with the footer section and the wave/dual background. I came up with some pretty janky solutions so any feedback on those areas would be great, thanks!

Community feedback

Anna Leigh 5,135

@brasspetals

Posted

Hi, Kevin! 👋

Congrats on completing this challenge! This one definitely had some tricky bits.

For the curvy background, I suggest first deleting the .background div and the two img tags you have below your header. Then you can set those styles in your header instead. Set the background-color to the one you had in your background div. Then you can set the curvy image as the background-image and position it with background-position - I think bottom center works best in this case . You might have to adjust some padding and margins to make it just right, but generally this should do the trick! In case this is a bit unclear, here's the code I suggest putting in your header :

background-color: hsl(217, 28%, 15%);
background-image: url("images/bg-curvy-desktop.svg");
background-position: bottom center;
background-repeat: no-repeat;

Hope this helps! Let me know if it works for you and happy coding!

1

@ctnance

Posted

Hi Kevin--really good job on this one!

Don't forget to give your email input a name attribute for referencing purposes (not necessarily needed for the challenge, but necessary for standard HTML code).

I saw you mentioned that you struggled with the footer; for the telephone and email icons, you could try putting your img and p tag inside of a span tag (you may need to play with the padding for proper orientation). Otherwise, just generally playing with your margins/padding should help in other cases.

Overall, you did a great job!

1

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