Recipe Details Page - Solution

What are you most proud of, and what would you do differently next time?

I am very keen to details, I think I was able to achieve the design, from mobile to tablet to desktop.

What challenges did you encounter, and how did you overcome them?

The bullets in the ul tags, in the figma design for example the bullet is centered if there are 2 lines or more in the paragraph, I have achieved this by removing the default list style type then replacing it with pseudo element "before" and inserted a content "•".

CSS Style: .recipe-ingredients ul { margin-top: 24px; list-style-type: none; display: flex; flex-direction: column; gap: 8px; }

.recipe-ingredients ul li { color: var(--color-stone-600); font-size: 1rem; font-weight: 400; position: relative; padding-left: 40px; line-height: var(--line-height-150); }

.recipe-ingredients ul li::before { content: "•"; color: var(--color-rose-800); font-size: 1.2rem; position: absolute; left: 0; top: 50%; transform: translateY(-50%); }

I also did the same approach in the ordered list but a little different. I removed the default list style and used "counter-reset" CSS property and then used the counter function and the counter-increment in the pseudo element "before".

if you want to know more about this CSS Property here is the reference.

https://www.w3schools.com/cssref/pr_gen_counter-reset.php

CSS Style: .recipe-instructions ol { margin-top: 24px; list-style-type: none; counter-reset: li; display: flex; flex-direction: column; gap: 8px; }

.recipe-instructions ol li { color: var(--color-stone-600); font-size: 1rem; font-weight: 400; position: relative; padding-left: 40px; line-height: var(--line-height-150); }

.recipe-instructions ol li::before { content: counter(li) "."; counter-increment: li; color: var(--color-brown-800); font-size: 1rem; font-weight: 700; position: absolute; left: 8px; }

What specific areas of your project would you like help with?

Let me know if you find anything that I have missed, anything I can improve on, or If I have or have not followed best practices. all feedback are appreciated.