Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I would like to receive feedback, so if you have any comment to do about my code, just do it :) thx
Community feedback
- @0xabdulkhaliqPosted 7 months ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have a suggestion regarding your code that I believe will be of great interest to you.
CSS π¨:
- You have used media queries to change the
width
ofmain
component. Instead of doing this,
main { width: 300px; } @media (min-width: 750px) { main { width: 400px; } }
- You can use
max-width
which helps you to write css efficiently, for example
main { max-width: 400px; margin: 0 1rem; }
- We additionally add
margin
for horizontal axis with value of1rem
(about 16px) this will help your component to change it's width until it reaches400px
of width.
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
0 - @Harsh-Kumar-DwivediPosted 7 months ago
Hi @LucasGitHubx,
Nice Solution !
I would suggest following:-
In comparison to the given design, active states effect is not present. I think you should add following code:-
main:hover { box-shadow: 20px 20px var(--Black); } main:hover h1 { color: var(--Yellow); }
Hope it is helpful !
Happy Coding !
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