Skip to content
OverviewSolutions
9
Comments
2
Mostafa Hashem
@Mostafa-0

All comments

  • Mostafa Hashem•200
    @Mostafa-0Posted over 1 year ago

    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
  • Mostafa Hashem•200
    @Mostafa-0Posted over 1 year ago

    Good job on completing the challenge, as mousa said you can use flex or grid for centering but make sure you're using that on the container and not the card itself. Since you want to center the card , it has to be in a container that takes 100% width of the page so for example try using the main as the container and don't forget to give it a height as well so it can be centered vertically. One more thing, it's better to remove the width from the body as it may cause overflow and doesn't help with responsiveness. Goodluck!

    Marked as helpful
    0