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

Completed Using Atom, Mobile first (HTML, CSS and Bootstrap)

@Vaibhav-chandak

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


Please provide the feedback. I can't find a way to set the background as required. Also there is a little different color at the bottom of the website and I can't figure out it's cause.

Community feedback

argel omnes 1,800

@argelomnes

Posted

Hey Vaibhav,

The background is provided as an image (bg-curvy). You can link to it as an img source or as a background-image. The different color at the bottom is caused by paragraph's margin. You can remove it by adding margin-bottom: 0; to .attribution. One suggestion is to use a higher amount, like 3-4rem, for your border-radius so it keeps its roundness for all screen sizes. Nice work!

2

@Vaibhav-chandak

Posted

@argelomnes Thank you for the feedback. Adding margin-bottom: 0; to .attribution solved my problem. In the background portion I know how to insert background background-image:url() but I am unable understand how to apply it in proper place. The color before the curve is different and color after the curve is different and I am unable to do this.

0
argel omnes 1,800

@argelomnes

Posted

My bad. You can use 2 divs. So the top div contains bg-curvy with the same background color as you have now. And the bottom uses a background color similar to bg-curvy's. You'll probably need additional sections that will expand to the browser's full width so they won't appear cut-off.

1

@Vaibhav-chandak

Posted

@argelomnes Thanks, it solved the problem

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