Victoria Azola Silva• 1,290
@VickyAzola
Posted
Hi there! 👋 Awesome job completing this challenge!.
So for the <table>, the class border-separate is not allowing the border to show; if you remove it and add a py to the <th>, the space effect is still achieved.
<table class="w-full text-left ml-5">
<tr class="border-b">
<th class="font-normal py-2">Calories</th>
<td class="text-nutmeg font-bold">277kcal</d>
</tr>
.......
</table>
And for the list, I don't know if there is a better way, but this is how I did it:
I removed the list-inside since the design shows it is outside, added a px-4 and a marker:font-bold for the numbers. And to move the text further away from the number, I added a <span> inside the <li> with the classes relative and left-2. I also removed the <br> since those aren't necessary.
<ol class="list-decimal space-y-2 px-4 marker:font-bold">
<li>
<span class="relative left-2">
<b>Beat the eggs:</b> In a bowl, beat the eggs with a pinch of salt and pepper
until they are well mixed. You can add a tablespoon of water or milk for a fluffier texture.
</span>
</li>
.......
Another thing is that in the design, the text color should be 'darkCharcoal'.
Hope this Helps!
Marked as helpful
1
