Submitted over 1 year ago
Reponsive landing page use bootstrap / Flexbox
@Genildocs
Design comparison
SolutionDesign
Solution retrospective
Hello! this is my solution to the challenge. I utilized the Bootstrap framework in conjunction with flex-box and the Sass pre-processor. I would greatly appreciate your evaluation of my work and any tips you may have regarding the implementation of the bottom background.
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have some recommendations regarding your code that I believe will be of great interest to you.
BACKGROUND iMAGE πΈ:
- Looks like the background images has not been properly set, So let me explain how you can easily apply the
background color
with thebackground svg
they provided.
- Add the following style rule to your css, after completing these steps you can experience the changes.
-- FOR DESKTOP -- body { background-image: url('../images/bg-pattern-top-desktop.svg'), url('../images/bg-pattern-bottom-desktop.svg'); background-size: 50%, 80%; background-position: top -23% left -9%, bottom right -30%; } -- FOR MOBILE -- body { background-image: url('../images/bg-pattern-top-mobile.svg'), url('../images/bg-pattern-bottom-mobile.svg'); background-repeat: no-repeat, no-repeat; background-position: top left, bottom right; background-size: 100%, 100%; }
- Tip, Don't forget to generate a new screenshot after editing the
css
file
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
Marked as helpful1
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