Skip to content
OverviewSolutions
9
Comments
9

Perry_Y_Z

@Perry2004Vancouver, BC130 points

- University of British Columbia, 2023 - now, Com puter Science and Statistics - Ohio State University, 2022 - 2023. Majored in Computer Science Engineering.

Latest solutions

View more solutions

Latest comments

  • delroscol98•410
    @delroscol98Submitted 7 months ago
    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

    Loopstudios Landing Page | HTML + Sass + JS

    1
    Perry_Y_Z•130
    @Perry2004Posted 7 months ago

    Great job! Your implementation look almost the same as the design

    0
  • Perry_Y_Z•130
    @Perry2004Posted 7 months ago

    I see you may have encountered some problems with this project. Maybe u can check my work for some reference

    0
  • Perry_Y_Z•130
    @Perry2004Posted 7 months ago

    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;

    0
  • Perry_Y_Z•130
    @Perry2004Posted 7 months ago

    That looks almost the same as the design! What a great job!

    0
  • Perry_Y_Z•130
    @Perry2004Posted 7 months ago

    Looks awesome overall! Nice job!

    1
  • Perry_Y_Z•130
    @Perry2004Posted 7 months ago

    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
    0
View more comments