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-component-main

@scriptyvijay

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Danilo Blas 6,300

@Sdann26

Posted

Hi Vijay!

Regarding design it is quite good, but I would recommend you to make the spacing in the letters where the numbers come out as follows.

.content p {
  color: hsl(227, 10%, 46%);
  font-size: 13px;
  letter-spacing: 1px;
}

Although note that it is separating numbers and features and should only be in the written features.

Lastly I would recommend adding a slight drop shadow to the card. For example:

.wrapper {
  box-shadow: 0 2em 2em 0.1px rgba(45, 50, 72, 0.3);
}

With this I think I would leave it as is.

Respecto a los errores de accesibilidad podrías cambiar <h2>Victor Crest <span>26</span></h2> por <h1>Victor Crest <span>26</span></h1> ya que siempre necesitas tener por página un h1. And you add the styles you need to add to get the layout right.

Just those changes alone would do, you generate a new report and there should be 0 errors.

If you have any questions feel free to ask them here :D!

Marked as helpful

1

@scriptyvijay

Posted

@Sdann26 Thanks buddy I'll update it asap.

1
Ahmed Bayoumi 6,740

@Bayoumi-dev

Posted

Hey! I suggest you put the status of the profile card into the list item to add more semantics to your project, Div's don't do much for semantics but a list is much more meaningful..:

<ul class="stats">
   <li><span class="stats-num">80K</span>Followers</li>
   <li><span class="stats-num">803K</span>Likes</li>
   <li><span class="stats-num"> 1.4K</span>Photos</li>
</ul>

Hope this is helpful to you... Keep coding👍

Marked as helpful

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