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 landing page with two column layout

Meriem1551 400

@Meriem1551

Desktop design screenshot for the Fylo landing page with two column layout coding challenge

This is a solution for...

  • HTML
  • CSS
2junior
View challenge

Design comparison


SolutionDesign

Community feedback

@Mostafa-0

Posted

Hi there, amazing job on completing the challenge! A quick note, to make the background curve properly, you can use a div at the beginning of the second section and then give that div the curve as a background (one for desktop & one for mobile using media queries). Then apply this snippet of code to position it properly:

.curveDiv {
background-size: cover;
position: absolute;
top: -78px;
left: 0;
width: 100%;
height: 80px;
}

Don't forget to give the second section a position relative and a background of the same color as the curve. Good luck and feel free to ask if anything I said was frustrating!

Marked as helpful

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