Skip to content
OverviewSolutions
2
Comments
2

Leonardo Pena

@leomcpenaRio de Janeiro40 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

Latest comments

  • Leonardo Pena•40
    @leomcpena

    Congrats on your first project!

    The page does not apply the CSS file because your "href" is wrong in the HTML file. Your HTML and your CSS are on the same folder. So, to reference it, you should write this: <link rel="stylesheet" type="text/css" href="styles.css" />

    Here is the link with the explanation.

    To make the white space under the paragraph, just increase your .text padding-bottom. And use "text-align: center", to center the title too. Something like this:

    .text {
padding: 22px 10px 48px; /* 22px top -> 10px right and left -> 48px bottom */
text-align: center;
}

    I hope it helps you!

  • Leonardo Pena•40
    @leomcpena

    Congratulations on completing the challenge! 🎉

    The solution is looking a lot like the design. Well done!

    May I suggest some changes to your CSS?

    In my projects, i like to use BEM as my naming convention. You can look how to use BEM here. I think it makes naming classes easier so you can reference them in CSS. It makes your code cleaner and easier to mantain later. I avoid using references like ".card div .clock" when i can use only ".clock" or ".card__clock", for example.

    On ".clock", you used "justify-content: flex-end". Doing that, you don't need the "justify-content: space-between" on ".card div". But i would take another solution:

    1. remove "justify-content: flex-end" from ".card div .clock" (lines 69 - 71)
    2. remove "width: 100%" from ".card div figure" (line 66)
    3. Doing that, the figure.eth and figure.clock work as intended. But it breaks the border-top from ".avatar". To fix that, add "width: 100%" on ".avatar" (line 82) or, even better, add a class to that div that already has "width:100%" or reference it with ".card div:last-child". Something like this:
    .card div:last-child {
border-top: 1px solid var(--Very_dark_blue_line);
}

    I think the code would look cleaner this way. What do you think?

    I hope you find this helpful! I'm eagerly looking forward to seeing the amazing projects you'll create in the future!

    Keep up the fantastic work!

    Marked as helpful