@NaveenGumaste
Latest solutions
Latest comments
- @erickarugu
Hi Naveen👋,
Good job! I love your solution. It looks great.
Happy coding 💻!
Marked as helpful - @shibuwd@erickarugu
Hello Shibu👋
Your solution looks great.
- @kamari-1@erickarugu
Also, I think synchronizing the body background-color theme switch with that of the cards will be a great add-on.
- @kamari-1@erickarugu
Hello Clement👋,
Your implementation looks superb. I love the layout and how you adopted the BEM CSS class naming convention👍
The site looks great. The styling is working perfectly on my end too. A minor suggestion would be maybe to fix the few HTML issues as highlighted in the report.
Regarding styling the top-border, I would suggest you go with the simpler and direct border-top styling, i.e for example border-top: 4px solid blue; in the various cards instead of using the ::before selector. I think this makes the border styling more similar to the one in the design. For the HSL not working, you can try converting the colors to RGB or hex to work in the linear-gradient.
Otherwise, job well done!🙌 Happy Coding!😊
- @iamsayantanipatra@erickarugu
Hello Sayantani👋,
Good job! Your solution looks splendid. Regarding the blue border, Bootstrap has a box-shadow CSS style for buttons in focus state:
.btn:focus{ box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%); } So overriding this by setting it to none, i.e box-shadow: none or tweaking it to your liking will get you there.
Happy Coding!
Marked as helpful - @TheTryfechta@erickarugu
Hello Dardian!
Well done on completing this challenge👏👏 Regarding your question I see you have the transform: translateY(-3em) on your .content div and this is pulling all the contents inside this div up leaving a space at the bottom of the card. You can negate this by removing padding: 1.5em and margin-top: 1.5em; and replacing it with transform: translateY(3em) on the .stats div.
That is one way to do it. Happy coding!👩💻
