Skip to content
OverviewSolutions
9
Comments
9
Perry_Y_Z
@Perry2004

All comments

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

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

    0
  • Perry_Y_Z•130
    @Perry2004Posted 3 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 3 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 3 months ago

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

    0
  • Perry_Y_Z•130
    @Perry2004Posted 3 months ago

    Looks awesome overall! Nice job!

    1
  • Perry_Y_Z•130
    @Perry2004Posted 3 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
  • Antoine Delalande•130
    @HamsolovskiSubmitted 3 months ago
    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.

    Social media profile using HTML & CSS

    1
    Perry_Y_Z•130
    @Perry2004Posted 3 months ago

    Looks awesome!

    0
  • Perry_Y_Z•130
    @Perry2004Posted 3 months ago

    Awesome! Look exactly the same

    1
  • Perry_Y_Z•130
    @Perry2004Posted 3 months ago

    All looks good except QR code image is not loading

    0