Responsive recipe card using html semantic elements and flexbox
Design comparison
Solution retrospective
I pride myself on using HTML sementic elements and making a design almost identical to the challenge without having the figma model.
What challenges did you encounter, and how did you overcome them?One of the challenges I faced was to change the color of the numbers in the list. looking in the inspector, I found the "::marker" pseudo-element, and then I changed the color of the pseudo-element.
What specific areas of your project would you like help with?I was unable to center the bullets relative to the text in the tag in the Ingredients and Preparation Time section. Any help would be greatly appreciated.
Community feedback
- @josh-condePosted 7 months ago
Looks really good not sure how you changed the list colors
0@anisbenyPosted 7 months ago@josh-conde I've changed the properties of the instruction list numbers, targeting the li pseudo-element marker
ol >li::marker{ color: var(--Nutmeg); font-weight: 700; padding-right: 30; }
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