Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
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

  • CSS grid and flexbox


    Perry_Y_Z•130
    Submitted 11 months ago

    1 comment
  • CSS flexbox


    Perry_Y_Z•130
    Submitted 11 months ago

    1 comment
  • CSS Grid


    Perry_Y_Z•130
    Submitted 11 months ago

    1 comment
  • CSS flexbox


    Perry_Y_Z•130
    Submitted 11 months ago

    2 comments
  • CSS Flexbox


    Perry_Y_Z•130
    Submitted 11 months ago

    It's a bit weird that when the viewport is stretched to very big, the left image won't cover the entire div although I've set object-fit: cover. I've checked multiple source still didn't figured it out.


    1 comment
  • CSS flexbox


    Perry_Y_Z•130
    Submitted 11 months ago

    1 comment
View more solutions

Latest comments

  • delroscol98•410
    @delroscol98
    Submitted 11 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
    @Perry2004
    Posted 11 months ago

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

  • faekhatami•540
    @faekhatami
    Submitted 11 months ago

    UNFINISHED

    1
    Perry_Y_Z•130
    @Perry2004
    Posted 11 months ago

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

  • Yashi Singh•340
    @Yashi-Singh-1
    Submitted 11 months ago

    Testimonials Grid Section

    2
    Perry_Y_Z•130
    @Perry2004
    Posted 11 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;

  • FredTagleLL•110
    @FredTagleLL
    Submitted 11 months ago

    Four card feature section

    2
    Perry_Y_Z•130
    @Perry2004
    Posted 11 months ago

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

  • Dagger•160
    @Daggahh
    Submitted 11 months ago

    responsive CSS flexwrap

    1
    Perry_Y_Z•130
    @Perry2004
    Posted 11 months ago

    Looks awesome overall! Nice job!

  • gvcarmo•120
    @gvcarmo
    Submitted 11 months ago

    Recipe page

    1
    Perry_Y_Z•130
    @Perry2004
    Posted 11 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
View more comments
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub