Skip to content
OverviewSolutions
18
Comments
16
P

Matthew

@MattJM1007United States360 points

I am a web developer starting my journey with frontend coding and working towards learning full stack. I enjoy building things and problem solving!

Latest solutions

View more solutions

Latest comments

  • P
    Melbita•100
    @Melbita
    What specific areas of your project would you like help with?

    The overlay I'm using in the hover state, for some reason is covering a couple more of pixels than the image, Can anyone spot the issue?

    NFT card challenge

    1
    P
    Matthew•360
    @MattJM1007

    Hi Melbita! I've come across this in my own projects. I'm not sure the exact reason this happens, I think it has something to do with there being a space for text under the image. But adding a line-height: 0; to your .card_image class gets rid of that extra space below the image when the overlay is on.

    Hope this helps :)

  • tommy flinch•110
    @tflinch
    What are you most proud of, and what would you do differently next time?

    I am proud i was able to closely mirror the challenge

    What challenges did you encounter, and how did you overcome them?

    Biggest challenge was learning grid. I went to my trusty cheat sheet to learn how to align child elements.

    What specific areas of your project would you like help with?

    I need help learning grid. I wasnt sure to align my first and third card.

    .card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        background: white;
        border-radius: 10px;
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        width: 250px;
        min-height: 200px;
        border-top: 4px solid transparent;

        img {
            align-self: self-end;
        }
    }
 .card:nth-child(1) {
        grid-column: 2 / 3;
        grid-row: 1;
        align-self: center;
    }


    .card:nth-child(2) {
        grid-column: 1;
        grid-row: 2;
    }

    .card:nth-child(3) {
        grid-column: 2;
        grid-row: 2;
    }

    four-card-feature-section-master

    #pure-css
    2
    P
    Matthew•360
    @MattJM1007

    Hi Tommy! Great job working through this project! I'd like to help with your grid question.

    In regards to placing the items in the same way as the design, I would make the grid to be 4 rows, instead of 2. This way you can position the items in a staggered way as in the design. I edited your code to add more rows and adjust where each card starts:

    .hero {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 20px;
        justify-content: center;
        align-items: center;
        padding: 40px;
        padding-inline-start: 150px;

        @media(width < 760px) {
            display: flex;
            flex-direction: column;
        }

.card:nth-child(1) {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        align-self: center;
    }


    .card:nth-child(2) {
        grid-column: 1;
        grid-row: 1 / 3;
    }

    .card:nth-child(3) {
        grid-column: 2;
        grid-row: 1 / 4;
    }

    .card:nth-child(4) {
        grid-column: 3;
        grid-row: 1 / 3;
    }

    Hope this helps!

  • P
    Matthew•360
    @MattJM1007

    Overall great job! I like it. One note is that your error icons when submitting an answer is not working

  • P
    Matthew•360
    @MattJM1007

    Really great job! I wasn't sure how to add the JS logic to account for how long the password is to determine strength. But I see you did it. Well done!

  • P
    Matthew•360
    @MattJM1007

    wow really great job! looks like you really nailed this one!

  • P
    Matthew•360
    @MattJM1007

    Really great job! I like that your javascript is very short and simple. My one suggestion would maybe to have the data load when the page loads, as right now it is just empty. Otherwise fantastic work!

View more comments