Design comparison
Community feedback
- @bally4hPosted over 1 year ago
Hi!
Very nice solution. I want to suggest you some short advice.
I think you could use the given svg mobile and in media query section the desktop file as backround-image,. The background-repeat property could be no-repeat and a background-size: contain. In this case the svg background pic will only one time on the screen.
Maybe you could use in the html some classes for the same properities, because too much #id is a bit confusing and hard to read/understand the css file.
for example these are in ypur code:
#plan #plan-box { ... } #plan #plan-box #text { ... } #plan #plan-box #text h3 { ... } #plan #plan-box #text p { ... } #plan #plan-box #link { ... } #plan #plan-box #link a { ... } #plan #plan-box #link a:hover { ... }
Instead of these you can use classes in the html.
for example in html (<p class="bold">) and in css: .bold: {font-weight: 700;} And give all the <p> the "bold" class which you want to be bold, and so on the other properties..
Keep going!
Marked as helpful0
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