Frontend Mentor - NFT preview card component
Design comparison
Solution retrospective
How do you change the color of the horizontal line? How do you work in the active state to the image? How can I make the Desktop version look more like the challenge?
Community feedback
- @correlucasPosted about 2 years ago
πΎHello Luis-Olivero, congratulations for your new solution!
Here's a tip for you about the card responsiveness:
Replace
width: 90%;
withmax-width: 320px;
to make the container responsive, not that with90%
the card is too big, use instead a value around320px
.card { background-color: var(--Very-dark-blue-card-BG); margin: auto; max-width: 320px; padding-top: 0.5em; border-radius: 20px; }
For the proper size in the profile image use 30px for height and width:
.card__profile--img { /* width: 20%; */ max-width: 30px; max-height: 30px; align-items: center; justify-content: center; }
π I hope this helps you and happy coding!
0 - @dracowarzPosted about 2 years ago
Hello Luis-Olivero!
-
For the horizontal line color, you can put this
color: rgba(0, 0, 0, 0.3);
Here the link you can pick any color you want:https://www.w3schools.com/colors/colors_picker.asp
-
For the active state, you have to use :active selector. You can check on this link:
https://www.w3schools.com/cssref/sel_active.asp
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