This is my favourite so far I can feel myself getting better & better
Design comparison
Solution retrospective
Had a really good time with this one guys and I am so happy with how it has turned out, as far as I am aware there are no problems but any feedback is welcome. I still havent learnt how to make it accessible for mobile but that module is coming up soon in the course I am taking, they said not to worry about it for now.
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Mauger, Congratulations on completing this challenge!
Amazing solution! I’ve just opened the solution’s live site and I liked the job you’ve done a lot. I’ve some suggestions for you:
The background wave image is missing and here’s the step-by-step to add it.First of all add the image as a background inside the
body
this is the code for that:background-image: url(../images/pattern-background-desktop.svg);
Then you add
background-repeat: no-repeat
to avoid the background repeating andbackground-size: contain
to make it fit full width and center with the card this is the best choice, but an alternative to resize it is to usebackground-size: 125%
, Here’s the code with the modification and the image applied as background:main { background-size: contain; background-image: url(./images/pattern-background-desktop.svg); background-repeat: no-repeat; font-family: 'Red Hat Display', sans-serif; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: hsl(225, 100%, 94%); }
✌️ I hope this helps you and happy coding!
Marked as helpful0 - @mauger1998Posted about 2 years ago
This is very good advice I completely forgot about the background thankyou very much
0
Please log in to post a comment
Log in with GitHubJoin 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