Submitted about 1 year ago
Result Summary Page #html #css #javascript
@kahkashanshaik
Design comparison
SolutionDesign
Solution retrospective
I have completed a task of Frontend Mentor, building a Summary Card using a combination of HTML, CSS, and JavaScript. The task involved designing and coding a dynamic summary card that displays key information in an attractive and user-friendly format. Frontend mentor community feedback on JavaScript code optimization will give me the improvise my JavaScript much better.
Community feedback
- @anderson-fndzPosted about 1 year ago
- font-family is wrong, try using it in your code:
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;700;800&display=swap'); body{ font-family: 'Hanken Grotesk', sans-serif; }
- to make the container more faithful to the project try using px:
.card-container{ width: 738px; height: 514px; display: flex; border: none; border-radius: 35px; box-shadow: 5px 5px 5px 2px #00000021; }
- for button add gradient in hover pseudo class
.btn{ width: 288px; height: 56px; margin-top: 40px; border-radius: 30px; background-color: #303B59; color: white; border: none; font-size: 18px; font-weight: 700; cursor: pointer; } .btn:hover{ background: linear-gradient(hsl(252, 100%, 67%), hsl(241, 81%, 54%)); }
Marked as helpful0 - @kahkashanshaikPosted about 1 year ago
Thank for your time on reviewing my code and to give suggestions on the work which I did. I will make the changes.
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