I achieved the solution by using bootstrap css grid and card. I also added a backdrop to simulate the preview design. The page is responisve for both desktop and mobile design. I had to do two "d-flex justify-content-center align-items-center" to get the result which I found its a little bit too much. Anyone can provide better solution will be appreciated!
@chill31
Posted
Great design! The colors and padding match perfectly with the challenge design.
I found only 1 issue with this, which is the background, it doesn't quite take up the full body, and there's a lot of whitespace between the light blue background and the white background of the body.
@Mygaverse
Posted
@chill31 I was trying to simulate that preview of the design, which have a light blueish backdrop before the white background.
@0xabdulkhaliq
Posted
This comment was deleted
@Mygaverse
Posted
@0xAbdulKhalid If you looked at my code, I did have a h1 header in the header section of the body. And I did add sr-only for its class. But I run into an issue that the header content was shown on the page. So I went to set sr-only class for display:none helping not shown content. However, the waring about h1 header still shown. What I should do to improve this problem. Thanks!
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
