Simple Omlette Recipe Page

Hello @YugandarNR👋

Congratulations on successfully completing the challenge! 🎉

I have a suggestion regarding your code that I believe will be of great interest to you.

• For Nutrition Part of the solution, We can define a table layout like this

    <div class="Nutrition">
      <h2>Nutrition</h2>
      <p>
        The table below shows nutritional values per serving without the
        additional fillings.
      </p>
              <table>
      <tr>
        <td>Calories</td>
        <td>277kcal</td>
      </tr>
      <tr>
        <td>Carbs</td>
        <td>0g</td>
      </tr>
      <tr>
        <td>Protein</td>
        <td>20g</td>
      </tr>
      <tr>
        <td>Fat</td>
        <td>22g</td>
      </tr>
    </table>
    </div>
  

then, to separate the nutrition and amount of nutrition, we can simply give the table a width: 100%. This will separate the nutrition and amount of nutrition with same space in-between.

then we can style the table as

table{ border-collapse: collapse;}

this will remove the border from the table and now we can set the styles for table row like this

tr:not(:last-child){ border-bottom: 1px solid **table border color** }

this will give each table row except the last one a border-bottom.

then we can give some padding-left to the first td of every tr to bring it a little right side of the table as shown in the design tr:first-child{ padding-left: 30px;}.

and now just apply some styles to the other td of every tr like you have in your solution.

And there you have it

I hope you find this helpful 😄 Above all, the solution you submitted is great !

If you need any feedback or suggestions, I am happy to help

Have Fun Coding!

the indent in Instruction part need to be fixed