Results summary page built with HTML, CSS and JavaScript
Design comparison
Solution retrospective
Flexbox is doing all the tricks for css. I used fetch to render data from json file, any idea or best practices on my javascript file?
Community feedback
- @Kamlesh0007Posted over 1 year ago
Congratulations on completing the challenge! That's a great achievement, and I'm sure you put a lot of effort into it. I really liked the way you approached the challenge and the code you wrote. You demonstrated a good understanding of the concepts and applied them effectively to solve the problem.I have a few suggestions to improve your code further. you need to make the container center properly use min-height:100vh which is used to ensure that a container or element takes up at least the full height of the viewport (the visible area of the browser window) regardless of the content inside it.
body { font-family: 'Hanken Grotesk', sans-serif; margin: 0; display: flex; flex-direction: column; align-items: center; min-height: 100vh; justify-content: center; } remove the following lines of code main { margin-top: 90px; }
and also you need to add hover effect on button as per design. Here's an example code snippet:
.button:hover { background: linear-gradient( 252, 100%, 67%, 241, 81%, 54%); }
Marked as helpful1@MelakuAlehegnPosted over 1 year ago@Kamlesh0007 Thanks for the suggestion, it has fixed my issue, but can you give me more info on vh so I could understand it very well?
0@Kamlesh0007Posted over 1 year ago@MelakuAlehegn you can refer w3schools to understand vh
0 - @NehalSahu8055Posted over 1 year ago
Hello Coder 👋.
Congratulations on successfully completing the challenge! 🎉
Few suggestions regarding design.
➨ Add
min-height:100vh
in the body to properly center the card.➨You forgot to add hover color of button.
- Add it by by adding this to your button:hover
background-image: linear-gradient(#6542FE,#342CE2);
I hope you find this helpful.
Happy coding😄
1
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