Submitted 6 months ago

Recipe Page

fhelix09• 40

@fhelix09

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Recipe page

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I am really proud to myself the I am able to finish this challenge and overcomes the challenges

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

The challenges that I encounter was to change the list element color and give them a spacing, I tried to modify it on my own until but I'm not able to get the design that I want. I overcome this challenge by searching in the google on how I can apply the design that like the sample image.

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

I am really glad if someone able to lent me there knowledge on how I am able to split the Nutrition other than by making it inline-block.

Community feedback

Flóra• 180

@Glorit74

Posted 6 months ago

There are some other solutions. I used the old fashioned table:

 <table class="w-full text-charcoalDark">
          <tbody class="divide-y-2 divide-grey"> /* class makes the lines between rows */
            <tr>
              <td class="w-[50%] py-3 pl-8">Calories</td> 
              <td class="text-primary font-bold">277kcal</td>
            </tr>

You could use flexbox, here I used your code with tailwind properties:

 <section class="flex flex-col divide-y-2 divide-grey">
          <p class="flex pl-8 py-3">
            <span class="w-[50%]">Carbs</span>
            <span class="text-primary font-bold">0g</span>
          </p>

Marked as helpful

Please log in to post a comment

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