Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Profile card

Leonardo 250

@Leonardclc

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


How do i centralize my <ul> properly without positon:relative?

What do I need to change to get the same font design from the screenshots?

Community feedback

@nmnjnklc

Posted

Hello @leoweabo,

Instead of unordered lists (<ul>), try something like this for HTML:

<div class="statistics">
        <div class="followers">
          <span>80K</span>
          <p>Followers</p>
        </div>
        <div class="likes">
          <span>803K</span>
          <p>Likes</p>
        </div>
        <div class="photos">
          <span>1.4K</span>
          <p>Photos</p>
        </div>
</div>

and to get that proper design, CSS would be:

.statistics {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     padding: 1rem;
     border-top: 1px solid #9696964f;
}
.followers,
.likes,
.photos {
     min-width: 6rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}

Hope this helps. Happy coding!

Marked as helpful

1

Leonardo 250

@Leonardclc

Posted

@nmnjnklc Thanks, It worked perfectly, I just had to make some adaptations. The only thing that I couldn't replicate exactly is the font size and appearance.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord