3-column preview card component

Solution retrospective
Hello everyone! 👋
Thanks for checking my solution code to the 3-column preview card component challenge
At my learning process I learned how to use in nth-child in stylesheet in order to use different styles instead creating more classes.
.col:nth-child(1) button {
color: var(--bright-orange);
}
.col:nth-child(2) button {
color: var(--dark-cyan);
}
.col:nth-child(3) button {
color: var(--very-dark-cyan);
}
also I learned how to use in outline method for button activity states, because somehow, using in border method, expanded other elements size.
.col .button:hover {
background: none;
outline: 2px solid var(--background-headings-buttons);
color: var(--background-headings-buttons);
}
I'm happy to see that after 6 challenges I did, the process of coding became faster for me.
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Desktop-first workflow
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Kira Weizman Shapira's solution.
Join 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