@delroscol98
Submitted
What are you most proud of, and what would you do differently next time?
nil
What challenges did you encounter, and how did you overcome them?
nil
What specific areas of your project would you like help with?
nil
@Perry2004
@delroscol98
Submitted
What are you most proud of, and what would you do differently next time?
nil
What challenges did you encounter, and how did you overcome them?
nil
What specific areas of your project would you like help with?
nil
@Perry2004
Posted
Great job! Your implementation look almost the same as the design
@faekhatami
Submitted
@Perry2004
Posted
I see you may have encountered some problems with this project. Maybe u can check my work for some reference
@Yashi-Singh-1
Submitted
@Perry2004
Posted
Great work!
The only suggestion i have is maybe you can vertically align the cards to the center of the page by making the <body>
to display: flex;
@FredTagleLL
Submitted
@Perry2004
Posted
That looks almost the same as the design! What a great job!
@gvcarmo
Submitted
@Perry2004
Posted
Nice job! The implementation looks very similar to the design picture. The only problem i found is that your table is not working correctly. Here's my approach for the table:
<section id="nutrition">
<h2>Nutrition</h2>
<p>The table below shows nutritional values per serving without the additional fillings.</p>
<table>
<tr>
<th>Calories</th>
<td>277kcal</td>
</tr>
<tr>
<th>Carbs</th>
<td>0g</td>
</tr>
<tr>
<th>Protein</th>
<td>20g</td>
</tr>
<tr>
<th>Fat</th>
<td>22g</td>
</tr>
</table>
</section>
and my css
#nutrition table {
width: 100%;
border-collapse: collapse;
text-align: left;
margin-top: 1rem;
;
}
#nutrition tr {
border-top: 1px solid var(--stone-900);
height: 3rem;
;
width: 50%;
}
#nutrition tr:first-child {
border-top: none;
}
#nutrition th {
padding-left: 2rem;
width: 50%;
color: var(--stone-600);
text-shadow: none;
}
#nutrition td {
color: var(--brown-800)
}
So to create a table with headers on the left, you can just put <th>
and <td>
in the same row. And I used this line #nutrition tr:first-child { border-top: none; }
to clear the top border on the first row to get the desired behavior
Marked as helpful
@Hamsolovski
Submitted
What are you most proud of, and what would you do differently next time?
Done under an hour without references, very good exercise to start practicing again.
What challenges did you encounter, and how did you overcome them?
It was ok, nothing particularly challenging.
@Perry2004
Posted
Looks awesome!
@Perry2004
Posted
Awesome! Look exactly the same
@Perry2004
Posted
All looks good except QR code image is not loading