recipe-card

Congratulations on completing this challenge! The desktop and mobile versions look great, and you solved the real challenge, which was to color the list markers. Many people who attempt this challenge ignore this detail entirely. Your solution is unique to say the least.

That said, there is an easier way: use the CSS ::marker pseudo-element. This pseudo-element allows you to style the bullets and decimals in front of each list item in a list. This article explains how to use it.

So, for example, if you remove the <p class="scale">&bull;</p> and <p>1.</p> elements and change the instructions list to an <ol>, you could save yourself a dozen lines of code by using:

      /* for list styling */
      .preparation li::marker {color: var(--accent-color-rose);}
      .ingredients li::marker, ol li::marker {
        color: var(--accent-color-brown);
        font-weight: bold;
      }

Hope this helps.